/* =============================================================================
   styles.css — Estudio de analgesia post-endodóntica
   Glassmorphism pastel médico · tema claro por defecto + oscuro · A=azul / B=naranja
============================================================================= */

/* ---- Fuentes self-hosted (offline, sin CDN) ---- */
@font-face{font-family:'Inter';src:url('fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Space Grotesk';src:url('fonts/spacegrotesk-latin.woff2') format('woff2');font-weight:300 700;font-display:swap;font-style:normal}

/* ============================ TOKENS (claro) ============================ */
:root{
  --primary:#0ea5a5;            /* teal médico */
  --primary-2:#0891b2;
  --primary-ink:#03595a;
  --gA:#2563eb;                 /* Grupo A — azul */
  --gA-soft:rgba(37,99,235,.12);
  --gB:#ea580c;                 /* Grupo B — naranja */
  --gB-soft:rgba(234,88,12,.12);
  --ok:#0f9d6b; --warn:#c07a12; --danger:#dc4d5f; --info:#3b82f6;

  --bg:#eef3f6; --bg2:#e6eef1;
  --card:rgba(255,255,255,.62);
  --card-solid:#ffffff;
  --raise:rgba(255,255,255,.85);
  --line:rgba(15,45,60,.12);
  --line2:rgba(15,45,60,.07);
  --txt:#0f2231; --mut:#4d6472; --dim:#7d94a1;

  --radius:20px; --radius-sm:13px; --radius-xs:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.34,1.4,.5,1);
  --shadow-sm:0 2px 10px rgba(20,60,80,.07);
  --shadow:0 12px 32px -14px rgba(20,60,80,.28);
  --shadow-lg:0 30px 70px -24px rgba(20,60,80,.4);
  --glass-blur:blur(14px) saturate(1.4);
  --specular:inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.3);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%);
  --grad:linear-gradient(120deg,var(--primary),var(--primary-2));
  --navh:70px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --disp:'Space Grotesk','Inter',sans-serif;

  /* Hace que los controles nativos (desplegables, calendarios, scrollbars)
     se pinten en claro. Sin esto, en oscuro el popup del <select> sale
     con fondo blanco y texto claro = ilegible. */
  color-scheme:light;
}
/* ============================ TOKENS (oscuro) ============================ */
[data-tema="oscuro"]{
  color-scheme:dark;
  --primary:#2dd4c4; --primary-2:#22b8d6; --primary-ink:#bff3ee;
  --gA:#60a5fa; --gA-soft:rgba(96,165,250,.16);
  --gB:#fb923c; --gB-soft:rgba(251,146,60,.16);
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171; --info:#60a5fa;

  --bg:#0a1420; --bg2:#0d1a28;
  --card:rgba(255,255,255,.045);
  --card-solid:#101d2c;
  --raise:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.06);
  --txt:#eaf3f7; --mut:#9db2be; --dim:#6c8492;

  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow:0 16px 40px -18px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.8);
  --specular:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 46%);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--txt); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; overflow-x:hidden;
}
/* malla suave estática (no anima; barata en iOS) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 6% 2%, color-mix(in srgb,var(--primary) 26%,transparent), transparent 60%),
    radial-gradient(42vw 42vw at 98% 6%, color-mix(in srgb,var(--gA) 20%,transparent), transparent 62%),
    radial-gradient(50vw 50vw at 88% 100%, color-mix(in srgb,var(--gB) 16%,transparent), transparent 64%),
    radial-gradient(46vw 46vw at 0% 100%, color-mix(in srgb,var(--primary) 18%,transparent), transparent 62%);
  filter:saturate(.92);
}
[data-tema="oscuro"] body::before{filter:saturate(1) brightness(.8)}
h1,h2,h3,h4{font-family:var(--disp); letter-spacing:-.02em; margin:0; font-weight:600}
a{color:var(--primary-2); text-decoration:none}
.num{font-family:var(--disp); font-variant-numeric:tabular-nums}
.small{font-size:.8rem} .mut{color:var(--mut)} .dim{color:var(--dim)}
.center{text-align:center}
.row{display:flex; gap:12px; align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:12px}
.grow{flex:1}
.hide{display:none !important}

/* scrollbars */
*{scrollbar-width:thin; scrollbar-color:color-mix(in oklab,var(--primary) 50%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;background-clip:padding-box;background-color:color-mix(in oklab,var(--primary) 50%,var(--primary-2))}
::-webkit-scrollbar-thumb:hover{background-color:var(--primary)}

/* ============================ CARDS ============================ */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow),var(--specular);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.card.solid{background:color-mix(in srgb,var(--card-solid) 92%,transparent)}
.card h3{font-size:1.02rem; margin-bottom:4px}
.card .lead{color:var(--mut); font-size:.86rem}
.grid{display:grid; gap:16px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
/* Rejilla fluida: se reacomoda sola según el ancho disponible, sin el salto
   brusco del media query. Al hacer zoom las secciones no se mueven de golpe. */
.grid.fluid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.section-title{font-family:var(--disp); font-size:1.3rem; margin:2px 0 2px}
.section-sub{color:var(--mut); font-size:.88rem; margin-bottom:4px}

.stat{display:flex; flex-direction:column; gap:2px}
.stat .k{color:var(--mut); font-size:.78rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase}
.stat .v{font-family:var(--disp); font-size:2rem; font-weight:600; line-height:1.05}
.stat .sub{color:var(--dim); font-size:.78rem}

/* ============================ BOTONES ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:600; font-size:.9rem; cursor:pointer;
  padding:10px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--raise); color:var(--txt); transition:transform .12s var(--ease), box-shadow .2s, background .2s;
  box-shadow:var(--shadow-sm),var(--specular); text-decoration:none; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 10px 24px -10px var(--primary),var(--specular)}
.btn-primary:hover{box-shadow:0 14px 30px -10px var(--primary),var(--specular)}
.btn-danger{background:linear-gradient(120deg,#e05a6b,#d0415a); color:#fff; border-color:transparent}
.btn-ghost{background:transparent; box-shadow:none}
.btn-wa{background:#25d366; color:#fff; border-color:transparent}
.btn-sm{padding:6px 11px; font-size:.82rem}
.btn-lg{padding:13px 22px; font-size:1rem}
.btn-block{width:100%}
.icon-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:18px;color:var(--txt);box-shadow:var(--shadow-sm)}
#outSide:hover{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent)}

/* Aviso de nueva versión. Se sienta encima de la botnav para no taparla. */
.upd-banner{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 20px); z-index:70;
  display:flex; align-items:center; gap:14px; max-width:92vw;
  background:var(--grad); color:#fff; padding:12px 16px; border-radius:14px;
  box-shadow:var(--shadow-lg),var(--specular); font-size:.88rem; font-weight:600;
  animation:pop .28s var(--ease-bounce)}
