/* ==========================================================================
   Erpái — Tema visual (producto de Automate)
   Identidad: paleta tomate/navy + Radio Canada Big / Poppins.
   Se monta ENCIMA de Bootstrap 5.3 sobrescribiendo sus variables de
   componente (--bs-*), sin reescribir el HTML de las pantallas.
   ========================================================================== */

:root {
  /* Paleta primaria Automate */
  --brand:        #E63946;  /* rojo tomate — acento / CTAs de marca       */
  --brand-dark:   #c92d3a;  /* hover del rojo                              */
  --brand-soft:   #fdecee;  /* fondo suave del rojo (badges, alerts)      */
  --navy:         #1D3557;  /* estructura: nav, títulos                   */
  --navy-700:     #16293f;  /* navy más oscuro (hover)                    */
  --blue:         #457B9D;  /* links, secundarios, headers de tabla       */
  --blue-soft:    #eef4f7;
  --cyan:         #A8DADC;  /* highlights suaves, estados                 */
  --cyan-soft:    #eaf5f6;
  --cream:        #F1FAEE;  /* fondo de la app                            */

  /* Secundaria / grises */
  --ink:          #20211F;  /* texto principal                            */
  --muted:        #6b7280;  /* texto secundario                           */
  --grey:         #949A92;
  --line:         #e3e8e6;  /* bordes                                     */
  --field-border: #bcc7c1;  /* borde de inputs/selects (más marcado)      */

  /* Verde "dinero" (Cobrar / Pagar) — convención universal */
  --money:        #2f9e6f;
  --money-dark:   #268059;

  /* Tokens de forma */
  --radius:       .7rem;
  --radius-sm:    .5rem;
  --shadow-sm:    0 1px 2px rgba(29,53,87,.06), 0 1px 3px rgba(29,53,87,.08);
  --shadow:       0 2px 8px rgba(29,53,87,.08), 0 8px 24px rgba(29,53,87,.06);

  /* Bootstrap base */
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-link-color: var(--blue);
  --bs-link-color-rgb: 69, 123, 157;
  --bs-link-hover-color: var(--navy);
  --bs-border-color: var(--line);
  --bs-primary: var(--brand);
  --bs-primary-rgb: 230, 57, 70;
}

body { background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Títulos en Radio Canada Big */
h1, h2, h3, h4, h5, h6, .navbar-brand, .display-1, .display-2, .display-3,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Radio Canada Big', 'Poppins', system-ui, sans-serif;
  letter-spacing: -.01em;
  color: var(--navy);
}

/* --------------------------------------------------------------- Layout */
:root { --sidebar-w: 250px; }
.app-shell { min-height: 100vh; }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-content { flex: 1; padding: 1.5rem 1.75rem 2.5rem; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem;
  height: 58px; padding: 0 1.25rem; background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.topbar-spacer { flex: 1; }
.topbar-role { color: var(--muted); font-size: .88rem; text-transform: capitalize; font-weight: 500; }
.btn-burger { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--navy); line-height: 1; padding: .1rem .3rem; }

.superadmin-bar { background: var(--navy-700); color: var(--cyan); text-align: center; font-size: .82rem; padding: .35rem; }
.superadmin-bar a { color: #fff; text-decoration: underline; }
.superadmin-bar strong { color: var(--brand); }

/* --------------------------------------------------------------- Sidebar */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 40;
  background: var(--navy); color: #fff; display: flex; flex-direction: column;
  overflow-y: auto; box-shadow: 2px 0 16px rgba(29,53,87,.12); }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }

.sidebar-brand { display: flex; align-items: center; gap: .55rem; padding: 1.1rem 1.25rem; margin-bottom: .25rem;
  font-family: 'Radio Canada Big', sans-serif; font-weight: 700; font-size: 1.5rem; color: #fff !important;
  text-decoration: none; position: sticky; top: 0; background: var(--navy); z-index: 1; }
.sidebar-brand .tomato { width: 26px; height: 26px; }
.brand-word { white-space: nowrap; }
.sidebar-brand .brand-ai { color: var(--brand); }

.sidebar-nav { padding: 0 .65rem 1.5rem; }
.nav-group { margin-bottom: .35rem; }
.nav-group-title { display: flex; align-items: center; gap: .5rem; padding: .7rem .65rem .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan); opacity: .65; }
.nav-group-title i { font-size: .85rem; }

.sidebar .nav-link { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; margin: 1px 0;
  border-radius: var(--radius-sm); color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 500;
  text-decoration: none; transition: background .14s, color .14s; }
.sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .9; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(230,57,70,.35); }
.sidebar .nav-link.active i { opacity: 1; }

/* Backdrop (móvil) */
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(20,33,31,.5); }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .app-main { margin-left: 0; }
  .btn-burger { display: block; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
}

