/* DypOS — Admin CSS v2.0 UX Refresh
   SaaS moderno · Operativo · Verde teal · Inter */


:root {
  /* Modo Día (identidad «La Carta»): fondo papel cálido, cards blancas que
     resaltan. Reemplaza el gris-azulado frío #F7F8FA. El texto near-black
     mantiene contraste altísimo. El modo Servicio (oscuro) no se toca. */
  --gc-bg:          #F5F1E8;
  --gc-surface:     #FFFFFF;
  --gc-border:      #E5E7EB;
  --gc-border-lt:   #F3F4F6;
  --gc-text:        #111827;
  --gc-muted:       #5E6472; /* AA: 5.49:1 sobre --gc-bg (#686F7C daba 4.48:1, bajo el mínimo) */
  --gc-muted-lt:    #717782;
  --gc-accent:      #316055;
  --gc-accent-lt:   #F5F7F6;
  --gc-accent-md:   #E5EBE9;
  --gc-accent-dk:   #1F473F;
  --gc-accent-hv:   #284E45;
  --gc-received:    #1D4ED8; --gc-received-bg: #EFF6FF;
  --gc-prep:        #B45309; --gc-prep-bg:     #FFFBEB;
  --gc-ready:       #316055; --gc-ready-bg:    #F5F7F6;
  --gc-dispatched:  #7C3AED; --gc-dispatched-bg:#F5F3FF;
  --gc-delivered:   #374151; --gc-delivered-bg:#F9FAFB;
  --gc-cancelled:   #C62828; --gc-cancelled-bg:#FEF2F2;
  --gc-danger:      #C62828;
  --gc-warning:     #B36205;
  --gc-success:     #316055;
  /* Semánticos de DATO (positivo/negativo) — distintos del verde de MARCA (#316055) */
  --gc-pos:         #316055;
  --gc-neg:         #C62828;
  --gc-sidebar-w:   220px;
  --gc-radius:      10px;
  --gc-radius-sm:   6px;
  --gc-radius-lg:   14px;
  --gc-shadow:      0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --gc-shadow-md:   0 4px 12px rgba(0,0,0,.08);
  --gc-shadow-lg:   0 8px 24px rgba(0,0,0,.12);
  /* --gc-font y --gc-serif viven en tokens.css (fuente única de familias) */
  --gc-accent-grad: linear-gradient(135deg,#316055 0%,#3E8571 100%);
  --gc-accent-glow: 0 8px 22px -8px rgba(49,96,85,.42);
  --gc-warm:        #F59E0B;
  --gc-cool:        #3B82F6;
  --gc-magenta:     #A855F7;
  --gc-shine:       linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 100%);
  --ease-out:       cubic-bezier(.23,1,.32,1);
  --gc-transition:  color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s var(--ease-out), opacity .15s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{color:var(--gc-info);text-decoration:none;transition:var(--gc-transition)}
a:hover{text-decoration:underline}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}
img{max-width:100%}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.gc-layout{display:flex;min-height:100vh; min-height:100dvh}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.gc-sidebar::-webkit-scrollbar{display:none}

.gc-sidebar__brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06);
}
.gc-brand-icon{font-size:22px}
.gc-brand-name{font-size:15px;font-weight:700;color:#fff;font-family:var(--gc-serif)}
.gc-brand-name span{color:inherit}

.gc-sidebar__user{
  display:flex;align-items:center;gap:10px;padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.gc-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--gc-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;flex-shrink:0;
}
.gc-user-name{font-size:14px;font-weight:500;color:#F1F5F9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-user-role{font-size:12px;color:#768498;text-transform:capitalize}

.gc-branch-selector{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.05)}

.gc-nav{flex:1;padding:8px 0}
.gc-nav__item a:hover,.gc-nav__item.active a{
  color:#fff;background:rgba(255,255,255,.05);
  border-left-color:var(--gc-accent);text-decoration:none;
}
.gc-nav__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.75}

