/* GastroCore 360 — admin-extra.css v2.0 */

/* ── Profit cards ────────────────────────────────────────────────────────── */
.profit-card { border-top:3px solid var(--gc-accent) !important; }
.profit-card:nth-child(2) { border-top-color:var(--gc-warning) !important; }
.profit-card:nth-child(3) { border-top-color:var(--gc-danger) !important; }

/* ── Cash summary ────────────────────────────────────────────────────────── */
.cash-summary-card { border-top:3px solid var(--gc-accent); }

/* ── Product cards ───────────────────────────────────────────────────────── */
.gc-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.gc-product-card {
    background:var(--gc-surface); border:1px solid var(--gc-border);
    border-radius:var(--gc-radius); overflow:hidden;
    transition:var(--gc-transition); box-shadow:var(--gc-shadow);
}
.gc-product-card:hover { box-shadow:var(--gc-shadow-md); transform:translateY(-2px); }
.gc-product-card--inactive { opacity:.55; }
.gc-product-card__img { aspect-ratio:16/9; background:var(--gc-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.gc-product-card__img img { width:100%; height:100%; object-fit:cover; }
.gc-product-card__no-img { font-size:32px; color:var(--gc-muted-lt); }
.gc-product-badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; letter-spacing:.03em; }
.gc-product-badge--featured { background:#FEF3C7; color:#92400E; }
.gc-product-badge--hidden { background:#F3F4F6; color:#6B7280; }
.gc-product-card__body { padding:14px; }
.gc-product-card__cat { font-size:11px; color:var(--gc-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; font-weight:500; }
.gc-product-card__name { font-size:15px; font-weight:600; margin-bottom:6px; line-height:1.3; }
.gc-product-card__price { font-size:18px; font-weight:700; color:var(--gc-accent); margin-bottom:10px; }
.gc-product-card__footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }

/* ── Ingredient rows ─────────────────────────────────────────────────────── */
.gc-ing-row {
    display:flex; align-items:center; gap:10px; padding:8px 12px;
    background:var(--gc-bg); border-radius:var(--gc-radius-sm);
    margin-bottom:8px; border:1px solid var(--gc-border-lt);
    transition:var(--gc-transition);
}
.gc-ing-row:hover { border-color:var(--gc-border); }
.gc-ing-name { flex:1; font-size:14px; font-weight:450; }
.gc-ing-name small { color:var(--gc-muted); font-weight:400; }

/* ── Payment badges ──────────────────────────────────────────────────────── */
.pay-badge { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:2px 8px; border-radius:20px; }
.pay-badge--cash     { background:#ECFDF5; color:#065F46; }
.pay-badge--debit    { background:#EFF6FF; color:#1E40AF; }
.pay-badge--credit   { background:#F5F3FF; color:#4C1D95; }
.pay-badge--transfer { background:#FFF7ED; color:#92400E; }
.pay-badge--delivery { background:#FFFBEB; color:#78350F; }
.pay-badge--other    { background:#F3F4F6; color:#374151; }

/* ── Movement badges ─────────────────────────────────────────────────────── */
.mov-badge { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:2px 8px; border-radius:20px; }
.mov-badge--sale    { background:#ECFDF5; color:#065F46; }
.mov-badge--expense { background:#FEF2F2; color:#991B1B; }
.mov-badge--deposit { background:#EFF6FF; color:#1E40AF; }
.mov-badge--adjust  { background:#F3F4F6; color:#374151; }

/* ── Portal category nav ─────────────────────────────────────────────────── */
.portal-cat-nav {
    position:sticky; top:60px; z-index:40;
    background:var(--p-surface); border-bottom:1px solid var(--p-border);
    box-shadow:0 2px 4px rgba(0,0,0,.04);
}
.portal-cat-nav__inner {
    display:flex; gap:6px; overflow-x:auto; padding:10px 16px;
    scrollbar-width:none; max-width:960px; margin:0 auto;
}
.portal-cat-nav__inner::-webkit-scrollbar { display:none; }
.portal-cat-nav__link {
    padding:6px 16px; border-radius:20px; font-size:14px; font-weight:500;
    border:1.5px solid var(--p-border); background:none; color:var(--p-muted);
    white-space:nowrap; text-decoration:none; transition: color .15s var(--gc-ease-out), background-color .15s var(--gc-ease-out), border-color .15s var(--gc-ease-out), box-shadow .15s var(--gc-ease-out), transform .15s var(--gc-ease-out), opacity .15s var(--gc-ease-out);
}
.portal-cat-nav__link:hover, .portal-cat-nav__link.active {
    background:var(--p-accent); border-color:var(--p-accent); color:#fff; text-decoration:none;
}

/* ── Portal product extras ───────────────────────────────────────────────── */
.portal-product-card--featured { border-color:var(--p-accent); }
.portal-product-card__badge {
    display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
    border-radius:20px; letter-spacing:.04em; margin-bottom:6px;
}
.portal-product-card__badge--top { background:#FEF3C7; color:#92400E; }
.portal-product-card__badge--new { background:var(--gc-accent-lt); color:var(--gc-accent-dk); }
.portal-product-card__badge--pts { background:#F5F3FF; color:#4C1D95; }

.portal-section-title {
    font-size:20px; font-weight:800; margin-bottom:16px;
    padding-bottom:8px; border-bottom:3px solid var(--p-accent);
    color:#111827;
}

/* ── Portal empty ────────────────────────────────────────────────────────── */
.portal-empty { text-align:center; padding:60px 20px; color:var(--p-muted); font-size:16px; }
.portal-btn-add {
    display:inline-flex; align-items:center; gap:4px; padding:8px 16px;
    border-radius:8px; background:var(--p-accent); color:#fff;
    font-size:14px; font-weight:600; border:none; cursor:pointer;
    transition:background .15s; font-family:inherit; white-space:nowrap;
}
.portal-btn-add:hover { background:var(--p-accent-dk); }

/* ── Portal floating cart ────────────────────────────────────────────────── */
.portal-floating-cart {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    background:#0F1923; color:#fff; border-radius:40px;
    padding:12px 24px; display:flex; align-items:center; gap:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.25); z-index:100;
    text-decoration:none; font-weight:600; font-size:15px;
    transition: color .2s var(--gc-ease-out), background-color .2s var(--gc-ease-out), border-color .2s var(--gc-ease-out), box-shadow .2s var(--gc-ease-out), transform .2s var(--gc-ease-out), opacity .2s var(--gc-ease-out); min-width:200px; justify-content:space-between;
}
.portal-floating-cart:hover { background:#1A2332; text-decoration:none; color:#fff; transform:translateX(-50%) translateY(-2px); }
.portal-floating-cart__count {
    background:var(--gc-accent); border-radius:20px;
    min-width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; padding:0 6px;
}

/* ── Loyalty badge ───────────────────────────────────────────────────────── */
.portal-loyalty-badge {
    display:inline-flex; align-items:center; gap:4px; font-size:12px;
    font-weight:600; padding:3px 10px; border-radius:20px;
    background:#F5F3FF; color:#4C1D95;
}

/* ── 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:14px; 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 states mejorados v2.0 ─────────────────────────────────────────── */
.gc-empty {
  text-align:center;
  padding:56px 32px;
  background:var(--gc-surface);
  border-radius:var(--gc-radius);
  border:1.5px dashed var(--gc-border);
  max-width:480px;
  margin:24px auto;
}
.gc-empty__icon {
  font-size:52px;
  margin-bottom:16px;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
.gc-empty__title {
  font-size:18px;
  font-weight:700;
  color:var(--gc-text);
  margin-bottom:8px;
}
.gc-empty__desc {
  font-size:15px;
  color:var(--gc-muted);
  margin-bottom:24px;
  line-height:1.7;
  max-width:320px;
  margin-left:auto;
  margin-right:auto;
}

/* Empty state en tablas */
.gc-table-empty {
  text-align:center;
  padding:48px 24px;
  color:var(--gc-muted);
}
.gc-table-empty__icon { font-size:36px; display:block; margin-bottom:10px; }
.gc-table-empty__text { font-size:15px; font-weight:500; }
.gc-table-empty__sub  { font-size:14px; margin-top:4px; }

/* ── Barra de pestañas móvil (Plan estructural, Fase 2) ──────────────────────
   Debajo de 768px reemplaza al sidebar como navegación primaria: 4 acciones del
   rol al alcance del pulgar + "Más" que abre el sidebar off-canvas. Objetivos
   táctiles ≥ 52px y respeto del safe-area del iPhone. Oculta en tablet/desktop. */
.gc-tabbar { display:none; }

@media (max-width:768px) {
  /* --gc-tabbar-h: alto de contenido real (52px de los items + 6px+6px de
     padding vertical), sin el safe-area. La usa .pos-mini-cart en admin.css
     para flotar justo encima de esta barra sin superponerse — si el alto de
     la tabbar cambia, se actualiza en un solo lugar. */
  :root{ --gc-tabbar-h: 64px; }
  .gc-tabbar {
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--gc-surface,#fff);
    border-top:1px solid var(--gc-border,#e5e5e5);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    justify-content:space-around;
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
  }
  .gc-tabbar__item {
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:52px; padding:4px 2px; border-radius:12px;
    text-decoration:none; color:var(--gc-muted,#6b7280);
    font-size:12px; font-weight:600; line-height:1.1;
  }
  .gc-tabbar__item span {
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .gc-tabbar__item svg { width:22px; height:22px; flex:none; }
  .gc-tabbar__item.active { color:var(--gc-brand,#0d6e5a); }
  .gc-tabbar__item:active { background:rgba(var(--gc-brand-rgb,13,110,90),.10); }

  /* El contenido no debe quedar tapado por la barra fija. */
  .gc-content { padding-bottom:80px; }
  /* Sin la hamburguesa duplicada: la barra es la nav primaria en móvil. */
  .gc-sidebar-toggle { display:none; }
}

/* ── Búsqueda global / paleta de comandos (Plan estructural, Fase 3) ─────────── */
/* Disparador en la topbar */
.gc-search-trigger {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gc-bg,#f4f6f5); border:1px solid var(--gc-border,#e5e7eb);
  color:var(--gc-muted,#6b7280); border-radius:10px;
  padding:7px 10px; font:inherit; font-size:14px; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.gc-search-trigger:hover { border-color:var(--gc-brand,#0d6e5a); color:var(--gc-text,#111827); }
.gc-search-trigger__label { font-weight:500; }
.gc-search-trigger__kbd {
  font-family:var(--gc-font-mono,ui-monospace,monospace); font-size:12px;
  background:var(--gc-surface,#fff); border:1px solid var(--gc-border,#e5e7eb);
  border-radius:5px; padding:1px 5px; color:var(--gc-muted,#6b7280);
}
@media (max-width:640px) {
  .gc-search-trigger__label, .gc-search-trigger__kbd { display:none; }
  .gc-search-trigger { padding:8px; }
}

/* Overlay */
.gc-palette[hidden] { display:none; }
.gc-palette {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
}
.gc-palette__backdrop {
  position:absolute; inset:0; background:rgba(10,20,17,.45);
  backdrop-filter:blur(2px);
}
.gc-palette__box {
  position:relative; margin-top:12vh; width:min(560px,92vw);
  background:var(--gc-surface,#fff); border:1px solid var(--gc-border,#e5e7eb);
  border-radius:16px; box-shadow:0 24px 60px -12px rgba(0,0,0,.35);
  overflow:hidden; display:flex; flex-direction:column;
}
.gc-palette__input {
  width:100%; border:none; outline:none; background:transparent;
  padding:18px 20px; font-size:17px; color:var(--gc-text,#111827);
  border-bottom:1px solid var(--gc-border,#e5e7eb);
}
.gc-palette__list {
  list-style:none; margin:0; padding:6px; max-height:52vh; max-height:52dvh; overflow-y:auto;
}
.gc-palette__item {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-radius:10px; cursor:pointer;
}
.gc-palette__item.is-sel { background:rgba(var(--gc-brand-rgb,13,110,90),.10); }
.gc-palette__label { font-weight:600; color:var(--gc-text,#111827); }
.gc-palette__group {
  font-size:13px; color:var(--gc-muted,#6b7280);
  text-transform:uppercase; letter-spacing:.04em; flex:none;
}
.gc-palette__empty { padding:22px; text-align:center; color:var(--gc-muted,#6b7280); }
.gc-palette__hint {
  display:flex; gap:10px; padding:9px 16px; border-top:1px solid var(--gc-border,#e5e7eb);
  font-size:13px; color:var(--gc-muted,#6b7280);
}
.gc-palette__hint kbd {
  font-family:var(--gc-font-mono,ui-monospace,monospace); font-size:12px;
  background:var(--gc-bg,#f4f6f5); border:1px solid var(--gc-border,#e5e7eb);
  border-radius:4px; padding:0 5px;
}
@media (max-width:640px) { .gc-palette__hint { display:none; } .gc-palette__box { margin-top:6vh; } }

/* ── Pulido táctil para iPad/teléfono (Plan estructural, Fase 5) ──────────────
   En dispositivos de puntero grueso (dedo) los controles operativos suben a
   ≥44px, el mínimo cómodo para tocar sin errar en hora pico. En desktop (mouse,
   puntero fino) la UI densa queda igual. Señal: pointer:coarse — el dedo, no el
   ancho de pantalla (un iPad en horizontal mide >1024px pero se toca con el dedo). */
@media (pointer:coarse) {
  /* Botones y chips que se tocan durante el servicio */
  .gc-btn,
  .gc-btn--sm,
  .pos-category-chip,
  .pos-product,
  .gc-qty-btn {
    min-height:44px;
  }
  /* Botones de solo icono: cuadrado táctil completo */
  .gc-theme-toggle,
  .gc-search-trigger,
  .gc-icon-btn,
  .gc-modal__close,
  .gc-close {
    min-height:44px; min-width:44px;
  }
  /* Campos de formulario: cómodos para el pulgar */
  .gc-input,
  .gc-select,
  select.gc-input,
  input.gc-input,
  textarea.gc-input {
    min-height:44px;
  }
  /* Steppers de cantidad del POS, si existen */
  .pos-qty button,
  .gc-stepper button {
    min-height:44px; min-width:44px;
  }
  /* Filas de lista tocables (pedidos, mesas) con área de toque generosa */
  .gc-order-row,
  .pos-item {
    min-height:48px;
  }
  /* Sin retardo de 300 ms al tocar */
  a, button, .gc-btn, .pos-category-chip, [role=button] { touch-action:manipulation; }
}

/* Fase 5 — remates: cierres y links de acción que quedaron chicos */
@media (pointer:coarse) {
  .pos-search-bar button {            /* limpiar búsqueda del POS (✕) */
    min-height:44px; min-width:44px;
  }
  .gc-logout-link {                   /* "Cerrar sesión" del sidebar */
    display:inline-flex; align-items:center; min-height:44px;
  }
}

/* ── Indicador de conexión global (Plan «El Pase», paso C) ────────────────────
   El offline-first se vuelve sello de marca: presente en toda la topbar. Calmo
   cuando hay red (punto verde discreto); visible en brasa cuando cae, con el
   contador de pedidos en cola. La resiliencia se ve, no se esconde. */
.gc-net{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:13px; font-weight:600; padding:7px 11px; border-radius:9px;
  border:1px solid var(--gc-border,#e5e7eb); color:var(--gc-muted,#6b7280);
  background:transparent; transition:color .2s, background .2s, border-color .2s;
}
.gc-net__dot{ width:8px; height:8px; border-radius:50%; background:var(--gc-brand,#0d6e5a); flex:none; }
/* En línea y sincronizado: discreto, no distrae. */
.gc-net.is-on .gc-net__dot{ background:var(--gc-brand,#0d6e5a); }
/* Sincronizando pendientes: info. */
.gc-net.is-sync{ color:#1d6fb8; border-color:rgba(29,111,184,.4); background:rgba(29,111,184,.08); }
.gc-net.is-sync .gc-net__dot{ background:#1d6fb8; }
/* Sin conexión: brasa — el sello se enciende. */
.gc-net.is-off{ color:#c44a05; border-color:rgba(196,74,5,.45); background:rgba(196,74,5,.10); }
.gc-net.is-off .gc-net__dot{ background:#c44a05; animation:gc-net-pulse 1.6s ease-in-out infinite; }
@keyframes gc-net-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
[data-theme="dark"] .gc-net.is-off{ color:#ff7a18; border-color:rgba(255,122,24,.5); background:rgba(255,122,24,.12); }
[data-theme="dark"] .gc-net.is-off .gc-net__dot{ background:#ff7a18; }
@media (prefers-reduced-motion:reduce){ .gc-net.is-off .gc-net__dot{ animation:none } }
/* Móvil: sólo el punto, sin etiqueta (la topbar va apretada). */
@media (max-width:640px){ .gc-net__lbl{ display:none } .gc-net{ padding:8px } }

/* ── Toggle Día / Servicio (Plan «El Pase», paso D) ───────────────────────────
   El mismo interruptor de tema, reencuadrado como identidad: Sol = modo Día
   (La Carta, claro); Luna = modo Servicio (El Pase, oscuro). El icono muestra
   el modo ACTUAL; se intercambian según :root[data-theme]. */
.gc-mode-toggle .gc-mode-ico{display:none;line-height:0}
.gc-mode-toggle .gc-mode-ico--dia{display:inline-flex}         /* default = Día */
:root[data-theme="dark"] .gc-mode-toggle .gc-mode-ico--dia{display:none}
:root[data-theme="dark"] .gc-mode-toggle .gc-mode-ico--noche{display:inline-flex}