/* Botón blanco sobre el degradado teal en ambos temas: el texto va fijo,
   porque --primary-ink es menta claro en oscuro y sería ilegible sobre blanco. */
.upd-banner button{flex:none; border:0; cursor:pointer; font-family:var(--font);
  background:#fff; color:#03595a; padding:8px 14px; border-radius:9px; font-weight:700}
@media(min-width:1024px){ .upd-banner{bottom:24px} }   /* 1024 = donde desaparece la botnav */

/* ============================ FORMS ============================ */
label{display:block; font-size:.82rem; font-weight:600; color:var(--mut); margin-bottom:6px}
.field{margin-bottom:14px}
input,select,textarea{
  width:100%; font-family:var(--font); font-size:.95rem; color:var(--txt);
  padding:11px 13px; border-radius:var(--radius-xs); border:1px solid var(--line);
  background:var(--card-solid); transition:border .2s, box-shadow .2s; outline:none;
}
[data-tema="oscuro"] input,[data-tema="oscuro"] select,[data-tema="oscuro"] textarea{background:rgba(255,255,255,.05)}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 24%,transparent)}
input.err,select.err{border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}

/* Casillas y radios: NO deben heredar el estilo de campo de texto.
   Heredaban padding/borde/fondo y, al enfocarlos, el box-shadow animado de
   `input:focus` producía un parpadeo. Aquí se resetean y se usa accent-color. */
input[type="checkbox"],input[type="radio"]{
  width:18px; height:18px; min-width:18px; flex:0 0 auto;
  padding:0; border:0; border-radius:0; background:none;
  accent-color:var(--primary); cursor:pointer; transition:none;
}
input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:none; border:0}
/* el foco nativo vuelve, pero solo al navegar con teclado */
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

/* El desplegable nativo hereda el fondo translúcido del select y queda
   ilegible en oscuro: se fija fondo sólido y color de texto. */
