/* Variedades Jireth — Theme styles
 * Extracted from the original inline <style> block.
 * Tailwind utility classes are still configured in frontend/index.html via the
 * <script>tailwind.config = {...}</script> block.
 */
:root {
    --accent-500: #c2410c;
    --accent-600: #a8370a;
    --accent-100: #fbe2d3;
    --accent-50:  #fdf3ed;
    --density:    1;
  }
  html, body { background: #fdfaf3; color: #1a1614; -webkit-font-smoothing: antialiased; }
  body { font-family: 'Manrope', system-ui, sans-serif; }
  ::selection { background: var(--accent-100); color: #1a1614; }
  /* Subtle scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #ece5d8; border-radius: 8px; border: 2px solid #fdfaf3; }
  ::-webkit-scrollbar-thumb:hover { background: #dcd2bf; }
  /* Wordmark serif-like emphasis without loading another font */
  .wordmark { letter-spacing: -0.02em; }
  .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
  /* Buttons */
  .btn { display:inline-flex; align-items:center; gap:.5rem; height:38px; padding:0 14px; border-radius:10px; font-weight:600; font-size:14px; transition: all .15s ease; white-space:nowrap; }
  .btn-primary { background: var(--accent-500); color: #fff; }
  .btn-primary:hover { background: var(--accent-600); }
  .btn-primary:disabled { background:#dcd2bf; color:#fff; cursor:not-allowed; }
  .btn-ghost { background: transparent; color:#3a342f; }
  .btn-ghost:hover { background:#f8f3e8; }
  .btn-secondary { background:#fff; color:#3a342f; border:1px solid #ece5d8; }
  .btn-secondary:hover { background:#f8f3e8; }
  .btn-danger { background:#fff; color:#b91c1c; border:1px solid #fde2e2; }
  .btn-danger:hover { background:#fde2e2; }
  .btn-sm { height:30px; padding:0 10px; font-size:13px; border-radius:8px; }
  .btn-lg { height:48px; padding:0 18px; font-size:15px; border-radius:12px; }
  .chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:600; }
  .chip-ok { background:#dff3e3; color:#15803d; }
  .chip-warn { background:#fef3c7; color:#b45309; }
  .chip-err { background:#fde2e2; color:#b91c1c; }
  .chip-info { background:#fdf3ed; color:#8a2c08; }
  .chip-neutral { background:#f8f3e8; color:#3a342f; }
  /* Inputs */
  .input { width:100%; height:40px; padding:0 12px; background:#fff; border:1px solid #ece5d8; border-radius:10px; font-size:14px; color:#1a1614; transition: border-color .15s, box-shadow .15s; }
  .input:focus { outline:none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); }
  .input-lg { height:48px; font-size:15px; border-radius:12px; }
  textarea.input { padding:10px 12px; height:auto; }
  .label { display:block; font-size:12px; font-weight:600; color:#6b625a; margin-bottom:6px; letter-spacing:.02em; text-transform:uppercase; }
  /* Cards */
  .card { background:#fff; border:1px solid #ece5d8; border-radius:14px; box-shadow: 0 1px 0 0 rgb(26 22 20 / 0.02); }
  .card-pad { padding:20px; }
  .divider { border-top:1px solid #ece5d8; }
  /* Tables */
  table.t { width:100%; border-collapse: collapse; }
  table.t th { text-align:left; font-size:11px; font-weight:600; color:#6b625a; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; border-bottom:1px solid #ece5d8; background:#faf6ec; }
  table.t td { padding:14px; font-size:14px; color:#3a342f; border-bottom:1px solid #f3ecde; vertical-align:middle; }
  table.t tr:last-child td { border-bottom:0; }
  table.t tr:hover td { background:#fbf7ec; }
  /* Sidebar nav */
  .nav-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:#3a342f; font-weight:500; font-size:14px; transition: background .12s; }
  .nav-item:hover { background:#f8f3e8; }
  .nav-item.active { background: var(--accent-50); color: var(--accent-600); font-weight:600; }
  .nav-item.active svg { color: var(--accent-500); }
  .nav-item svg { color:#6b625a; flex-shrink:0; }
  /* Tabs */
  .tab { padding:10px 4px; margin-right:18px; font-size:14px; font-weight:600; color:#6b625a; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
  .tab.active { color: var(--accent-600); border-color: var(--accent-500); }
  /* Toast */
  .toast { animation: slideIn .25s ease; }
  @keyframes slideIn { from { transform: translateY(10px); opacity:0 } to { transform: none; opacity:1 } }
  /* Modal */
  .modal-bg { animation: fadeIn .15s ease; }
  .modal-panel { animation: pop .2s cubic-bezier(.16,1,.3,1); }
  @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
  @keyframes pop { from { transform: translateY(10px) scale(.98); opacity:0 } to { transform:none; opacity:1 } }
  /* Density */
  [data-density="compact"] .card-pad { padding:14px; }
  [data-density="compact"] table.t td { padding:9px 12px; font-size:13px; }
  [data-density="compact"] table.t th { padding:8px 12px; }
  /* Dark mode */
  [data-theme="dark"] { background:#15110f; color:#e8e3d8; }
  [data-theme="dark"] body, [data-theme="dark"] { background:#15110f; }
  [data-theme="dark"] .card { background:#1f1a16; border-color:#2c2520; }
  [data-theme="dark"] .input { background:#1f1a16; border-color:#2c2520; color:#e8e3d8; }
  [data-theme="dark"] .btn-secondary { background:#1f1a16; color:#e8e3d8; border-color:#2c2520; }
  [data-theme="dark"] .btn-secondary:hover { background:#2c2520; }
  [data-theme="dark"] .btn-ghost { color:#e8e3d8; }
  [data-theme="dark"] .btn-ghost:hover { background:#2c2520; }
  [data-theme="dark"] table.t th { background:#1a1612; color:#b8aa92; border-color:#2c2520; }
  [data-theme="dark"] table.t td { color:#dcd2bf; border-color:#2c2520; }
  [data-theme="dark"] table.t tr:hover td { background:#221c17; }
  [data-theme="dark"] .nav-item { color:#dcd2bf; }
  [data-theme="dark"] .nav-item:hover { background:#2c2520; }
  [data-theme="dark"] .chip-neutral { background:#2c2520; color:#dcd2bf; }
  [data-theme="dark"] ::-webkit-scrollbar-thumb { background:#2c2520; border-color:#15110f; }
  [data-theme="dark"] .divider { border-color:#2c2520; }
  /* Sale receipt animation */
  .check-pop { animation: checkPop .5s cubic-bezier(.16,1,.3,1); }
  @keyframes checkPop { 0% { transform: scale(.6); opacity:0 } 60% { transform: scale(1.08); opacity:1 } 100% { transform: scale(1); opacity:1 } }
  .fade-in { animation: fadeIn .2s ease both; }
  /* Loading bar */
  .loadbar { background: linear-gradient(90deg, transparent, var(--accent-500), transparent); background-size: 200% 100%; animation: load 1.2s linear infinite; }
  @keyframes load { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
  /* Hide scrollbar in horizontal product rows but keep scroll */
  .scroll-x { overflow-x:auto; scrollbar-width: thin; }
  /* Placeholder image gradient */
  .ph-img { background: repeating-linear-gradient(45deg, #f8f3e8, #f8f3e8 10px, #f1eadb 10px, #f1eadb 20px); }
  [data-theme="dark"] .ph-img { background: repeating-linear-gradient(45deg, #221c17, #221c17 10px, #2a2420 10px, #2a2420 20px); }
  /* POS host — fixed height so cart scrolls internally, page never grows */
  .pos-host { display:flex !important; flex-direction:column; overflow:hidden; height: calc(100dvh - 110px) !important; }
  @media (max-width: 1023px) { .pos-host { height: calc(100dvh - 96px) !important; } }
  body.pos-active { overflow: hidden; }

  /* ---- POS móvil (<1024px): barra inferior fija + carrito en hoja deslizable ---- */
  .pos-cart-bar {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:#fff; border-top:1px solid #ece5d8;
    box-shadow: 0 -8px 24px -12px rgb(26 22 20 / 0.18);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  #pos-view-cart:disabled { opacity:.6; }
  @media (min-width: 1024px) { .pos-cart-bar { display:none; } }
  /* Espacio para que la barra fija no tape los últimos productos. */
  @media (max-width: 1023px) { .pos-catalog { padding-bottom: 84px; } }

  .pos-sheet { position:fixed; inset:0; z-index:55; visibility:hidden; }
  .pos-sheet.open { visibility:visible; }
  .pos-sheet-overlay { position:absolute; inset:0; background:rgba(26,22,20,.45); opacity:0; transition:opacity .2s ease; }
  .pos-sheet.open .pos-sheet-overlay { opacity:1; }
  .pos-sheet-panel {
    position:absolute; left:0; right:0; bottom:0; max-height:85dvh;
    display:flex; flex-direction:column; background:#fff;
    border-top-left-radius:18px; border-top-right-radius:18px;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    transform:translateY(100%); transition:transform .25s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 -16px 40px -16px rgb(26 22 20 / 0.28);
  }
  .pos-sheet.open .pos-sheet-panel { transform:none; }
  .pos-sheet-handle { width:40px; height:4px; border-radius:999px; background:#dcd2bf; margin:6px auto 10px; cursor:pointer; }
  @media (min-width: 1024px) { .pos-sheet { display:none; } }
  [data-theme="dark"] .pos-cart-bar, [data-theme="dark"] .pos-sheet-panel { background:#1f1a16; border-color:#2c2520; }
  /* Icon-only action buttons (tables) */
  .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; color:#3a342f; background:transparent; transition: background .12s, color .12s; }
  .icon-btn:hover { background:#f8f3e8; }
  .icon-btn:disabled { color:#b8aa92; cursor:not-allowed; }
  .icon-btn:disabled:hover { background:transparent; }
  .icon-btn-danger { color:#b91c1c; }
  .icon-btn-danger:hover { background:#fde2e2; }
  [data-theme="dark"] .icon-btn { color:#dcd2bf; }
  [data-theme="dark"] .icon-btn:hover { background:#2c2520; }
  [data-theme="dark"] .icon-btn-danger { color:#fda4a4; }
  /* Active link a */
  a { color: inherit; }
  /* Keyboard hint */
  kbd { display:inline-flex; align-items:center; height:18px; padding:0 5px; border-radius:5px; background:#f8f3e8; border:1px solid #ece5d8; font-size:11px; color:#6b625a; font-family:inherit; font-weight:600; }
  [data-theme="dark"] kbd { background:#221c17; border-color:#2c2520; color:#b8aa92; }
  /* Brand mark */
  .brand-mark {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:9px;
    background: var(--accent-500); color:#fff; font-weight:800; font-size:14px; letter-spacing:-.02em;
  }

  /* ---- Recibo imprimible (window.print) ----
     #print-root está oculto en pantalla; al imprimir se oculta el resto
     de la app y solo sale el recibo. */
  #print-root { display: none; }
  @media print {
    body > *:not(#print-root) { display: none !important; }
    #print-root { display: block !important; }
    body { background: #fff !important; }
  }

  /* ---- Sidebar fija (desktop, fuera del POS) ----
     El shell ocupa exactamente el alto del viewport y solo el <main> scrollea;
     la sidebar (<aside>) queda fija. En POS, body.pos-active ya maneja su
     propio layout, por eso se excluye. En móvil (<1024px) el body scrollea
     normal y la sidebar está oculta. */
  @media (min-width: 1024px) {
    body:not(.pos-active) [data-theme-shell] { height: 100dvh; overflow: hidden; }
    body:not(.pos-active) [data-theme-shell] > main { height: 100dvh; overflow-y: auto; }
  }

  /* ---- Drawer de navegación móvil (<1024px) ---- */
  .vj-drawer { position:fixed; inset:0; z-index:60; visibility:hidden; }
  .vj-drawer.open { visibility:visible; }
  .vj-drawer-overlay { position:absolute; inset:0; background:rgba(26,22,20,.45); opacity:0; transition:opacity .2s ease; }
  .vj-drawer.open .vj-drawer-overlay { opacity:1; }
  .vj-drawer-panel {
    position:absolute; top:0; left:0; height:100%; width:272px; max-width:84vw;
    background:#fff; border-right:1px solid #ece5d8; display:flex; flex-direction:column;
    transform:translateX(-100%); transition:transform .22s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 16px 40px -16px rgb(26 22 20 / 0.25);
  }
  .vj-drawer.open .vj-drawer-panel { transform:none; }
  @media (min-width:1024px) { .vj-drawer { display:none; } }   /* nunca en escritorio */
  [data-theme="dark"] .vj-drawer-panel { background:#1f1a16; border-color:#2c2520; }

  /* ---- Responsive: tablas y modales en pantallas chicas ---- */
  /* Tablas anchas → scroll horizontal en móvil (el contenedor directo de la tabla
     se vuelve scrollable; las celdas no se parten para forzar el desbordamiento). */
  @media (max-width: 1023px) {
    :has(> table.t) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.t th, table.t td { white-space: nowrap; }
  }
  /* Formularios en modales: una sola columna en teléfono (evita campos apretados). */
  @media (max-width: 639px) {
    #modal-root .grid { grid-template-columns: 1fr !important; }
  }

  /* ---- Indicador de red (Fase 9, offline read-only) ---- */
  .vj-net { font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
  .vj-net-online { color:#4d7c3a; }                 /* discreto, verde apagado */
  .vj-net-online::before { content:''; width:7px; height:7px; border-radius:50%; background:#5a9e3f; display:inline-block; }
  .vj-net-bad { font-size:11px; }                   /* server-down / offline usan chips existentes */