/* ══════════════════════════════════════════════════════════════
   CAPA PREMIUM v6.6 — tema oscuro de lujo, glass, gráficas animadas,
   medidor radial, paleta de comandos, hero con medios.
   Reinterpreta la marca (olivo + dorado + tortilla) en modo noche.
   ══════════════════════════════════════════════════════════════ */

/* ---------- TEMA NOCHE (dark premium, on-brand) ---------- */
html[data-theme="dark"] {
  --primary: #c9d67f;          /* verde-lima luminoso para dark */
  --primary-dark: #0f1510;     /* fondo base carbón verdoso */
  --primary-light: #1a2417;    /* superficie verde oscura */
  --accent: #f9d24a;           /* dorado MASECA (rey del dark) */
  --accent-dark: #e8b923;
  --accent-light: #2a2410;
  --tortilla: #f0a830;
  --bg: #0c110b;               /* fondo app */
  --surface: #161d15;          /* tarjetas */
  --surface-alt: #1d271b;
  --border: #2a3626;
  --border-strong: #3a4a34;
  --text: #eaf1e2;
  --muted: #9db08c;
  --light: #6f8262;
  --success: #6ee7a8; --success-bg: #12301f;
  --warning: #f7c948; --warning-bg: #2e2610;
  --danger: #f2777a; --danger-bg: #331416;
  --info: #6db3f2; --info-bg: #10233a;
  --purple: #c39bf0; --purple-bg: #241832;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 12px 40px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(201,214,127,.30);
  --glass: rgba(30,39,27,.55);
  --glow-accent: 0 0 24px rgba(249,210,74,.25);
  --glow-primary: 0 0 24px rgba(201,214,127,.22);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 500px at 80% -8%, rgba(249,210,74,.10), transparent 60%),
    radial-gradient(900px 500px at -5% 10%, rgba(109,231,168,.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="dark"] #sidebar {
  background: linear-gradient(180deg, #131a11, #0d130c);
  border-right: 1px solid var(--border);
}
html[data-theme="dark"] #topbar { background: rgba(12,17,11,.75); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .tbl-wrap,
html[data-theme="dark"] .doc-card,
html[data-theme="dark"] .pos-item,
html[data-theme="dark"] .pos-cart {
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: var(--border);
}
html[data-theme="dark"] .card.tap:hover { box-shadow: var(--shadow-md), var(--glow-primary); }
html[data-theme="dark"] .kpi.k-info::before { box-shadow: 0 0 12px var(--info); }
html[data-theme="dark"] .btn-primary { background: linear-gradient(180deg,#d8e58f,#b4c76a); color:#12210a; box-shadow: var(--glow-primary); }
html[data-theme="dark"] .btn-accent { background: linear-gradient(180deg,#ffe07a,#f4c531); color:#2a1e00; box-shadow: var(--glow-accent); }
html[data-theme="dark"] .hero { background: linear-gradient(120deg, rgba(42,36,16,.6), rgba(22,29,21,.4) 60%, rgba(26,36,23,.6)); }
html[data-theme="dark"] code { background: var(--accent-light); color: var(--accent); }
html[data-theme="dark"] .cam { background:#0a0f08; }

/* transición suave al cambiar de tema */
body, #sidebar, .card, .kpi, #topbar, .btn-primary, .btn-accent, .hero { transition: background .35s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }

/* ---------- FIX CONTRASTE MODO NOCHE ----------
   En claro estos textos usan --primary-dark (verde oscuro, legible).
   En noche --primary-dark es casi negro → invisibles. Se aclaran aquí. */
html[data-theme="dark"] .page-head h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .kpi .val,
html[data-theme="dark"] .hero h2,
html[data-theme="dark"] .sheet-head h3,
html[data-theme="dark"] .cart-tot.big,
html[data-theme="dark"] .cita-box .cb-ley,
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--text); }
html[data-theme="dark"] .page-head h2 { color: #f2ead2; } /* títulos de página con calidez de marca */

/* ---------- MEDIDOR RADIAL (el "88 índice") ---------- */
.gauge-wrap { display: flex; align-items: center; gap: 16px; }
.gauge { --val: 0; --size: 108px; width: var(--size); height: var(--size); border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(var(--accent) calc(var(--val)*1%), var(--surface-alt) 0);
  display: flex; align-items: center; justify-content: center; transition: background 1s cubic-bezier(.2,.8,.2,1); }
.gauge::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 2px 8px rgba(0,0,0,.15); }
html[data-theme="dark"] .gauge::before { background: #10160e; }
.gauge .g-num { position: relative; z-index: 1; text-align: center; }
.gauge .g-num b { font-size: 30px; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .gauge .g-num b { color: var(--text); }
.gauge .g-num small { display: block; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: -2px; }
.gauge.g-green { background: conic-gradient(var(--success) calc(var(--val)*1%), var(--surface-alt) 0); }
.gauge.g-warn { background: conic-gradient(var(--warning) calc(var(--val)*1%), var(--surface-alt) 0); }
.gauge.g-bad { background: conic-gradient(var(--danger) calc(var(--val)*1%), var(--surface-alt) 0); }

/* ---------- GRÁFICA DE ÁREA ANIMADA ---------- */
.area-chart { width: 100%; display: block; }
.area-chart .a-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 1.4s ease forwards; }
.area-chart .a-fill { opacity: 0; animation: fadein .9s ease .5s forwards; }
.area-chart.acc .a-line { stroke: var(--accent-dark); }
.area-chart.green .a-line { stroke: var(--success); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
.kpi-spark { margin-top: 8px; height: 46px; }

/* ---------- HERO PREMIUM CON MEDIOS ---------- */
.hero-pro { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-md); margin-bottom: 16px; min-height: 220px; display: flex; align-items: flex-end; }
.hero-pro .hp-media { position: absolute; inset: 0; z-index: 0; }
.hero-pro .hp-media img, .hero-pro .hp-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-pro .hp-mesh { position: absolute; inset: 0; background:
  radial-gradient(600px 300px at 15% 10%, rgba(249,210,74,.35), transparent 60%),
  radial-gradient(500px 350px at 90% 90%, rgba(61,82,48,.55), transparent 60%),
  linear-gradient(120deg, #2a3a20, #46603a 45%, #e8a020 130%); }
.hero-pro .hp-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,14,8,.82) 0%, rgba(10,14,8,.5) 45%, rgba(10,14,8,.15) 100%); }
.hero-pro .hp-body { position: relative; z-index: 2; padding: 22px 24px; color: #fff; width: 100%; }
.hero-pro .hp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hero-pro .hp-badge { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 20px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); color: #fff; }
.hero-pro .hp-badge.live::before { content: "● "; color: #6ee7a8; }
.hero-pro h2 { font-family: Georgia, serif; font-size: 27px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero-pro .hp-sub { color: rgba(255,255,255,.85); font-size: 13.5px; margin-top: 3px; }
.hero-pro .hp-stats { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }
.hero-pro .hp-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.hero-pro .hp-stat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.7); }
.hero-pro .hp-logo { position: absolute; top: 18px; right: 20px; z-index: 2; width: 68px; height: 68px; border-radius: 50%; background: rgba(253,249,236,.92); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
@media (max-width: 640px){ .hero-pro .hp-logo { width: 52px; height: 52px; top: 14px; right: 14px; } .hero-pro h2 { font-size: 21px; } }

/* ---------- BOTONES IA + toggle tema ---------- */
.ai-btn { font: inherit; font-weight: 700; font-size: 13px; border: 1px solid var(--border-strong); background: linear-gradient(135deg, rgba(122,62,181,.14), rgba(44,107,176,.14)); color: var(--primary-dark); border-radius: 10px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: filter .15s, box-shadow .15s; }
html[data-theme="dark"] .ai-btn { color: var(--text); background: linear-gradient(135deg, rgba(195,155,240,.18), rgba(109,179,242,.14)); }
.ai-btn:hover { box-shadow: var(--shadow-md); filter: brightness(1.05); }
.ai-btn.solid { background: linear-gradient(135deg,#7a3eb5,#2c6bb0); color:#fff; border-color: transparent; }
.theme-btn { font-size: 16px; width: var(--touch); height: var(--touch); border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; box-shadow: var(--shadow); }

/* ---------- PALETA DE COMANDOS (⌘K) ---------- */
#cmdk-back { display: none; position: fixed; inset: 0; z-index: 600; background: rgba(6,9,5,.6); backdrop-filter: blur(4px); }
#cmdk-back.open { display: block; }
#cmdk { position: fixed; z-index: 601; left: 50%; top: 14vh; transform: translateX(-50%); width: min(620px, 92vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; display: none; }
#cmdk.open { display: block; animation: cmdkin .18s ease; }
@keyframes cmdkin { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
#cmdk input { width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent; padding: 16px 18px; font: inherit; font-size: 16px; color: var(--text); outline: none; }
#cmdk .cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
#cmdk .cmdk-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
#cmdk .cmdk-item .ic { width: 22px; text-align: center; font-size: 16px; }
#cmdk .cmdk-item small { margin-left: auto; color: var(--light); font-size: 11px; }
#cmdk .cmdk-item.sel, #cmdk .cmdk-item:hover { background: var(--primary-light); }
#cmdk .cmdk-empty { padding: 24px; text-align: center; color: var(--light); }
.cmdk-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; background: var(--surface); cursor: pointer; }
.cmdk-hint kbd { font: inherit; font-size: 10.5px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
@media (max-width: 860px){
  .cmdk-hint span.lbl { display:none; } .cmdk-hint kbd { display:none; }
  .ai-btn { padding: 8px 10px; } .ai-btn span.ai-lbl { display:none; }
  #topbar { flex-wrap: nowrap; gap: 6px; padding-left: 12px; padding-right: 12px; }
  #crumb { display: none; }
  .top-actions { gap: 4px; margin-left: auto; }
}

/* ---------- BANNER "MODO DEMO" flotante ---------- */
.demo-pill { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 170; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 30px; background: linear-gradient(135deg,#7a3eb5,#2c6bb0); color:#fff; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 7px; }
@media (max-width: 860px){ .demo-pill { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ---------- CÁMARAS ANIMADAS (efecto GIF en vivo) ---------- */
.cam .feed { animation: camdrift 6s ease-in-out infinite; }
@keyframes camdrift { 0%,100% { transform: scale(1) translateX(0); } 50% { transform: scale(1.06) translateX(4px); } }
.cam::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  background-size: 300% 100%; animation: camsweep 5s linear infinite; }
@keyframes camsweep { to { background-position: -300% 0; } }
.cam .scan { animation: scanmove 8s linear infinite; }
@keyframes scanmove { to { background-position: 0 14px; } }
.cam.offline .feed, .cam.offline::after { animation: none; }
.cam .noise { position: absolute; inset: 0; z-index: 1; opacity: .05; pointer-events: none;
  background-image: repeating-conic-gradient(#fff 0 0.0002%, transparent 0 0.0004%); background-size: 4px 4px; animation: noiseflik .4s steps(3) infinite; }
@keyframes noiseflik { to { transform: translate(2px, 1px); } }
.cam .motion { position: absolute; z-index: 3; width: 10px; height: 10px; border-radius: 50%; background: rgba(110,231,168,.8); box-shadow: 0 0 10px rgba(110,231,168,.9); animation: motionpath 9s ease-in-out infinite; }
@keyframes motionpath { 0% { left: 12%; top: 70%; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { left: 82%; top: 40%; opacity:0; } }

/* sensor con aguja/valor animado */
.sensor .val-live { transition: color .3s; }
.sensor .gauge { transition: border-color .4s; }

/* ---------- GALERÍA DE MEDIOS ---------- */
.med-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.med-card { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: pointer; box-shadow: var(--shadow); transition: transform .14s, box-shadow .18s; }
.med-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.med-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--surface-alt); }
.med-card figcaption { padding: 9px 12px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.med-card .med-ar { font-size: 10px; font-weight: 700; color: var(--light); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

/* miniatura de producto/insumo/equipo dentro de tarjetas existentes */
.thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 8px; background: var(--surface-alt); }
.thumb-sm { width: 46px; height: 46px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.pos-item .pos-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }

/* ---------- MÓDULO INTELIGENCIA DE COSTOS ---------- */
.cost-row { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.cost-row .cr-name strong { font-size: 14px; } .cost-row .cr-name small { color: var(--muted); font-size: 12px; }
.cost-row .cr-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--primary-dark); text-align: right; }
html[data-theme="dark"] .cost-row .cr-val { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   v7.0 — LIQUID GLASS & MOTION
   Material de vidrio líquido (estilo iOS) + animaciones de entrada,
   micro-interacciones de hover, fotos de insumos e imágenes vivas.
   ══════════════════════════════════════════════════════════════ */
:root {
  --lg-blur: 18px;
  --lg-sat: 1.35;
  --lg-sheen-lite: rgba(255,255,255,.55);
  --lg-hair-lite: rgba(255,255,255,.9);
  --lg-sheen-dark: rgba(255,255,255,.10);
  --ease-glass: cubic-bezier(.2,.8,.2,1);
}

/* ---- Material liquid glass: superficie translúcida con brillo especular ---- */
.card, .kpi, .pos-item, .pos-cart, .tbl-wrap, .doc-card, .med-card {
  position: relative;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow: var(--shadow), inset 0 1px 0 var(--lg-hair-lite), inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .28s var(--ease-glass), box-shadow .28s var(--ease-glass), border-color .2s ease;
  will-change: transform;
}
/* tema claro: cristal blanco esmerilado sobre el fondo */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .kpi,
html:not([data-theme="dark"]) .pos-item,
html:not([data-theme="dark"]) .pos-cart,
html:not([data-theme="dark"]) .doc-card,
html:not([data-theme="dark"]) .med-card {
  background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
}
/* fondo con mesh sutil para que el cristal tenga qué difuminar (tema claro) */
html:not([data-theme="dark"]) body {
  background:
    radial-gradient(900px 480px at 88% -6%, rgba(249,210,74,.16), transparent 60%),
    radial-gradient(760px 460px at -6% 8%, rgba(70,96,58,.10), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
/* tema oscuro: brillo especular más tenue */
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .pos-item,
html[data-theme="dark"] .pos-cart,
html[data-theme="dark"] .tbl-wrap,
html[data-theme="dark"] .doc-card,
html[data-theme="dark"] .med-card {
  box-shadow: var(--shadow), inset 0 1px 0 var(--lg-sheen-dark), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ---- Barrido de luz "líquido" que recorre las tarjetas al pasar el cursor ---- */
.card, .kpi, .pos-item, .med-card { overflow: hidden; }
.card::after, .kpi::after, .pos-item::after, .med-card::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.05) 55%, transparent 70%);
  background-size: 250% 100%; background-position: 200% 0; opacity: 0;
  transition: opacity .3s ease;
}
html[data-theme="dark"] .card::after, html[data-theme="dark"] .kpi::after,
html[data-theme="dark"] .pos-item::after, html[data-theme="dark"] .med-card::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, rgba(249,210,74,.06) 55%, transparent 70%);
  background-size: 250% 100%; background-position: 200% 0;
}
.card:hover::after, .kpi:hover::after, .pos-item:hover::after, .med-card:hover::after {
  opacity: 1; animation: lgSheen .8s var(--ease-glass);
}
@keyframes lgSheen { from { background-position: 200% 0; } to { background-position: -60% 0; } }

/* ---- Elevación al hover (todo el sistema se siente vivo) ---- */
.card:hover, .kpi:hover, .med-card:hover, .doc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--lg-hair-lite), inset 0 0 0 1px rgba(255,255,255,.4);
}
html[data-theme="dark"] .card:hover, html[data-theme="dark"] .kpi:hover, html[data-theme="dark"] .med-card:hover {
  box-shadow: var(--shadow-md), var(--glow-primary), inset 0 1px 0 var(--lg-sheen-dark);
}

/* ---- ANIMACIÓN DE ENTRADA: los bloques suben y aparecen escalonados ---- */
#content > * { animation: lgRise .5s var(--ease-glass) backwards; }
#content > *:nth-child(1){ animation-delay:.02s } #content > *:nth-child(2){ animation-delay:.08s }
#content > *:nth-child(3){ animation-delay:.14s } #content > *:nth-child(4){ animation-delay:.20s }
#content > *:nth-child(5){ animation-delay:.26s } #content > *:nth-child(6){ animation-delay:.32s }
#content > *:nth-child(n+7){ animation-delay:.36s }
@keyframes lgRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
/* filas de tabla e items del POS entran con más gracia */
.tbl tr { animation: lgFade .5s ease backwards; }
.tbl tr:nth-child(1){animation-delay:.05s}.tbl tr:nth-child(2){animation-delay:.09s}.tbl tr:nth-child(3){animation-delay:.13s}
.tbl tr:nth-child(4){animation-delay:.17s}.tbl tr:nth-child(5){animation-delay:.21s}.tbl tr:nth-child(6){animation-delay:.25s}
.tbl tr:nth-child(7){animation-delay:.29s}.tbl tr:nth-child(n+8){animation-delay:.33s}
@keyframes lgFade { from { opacity: 0; } to { opacity: 1; } }
.pos-grid .pos-item { animation: lgPop .45s var(--ease-glass) backwards; }
.pos-grid .pos-item:nth-child(1){animation-delay:.04s}.pos-grid .pos-item:nth-child(2){animation-delay:.09s}
.pos-grid .pos-item:nth-child(3){animation-delay:.14s}.pos-grid .pos-item:nth-child(4){animation-delay:.19s}
.pos-grid .pos-item:nth-child(5){animation-delay:.24s}.pos-grid .pos-item:nth-child(6){animation-delay:.29s}
.pos-grid .pos-item:nth-child(n+7){animation-delay:.33s}
@keyframes lgPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---- POS: foto con zoom suave e interacción táctil ---- */
.pos-item { cursor: pointer; }
.pos-item .pos-thumb { transition: transform .4s var(--ease-glass); }
.pos-item:hover .pos-thumb { transform: scale(1.07); }
.pos-item:active { transform: scale(.97); }

/* ---- FOTOS DE INSUMOS en el inventario ---- */
.tbl-inv td.inv-th { width: 60px; padding-right: 4px; position: relative; }
.inv-thumb {
  width: 48px; height: 48px; object-fit: cover; border-radius: 12px; display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.35);
  background: var(--surface-alt); transition: transform .28s var(--ease-glass), box-shadow .28s ease;
  cursor: zoom-in;
}
/* el contenedor deja salir la miniatura ampliada */
.tbl-wrap:has(.tbl-inv) { overflow: visible; }
/* zoom fuerte al pasar el cursor: crece ~3× hacia la derecha para identificar el producto */
.tbl-inv tr:hover .inv-th { z-index: 40; }
.tbl-inv tr:hover .inv-thumb {
  transform: scale(3.1); transform-origin: left center; position: relative; z-index: 40;
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.7), inset 0 0 0 1px rgba(0,0,0,.1);
}
html[data-theme="dark"] .tbl-inv tr:hover .inv-thumb { box-shadow: 0 22px 55px rgba(0,0,0,.75), 0 0 0 3px rgba(249,210,74,.65); }
.inv-emoji { display: flex; align-items: center; justify-content: center; font-size: 24px; }
.tbl-inv tr:hover td { background: rgba(127,150,110,.10); }

/* ---- Botones con brillo que se desliza ---- */
.btn-primary, .btn-accent, .btn-block, .ai-btn.solid { position: relative; overflow: hidden; }
.btn-primary::after, .btn-accent::after, .ai-btn.solid::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); transition: none;
}
.btn-primary:hover::after, .btn-accent:hover::after, .ai-btn.solid:hover::after { animation: btnShine .7s ease; }
@keyframes btnShine { from { left: -80%; } to { left: 130%; } }

/* ---- Chips / categorías POS: transición suave al activar ---- */
.chip { transition: transform .18s var(--ease-glass), box-shadow .2s ease, background .2s ease; }
.chip:hover { transform: translateY(-1px); }
.chip.active { box-shadow: var(--glow-accent, 0 4px 14px rgba(249,210,74,.3)); }

/* ---- Item activo del sidebar: píldora de cristal con latido de luz ---- */
#sb-nav .nav-item.active, #sb-nav a.active, #sb-nav .active {
  position: relative;
}
#sb-nav .active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 3px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent); animation: navPulse 2.4s ease-in-out infinite;
}
@keyframes navPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; box-shadow: 0 0 16px var(--accent); } }

/* ---- Imágenes que aparecen con desvanecido al cargar (evita el "flash") ---- */
.pos-thumb, .inv-thumb, .thumb, .med-card img, .hero-pro img {
  animation: imgIn .6s ease backwards;
}
@keyframes imgIn { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }

/* ---- KPIs: valor con leve resplandor en oscuro ---- */
html[data-theme="dark"] .kpi .val { text-shadow: 0 0 18px rgba(201,214,127,.15); }

/* ---- VITRINA DE PLATILLOS en la landing pública ---- */
.pl-showcase-title { text-align: center; font-family: Georgia, serif; font-size: 26px; color: var(--primary-dark); }
html[data-theme="dark"] .pl-showcase-title { color: var(--text); }
.pl-showcase-sub { text-align: center; color: var(--muted); font-size: 14px; margin: 4px 0 20px; }
.pl-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
.pl-shot { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.4);
  cursor: default; transition: transform .3s var(--ease-glass), box-shadow .3s ease; animation: lgPop .5s var(--ease-glass) backwards; }
.pl-shot:nth-child(2){animation-delay:.06s}.pl-shot:nth-child(3){animation-delay:.12s}.pl-shot:nth-child(4){animation-delay:.18s}.pl-shot:nth-child(5){animation-delay:.24s}.pl-shot:nth-child(6){animation-delay:.3s}
.pl-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .5s var(--ease-glass); }
.pl-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 12px; color: #fff; font-weight: 700; font-size: 14px;
  background: linear-gradient(transparent, rgba(8,10,6,.78)); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pl-shot:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), var(--glow-accent, 0 12px 34px rgba(249,210,74,.3)), inset 0 0 0 1px rgba(255,255,255,.5); }