select{cursor:pointer}
select option,select optgroup{background:var(--card-solid); color:var(--txt)}
/* En oscuro, el icono del calendario/reloj es negro sobre fondo negro. */
[data-tema="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-tema="oscuro"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(1); opacity:.65; cursor:pointer}
[data-tema="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-tema="oscuro"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{opacity:1}
textarea{resize:vertical; min-height:70px}
.hint{font-size:.76rem; color:var(--dim); margin-top:5px}
.hint.error{color:var(--danger); font-weight:600}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:44px}
.pass-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; padding:8px; color:var(--mut); display:inline-flex; opacity:.7}
.pass-eye:hover{opacity:1}

/* segmentos (grupo A/B, sexo…) */
/* Segmentado (Sí/No, sexo, severidad).
   nowrap => al hacer zoom las opciones NO se parten en dos líneas ni corren la sección.
   Borde con contraste real: antes usaba --line y los botones se leían como uno solo. */
.seg{display:flex; gap:10px; flex-wrap:nowrap}
.seg .opt{
  flex:1 1 0; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:11px 10px; border-radius:var(--radius-xs);
  border:1.5px solid color-mix(in srgb,var(--txt) 20%,transparent);
  background:var(--card-solid); cursor:pointer; font-weight:600; font-size:.9rem;
  transition:.18s; color:var(--txt); user-select:none;
}
.seg .opt:hover{border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
.seg .opt.on{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 15%,transparent); color:var(--primary); font-weight:700}
.seg .opt.on::before{content:"✓"; margin-right:6px; font-weight:800}
.seg .opt.gA.on{border-color:var(--gA); background:var(--gA-soft); color:var(--gA)}
.seg .opt.gB.on{border-color:var(--gB); background:var(--gB-soft); color:var(--gB)}

/* ============================ BADGES / CHIPS ============================ */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:700; border:1px solid var(--line); background:var(--card)}
.badge.gA{color:var(--gA); background:var(--gA-soft); border-color:color-mix(in srgb,var(--gA) 30%,transparent)}
.badge.gB{color:var(--gB); background:var(--gB-soft); border-color:color-mix(in srgb,var(--gB) 30%,transparent)}
.badge.ok{color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); border-color:transparent}
.badge.warn{color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent); border-color:transparent}
.badge.danger{color:var(--danger); background:color-mix(in srgb,var(--danger) 14%,transparent); border-color:transparent}
.badge.mut{color:var(--mut)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.gA{background:var(--gA)} .dot.gB{background:var(--gB)}

.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--card-solid); font-size:.84rem; cursor:pointer}
.chip.on{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-ink); font-weight:600}
.chip .rm{color:var(--danger); font-weight:800; cursor:pointer}

