/* =====================================================================
   Hoja y Fogón POS — Estilos de aplicación (§1, §5, §10)
   ===================================================================== */

/* Alpine.js: oculta elementos con x-cloak hasta que Alpine inicializa.
   Sin esta regla, los modales/overlays (apertura, arqueo, cierre de caja,
   etc.) aparecen visibles al cargar la página. CRÍTICO. */
[x-cloak] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }

/* ---------- Layout con sidebar ---------- */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width: 250px; flex-shrink:0; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding: .75rem;
  overflow-y:auto;
}
.app-sidebar .brand{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .25rem 1rem;
  color:#fff; text-decoration:none;
}
.app-sidebar .brand img{ max-height:44px; max-width:160px; width:auto; height:auto; object-fit:contain; }
.app-sidebar .brand span{ font-family:var(--font-display); font-size:1.15rem; }
.app-sidebar .nav-link{
  color:#e8e2d4; border-radius:.5rem; padding:.55rem .7rem; margin-bottom:.15rem;
  display:flex; align-items:center; gap:.6rem; font-size:.95rem;
}
.app-sidebar .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.app-sidebar .nav-link.active{ background: var(--brand-fuego); color:#fff; }
.app-sidebar .nav-section{ color:#9fb08c; text-transform:uppercase; font-size:.7rem; letter-spacing:1px; margin:1rem .7rem .3rem; }
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; gap:.5rem 1rem; position:sticky; top:0; z-index:20;
  flex-wrap:wrap; max-width:100%;
}
.app-topbar nav{ flex-wrap:wrap; }
.app-content{ padding:1.2rem; flex:1; min-width:0; overflow-x:hidden; }
@media (max-width:640px){
  .app-topbar{ padding:.5rem .6rem; gap:.4rem .5rem; }
  .app-topbar .topbar-username{ max-width:7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
}

@media (max-width: 992px){
  .app-sidebar{ position:fixed; left:-260px; z-index:1050; transition:left .2s; box-shadow:var(--shadow); }
  .app-sidebar.open{ left:0; }
  .sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; }
}

/* ---------- POS ---------- */
.pos-layout{ display:grid; grid-template-columns: 1fr 380px; gap:1rem; height:calc(100vh - 64px); }
/* En pantallas grandes ensanchamos el panel de pedido para acomodar 2 columnas. */
@media (min-width:1200px){ .pos-layout{ grid-template-columns: 1fr 440px; } }
@media (min-width:1600px){ .pos-layout{ grid-template-columns: 1fr 480px; } }
.pos-products{ overflow-y:auto; padding-right:.25rem; }
.pos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.pos-cat-group{ margin-bottom:1.1rem; }
.pos-cat-header{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-display,inherit); font-weight:700; font-size:1.05rem; color:var(--verde-selva,#1E2E14); margin:.2rem 0 .6rem; padding-bottom:.3rem; border-bottom:2px solid var(--fuego,#C7601A); }
.pos-cat-header .pos-cat-count{ font-size:.75rem; font-weight:600; background:var(--crema-200,#EAE2D0); color:#6b5b3e; border-radius:1rem; padding:.05rem .5rem; }
.pos-product{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radius);
  cursor:pointer; overflow:hidden; text-align:left; transition:transform .06s, box-shadow .1s; padding:0;
  display:flex; flex-direction:column; height:100%;
}
.pos-product:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
/* Imagen: SIEMPRE cubre el cuadro (sin franjas blancas), recortando lo que sobre. */
.pos-product .ph{
  flex:0 0 155px; height:155px;
  background-color:var(--crema-200); background-position:center center; background-size:cover; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center; color:var(--verde-300);
}
.pos-product .body{ padding:.5rem .6rem; flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; }
/* Nombre: hasta 2 líneas con altura reservada => todas las tarjetas quedan iguales. */
.pos-product .name{ font-weight:600; font-size:.9rem; line-height:1.2; min-height:2.4em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pos-product .price{ color:var(--fuego-700); font-weight:700; margin-top:auto; }
.pos-product.unavailable{ opacity:.5; pointer-events:none; }
.pos-cart{ background:#fff; border:1px solid var(--linea); border-radius:var(--radius); display:flex; flex-direction:column; }
.pos-cart-items{ overflow-y:auto; flex:1; }
.cart-line{ display:flex; gap:.5rem; padding:.5rem .75rem; border-bottom:1px solid var(--crema-200); }
@media (max-width: 992px){ .pos-layout{ grid-template-columns:1fr; height:auto; } }

/* ---------- KDS (tema oscuro §5) ---------- */
.kds-body{ background: var(--brand-verde-selva); color:#f1ede1; min-height:100vh; }
.kds-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; padding:1rem; }
.kds-card{ background:#26371a; border:1px solid #3a5026; border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; }
.kds-card .head{ padding:.7rem 1rem; font-weight:700; border-bottom:1px solid #3a5026; }
.kds-card .head-top{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.kds-card .kds-num{ font-weight:800; font-size:1.05rem; white-space:nowrap; }
.kds-card .head-top .timer{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.kds-card .head-badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem; }
.kds-card .head-badges .badge{ font-size:.78rem; padding:.35rem .55rem; }
.kds-card .timer.green{ color:#8fdc6b; }
.kds-card .timer.amber{ color:#ffc14d; }
.kds-card .timer.red{ color:#ff7a5c; animation:pulse 1s infinite; }
.kds-card .items{ padding:.7rem 1rem; flex:1; }
.kds-card .items li{ margin-bottom:.35rem; }
.kds-card .qty{ background: var(--brand-fuego); color:#fff; border-radius:.4rem; padding:0 .45rem; font-weight:700; }
/* Pedido demorado: tarjeta con borde rojo pulsante + badge + banner. */
.kds-card.overdue{ border:2px solid #E53935; box-shadow:0 0 0 3px rgba(229,57,53,.25); animation:kdsPulse 1.1s ease-in-out infinite; }
@keyframes kdsPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(229,57,53,.18); } 50%{ box-shadow:0 0 0 7px rgba(229,57,53,.40); } }
.kds-overdue-badge{ background:#E53935; color:#fff; font-weight:700; letter-spacing:.3px; }
.kds-overdue-banner{ background:#E53935; color:#fff; font-size:1.05rem; padding:.6rem 1rem; border-radius:.6rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; animation:kdsPulse 1.1s ease-in-out infinite; }
.kds-card .item-name{ font-weight:600; }
.kds-card .note{ display:block; margin:.15rem 0 0 2.2rem; font-size:.9rem; font-style:italic; color:var(--brand-crema,#F4EFE3); opacity:.85; }
.kds-card .kds-delivery{ margin:.55rem 1rem .2rem; padding:.55rem .7rem; background:rgba(255,255,255,.06); border-radius:.5rem; color:var(--brand-crema,#F4EFE3); font-size:.95rem; line-height:1.45; }
.kds-card .kds-delivery > div{ word-break:break-word; }
.kds-card .kds-delivery strong{ font-weight:700; }
.kds-card .kds-when{ margin:.45rem 1rem .2rem; font-size:.95rem; color:var(--brand-crema,#F4EFE3); }
.kds-card .kds-when strong{ font-weight:700; }
.kds-card .kds-when--scheduled{ color:#FFD79A; font-weight:600; }
.kds-card .foot{ display:flex; gap:.5rem; padding:.7rem 1rem; border-top:1px solid #3a5026; }
@keyframes pulse{ 50%{ opacity:.55; } }

/* ---------- Utilidades ---------- */
.table-sm td, .table-sm th{ vertical-align:middle; }
.money{ font-variant-numeric: tabular-nums; white-space:nowrap; }
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--verde-300); }
.empty-state i{ font-size:2.5rem; opacity:.5; }
.status-chip{ font-size:.72rem; padding:.18rem .5rem; border-radius:1rem; font-weight:600; text-transform:capitalize; }
.status-nuevo{ background:#e7f0dc; color:#3E7D2C; }
.status-en_preparacion{ background:#fff0db; color:#A44E13; }
.status-listo{ background:#dbeafe; color:#1d4ed8; }
.status-en_ruta{ background:#e0e7ff; color:#4338ca; }
.status-entregado{ background:#dcfce7; color:#15803d; }
.status-cancelado, .status-fallido{ background:#fde2dd; color:#9A2A1E; }
.health-dot{ width:.65rem; height:.65rem; border-radius:50%; display:inline-block; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.health-ok{ background:var(--ok); } .health-warn{ background:var(--warn); } .health-down{ background:var(--danger); }
.shipday-chip{ background:rgba(255,255,255,.10); transition:background .15s; }
.shipday-chip:hover{ background:rgba(255,255,255,.20); }
/* ---------- Caja: modal y rejilla de denominaciones ---------- */
.cash-modal-card{ width:100%; max-width:640px; max-height:92vh; overflow:auto; }
.denom-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
@media(min-width:560px){ .denom-grid{ grid-template-columns:repeat(3,1fr); } }
.denom-bill{
  display:flex; flex-direction:column; gap:.3rem; margin:0; cursor:text;
  border:1px solid var(--linea); border-left:7px solid var(--denom-c,#999);
  border-radius:.55rem; padding:.45rem .55rem; background:#fff;
  box-shadow:0 1px 2px rgba(30,46,20,.06);
}
.denom-bill .denom-value{ font-weight:700; font-size:.95rem; color:var(--denom-c,#333); }
.denom-bill .denom-qty{ text-align:center; }
/* Monedas: acento dorado redondeado */
.denom-coin{ border-left-style:dashed; background:linear-gradient(180deg,#fffdf5,#fff); }
/* Pipeline de pedidos: botones de estado */
.pipeline-tabs .btn{ transition:transform .08s ease, box-shadow .12s ease; border-width:2px; }
.pipeline-tabs .btn:hover{ transform:translateY(-1px); }
.pipeline-tabs .btn:not(.btn-outline-dark):not(.btn-outline-secondary):not(.btn-outline-info):not(.btn-outline-primary):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-danger){ box-shadow:0 3px 8px rgba(30,46,20,.18); }
/* Finanzas: gráfico de barras animado (crecen de abajo hacia arriba) */
.fin-dot{ display:inline-block; width:.8rem; height:.8rem; border-radius:.2rem; vertical-align:middle; margin-right:.25rem; }
.fin-dot--in{ background:#2e8b46; } .fin-dot--out{ background:#c0392b; }
.fin-chart{ display:flex; align-items:stretch; gap:.5rem; height:340px; padding:1.6rem .25rem 0; overflow-x:auto; }
.fin-month{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; height:100%; min-width:62px; border-radius:.6rem; padding:0 .15rem; transition:background .15s; }
.fin-month:hover{ background:rgba(30,46,20,.04); }
.fin-bars{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:.55rem; width:100%;
  border-bottom:2px solid var(--linea,#D9D0BE); }
.fin-bar{ width:42%; max-width:46px; border-radius:8px 8px 0 0; position:relative; transform-origin:bottom center;
  animation:finGrow .85s cubic-bezier(.22,1,.36,1) both; box-shadow:0 2px 6px rgba(30,46,20,.15); }
.fin-bar--in{ background:linear-gradient(180deg,#46c46a,#2e8b46); }
.fin-bar--out{ background:linear-gradient(180deg,#e8616f,#c0392b); }
.fin-bar-val{ position:absolute; top:-1.25rem; left:50%; transform:translateX(-50%); font-size:.68rem; font-weight:700; color:var(--verde-selva,#1E2E14); white-space:nowrap; }
.fin-month-label{ margin:.7rem 0 .9rem; font-size:.8rem; font-weight:700; text-align:center; text-transform:capitalize;
  color:var(--verde-selva,#1E2E14); background:var(--crema-200,#EAE2D0); padding:.28rem .7rem; border-radius:1rem; letter-spacing:.02em; white-space:nowrap; }
@keyframes finGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.filters-bar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin-bottom:1rem; }
.flash{ position:fixed; top:1rem; right:1rem; z-index:1080; min-width:280px; }