.pl-shot:hover img { transform: scale(1.08); }
@media (max-width: 640px){ .pl-showcase { grid-template-columns: repeat(2, 1fr); gap: 10px; } .pl-showcase-title { font-size: 22px; } }

/* ---- ANIMACIÓN DE APERTURA (splash de alta calidad) ---- */
#splash {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 28%, #33481f 0%, #1a260f 52%, #0b1207 100%);
  animation: splashHide 2.35s ease forwards;
}
#splash .sp-glow {
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,210,74,.38), rgba(249,210,74,.06) 55%, transparent 70%);
  filter: blur(14px); animation: spGlow 2.35s ease forwards;
}
#splash .sp-inner { position: relative; text-align: center; padding: 0 24px; }
#splash .sp-logo-holder {
  width: 180px; height: 180px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; background: #fdf9ec;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 9px rgba(249,210,74,.42), inset 0 0 0 1px rgba(255,255,255,.4);
  animation: spLogoIn 1s cubic-bezier(.2,.9,.25,1.25) both, spFloat 3.4s ease-in-out 1s infinite;
}
#splash .sp-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
#splash .sp-name {
  font-family: Georgia, serif; font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #f6e8ad;
  text-shadow: 0 2px 24px rgba(0,0,0,.55); opacity: 0; animation: spRise .8s ease .45s forwards;
}
#splash .sp-lema { font-size: 14px; font-style: italic; color: rgba(255,255,255,.82); margin-top: 5px; opacity: 0; animation: spRise .8s ease .65s forwards; }
#splash.done { display: none !important; }
@keyframes spLogoIn { from { opacity: 0; transform: scale(.68) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes spFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes spRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spGlow { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 68% { opacity: .95; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes splashHide { 0%, 74% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  #splash { animation: splashHide 1s ease forwards; }
  #splash .sp-logo-holder, #splash .sp-name, #splash .sp-lema, #splash .sp-glow { animation: none; opacity: 1; }
}

/* ---- Video vivo en fichas de equipo (foto→hover reproduce) ---- */
.eq-vid { cursor: pointer; }
.card:has(> .eq-vid) { position: relative; }
.card:has(> .eq-vid)::before {
  content: "▶"; position: absolute; top: 14px; left: 14px; z-index: 6;
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,6,.55); color: #fff; font-size: 11px; padding-left: 2px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.4); pointer-events: none;
}

/* ---- BOXES EXPLICABLES (clic → hoja que explica el dato) ---- */
.expl-card { cursor: pointer; }
.expl-card .lb::after { content: "ⓘ"; margin-left: auto; opacity: .4; font-weight: 700; font-size: 12px; transition: opacity .2s; }
.expl-card:hover .lb::after { opacity: .95; }
.expl-card .gauge-wrap { position: relative; }
.expl .expl-val { font-size: 34px; font-weight: 800; font-family: Georgia, serif; color: var(--primary-dark); margin-bottom: 6px; line-height: 1; }
html[data-theme="dark"] .expl .expl-val { color: var(--accent); }
.expl .expl-que { font-size: 14px; color: var(--text); margin-bottom: 8px; line-height: 1.55; }
.expl .expl-row { border-top: 1px solid var(--border); padding: 12px 0 4px; }
.expl .expl-k { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 800; margin-bottom: 5px; }
.expl .expl-v { font-size: 13.5px; color: var(--text); line-height: 1.55; }
.expl .expl-v strong { color: var(--primary-dark); }
html[data-theme="dark"] .expl .expl-v strong { color: var(--accent); }

/* ---- REPORTES EXPORTABLES (PDF vía impresión) ---- */
.rp-actions { margin: -4px 0 14px; }
#print-report { display: none; position: fixed; inset: 0; z-index: 800; background: #eef0ea; color: #14180f; overflow-y: auto; }
body.rp-open { overflow: hidden; }
#print-report .rp-toolbar { position: sticky; top: 0; display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; background: #14180f; }
#print-report .rp-page { max-width: 780px; margin: 20px auto 60px; background: #fff; color: #14180f; padding: 40px 44px; box-shadow: 0 10px 40px rgba(0,0,0,.25); border-radius: 6px; }
#print-report .rp-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid #3d5230; padding-bottom: 14px; }
#print-report .rp-brandbox { flex: 1; }
#print-report .rp-brand { font-family: Georgia, serif; font-size: 22px; font-weight: 800; color: #3d5230; letter-spacing: .5px; }
#print-report .rp-lema { font-size: 12px; color: #7a8567; font-style: italic; }
#print-report .rp-meta { font-size: 11px; color: #666; text-align: right; text-transform: uppercase; letter-spacing: .5px; }
#print-report .rp-title { font-family: Georgia, serif; font-size: 26px; margin: 22px 0 2px; color: #14180f; }
#print-report .rp-sub { font-size: 13px; color: #555; margin-bottom: 18px; }
#print-report .rp-sec { margin-top: 20px; }
#print-report .rp-sec h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #3d5230; margin-bottom: 8px; }
#print-report .rp-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#print-report .rp-tbl th { text-align: left; background: #f3f5ee; color: #3d5230; padding: 9px 12px; border-bottom: 2px solid #d9e0cd; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
#print-report .rp-tbl td { padding: 9px 12px; border-bottom: 1px solid #ececec; }
#print-report .rp-tbl .rp-num { text-align: right; font-variant-numeric: tabular-nums; }
#print-report .rp-tbl .rp-tot td { border-top: 2px solid #3d5230; border-bottom: none; font-weight: 800; background: #f7f9f2; }
#print-report .rp-foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid #ddd; font-size: 11px; color: #888; }
@media print {
  body.rp-open > *:not(#print-report) { display: none !important; }
  #print-report { position: static; overflow: visible; background: #fff; }
  #print-report .rp-toolbar { display: none !important; }
  #print-report .rp-page { box-shadow: none; margin: 0; max-width: none; padding: 0; border-radius: 0; }
  @page { margin: 16mm; }
}

/* ---- Respeta a quien prefiere menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  #content > *, .tbl tr, .pos-grid .pos-item, .pos-thumb, .inv-thumb, .thumb, .med-card img, .hero-pro img, .pl-shot { animation: none !important; }
  .card, .kpi, .pos-item, .med-card, .pl-shot { transition: none; }
  #sb-nav .active::before, .cam .feed, .cam::after, .cam .scan, .cam .noise, .cam .motion { animation: none !important; }
}