/* ============================ PROGRESO ============================ */
.progress{height:14px; border-radius:999px; background:color-mix(in srgb,var(--txt) 8%,transparent); overflow:hidden; position:relative}
.progress > i{display:block; height:100%; border-radius:999px; background:var(--grad); transition:width 1s var(--ease)}
.balance{display:flex; height:34px; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.balance > i{display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.82rem; transition:flex-basis 1s var(--ease)}
.balance .a{background:var(--gA)} .balance .b{background:var(--gB)}

/* ============================ EVA SLIDER (cinematográfico) ============================ */
.eva{display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 0}
.eva .eva-num{font-family:var(--disp); font-weight:700; font-size:5.4rem; line-height:1; letter-spacing:-.03em; transition:color .18s linear; text-shadow:0 6px 30px color-mix(in srgb,currentColor 35%,transparent)}
.eva .eva-scale{font-size:.8rem; color:var(--dim); font-weight:600}
.eva-range{-webkit-appearance:none; appearance:none; width:100%; height:16px; border-radius:999px; outline:none; margin:8px 0; cursor:pointer;
  background:linear-gradient(90deg,#12b76a,#7cc70a,#eab308,#f59e0b,#ef4444);}
.eva-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:34px; height:34px; border-radius:50%; background:#fff; border:3px solid currentColor; box-shadow:0 4px 14px rgba(0,0,0,.28); cursor:grab}
.eva-range::-moz-range-thumb{width:34px; height:34px; border-radius:50%; background:#fff; border:3px solid var(--primary); box-shadow:0 4px 14px rgba(0,0,0,.28); cursor:grab}
.eva-range:active::-webkit-slider-thumb{cursor:grabbing}
.eva-ticks{display:flex; justify-content:space-between; width:100%; font-size:.68rem; color:var(--dim); padding:0 2px}
/* Sin responder: ni número ni color. Obliga a marcar el valor a conciencia. */
.eva .eva-num.eva-vacio{color:var(--dim); text-shadow:none; opacity:.55}
.eva-hint{font-size:.76rem; color:var(--warn); font-weight:600; margin-top:6px; text-align:center}

/* ============================ TIMELINE ============================ */
.timeline{display:flex; gap:0; align-items:flex-start; overflow-x:auto; padding:8px 2px 4px}
.tl-node{flex:1; min-width:78px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative}
.tl-node::before{content:""; position:absolute; top:16px; left:-50%; width:100%; height:3px; background:var(--line)}
.tl-node:first-child::before{display:none}
.tl-dot{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; border:2px solid var(--line); background:var(--card-solid); position:relative; z-index:1}
.tl-node.done .tl-dot{background:var(--ok); border-color:var(--ok); color:#fff}
.tl-node.done::before{background:var(--ok)}
.tl-node.pend .tl-dot{border-color:var(--dim); color:var(--dim)}
.tl-node.venc .tl-dot{background:var(--danger); border-color:var(--danger); color:#fff; animation:pulseVenc 1.6s infinite}
.tl-lbl{font-size:.72rem; margin-top:6px; font-weight:600; color:var(--mut)}
.tl-val{font-size:.72rem; color:var(--dim)}
@keyframes pulseVenc{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 55%,transparent)}50%{box-shadow:0 0 0 7px transparent}}

/* ============================ TABLA ============================ */
.tbl-wrap{overflow-x:auto; border-radius:var(--radius-sm)}
table.tbl{width:100%; border-collapse:collapse; font-size:.88rem}
table.tbl th,table.tbl td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line2)}
table.tbl th{font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); font-weight:700; position:sticky; top:0; background:var(--card)}
table.tbl tr:hover td{background:color-mix(in srgb,var(--primary) 5%,transparent)}
table.tbl td .code{font-family:var(--disp); font-weight:600}
.rowlink{cursor:pointer}

/* ============================ TABS ============================ */
.tabs{display:flex; gap:6px; background:var(--card); padding:5px; border-radius:14px; border:1px solid var(--line); width:fit-content; max-width:100%; overflow-x:auto}
.tabs button{border:0; background:transparent; padding:9px 16px; border-radius:10px; font-weight:600; color:var(--mut); cursor:pointer; font-family:var(--font); font-size:.88rem; white-space:nowrap}
.tabs button.on{background:var(--grad); color:#fff; box-shadow:0 6px 16px -8px var(--primary)}
.tabs button:disabled{opacity:.55; cursor:not-allowed}

/* ============================ EMPTY / LOCK ============================ */
.empty{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:38px 18px; color:var(--mut)}
.empty .ee{font-size:44px; opacity:.85}
.lockbox{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:40px 22px}
.lockbox .lk{font-size:50px}

/* ============================ ALERTAS ============================ */
.alert{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius-xs); border:1px solid var(--line); background:var(--card); font-size:.88rem}
.alert.venc{border-color:color-mix(in srgb,var(--danger) 40%,transparent); background:color-mix(in srgb,var(--danger) 8%,transparent)}
.alert.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:color-mix(in srgb,var(--warn) 9%,transparent)}
.alert .ai{font-size:18px; line-height:1.3}

/* ============================ CHART ============================ */
.chart-box{position:relative; width:100%; min-height:240px}
.chart-box canvas{max-width:100%}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--mut); margin-top:6px}
.legend span{display:inline-flex; align-items:center; gap:6px}

/* ============================ LAYOUT SHELL ============================ */
.shell{display:block; min-height:100dvh}
.sidenav{display:none}
.app{min-height:100dvh; padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 8px)}
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:calc(11px + env(safe-area-inset-top)) 16px 11px;
  background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--line);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.topbar .brand{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:600; font-size:1.05rem}
.topbar .brand svg{width:26px; height:26px}
.view{padding:18px 16px 8px; max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:16px; animation:fade .35s var(--ease) both}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* bottom nav + FAB (móvil) */
.fab{position:fixed; right:18px; bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 14px); z-index:45; width:58px; height:58px; border-radius:50%; border:0; background:var(--grad); color:#fff; font-size:30px; line-height:1; cursor:pointer; box-shadow:0 12px 26px -8px var(--primary); display:flex; align-items:center; justify-content:center}
.fab:active{transform:scale(.94)}
.botnav{position:fixed; left:0; right:0; bottom:0; z-index:40; height:calc(var(--navh) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:color-mix(in srgb,var(--bg) 78%,transparent); border-top:1px solid var(--line); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--specular)}
.botnav a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.62rem; color:var(--dim); cursor:pointer; padding-top:6px; font-weight:600}
.botnav a .ni{font-size:1.2rem; transition:.3s var(--ease)}
.botnav a.on{color:var(--primary)}
.botnav a.on .ni{transform:translateY(-2px); filter:drop-shadow(0 0 7px var(--primary))}