/* --------------------------------------------------------------- Cards */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-title { color: var(--navy); font-weight: 600; }

/* Dashboard — KPIs */
.kpi { transition: transform .12s ease, box-shadow .15s; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.kpi-icon { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .6rem; font-size: 1.05rem; }
.kpi-value { font-family: 'Radio Canada Big', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--navy); line-height: 1.1; margin-top: .4rem; }
.kpi-value small { font-size: .85rem; font-weight: 600; color: var(--muted); }
.kpi-sub { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.kpi-brand .kpi-icon { background: var(--brand-soft); color: var(--brand); }
.kpi-brand { border-left: 3px solid var(--brand); }
.kpi-navy .kpi-icon { background: #e8eef4; color: var(--navy); }
.kpi-navy { border-left: 3px solid var(--navy); }
.kpi-blue .kpi-icon { background: var(--blue-soft); color: var(--blue); }
.kpi-blue { border-left: 3px solid var(--blue); }
.kpi-warn .kpi-icon { background: #fff3da; color: #b5860b; }
.kpi-warn { border-left: 3px solid #e0a92e; }

/* Estado de caja */
.caja-strip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-on { background: var(--money); box-shadow: 0 0 0 3px rgba(47,158,111,.2); }
.dot-off { background: var(--grey); box-shadow: 0 0 0 3px rgba(148,154,146,.2); }

/* Paneles (últimas ventas / stock bajo) */
.panel-head { display: flex; align-items: center; justify-content: space-between; background: #fff;
  border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy); padding: .7rem 1rem; }
.panel-head .panel-link { font-size: .8rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.panel-head .panel-link:hover { text-decoration: underline; }
.panel-empty { padding: 1.5rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.list-low { list-style: none; margin: 0; padding: 0; }
.list-low li { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.list-low li:last-child { border-bottom: 0; }
.list-low .low-qty { font-weight: 700; color: var(--brand); white-space: nowrap; }
.list-low .low-qty small { font-weight: 500; color: var(--muted); }

/* Accesos rápidos */
.section-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.quick-access { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--navy);
  font-weight: 500; font-size: .9rem; box-shadow: var(--shadow-sm); transition: border-color .14s, transform .1s; white-space: nowrap; }
.quick-access:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.quick-access i { font-size: 1.1rem; }

/* --------------------------------------------------------------- Botones */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: .5rem 1rem; transition: transform .04s ease, box-shadow .15s, background .15s; }
.btn:active { transform: translateY(1px); }

.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }

.btn-dark { --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy-700); --bs-btn-hover-border-color: var(--navy-700);
  --bs-btn-active-bg: var(--navy-700); --bs-btn-active-border-color: var(--navy-700); }

/* Verde "dinero": Cobrar / Pagar */
.btn-success { --bs-btn-bg: var(--money); --bs-btn-border-color: var(--money);
  --bs-btn-hover-bg: var(--money-dark); --bs-btn-hover-border-color: var(--money-dark);
  --bs-btn-active-bg: var(--money-dark); --bs-btn-active-border-color: var(--money-dark);
  --bs-btn-disabled-bg: var(--money); --bs-btn-disabled-border-color: var(--money); }

.btn-outline-secondary { --bs-btn-color: var(--blue); --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--blue-soft); --bs-btn-hover-color: var(--navy); --bs-btn-hover-border-color: var(--blue);
  --bs-btn-active-bg: var(--blue); --bs-btn-active-border-color: var(--blue); }

.btn-outline-danger { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }

/* --------------------------------------------------------------- Forms */
/* Fondo blanco explícito: Bootstrap usa --bs-body-bg (cream) como fondo de los
   campos, así que sin esto se confunden con el fondo verdoso de la app. */
.form-control, .form-select {
  background-color: #fff;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem;
  box-shadow: 0 1px 1px rgba(29,53,87,.04);
}
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--blue); }
.form-control:focus, .form-select:focus {
  background-color: #fff; border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(69,123,157,.18);
}
.form-control::placeholder { color: #9aa4a0; opacity: 1; }
.form-control:disabled, .form-select:disabled,
.form-control[readonly] { background-color: #f4f6f5; border-color: var(--line); }
/* Prefijos/sufijos de input-group (ej. el "+" del POS) */
.input-group-text { background-color: #f4f6f5; border-color: var(--field-border); color: var(--navy); }
.form-label { font-weight: 600; color: var(--navy); font-size: .9rem; margin-bottom: .3rem; }

/* --------------------------------------------------------------- Tablas */
.table { --bs-table-color: var(--ink); }
.table > thead th { color: var(--blue); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; border-bottom: 2px solid var(--line); font-weight: 700; }
.table-hover > tbody > tr:hover > * { background: var(--cyan-soft); }

/* --------------------------------------------------------------- Page header */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.page-subtitle { color: var(--muted); font-size: .9rem; margin: .15rem 0 0; }

/* Tablas en tarjeta (listados) */
.table-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.table-card > .table { margin: 0; }
.table-card > .table > thead th { background: #fbfdfc; padding: .7rem 1rem; }
.table-card > .table > tbody td { padding: .65rem 1rem; vertical-align: middle; }
.table-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* --------------------------------------------------------------- Badges / alerts */
.badge.bg-secondary { background: var(--blue) !important; }
/* Badges de estado (soft) */
.badge.b-ok, .badge.b-warn, .badge.b-bad, .badge.b-info, .badge.b-muted {
  font-weight: 600; font-size: .72rem; padding: .32em .7em; border-radius: 2rem; letter-spacing: .01em; }
.badge.b-ok { background: #e7f7ef; color: var(--money-dark); }
.badge.b-warn { background: #fff3da; color: #9a7414; }
.badge.b-bad { background: var(--brand-soft); color: var(--brand-dark); }
.badge.b-info { background: var(--cyan-soft); color: var(--blue); }
.badge.b-muted { background: #eef0ef; color: var(--muted); }
.alert-success { background: #eafaf2; border-color: #bfe9d4; color: var(--money-dark); }
.alert-danger  { background: var(--brand-soft); border-color: #f6c9cd; color: var(--brand-dark); }
.alert-warning:not(.rounded-0) { background: #fff7e6; border-color: #f3dca6; color: #8a6d1b; }

/* --------------------------------------------------------------- POS */
.pos-search { position: relative; }
.pos-search .pos-search-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); opacity: .5; font-size: .95rem; pointer-events: none; }
.pos-search .form-control { padding-left: 2.4rem; height: 3rem; font-size: 1rem; box-shadow: var(--shadow-sm); }
.pos-catalog { max-height: 68vh; overflow: auto; padding: 2px; }

.pos-tile { display: flex; flex-direction: column; justify-content: space-between; gap: .4rem; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem .8rem; min-height: 84px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .08s ease, box-shadow .15s, border-color .15s; }
.pos-tile:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow); }
.pos-tile:active { transform: translateY(0); }
.pos-tile-img { width: 100%; height: 88px; object-fit: cover; border-radius: 8px; margin-bottom: .15rem; }
.pos-tile-name { font-size: .85rem; font-weight: 500; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-tile-price { font-family: 'Radio Canada Big', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.pos-tile-price small { font-weight: 500; font-size: .7rem; color: var(--muted); }

.pos-cart { position: sticky; top: 1rem; }
.pos-cart-head { background: var(--navy); color: #fff; font-family: 'Radio Canada Big', sans-serif; font-weight: 600; border: 0; border-radius: var(--radius) var(--radius) 0 0 !important; padding: .7rem 1rem; }
.pos-empty { text-align: center; color: var(--muted); font-size: .9rem; padding: 1.5rem 0; }
#cart tr td { border-color: var(--line); }
.pos-total { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0 .2rem; margin-top: .3rem; border-top: 2px solid var(--line); font-family: 'Radio Canada Big', sans-serif; }
.pos-total > span:first-child { font-weight: 600; color: var(--muted); font-size: 1rem; }
.pos-total > span:last-child { font-size: 1.7rem; color: var(--navy); }
.pos-total #total { color: var(--brand); }

/* Botón Cobrar grande */
.pos #pay { height: 3rem; font-size: 1.1rem; }

/* --------------------------------------------------------------- Ticket / comprobante */
.ticket { max-width: 420px; }
.ticket-paper { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; position: relative; }
.ticket-head { text-align: center; padding-bottom: 1rem; border-bottom: 2px dashed var(--line); }
.ticket-tomato { margin-bottom: .35rem; }
.ticket-lines { width: 100%; font-size: .86rem; margin-top: 1rem; border-collapse: collapse; }
.ticket-lines thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .35rem; font-weight: 700; }
.ticket-lines tbody td { padding: .3rem 0; border-bottom: 1px solid #f3f5f4; }
.ticket-sep { border-top: 2px dashed var(--line); margin: .4rem 0; }
.ticket-totals { width: 100%; font-size: .86rem; }
.ticket-totals td { padding: .12rem 0; color: var(--muted); }
.ticket-totals .ticket-grand td { font-family: 'Radio Canada Big', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--navy); padding-top: .5rem; border-top: 1px solid var(--line); }
.ticket-pay { margin-top: .8rem; font-size: .85rem; color: var(--ink); }
.ticket-fiscal { margin-top: 1rem; padding-top: .8rem; border-top: 2px dashed var(--line); font-size: .85rem; }

/* --------------------------------------------------------------- Tipografía Google */
/* (los <link> de las fuentes van en base.html / login.html) */