.gc-nav__sub a{
  padding-left:32px;font-size:12px;color:#8BA89E;
  border-left:2px solid transparent;
  display:flex;align-items:center;gap:6px;
  transition:var(--gc-transition);
}
.gc-nav__sub a:hover{color:#94A3B8;text-decoration:none;background:rgba(255,255,255,.03)}
.gc-nav__sub.active a{color:#94A3B8;border-left-color:rgba(49,96,85,.5)}

.gc-sidebar__footer{padding:14px 20px;border-top:1px solid rgba(255,255,255,.05)}
.gc-logout-link{font-size:12px;color:#768498;display:block;padding:4px 0}
.gc-logout-link:hover{color:var(--gc-danger);text-decoration:none}

/* ── Main ───────────────────────────────────────────────────────────────── */
.gc-sidebar-toggle{display:none;background:none;border:none;font-size:20px;color:var(--gc-muted);padding:4px}
.gc-page-title{font-size:16px;font-weight:700;flex:1;color:var(--gc-text)}
.gc-topbar__actions{display:flex;gap:8px;align-items:center}
.gc-content{padding:24px 28px;flex:1}

/* ── Sidebar colapsable (rail de iconos) ─────────────────────────────────── */
.gc-rail-toggle{
  display:none;background:none;border:none;color:var(--gc-muted);
  padding:6px;border-radius:var(--gc-radius-sm);line-height:0;transition:var(--gc-transition);
}
.gc-rail-toggle:hover{color:var(--gc-text);background:var(--gc-bg)}
/* Anima el ancho al colapsar/expandir */
.gc-sidebar{
  width:          var(--gc-sidebar-w);
  background:          #14181A;
  color:          #CBD5E1;
  display:          flex;
  flex-direction:          column;
  position:          fixed;
  top:          0;
  left:          0;
  height:          100dvh;
  overflow-y:          auto;
  z-index:          100;
  scrollbar-width:          none;
  transition:          transform .25s ease, width .18s var(--ease-out)}
.gc-main{
  margin-left:          var(--gc-sidebar-w);
  flex:          1;
  display:          flex;
  flex-direction:          column;
  min-height:          100dvh;
  transition:          margin-left .18s var(--ease-out)}

@media(min-width:769px){
  .gc-rail-toggle{display:inline-flex;align-items:center}

  /* Colapsado: sidebar de 66px, main lo sigue */
  html.gc-rail .gc-sidebar{width:66px}
  html.gc-rail .gc-main{margin-left:66px}

  /* Hover: el rail se expande a ancho completo y flota sobre el contenido */
  html.gc-rail .gc-sidebar:hover{width:var(--gc-sidebar-w);box-shadow:var(--gc-shadow-lg)}

  /* Estado colapsado (sin hover): solo iconos, sin texto */
  html.gc-rail .gc-sidebar:not(:hover) .gc-nav__item a{
    justify-content:center;gap:0;padding-left:0;padding-right:0;font-size:0;
  }
  html.gc-rail .gc-sidebar:not(:hover) .gc-nav__item.active a{padding-left:0}
  html.gc-rail .gc-sidebar:not(:hover) .gc-nav__icon{opacity:.9}
  html.gc-rail .gc-sidebar:not(:hover) .gc-nav__sub{display:none}
  html.gc-rail .gc-sidebar:not(:hover) .gc-nav__group-label{
    font-size:0;padding-top:10px;padding-bottom:0;margin-top:6px;
  }
  html.gc-rail .gc-sidebar:not(:hover) .gc-brand-name,
  html.gc-rail .gc-sidebar:not(:hover) .gc-sidebar__user > div:not(.gc-avatar),
  html.gc-rail .gc-sidebar:not(:hover) .gc-branch-selector,
  html.gc-rail .gc-sidebar:not(:hover) .gc-sidebar__footer{
    opacity:0;visibility:hidden;height:0;padding:0;margin:0;overflow:hidden;
  }
  html.gc-rail .gc-sidebar:not(:hover) .gc-sidebar__brand{justify-content:center;padding-left:0;padding-right:0}
  html.gc-rail .gc-sidebar:not(:hover) .gc-sidebar__user{justify-content:center;padding-left:0;padding-right:0}
}

/* ── Auth ───────────────────────────────────────────────────────────────── */
.gc-auth-page{
  background:linear-gradient(135deg,#0F1923 0%,#1C3831 100%);
  display:flex;align-items:center;justify-content:center;min-height:100vh; min-height:100dvh;
}
.gc-auth-container{width:100%;max-width:400px;padding:20px}
.gc-auth-brand{text-align:center;margin-bottom:28px}
.gc-auth-subtitle{font-size:13px;color:#64748B;margin-top:4px}
.gc-auth-card{background:var(--gc-surface);border-radius:var(--gc-radius-lg);padding:32px;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.gc-auth-footer{text-align:center;font-size:12px;color:#475569;margin-top:20px}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.gc-form-group{margin-bottom:18px}
.gc-label{display:flex;justify-content:space-between;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--gc-text)}
.gc-label__link{font-weight:400;color:var(--gc-accent);font-size:13px}
.gc-input{
  width:100%;padding:9px 12px;border:1.5px solid var(--gc-border);
  border-radius:var(--gc-radius-sm);font-size:16px;color:var(--gc-text);
  background:var(--gc-surface);transition:var(--gc-transition);font-family:inherit;
}
.gc-input:focus{outline:none;border-color:var(--gc-accent);box-shadow:0 0 0 3px rgba(49,96,85,.2)}
.gc-input::placeholder{color:var(--gc-muted)}
.gc-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.gc-select--sm{font-size:12px;padding:6px 28px 6px 8px;width:100%}
textarea.gc-input{resize:vertical;min-height:80px}
.gc-form-hint{font-size:13px;color:var(--gc-muted);margin-top:4px;line-height:1.4}
.gc-form-error{font-size:13px;color:var(--gc-danger);margin-top:4px}
.gc-input-group{display:flex}
.gc-input-group .gc-input{border-radius:var(--gc-radius-sm) 0 0 var(--gc-radius-sm);flex:1}
.gc-input-group__btn{
  padding:9px 12px;border:1.5px solid var(--gc-border);border-left:none;
  border-radius:0 var(--gc-radius-sm) var(--gc-radius-sm) 0;
  background:var(--gc-bg);font-size:14px;color:var(--gc-muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* La base (.gc-btn, :hover, :active, --primary, --danger, --full, --sm) vive
   en la sección "Botones con nueva identidad" más abajo — este bloque tenía
   una versión vieja duplicada que el cascade ya ignoraba (redefinida después
   en el archivo). Quedan acá solo los modificadores que esa sección no cubre. */
.gc-btn--xs{padding:5px 10px;font-size:11px;border-radius:4px}
.gc-btn--ghost{background:transparent;border-color:transparent;box-shadow:none}
.gc-btn--ghost:hover{background:var(--gc-bg);border-color:var(--gc-border)}
.gc-link{font-size:13px;color:var(--gc-accent)}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.gc-alert{
  display:flex;align-items:flex-start;gap:10px;padding:12px 16px;
  border-radius:var(--gc-radius-sm);margin-bottom:16px;font-size:13.5px;line-height:1.5;
}
.gc-alert p{margin:0}
.gc-alert--success{background:var(--gc-accent-lt);border:1px solid var(--gc-accent-md);color:var(--gc-accent-dk)}
.gc-alert--error  {background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.gc-alert--warning{background:#FFFBEB;border:1px solid #FDE68A;color:#92400E}
.gc-alert--info   {background:#EFF6FF;border:1px solid #BFDBFE;color:#1E40AF}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.gc-card:hover{box-shadow:var(--gc-shadow-md)}
.gc-card--warning{border-color:#FDE68A;background:#FFFBEB}
.gc-card--accent{border-color:var(--gc-accent-md);background:var(--gc-accent-lt)}
.gc-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}

/* ── Metric cards ───────────────────────────────────────────────────────── */
.gc-metric-card:hover::before{opacity:1}
.gc-metric-delta{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:3px}
.gc-metric-delta--up{color:var(--gc-success)}
.gc-metric-delta--down{color:var(--gc-danger)}

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.gc-dashboard-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
.gc-dashboard-right{display:flex;flex-direction:column;gap:20px}

/* ── Attention card ─────────────────────────────────────────────────────── */
.gc-attention-card{
  background:var(--gc-surface);border:1px solid var(--gc-border);
  border-radius:var(--gc-radius);margin-bottom:20px;overflow:hidden;
  box-shadow:var(--gc-shadow);
}
.gc-attention-header{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:#FFFBEB;border-bottom:1px solid #FDE68A;
}
.gc-attention-header h2{font-size:14px;font-weight:600;color:#92400E;flex:1}
.gc-attention-list{display:flex;flex-direction:column}
.gc-attention-item{
  display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--gc-border-lt);transition:background .1s;
}
.gc-attention-item:last-child{border-bottom:none}
.gc-attention-item:hover{background:var(--gc-bg)}
.gc-attention-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.gc-attention-icon--warn{background:#FFFBEB}
.gc-attention-icon--err{background:#FEF2F2}
.gc-attention-icon--ok{background:#F5F7F6}
.gc-attention-icon--info{background:#EFF6FF}
.gc-attention-text{flex:1}
.gc-attention-title{font-size:14px;font-weight:500;color:var(--gc-text)}
.gc-attention-sub{font-size:13px;color:var(--gc-muted);margin-top:1px}
.gc-attention-action{font-size:13px;color:var(--gc-accent);white-space:nowrap;padding:4px 10px;border-radius:4px;border:1px solid var(--gc-accent-md);background:var(--gc-accent-lt)}
.gc-attention-action:hover{background:var(--gc-accent-md);text-decoration:none}

/* ── Order list ─────────────────────────────────────────────────────────── */
.gc-order-list{display:flex;flex-direction:column;gap:6px}
.gc-order-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--gc-radius-sm);background:var(--gc-bg);
  font-size:13px;border:1px solid transparent;transition:var(--gc-transition);
  text-decoration:none;color:var(--gc-text);
}
.gc-order-row:hover{border-color:var(--gc-border);background:var(--gc-surface);text-decoration:none;transform:translateX(2px)}
.gc-order-num{font-weight:600;min-width:44px}
.gc-order-channel{color:var(--gc-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.gc-order-time{margin-left:auto;font-size:13px;color:var(--gc-muted)}
.gc-empty-state{font-size:14px;color:var(--gc-muted);text-align:center;padding:32px 0}

/* ── Status badges ──────────────────────────────────────────────────────── */
.gc-status-badge--received      {background:var(--gc-received-bg);   color:var(--gc-received)}
.gc-status-badge--in_preparation{background:var(--gc-prep-bg);       color:var(--gc-prep)}
.gc-status-badge--ready         {background:var(--gc-ready-bg);      color:var(--gc-ready)}
.gc-status-badge--dispatched    {background:var(--gc-dispatched-bg); color:var(--gc-dispatched)}
.gc-status-badge--delivered     {background:var(--gc-delivered-bg);  color:var(--gc-delivered)}
.gc-status-badge--cancelled     {background:var(--gc-cancelled-bg);  color:var(--gc-cancelled)}

/* ── Top list ───────────────────────────────────────────────────────────── */
.gc-top-list{display:flex;flex-direction:column;gap:6px}
.gc-top-list__item{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--gc-border-lt)}
.gc-top-list__item:last-child{border-bottom:none}
.gc-top-list__rank{width:24px;height:24px;border-radius:50%;background:var(--gc-bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--gc-muted);flex-shrink:0}
.gc-top-list__name{flex:1}
.gc-top-list__count{font-size:12px;color:var(--gc-muted);font-weight:500}

/* ── Stock alerts ───────────────────────────────────────────────────────── */
.gc-alert-list{display:flex;flex-direction:column;gap:6px}
.gc-alert-list__item{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:4px 0}
.gc-stock-badge{font-size:12px;padding:2px 8px;border-radius:20px;font-weight:500}
.gc-stock-badge--low{background:var(--gc-cancelled-bg);color:var(--gc-cancelled)}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.gc-table-wrap{overflow-x:auto}
.gc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.gc-table th{
  text-align:left;padding:10px 16px;border-bottom:2px solid var(--gc-border);
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gc-muted);font-weight:600;white-space:nowrap;background:var(--gc-bg);
}
.gc-table td{padding:11px 16px;border-bottom:1px solid var(--gc-border-lt);vertical-align:middle}
.gc-table tbody tr{transition:background .1s}
.gc-table tbody tr:hover{background:#FAFAFA}
.gc-table tbody tr:last-child td{border-bottom:none}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.gc-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.gc-pagination{display:flex;gap:4px;margin-top:16px;flex-wrap:wrap}
.gc-pagination__item{
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--gc-radius-sm);border:1.5px solid var(--gc-border);
  font-size:13px;color:var(--gc-text);text-decoration:none;transition:var(--gc-transition);
}
.gc-pagination__item.active{background:var(--gc-accent);border-color:var(--gc-accent);color:#fff}
.gc-pagination__item:hover:not(.active){background:var(--gc-bg);text-decoration:none}

/* ── Empty state ────────────────────────────────────────────────────────── */
.gc-empty{
  text-align:center;padding:48px 24px;
  background:var(--gc-surface);border-radius:var(--gc-radius);
  border:1.5px dashed var(--gc-border);
}
.gc-empty__icon{font-size:44px;margin-bottom:12px}
.gc-empty__title{font-size:17px;font-weight:600;color:var(--gc-text);margin-bottom:6px}
.gc-empty__desc{font-size:14px;color:var(--gc-muted);margin-bottom:20px;line-height:1.6}

/* ── Spinner ────────────────────────────────────────────────────────────── */
.gc-spinner{width:20px;height:20px;border:2px solid var(--gc-border);border-top-color:var(--gc-accent);border-radius:50%;animation:gc-spin .7s linear infinite;display:inline-block}
@keyframes gc-spin{to{transform:rotate(360deg)}}
@keyframes gc-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── POS: barra de contexto (mesa + comensales), fija arriba de todo ──────
   Antes esto vivía enterrado al fondo del carrito; el error más caro que
   comete un mesero es cargar el pedido en la mesa/comensales equivocados,
   así que ahora es lo primero visible, siempre, mientras arma el pedido. */
.pos-context-bar{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:13px 28px;margin:-24px -28px 0;
  background:var(--gc-surface);border-bottom:1px solid var(--gc-border);
  min-height:64px;
}
.pos-ctx-field{display:flex;align-items:center;gap:10px}
.pos-ctx-ic{color:var(--gc-accent);flex-shrink:0;display:inline-flex}
.pos-ctx-lbl{font-size:13px;color:var(--gc-muted);font-weight:600;white-space:nowrap}
.pos-ctx-select{
  border:1.5px solid var(--gc-border);border-radius:10px;background:var(--gc-bg);
  font-family:inherit;font-size:15px;font-weight:700;color:var(--gc-text);
  padding:9px 14px;min-height:44px;min-width:170px;cursor:pointer;
}
.pos-ctx-select:focus-visible{outline:2px solid var(--gc-accent);outline-offset:1px}
.pos-ctx-stepper{background:var(--gc-bg);border-radius:10px;padding:3px}
.pos-ctx-stepper .pos-qty__n{min-width:30px;font-size:16px}
.pos-ctx-stepper .pos-qty__btn{width:36px;height:36px}
@media(max-width:900px){
  .pos-context-bar{padding:11px 16px;margin:-16px -16px 0;gap:14px}
}

/* ── Layout de 2 columnas para pantallas de pedido (detalle/cobro) ─────────
   Mismo criterio que .pos-layout: un sidebar de 300px fijo se sentía angosto
   y desbalanceado (pedido de Walter, comparando contra el POS). clamp() lo
   deja cerca del 40% en vez de un fijo, y hoy suma el breakpoint mobile que
   esta pantalla nunca tuvo (antes no colapsaba a 1 columna en celular). */
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,42%,500px);gap:20px;align-items:start}
@media(max-width:860px){.order-layout{grid-template-columns:1fr}}

/* ── POS Layout ─────────────────────────────────────────────────────────── */
.pos-layout{
  /* Antes 390px fijo: en una pantalla de POS real (~1280px) eso quedaba en
     ~30% — bastante más angosto que el ~45% que usa Toteat para "Pedido".
     clamp() lo deja cerca de la mitad sin volverse absurdo en monitores anchos. */
  display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,42%,560px);gap:0;
  /* El calc fijo de abajo asume solo el header (56px) + título (65px) arriba
     -- se rompe apenas aparece CUALQUIER banner dinámico de .gc-content
     (verificar correo, días de prueba, flash de éxito/error): el panel se
     pasa del viewport y el botón "Confirmar pedido" queda tapado sin aviso
     de que hay que scrollear. --pos-avail-h la fija en JS con la posición
     real del layout (ver posSyncLayoutHeight()); el calc queda de fallback
     solo por si JS no corrió todavía. */
  height:var(--pos-avail-h, calc(100vh - 56px - 65px)); height:var(--pos-avail-h, calc(100dvh - 56px - 65px));
  margin:0 -28px -24px;overflow:hidden;
}
.pos-products{
  display:flex;flex-direction:column;
  background:var(--gc-bg);border-right:1px solid var(--gc-border);overflow:hidden;
}
.pos-category-chips{
  display:flex;gap:6px;overflow-x:auto;padding:10px 16px;
  background:var(--gc-surface);border-bottom:1px solid var(--gc-border);
  scrollbar-width:none;flex-shrink:0;position:relative;
}
.pos-category-chips::-webkit-scrollbar{display:none}
/* Indicador de que hay más categorías deslizando a la derecha (mesero en
   tablet/celular no lo nota si no hay affordance visual). JS agrega/saca
   .is-scroll-end según la posición real del scroll — ver posUpdateCatsFade(). */
.pos-category-chips.is-scrollable::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:28px;
  background:linear-gradient(to right, transparent, var(--gc-surface));
  pointer-events:none;transition:opacity .15s var(--gc-ease-out);
}
.pos-category-chips.is-scrollable.is-scroll-end::after{opacity:0}
.pos-category-chip.active,.pos-category-chip:hover{
  background:var(--gc-accent);border-color:var(--gc-accent);color:#fff;
}
/* Sucursal activa: en desktop el sidebar ya la muestra (.gc-branch-selector);
   en el POS mobile el sidebar está oculto, así que sin este chip no hay forma
   de saber en qué sucursal se está cargando el pedido. */
.pos-branch-chip{ display:none; }
@media(max-width:900px){
  .pos-branch-chip{
    display:inline-flex;align-items:center;gap:6px;width:fit-content;
    margin:12px 16px 0;padding:6px 11px;border-radius:99px;
    background:var(--gc-accent-lt);color:var(--gc-accent-dk);
    border:1px solid rgba(var(--gc-brand-rgb,49,96,85),.18);
    font-size:12px;font-weight:700;
  }
  .pos-branch-chip__dot{width:6px;height:6px;border-radius:50%;background:var(--gc-accent);flex-shrink:0}
}
.pos-product-card:hover{
  border-color:var(--gc-accent);background:var(--gc-accent-lt);
  transform:translateY(-2px);box-shadow:var(--gc-shadow-md);
}
.pos-product-card:active{transform:scale(.96);box-shadow:none}
.pos-product-card.adding{
  animation:pos-add-flash .3s ease;
}
@keyframes pos-add-flash{
  0%{background:var(--gc-accent-lt);border-color:var(--gc-accent);transform:scale(.96)}
  100%{background:var(--gc-surface);border-color:var(--gc-border);transform:scale(1)}
}
.pos-product-card__emoji{font-size:28px;margin-bottom:8px;display:block}
.pos-product-card__cat{font-size:11px;color:var(--gc-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.pos-product-card__name{font-size:13px;font-weight:600;margin-bottom:6px;line-height:1.3;color:var(--gc-text)}
.pos-product-card__price{font-size:16px;color:var(--gc-text);font-weight:700}
.pos-add-badge{
  position:absolute;top:6px;right:6px;
  background:var(--gc-accent);color:#fff;border-radius:50%;
  width:18px;height:18px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);transition:transform .2s var(--ease-out),opacity .2s ease;
}
.pos-add-badge.show{opacity:1;transform:scale(1)}
.pos-cart__header{
  display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid var(--gc-border);font-size:14px;
  font-weight:600;flex-shrink:0;background:var(--gc-surface);
  position:sticky;top:0;z-index:5;
}
.pos-cart-empty{text-align:center;padding:32px 0;color:var(--gc-muted)}
@keyframes pos-item-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.pos-item-row:last-child{border-bottom:none}
.pos-item-qty{width:44px;text-align:center;padding:5px;border:1.5px solid var(--gc-border);border-radius:6px;font-size:14px;font-family:inherit}
.pos-coupon{padding:8px 16px;border-top:none}
.pos-totals{padding:10px 16px;border-top:1px solid var(--gc-border)}
.pos-totals__row{display:flex;justify-content:space-between;font-size:14px;padding:3px 0;color:var(--gc-muted)}
.pos-payment-methods{padding:12px 16px;border-top:1px solid var(--gc-border)}
/* Propina: mismos botones .pos-pay-btn, grilla propia de 4 columnas (2 en mobile) */
.pos-tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media (max-width:480px){.pos-tip-grid{grid-template-columns:1fr 1fr}}
.pos-action-bar{
  display:flex;gap:8px;padding:12px 16px;border-top:2px solid var(--gc-border);
  background:var(--gc-surface);position:sticky;bottom:0;flex-shrink:0;
  /* Pegada abajo, el botón de confirmar queda bajo la barra de gestos del
     iPhone y hay que estirar el pulgar para acertarle. max() mantiene los
     12px donde no hay inset. */
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}
.pos-confirm-button:disabled{opacity:.4;cursor:not-allowed}
/* Oculto por defecto (desktop y estado inicial): la variante .is-visible que
   lo posiciona y lo muestra vive solo dentro del breakpoint mobile más abajo. */
.pos-mini-cart{ display:none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1024px){.gc-dashboard-grid{grid-template-columns:1fr}}
@media(max-width:900px){.pos-layout{grid-template-columns:1fr;height:auto;margin:0 -16px -16px}}
@media(max-width:768px){
  .gc-sidebar{transform:translateX(-100%)}.gc-sidebar.open{transform:translateX(0)}
  .gc-main{margin-left:0}.gc-sidebar-toggle{display:block}
  .gc-content{padding:16px}.gc-metrics-grid{grid-template-columns:repeat(2,1fr)}
  .gc-topbar{padding:0 16px}

  /* Mini-carrito persistente del POS: el total y el acceso al carrito quedan
     en la zona del pulgar sin scrollear toda la grilla de productos. Flota
     justo encima de la tabbar global (--gc-tabbar-h, definida en
     admin-extra.css) y respeta el safe-area por su cuenta porque no vive
     dentro de la tabbar. El JS alterna la clase .is-visible (nunca toca
     style.display): así, aunque el JS dispare fuera de este breakpoint,
     la regla base "display:none" de más abajo sigue ganando en desktop. */
  .pos-mini-cart.is-visible{
    display:flex; position:fixed; left:12px; right:12px;
    bottom:calc(var(--gc-tabbar-h,64px) + 8px + env(safe-area-inset-bottom,0px));
    z-index:55; align-items:center; justify-content:space-between; gap:10px;
    min-height:44px; padding:13px 16px; border:none; border-radius:16px;
    background:var(--gc-accent); color:#fff; font-family:inherit; cursor:pointer;
    box-shadow:0 10px 24px -8px rgba(var(--gc-brand-rgb,49,96,85),.55);
  }
  .pos-mini-cart__count{
    width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);
    font-size:12px;font-weight:800;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .pos-mini-cart__total{ flex:1;text-align:left;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums; }
  .pos-mini-cart__cta{ font-size:13px;font-weight:700;white-space:nowrap; }
}

/* Quick Win Fix 6 — Tablas altura fila */
.gc-table td, .gc-table th { padding-top:11px; padding-bottom:11px; }

/* ═════════════════════════════════════════════════════════════════════════
   v3.0 VISUAL REFRESH · Big Shoulders Display + Inter · KPIs premium · Botones vivos
   Tokens de esta sección consolidados en el :root principal (arriba).
   ═════════════════════════════════════════════════════════════════════════ */
html{
  font-size:          14px;
  -webkit-font-smoothing:          antialiased;
  -moz-osx-font-smoothing:          grayscale;
  scroll-behavior:          smooth}
body{
  font-family:          var(--gc-font);
  background:          radial-gradient(1200px 500px at 10% -10%,#F5F7F6 0%,transparent 55%),var(--gc-bg);
  color:          var(--gc-text);
  line-height:          1.6;
  background-attachment:          fixed}

/* ── Botones con nueva identidad ───────────────────────────────────────── */
.gc-btn{
  font-weight:600;font-size:13.5px;letter-spacing:-.005em;
  padding:9px 15px;border-radius:10px;border:1px solid var(--gc-border);
  background:var(--gc-surface);color:var(--gc-text);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s,border-color .18s;
  display:inline-flex;align-items:center;gap:7px;
}
.gc-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(0,0,0,.18);border-color:#CBD5E1;text-decoration:none}
.gc-btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.gc-btn--primary{
  background:var(--gc-accent-grad);color:#fff;border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 16px -6px rgba(49,96,85,.5);
}
.gc-btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,var(--gc-accent-glow);color:#fff}
.gc-btn--danger{background:linear-gradient(135deg,#DC2626 0%,#B91C1C 100%);color:#fff;border-color:transparent;box-shadow:0 6px 16px -6px rgba(220,38,38,.5)}
.gc-btn--danger:hover{color:#fff;box-shadow:0 6px 22px -6px rgba(220,38,38,.6)}
.gc-btn--sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.gc-btn--full{width:100%;justify-content:center}
.gc-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Inputs con focus ring verde ───────────────────────────────────────── */
.gc-input,.gc-select{
  border-radius:10px;border:1px solid var(--gc-border);
  padding:9px 12px;font-size:16px;transition:border-color .15s,box-shadow .15s;background:#fff;
}
.gc-input:hover,.gc-select:hover{border-color:#CBD5E1}
.gc-input:focus,.gc-select:focus{
  outline:none;border-color:var(--gc-accent);
  box-shadow:0 0 0 4px rgba(49,96,85,.12);
}

/* ── Cards con acabado más premium ─────────────────────────────────────── */
.gc-card{
  background:          linear-gradient(180deg,#FFFFFF 0%,#FDFEFD 100%);
  border:          1px solid var(--gc-border-lt);
  border-radius:          14px;
  padding:          20px;
  margin-bottom:          20px;
  box-shadow:          0 1px 2px rgba(15,23,42,.03),0 6px 16px -12px rgba(15,23,42,.08);
  transition:          box-shadow .2s;
}

/* ── KPI cards rediseñados ─────────────────────────────────────────────── */
.gc-metrics-grid{
  display:          grid;
  grid-template-columns:          repeat(auto-fit,minmax(220px,1fr));
  gap:          14px;
  margin-bottom:          24px}
.gc-metric-card{
  background:          linear-gradient(160deg,#FFFFFF 0%,#F7FEFB 100%);
  border:          1px solid var(--gc-border-lt);
  border-radius:          16px;
  padding:          20px 22px 22px;
  box-shadow:          0 1px 2px rgba(15,23,42,.04),0 10px 24px -18px rgba(15,23,42,.15);
  transition:          transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;
  position:          relative;
  overflow:          hidden;
  animation:          gcFadeUp .5s cubic-bezier(.2,.7,.2,1) both;
}
.gc-metric-card::before{
  content:          "";
  position:          absolute;
  top:          0;
  left:          0;
  right:          0;
  height:          3px;
  background:          linear-gradient(90deg,var(--gc-accent) 0%,#6FC0AC 50%,#6EE7B7 100%);
  opacity:          .9;
  transition:          opacity .2s;
  inset:          0 0 auto 0;
}
.gc-metric-card::after{
  content:"";position:absolute;width:200px;height:200px;right:-70px;top:-70px;
  border-radius:50%;background:radial-gradient(circle,rgba(49,96,85,.06) 0%,transparent 70%);
  pointer-events:none;
}
.gc-metric-card:hover{
  box-shadow:          0 1px 2px rgba(15,23,42,.05),0 20px 40px -22px rgba(49,96,85,.28);
  transform:          translateY(-3px)}
.gc-metric-label{
  font-size:          11.5px;
  color:          var(--gc-muted);
  text-transform:          uppercase;
  letter-spacing:          .05em;
  margin-bottom:          6px;
  font-weight:          600;
  display:          flex;
  align-items:          center;
  gap:          6px;
}
.gc-metric-value{
  font-size:          34px;
  font-weight:          700;
  line-height:          1.05;
  color:          var(--gc-text);
  font-family:          var(--gc-serif);
  letter-spacing:          -.02em;
  margin:          2px 0 2px;
}
.gc-metric-value small{
  font-size:          15px;
  font-weight:          500;
  color:          var(--gc-muted);
  font-family:          var(--gc-font);
  font-style:          normal;
  margin-left:          3px}
.gc-metric-value--accent{
  color:          var(--gc-text)}

/* Stagger animation para los KPIs */
.gc-metrics-grid > .gc-metric-card:nth-child(1){animation-delay:.02s}
.gc-metrics-grid > .gc-metric-card:nth-child(2){animation-delay:.08s}
.gc-metrics-grid > .gc-metric-card:nth-child(3){animation-delay:.14s}
.gc-metrics-grid > .gc-metric-card:nth-child(4){animation-delay:.20s}
.gc-metrics-grid > .gc-metric-card:nth-child(5){animation-delay:.26s}
.gc-metrics-grid > .gc-metric-card:nth-child(6){animation-delay:.32s}

/* ── Resumen de carta: hero de §01 + grid de áreas de §03 (F3.1, ago-2026) ── */
.gc-menu-hero-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-bottom:20px}
.gc-menu-hero{
  background:linear-gradient(160deg,#FFFFFF 0%,#F7FEFB 100%);
  border:1px solid var(--gc-border-lt);border-radius:16px;padding:22px 24px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px -18px rgba(15,23,42,.15);
  display:flex;flex-direction:column;
}
.gc-menu-hero__top{display:flex;justify-content:space-between;align-items:center}
.gc-menu-hero__value{font-family:var(--gc-serif);font-size:var(--gc-fs-3xl);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--gc-text);margin:4px 0 0}
.gc-menu-hero__label{font-size:var(--gc-fs-base);color:var(--gc-muted);margin:0}
.gc-menu-hero__sub{font-size:var(--gc-fs-sm);color:var(--gc-muted);margin-top:2px}
.gc-menu-hero__bar{height:8px;border-radius:4px;overflow:hidden;display:flex;background:var(--gc-border);margin-top:14px}
.gc-menu-hero__bar-fill{background:var(--gc-pos);height:100%}
.gc-menu-hero__legend{font-size:var(--gc-fs-xs);color:var(--gc-muted);margin-top:6px}
.gc-menu-hero__profit{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px dashed var(--gc-border)}
.gc-menu-hero__profit-label{font-size:var(--gc-fs-sm);color:var(--gc-muted)}
.gc-menu-hero__profit-sub{font-size:var(--gc-fs-xs);color:var(--gc-muted);margin-top:2px}
.gc-menu-hero__profit-value{font-family:var(--gc-serif);font-size:var(--gc-fs-xl);font-weight:700}
.gc-menu-hero-stack{display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){
  .gc-menu-hero-grid{grid-template-columns:1fr}
  .gc-menu-hero-stack{flex-direction:row;flex-wrap:wrap}
  .gc-menu-hero-stack .gc-metric-card{flex:1;min-width:160px}
}
.gc-area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:16px}
.gc-area-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFEFD 100%);
  border:1px solid var(--gc-border-lt);border-radius:14px;padding:18px 20px;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(15,23,42,.03),0 6px 16px -12px rgba(15,23,42,.08);
}
.gc-area-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,23,42,.05),0 16px 28px -18px rgba(49,96,85,.22);text-decoration:none}
.gc-area-card__value{font-family:var(--gc-serif);font-weight:700;font-size:var(--gc-fs-md);color:var(--gc-text);margin:10px 0 4px}
.gc-area-card__sub{font-size:var(--gc-fs-sm);color:var(--gc-muted)}
.gc-area-card__go{position:absolute;top:18px;right:18px;color:var(--gc-muted);font-size:var(--gc-fs-base);transition:transform .15s,color .15s}
.gc-area-card:hover .gc-area-card__go{transform:translate(2px,-2px);color:var(--gc-accent)}

/* ── Títulos con Big Shoulders Display ─────────────────────────────────── */
h1,h2,h3,.gc-card__title{letter-spacing:-.015em}
.gc-content h1,.gc-content h2,.gc-card h2,.gc-auth-card h2,.gc-content > div h2{
  font-family:var(--gc-serif);font-weight:700;
  color:var(--gc-text);margin-bottom:14px;letter-spacing:-.02em;
}
.gc-content h2,.gc-card h2,.gc-auth-card h2{font-size:22px;line-height:1.3;padding-bottom:2px}
.gc-content h1{font-size:28px;line-height:1.25}
.gc-card__title{
  font-size:          18px;
  font-weight:          600;
  color:          var(--gc-text);
  font-family:          var(--gc-serif)}
.gc-auth-title{
  font-size:          26px;
  font-weight:          700;
  color:          #fff;
  margin-top:          10px;
  letter-spacing:          -.03em}
.gc-auth-title span{
  color:          inherit}

/* Precios grandes en detalles y tickets: mismo tratamiento serif */
.gc-price-lg,[data-price="lg"]{font-family:var(--gc-serif);font-weight:700;letter-spacing:-.02em}

/* ── Sidebar: hover con blur y active más rico ─────────────────────────── */
.gc-nav__item a:hover{background:rgba(255,255,255,.06);transform:translateX(2px)}

/* ── Micro-animaciones globales ────────────────────────────────────────── */
@keyframes gcFadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes gcPulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(111,192,172,.6)}
  50%{box-shadow:0 0 0 8px rgba(111,192,172,0)}
}
.gc-live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#6FC0AC;margin-right:6px;animation:gcPulseDot 1.6s ease-out infinite;
}

.gc-card,.gc-content > .gc-card,.gc-content > div > .gc-card{animation:gcFadeUp .45s cubic-bezier(.2,.7,.2,1) both}

/* ── Chips/badges ──────────────────────────────────────────────────────── */
.gc-status-badge{
  display:          inline-flex;
  align-items:          center;
  gap:          5px;
  font-size:          13.5px;
  font-weight:          700;
  padding:          4px 10px;
  border-radius:          999px;
  white-space:          nowrap;
  letter-spacing:          .02em;
  text-transform:          capitalize;
}

/* ── Respeto para movimiento reducido ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── Mobile fine-tuning ────────────────────────────────────────────────── */
@media(max-width:768px){
  .gc-metric-value{font-size:28px}
  .gc-content h2{font-size:18px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.1 — POS táctil · Tablas con hover rico · Header refinado · Sidebar
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   POS v3 — "modo amplio": targets grandes y tipografía legible para que
   cualquiera lo use sin entrenamiento. Grilla con cards más grandes + modo
   lista para cartas largas (vinos). Ver [[gastrocore360_tables_system]].
   ══════════════════════════════════════════════════════════════════════════ */

/* Grilla de productos — cards grandes (min 184px) */
.pos-product-grid {
  display:          grid;
  grid-template-columns:          repeat(auto-fill, minmax(184px, 1fr));
  gap:          12px;
  padding:          14px 16px;
  overflow-y:          auto;
  flex:          1;
  align-content:          start;
}
.pos-product-card {
  background:          var(--gc-surface);
  border:          1.5px solid var(--gc-border);
  border-radius:          var(--gc-radius-lg, 16px);
  padding:          0;
  text-align:          left;
  cursor:          pointer;
  transition:          var(--gc-transition);
  font-family:          inherit;
  width:          100%;
  position:          relative;
  display:          flex;
  flex-direction:          column;
  overflow:          hidden;
  min-height:          150px;
}
.pos-pc__img { width: 100%; height: 74px; object-fit: cover; display: block; pointer-events: none; }
.pos-pc__emoji {
    display: flex; align-items: center; justify-content: center;
    height: 74px; font-size: 34px;
    background: linear-gradient(135deg, #F0F9F4 0%, #E8F5EC 100%);
    transition: background .18s; pointer-events: none;
}
.pos-pc__body { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 13px; flex: 1; }
.pos-pc__name { font-size: 16px; font-weight: 700; line-height: 1.22; color: var(--gc-text); }
.pos-pc__price { font-size: 17px; font-weight: 800; color: var(--gc-text); margin-top: auto; font-variant-numeric: tabular-nums; }
.pos-product-card:hover .pos-pc__emoji { background: linear-gradient(135deg, #DCFCE7 0%, #BBFAE6 100%); }
.pos-product-card:active .pos-pc__emoji { background: #A7F3D0; }

/* Modo lista amplia — filas anchas para cartas largas (la foto no aporta) */
.pos-product-grid.pos-products--list { display: flex; flex-direction: column; gap: 8px; }
.pos-products--list .pos-product-card {
    flex-direction: row; align-items: center; gap: 14px;
    min-height: 66px; padding: 10px 16px; overflow: visible;
}
.pos-products--list .pos-pc__img,
.pos-products--list .pos-pc__emoji {
    width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto; font-size: 24px;
}
.pos-products--list .pos-pc__body { flex-direction: row; align-items: center; gap: 12px; padding: 0; width: 100%; }
.pos-products--list .pos-pc__name { flex: 1; }
.pos-products--list .pos-pc__price { margin: 0; flex: 0 0 auto; }
.pos-products--list .pos-add-badge { left: 8px; right: auto; top: 8px; }

/* Barra de categorías + selector de vista */
.pos-catbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px 2px; }
.pos-catbar .pos-category-chips { flex: 1; min-width: 0; margin: 0; padding: 0; }
.pos-category-chip {
  padding:          9px 16px;
  border-radius:          20px;
  font-size:          15px;
  font-weight:          500;
  border:          1.5px solid var(--gc-border);
  background:          transparent;
  color:          var(--gc-muted);
  cursor:          pointer;
  white-space:          nowrap;
  transition:          var(--gc-transition);
  min-height:          42px; }
.pos-view-toggle { display: inline-flex; gap: 2px; background: var(--gc-bg); border: 1px solid var(--gc-border); border-radius: 11px; padding: 3px; flex: 0 0 auto; }
.pos-view-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--gc-muted); border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; }
.pos-view-btn:hover { color: var(--gc-text); }
.pos-view-btn.is-on { background: var(--gc-surface); color: var(--gc-brand); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Buscador más alto (target y legibilidad) */
.pos-search-bar {
  display:          flex;
  align-items:          center;
  gap:          10px;
  padding:          14px 16px;
  background:          var(--gc-surface);
  border-bottom:          1px solid var(--gc-border);
  min-height:          52px; }

/* Carrito amplio con stepper +/- */
.pos-item-row {
  display:          flex;
  align-items:          center;
  gap:          10px;
  padding:          11px 0;
  border-bottom:          1px solid var(--gc-border-lt);
  font-size:          16px;
  animation:          pos-item-in .2s ease; }
.pos-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pos-item-name {
  flex:          1;
  font-weight:          600;
  font-size:          16px;
  line-height:          1.2;
  color:          var(--gc-text); }
.pos-item-unit { font-size: 13px; color: var(--gc-muted); font-variant-numeric: tabular-nums; }
.pos-item-mods { font-size: 12.5px; color: var(--gc-accent); }
.pos-qty { display: inline-flex; align-items: center; gap: 2px; background: var(--gc-bg); border-radius: 10px; padding: 3px; flex: 0 0 auto; }
.pos-qty__btn { width: 34px; height: 34px; border: none; background: var(--gc-surface); border-radius: 8px; font-size: 19px; line-height: 1; color: var(--gc-brand); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.07); display: inline-flex; align-items: center; justify-content: center; }
.pos-qty__btn:active { transform: scale(.9); }
.pos-qty__n { min-width: 26px; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.pos-item-price {
  min-width:          62px;
  text-align:          right;
  color:          var(--gc-accent);
  font-weight:          700;
  font-size:          16px;
  font-variant-numeric:          tabular-nums; }
.pos-item-del {
  color:          var(--gc-muted);
  cursor:          pointer;
  font-size:          22px;
  line-height:          1;
  background:          none;
  border:          none;
  padding:          0 2px;
  transition:          color .1s;
  width:          34px;
  height:          34px;
  flex:          0 0 auto;
  border-radius:          8px; }
.pos-item-del:hover {
  color:          var(--gc-danger);
  background:          rgba(220,38,38,.08); }

/* Tira "Agregando para": elegir a qué comensal se le asigna el próximo
   plato — visible solo con 2+ comensales (con 1 sola persona no hay nada
   que repartir). El tag P{n} en cada ítem del carrito confirma la asignación. */
.pos-persons { padding: 10px 16px; border-bottom: 1px solid var(--gc-border); background: var(--gc-surface); }
.pos-persons__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gc-muted); margin-bottom: 7px; }
.pos-persons__row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.pos-persons__row::-webkit-scrollbar { display: none; }
.pos-person-chip {
    /* Ícono en vez de número puro (pedido de Walter) — el número sobrevive
       como badge chico, mismo lenguaje que el número de mesa en el medallón
       del mapa de salón: si no, un mismo emoji repetido en cada chip no
       distinguiría "Persona 1" de "Persona 2". */
    position: relative;
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--gc-border); background: var(--gc-bg); color: var(--gc-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--gc-transition);
}
.pos-person-chip__badge {
    position: absolute; top: -5px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--gc-text); color: var(--gc-surface); border-radius: 999px;
    font-family: inherit; font-size: 10px; font-weight: 800; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pos-person-chip:hover { border-color: var(--gc-accent); color: var(--gc-accent); }
.pos-person-chip.is-on {
    background: var(--gc-accent-lt); border-color: var(--gc-accent); color: var(--gc-accent);
    box-shadow: 0 3px 10px rgba(49,96,85,.3);
}
.pos-person-chip.is-on .pos-person-chip__badge { background: var(--gc-accent); }
.pos-item-person {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--gc-accent-lt); color: var(--gc-accent); font-size: 11px; font-weight: 800;
    vertical-align: middle; margin-right: 2px;
}

/* Fix layout: cart panel no scrollea como un todo; solo los items y la sección inferior scrollean */
.pos-cart          {
  display:          flex;
  flex-direction:          column;
  background:          var(--gc-surface);
  overflow-y:          auto;
  overflow:          hidden; }
.pos-cart form     {
  display:          flex;
  flex-direction:          column;
  height:          100%;
  overflow:          hidden; }
.pos-cart-items    {
  flex:          1;
  overflow-y:          auto;
  padding:          8px 16px;
  min-height:          80px; }   /* reduce min para pantallas pequeñas */
.pos-cart-bottom   {
    overflow-y: auto;
    /* Antes flex-shrink:0 + max-height:52vh fijo: cupón + cliente + 6 botones
       de método de pago + notas + la barra de confirmar miden ~578px de
       contenido natural -- más que el 52% de un viewport típico, y al no
       poder encoger nunca (shrink:0) esa sección quedaba SIEMPRE con scroll
       interno permanente y sin aviso visual, tapando "Confirmar pedido"
       incluso con el carrito vacío. flex-shrink:1 (default) + overflow-y:auto
       deja que el navegador la achique cuando hace falta espacio -- con
       overflow distinto de visible, el mínimo flex ya no es "todo mi
       contenido", así que sí puede bajar de 578px y mostrar su propio scroll
       en vez de forzar el desborde del panel entero. .pos-cart-items ya
       protege su propio mínimo de 80px con el mismo mecanismo. */
    max-height: 70vh; max-height: 70dvh;   /* techo generoso, no el limitante real */
    border-top: 1px solid var(--gc-border);
}

/* Total del carrito con la serif de marca */
.pos-cart-total {
  display:          flex;
  justify-content:          space-between;
  font-size:          26px;
  font-weight:          800;
  padding:          10px 0 4px;
  border-top:          2px solid var(--gc-border);
  margin-top:          6px;
  font-family:          var(--gc-serif);
  letter-spacing:          -.02em;
}

/* Payment buttons — táctiles sin romper el layout de texto+emoji */
.pos-pay-btn {
  padding:          10px 8px;
  border-radius:          10px;
  font-size:          14.5px;
  font-weight:          600;
  border:          1.5px solid var(--gc-border);
  background:          var(--gc-bg);
  color:          var(--gc-text);
  cursor:          pointer;
  transition:          transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background-color .18s,border-color .18s,color .18s;
  font-family:          inherit;
  min-height:          44px;
  line-height:          1.3;
}
.pos-pay-btn.active {
  background:          linear-gradient(135deg, var(--gc-accent) 0%, var(--gc-accent-hv) 100%);
  border-color:          transparent;
  color:          #fff;
  box-shadow:          0 4px 14px rgba(49,96,85,.32), 0 1px 0 rgba(255,255,255,.1) inset;
  transform:          translateY(-1px);
}
.pos-pay-btn:hover:not(.active) {
  border-color:          var(--gc-accent);
  color:          var(--gc-accent);
  background:          var(--gc-accent-lt);
  transform:          translateY(-1px);
}

/* Grid de pago 3 columnas */
.pos-payment-grid {
  display:          grid;
  grid-template-columns:          repeat(3, 1fr);
  gap:          6px; }

/* Botón confirmar — acción principal, muy visible */
.pos-confirm-button {
  flex:          1;
  padding:          18px;
  font-size:          18px;
  font-weight:          700;
  background:          linear-gradient(135deg, #316055 0%, #3E8571 100%);
  border:          none;
  color:          #fff;
  border-radius:          14px;
  cursor:          pointer;
  transition:          var(--gc-transition);
  font-family:          inherit;
  min-height:          60px;
  box-shadow:          0 4px 18px rgba(49,96,85,.42), 0 1px 0 rgba(255,255,255,.12) inset;
  letter-spacing:          .01em;
}
.pos-confirm-button:hover:not(:disabled) {
  background:          linear-gradient(135deg, #B24732 0%, #A43621 100%);
  transform:          translateY(-2px);
  box-shadow:          0 8px 26px rgba(49,96,85,.48), 0 1px 0 rgba(255,255,255,.12) inset;
}

/* ── Tablas v2: zebra · hover verde · actions visibles en hover ─────────── */
.gc-table tbody tr:nth-child(even) td {
    background: rgba(247,248,250,.65);
}
.gc-table tbody tr:hover td {
    background: var(--gc-accent-lt) !important;
}
.gc-table tbody tr:hover .actions {
    opacity: 1 !important;
}
.gc-table .actions {
  display:          flex;
  gap:          6px;
  flex-wrap:          wrap;
  opacity:          .6;
  transition:          opacity .18s;
}
/* Primera columna con font-weight levemente mayor */
.gc-table td:first-child {
    font-weight: 500;
    color: var(--gc-text);
}
/* Encabezados sticky para tablas largas */
.gc-table-sticky thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--gc-bg);
    box-shadow: 0 1px 0 var(--gc-border);
}

/* ── Header / Topbar refinado ───────────────────────────────────────────── */
.gc-topbar {
  background:          rgba(255,255,255,.9);
  border-bottom:          1px solid rgba(229,231,235,.8);
  display:          flex;
  align-items:          center;
  gap:          16px;
  padding:          0 28px;
  height:          56px;
  position:          sticky;
  top:          0;
  z-index:          50;
  backdrop-filter:          blur(14px) saturate(180%);
  -webkit-backdrop-filter:          blur(14px) saturate(180%);
  box-shadow:          0 1px 3px rgba(0,0,0,.04);
}

/* Notification badge */
.gc-notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px;
    background: var(--gc-danger);
    color: #fff; font-size: 9.5px; font-weight: 800;
    border-radius: 999px; padding: 0 4px;
    position: absolute; top: -5px; right: -7px;
    animation: gcPulseDot 2s ease-out infinite;
    line-height: 1; border: 1.5px solid var(--gc-surface);
}

/* Iconos de acción en topbar */
.gc-topbar-action {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid var(--gc-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    color: var(--gc-muted); text-decoration: none;
}
.gc-topbar-action:hover {
    background: var(--gc-accent-lt);
    border-color: var(--gc-accent-md);
    color: var(--gc-accent);
    text-decoration: none;
}

/* Shortcut hint Cmd+K */
.gc-shortcut-hint {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--gc-bg); border: 1px solid var(--gc-border);
    border-radius: 8px; padding: 5px 11px;
    font-size: 12px; color: var(--gc-muted); cursor: pointer;
    transition: background-color .15s,border-color .15s,color .15s; user-select: none;
}
.gc-shortcut-hint kbd {
    font-size: 10px; font-family: inherit;
    background: var(--gc-border-lt); border: 1px solid var(--gc-border);
    border-radius: 4px; padding: 1px 5px; color: var(--gc-text);
}
.gc-shortcut-hint:hover { border-color: var(--gc-accent); color: var(--gc-accent); text-decoration: none; }

/* Branch selector en sidebar — flecha customizada */
.gc-branch-selector select {
  width:          100%;
  background:          rgba(255,255,255,.05);
  border:          1px solid rgba(255,255,255,.08);
  border-radius:          var(--gc-radius-sm);
  color:          #CBD5E1;
  font-size:          13px;
  padding:          6px 8px;
  font-family:          inherit;
  appearance:          none;
  background-image:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:          no-repeat;
  background-position:          right 9px center;
  padding-right:          28px;
  cursor:          pointer;
  transition:          border-color .15s, background-color .15s;
}
.gc-branch-selector select:hover {
    border-color: rgba(255,255,255,.2);
    background-color: rgba(255,255,255,.09);
}

/* ── Sidebar: grupos con separador sutil ────────────────────────────────── */
.gc-nav__group-label {
  font-size:          12px;
  font-weight:          700;
  letter-spacing:          .1em;
  text-transform:          uppercase;
  color:          #3D5248;
  padding:          18px 20px 5px;
  border-top:          1px solid rgba(255,255,255,.04);
  margin-top:          4px;
}
.gc-nav__group-label:first-child { border-top: none; margin-top: 0; }

/* Nav item spacing */
.gc-nav__item a {
  display:          flex;
  align-items:          center;
  gap:          10px;
  padding:          9px 18px 9px 20px;
  font-size:          14px;
  color:          #A8C4BC;
  border-left:          2px solid transparent;
  transition:          background .18s,color .18s,transform .18s;
  border-radius:          0;
  margin:          1px 0;
}
.gc-nav__item.active a {
  font-weight:          500;
  background:          linear-gradient(90deg, rgba(49,96,85,.4) 0%, rgba(49,96,85,.12) 100%);
  color:          #fff;
  box-shadow:          none;
  border-left:          3px solid var(--gc-accent);
  padding-left:          17px;
}

/* ── Responsive tweaks v3.1 ─────────────────────────────────────────────── */
@media(max-width:768px) {
    .pos-payment-grid { grid-template-columns: repeat(2,1fr); }
    .pos-pay-btn { min-height: 44px; }
}


/* ══ AUDITORÍA UI/UX — Bloque 1: interacción y accesibilidad (aditivo) ══════ */
/* Press feedback (Emil): los botones sienten la presión con scale, no translate */
.gc-btn:active,
.gc-btn--primary:active,
.gc-btn--danger:active,
.gc-btn--sm:active,
.gc-btn--xs:active { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) {
  .gc-btn:hover { will-change: transform; }
}
/* Foco de teclado visible en cualquier elemento interactivo (antes: 0 :focus-visible) */
a:focus-visible,
button:focus-visible,
.gc-btn:focus-visible,
[role="button"]:focus-visible,
.gc-nav__item a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gc-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Respetar prefers-reduced-motion (antes: casi ausente) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modificadores de DATO con carga semantica.
   --accent quedo neutro a proposito: destacar es trabajo del tamano, no del color de marca. */
.gc-metric-value--pos{color:var(--gc-pos)}
.gc-metric-value--neg{color:var(--gc-neg)}

/* ── JERARQUÍA: 1 respuesta → 3 apoyos → detalle ───────────────────────────
   El héroe responde '¿cómo va el día?' en un segundo. El contexto de semana
   vive DENTRO del héroe (antes era una franja aparte que decía lo mismo). */
.gc-hero-metric{background:var(--gc-surface);border:1px solid var(--gc-border);border-radius:var(--gc-radius);padding:20px 24px;margin-bottom:14px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.gc-hero-metric__main{flex:1;min-width:200px}
.gc-hero-metric__label{font-size:12px;color:var(--gc-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:2px}
.gc-hero-metric__value{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--gc-pos)}
.gc-hero-metric__sub{font-size:13px;color:var(--gc-muted);margin-top:6px}
.gc-hero-metric__context{display:flex;flex-direction:column;gap:2px;padding-left:24px;border-left:1px solid var(--gc-border)}
.gc-hero-metric__ctx-label{font-size:11px;color:var(--gc-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.gc-hero-metric__ctx-value{font-size:20px;font-weight:700;color:var(--gc-text)}
.gc-hero-metric__ctx-note{font-size:12px;color:var(--gc-muted)}
.gc-delta-pill{display:inline-block;width:fit-content;font-size:13px;font-weight:700;padding:2px 9px;border-radius:20px;margin-top:3px}
.gc-metric-note{font-size:12px;color:var(--gc-muted);margin-top:4px}
.gc-detail-line{font-size:14px;color:var(--gc-muted);margin-bottom:20px}
@media (max-width:640px){
  .gc-hero-metric{gap:16px;padding:16px}
  .gc-hero-metric__value{font-size:34px}
  .gc-hero-metric__context{padding-left:0;border-left:0;border-top:1px solid var(--gc-border);padding-top:12px;width:100%}
}

/* ── Divulgación progresiva: el gráfico es el APOYO, la tabla es el DETALLE.
   Evita que dos bloques cuenten lo mismo sin perder las cifras exactas. */
.gc-detail-toggle{margin-top:12px;border-top:1px solid var(--gc-border-lt)}
.gc-detail-toggle > summary{font-size:12px;font-weight:600;color:var(--gc-muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;min-height:44px;border-radius:4px}
.gc-detail-toggle > summary::-webkit-details-marker{display:none}
.gc-detail-toggle > summary::before{content:'▸';display:inline-block;transition:transform .15s var(--ease-out)}
.gc-detail-toggle[open] > summary::before{transform:rotate(90deg)}
.gc-detail-toggle > summary:hover{color:var(--gc-text)}

/* ── Iconos SVG (sustituyen a los emojis) ──────────────────────────────────
   Heredan color con currentColor: el nav activo los tiñe sin CSS extra. */
.gc-icon{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.gc-nav__item.active .gc-nav__icon,
.gc-nav__item a:hover .gc-nav__icon{opacity:1}
.gc-nav__sub .gc-icon{opacity:.65;vertical-align:-3px}

/* ── Sidebar plegable ──────────────────────────────────────────────────────
   La etiqueta de grupo pasa a ser un <button> real (no un div clicable). */
.gc-nav__group-label--plegable{padding:0}
.gc-nav__group-btn{
  width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;background:none;border:none;cursor:pointer;font:inherit;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:inherit;opacity:.6;padding:0 14px;border-radius:6px;
  transition:opacity .15s ease,background-color .15s ease;
}
.gc-nav__group-btn:hover{opacity:1;background:rgba(255,255,255,.06)}
.gc-nav__chevron{
  font-size:15px;line-height:1;display:inline-block;
  transition:transform .18s var(--gc-ease-out);
}
.gc-nav__group-btn[aria-expanded=true] .gc-nav__chevron{transform:rotate(90deg)}

/* ── Barra de pestañas de Informes (navegación consistente) ────────────────
   Scroll horizontal en móvil en vez de romper a varias filas. */
.gc-tabs{display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gc-tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--gc-border);background:var(--gc-surface);color:var(--gc-muted);font-size:13px;font-weight:600;text-decoration:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.gc-tab:hover{color:var(--gc-text);border-color:var(--gc-muted)}
.gc-tab--active{background:var(--gc-brand);border-color:var(--gc-brand);color:#fff}
.gc-tab--active:hover{color:#fff}

/* Enlace suelto del nav (Informes): siempre visible, con aire arriba/abajo. */
.gc-nav__standalone{margin-top:6px;margin-bottom:2px}

/* Aviso de correo sin confirmar — informa, no bloquea. */
.gc-verify-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--gc-warn-bg);border:1px solid var(--gc-warn);
  color:var(--gc-warn);border-radius:var(--gc-radius);
  padding:10px 14px;margin-bottom:16px;font-size:13px;
}
.gc-verify-banner strong{font-weight:700}


/* Toggle de tema en la topbar */
.gc-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--gc-border);background:var(--gc-surface);color:var(--gc-muted);border-radius:var(--gc-radius-sm);cursor:pointer;margin-right:8px;transition:var(--gc-transition)}
.gc-theme-toggle:hover{color:var(--gc-accent);border-color:var(--gc-accent)}


/* Barra de acciones global en la topbar (siempre visible) */
.gc-topbar__quick{display:flex;gap:8px;margin-left:20px;flex-wrap:wrap;align-items:center}
.gc-topbar__quick .gc-btn{white-space:nowrap}
@media(max-width:820px){.gc-topbar__quick .gc-btn span:not(.gc-icon){display:none}}
@media(max-width:600px){.gc-topbar__quick{display:none}}

/* Cabecera unificada de informes (reportHeader) */
.gc-report-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 20px}
.gc-report-head__title{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--gc-text);line-height:1.2}
.gc-report-head__sub{font-size:13px;color:var(--gc-muted);margin-top:4px;max-width:64ch;line-height:1.45}
.gc-report-head__action{flex-shrink:0}
@media(max-width:640px){.gc-report-head{flex-direction:column;align-items:stretch;gap:10px}.gc-report-head__action .gc-btn{width:100%;justify-content:center}}