/* ============================ ESCRITORIO ============================ */
@media(min-width:1024px){
  :root{--navh:0px}
  .botnav,.fab,.topbar{display:none}
  .shell{display:grid; grid-template-columns:250px minmax(0,1fr)}
  .sidenav{display:flex; flex-direction:column; gap:6px; padding:20px 14px; position:sticky; top:0; height:100dvh; border-right:1px solid var(--line); background:var(--card); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--specular)}
  .sidenav .side-brand{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:600; font-size:1.15rem; padding:6px 8px 14px}
  .sidenav .side-brand svg{width:30px; height:30px}
  .sidenav a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; color:var(--mut); font-weight:600; cursor:pointer; font-size:.92rem; transition:.16s}
  .sidenav a:hover{background:color-mix(in srgb,var(--primary) 8%,transparent); color:var(--txt)}
  .sidenav a.on{background:color-mix(in srgb,var(--primary) 14%,transparent); color:var(--primary-ink)}
  .sidenav a .ni{font-size:1.15rem; width:22px; text-align:center}
  .sidenav .side-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding:10px 6px 2px; border-top:1px solid var(--line2)}
  .app{padding-bottom:20px}
  .view{padding:26px 30px}
}

/* ============================ MODAL / SHEET / DIALOG ============================ */
#modalRoot{position:fixed; inset:0; z-index:80; pointer-events:none}
.modal-bg{position:fixed; inset:0; background:rgba(10,25,35,.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; pointer-events:auto; animation:fade .2s ease}
.modal{background:var(--card-solid); border:1px solid var(--line); border-radius:var(--radius); width:100%; max-width:540px; max-height:90dvh; overflow:auto; box-shadow:var(--shadow-lg),var(--specular); animation:pop .28s var(--ease-bounce)}
.modal.wide{max-width:820px}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(10px)}to{opacity:1; transform:none}}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line2); position:sticky; top:0; background:var(--card-solid); z-index:1}
.modal-head h3{font-size:1.05rem}
.x-close{cursor:pointer; font-size:20px; color:var(--mut); line-height:1; padding:4px}
.modal-body{padding:18px}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 18px; border-top:1px solid var(--line2); position:sticky; bottom:0; background:var(--card-solid)}
#toast{position:fixed; left:50%; bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 20px); transform:translateX(-50%) translateY(30px); z-index:90; background:var(--card-solid); color:var(--txt); border:1px solid var(--line); padding:12px 18px; border-radius:14px; box-shadow:var(--shadow-lg); font-size:.9rem; font-weight:600; opacity:0; pointer-events:none; transition:.3s var(--ease); max-width:88vw}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
#toast.err{border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
@media(min-width:1024px){#toast{bottom:26px}}

/* checkmark animado */
.check-anim{width:64px;height:64px;margin:0 auto}
.check-anim circle{stroke:var(--ok); stroke-width:3; fill:none; stroke-dasharray:170; stroke-dashoffset:170; animation:dash .5s var(--ease) forwards}
.check-anim path{stroke:var(--ok); stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:50; stroke-dashoffset:50; animation:dash .35s .35s var(--ease) forwards}
@keyframes dash{to{stroke-dashoffset:0}}

/* sello */
.sello{font-size:.72rem; color:var(--dim); letter-spacing:.02em}

/* ============================ iOS / móvil: quitar blur vivo ============================ */
@media(max-width:760px){
  .card{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.82)}
  [data-tema="oscuro"] .card{background:rgba(20,32,46,.72)}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .grid.g4.keep2,.grid.g3.keep2,.grid.g2.keep2{grid-template-columns:repeat(2,1fr)}
  .eva .eva-num{font-size:4.4rem}
  /* tabla -> tarjetas apiladas */
  table.tbl.cards, table.tbl.cards thead{display:none}
  table.tbl.cards, table.tbl.cards tbody, table.tbl.cards tr, table.tbl.cards td{display:block; width:100%}
  table.tbl.cards tr{background:var(--card-solid); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:10px; padding:6px 4px}
  table.tbl.cards td{border:0; padding:7px 12px; display:flex; justify-content:space-between; gap:12px}
  table.tbl.cards td::before{content:attr(data-l); color:var(--mut); font-size:.74rem; font-weight:700; text-transform:uppercase}
}
@media(min-width:761px){table.tbl.cards thead{display:table-header-group}}

/* reduce motion */
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}