/* Entreno — hoja de estilos.
   Misma familia visual que Hábitos (tipografías, estructura de temas,
   tarjetas y rótulos en mono), con paleta propia: verde azulado para las
   acciones, índigo para fuerza y coral para carrera. */
@import url("../fonts/fuentes.css");

:root{
  --plano:#F3F6F5; --sup:#FFFFFF; --sup2:#F7F9F8; --hueco:#E7EDEB;
  --tinta:#1D2928; --tinta2:#52605E; --tinta3:#879391;
  --linea:#E0E7E5; --linea2:#C9D3D0;
  --acento:#13917F; --acento-txt:#0B6D60; --acento-suave:#DCF1ED; --sobre-acento:#FFFFFF;
  --fuerza:#2a78d6; --fuerza-txt:#1c5cab; --fuerza-suave:#E3EEFB;
  --carrera:#eb6834; --carrera-txt:#B0461B; --carrera-suave:#FDEAE0;
  --movil:#1baf7a; --movil-txt:#12805A; --movil-suave:#DCF4EA;
  --bien:#2E9E76; --bien-txt:#1F7A59; --bien-suave:#DDF3EA;
  --alerta:#E4A233; --alerta-txt:#8E5E0E; --alerta-suave:#FBF0DA;
  --critico:#D65550; --critico-txt:#B03A36; --critico-suave:#FBE4E2;
  --cuerpo:#E6EBE9; --m0:#D3DBD8; --ms:#E0875A; --mp:#B84A22;
  --c1:#E0875A; --c2:#CB6A3C; --c3:#AE5028; --c4:#873A17;
  --sombra:0 1px 2px rgba(20,50,45,.05), 0 6px 18px rgba(20,50,45,.06);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono","Cascadia Mono",Consolas,monospace;
  --r:12px;
  color-scheme: light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --plano:#0F1514; --sup:#172020; --sup2:#1D2726; --hueco:#131A19;
    --tinta:#E6EEEC; --tinta2:#A3B1AE; --tinta3:#72807D;
    --linea:#253130; --linea2:#33403E;
    --acento:#35C2AB; --acento-txt:#7EDFCE; --acento-suave:#153833; --sobre-acento:#062520;
    --fuerza:#3987e5; --fuerza-txt:#86B6EF; --fuerza-suave:#16273D;
    --carrera:#d95926; --carrera-txt:#F5A07E; --carrera-suave:#3A2116;
    --movil:#199e70; --movil-txt:#6FD7AE; --movil-suave:#13322A;
    --bien:#4FC99A; --bien-txt:#86E2BF; --bien-suave:#15352A;
    --alerta:#F0B64F; --alerta-txt:#F5CB7E; --alerta-suave:#3A2E14;
    --critico:#F07A74; --critico-txt:#F7A5A0; --critico-suave:#3D1F1E;
    --cuerpo:#243030; --m0:#314040; --ms:#9E4E34; --mp:#FF8A5C;
    --c1:#9E4E34; --c2:#C4623B; --c3:#E77B4B; --c4:#FFA27A;
    --sombra:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --plano:#0F1514; --sup:#172020; --sup2:#1D2726; --hueco:#131A19;
  --tinta:#E6EEEC; --tinta2:#A3B1AE; --tinta3:#72807D;
  --linea:#253130; --linea2:#33403E;
  --acento:#35C2AB; --acento-txt:#7EDFCE; --acento-suave:#153833; --sobre-acento:#062520;
  --fuerza:#3987e5; --fuerza-txt:#86B6EF; --fuerza-suave:#16273D;
  --carrera:#d95926; --carrera-txt:#F5A07E; --carrera-suave:#3A2116;
  --movil:#199e70; --movil-txt:#6FD7AE; --movil-suave:#13322A;
  --bien:#4FC99A; --bien-txt:#86E2BF; --bien-suave:#15352A;
  --alerta:#F0B64F; --alerta-txt:#F5CB7E; --alerta-suave:#3A2E14;
  --critico:#F07A74; --critico-txt:#F7A5A0; --critico-suave:#3D1F1E;
  --cuerpo:#243030; --m0:#314040; --ms:#9E4E34; --mp:#FF8A5C;
  --c1:#9E4E34; --c2:#C4623B; --c3:#E77B4B; --c4:#FFA27A;
  --sombra:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.3);
  color-scheme: dark;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{height:100%; -webkit-text-size-adjust:100%}
body{margin:0; min-height:100%; background:var(--plano); color:var(--tinta);
  font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600}
p{margin:0}
ul,ol{margin:0; padding-left:1.2em}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none; padding:0}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--acento-txt)}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
[hidden]{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------------- estructura ---------------- */
.app{max-width:600px; margin:0 auto; padding:0 16px calc(84px + env(safe-area-inset-bottom))}
.cab{position:sticky; top:0; z-index:20; background:var(--plano);
  padding:calc(10px + env(safe-area-inset-top)) 0 10px; border-bottom:1px solid var(--linea)}
.cab-in{display:flex; align-items:center; gap:10px; max-width:600px; margin:0 auto; padding:0 16px}
.cab h1{font-family:var(--serif); font-size:21px; letter-spacing:-.01em}
.cab .sub{font-family:var(--mono); font-size:10.5px; color:var(--tinta3); letter-spacing:.06em; text-transform:uppercase}
.cab-der{margin-left:auto; display:flex; gap:4px; align-items:center}
.icono-btn{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--tinta2)}
.icono-btn:hover{background:var(--sup2)}
svg.ico{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}

.nav{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--sup);
  border-top:1px solid var(--linea); padding-bottom:env(safe-area-inset-bottom)}
.nav-in{display:flex; max-width:600px; margin:0 auto}
.nav button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 2px 8px; color:var(--tinta3); font-size:10.5px; font-weight:500;
  border-top:2px solid transparent; margin-top:-1px; min-height:56px}
.nav button svg{width:22px; height:22px}
.nav button.activa{color:var(--acento-txt); border-top-color:var(--acento)}

.vista{display:none; padding-top:14px}
.vista.activa{display:block}
.pila > * + *{margin-top:12px}

/* ---------------- piezas ---------------- */
.tarjeta{background:var(--sup); border:1px solid var(--linea); border-radius:var(--r);
  padding:14px; box-shadow:var(--sombra)}
.tarjeta.plana{box-shadow:none}
.tarjeta.fuerza{border-left:4px solid var(--fuerza)}
.tarjeta.carrera{border-left:4px solid var(--carrera)}
.tarjeta.movil{border-left:4px solid var(--movil)}
.tarjeta.aviso-suave{background:var(--alerta-suave); border-color:transparent; box-shadow:none}
.tarjeta.nota-suave{background:var(--acento-suave); border-color:transparent; box-shadow:none}
.rotulo{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta3); margin-bottom:8px; display:flex; align-items:center; gap:8px}
.rotulo .der{margin-left:auto; letter-spacing:.02em; text-transform:none}
.titulo{font-family:var(--serif); font-size:22px; line-height:1.2; letter-spacing:-.01em}
.titulo-m{font-family:var(--serif); font-size:18px; line-height:1.25}
.texto2{color:var(--tinta2)}
.texto3{color:var(--tinta3); font-size:13px}
.peq{font-size:13px}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.fila{display:flex; align-items:center; gap:10px}
.fila.entre{justify-content:space-between}
.fila.arriba{align-items:flex-start}
.crece{flex:1; min-width:0}
.envuelve{flex-wrap:wrap}
.sep{height:1px; background:var(--linea); margin:12px 0}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.centro{text-align:center}
.ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px;
  padding:0 18px; border-radius:12px; font-weight:600; font-size:15px; border:1px solid var(--linea2);
  background:var(--sup); color:var(--tinta); transition:transform .08s, background .15s}
.btn:active{transform:scale(.98)}
.btn.p{background:var(--acento); border-color:var(--acento); color:var(--sobre-acento)}
.btn.fuerza{background:var(--fuerza); border-color:var(--fuerza); color:#fff}
.btn.carrera{background:var(--carrera); border-color:var(--carrera); color:#fff}
.btn.suave{background:var(--acento-suave); border-color:transparent; color:var(--acento-txt)}
.btn.t{border-color:transparent; background:none; color:var(--acento-txt); padding:0 8px; min-height:40px}
.btn.peligro{color:var(--critico-txt); border-color:var(--critico-suave)}
.btn.bloque{width:100%}
.btn.chico{min-height:36px; padding:0 12px; font-size:13.5px; border-radius:10px}
.btn[disabled]{opacity:.45; pointer-events:none}
.btns{display:flex; gap:8px; flex-wrap:wrap}
.btns > .btn{flex:1 1 auto}

.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px;
  background:var(--hueco); color:var(--tinta2); font-size:12.5px; font-weight:500; white-space:nowrap}
.chip.fuerza{background:var(--fuerza-suave); color:var(--fuerza-txt)}
.chip.carrera{background:var(--carrera-suave); color:var(--carrera-txt)}
.chip.movil{background:var(--movil-suave); color:var(--movil-txt)}
.chip.bien{background:var(--bien-suave); color:var(--bien-txt)}
.chip.alerta{background:var(--alerta-suave); color:var(--alerta-txt)}
.chip.critico{background:var(--critico-suave); color:var(--critico-txt)}
.chip.acento{background:var(--acento-suave); color:var(--acento-txt)}
button.chip{cursor:pointer}
button.chip.activa{background:var(--acento); color:var(--sobre-acento)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; margin:0 -16px; padding-left:16px; padding-right:16px}
.chips.scroll::-webkit-scrollbar{display:none}

/* control segmentado */
.seg{display:flex; background:var(--hueco); border-radius:11px; padding:3px; gap:3px}
.seg button{flex:1; min-height:36px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--tinta2); padding:0 6px}
.seg button.activa{background:var(--sup); color:var(--tinta); box-shadow:var(--sombra)}

/* escala 1–5 / 0–10 */
.escala{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px}
.escala button{min-height:46px; border-radius:10px; background:var(--hueco); font-family:var(--mono);
  font-weight:600; font-size:15px; color:var(--tinta2); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1}
.escala button small{font-family:var(--sans); font-weight:500; font-size:10px; color:var(--tinta3)}
.escala button.activa{background:var(--acento); color:var(--sobre-acento)}
.escala button.activa small{color:var(--sobre-acento)}
.escala-extremos{display:flex; justify-content:space-between; font-size:11.5px; color:var(--tinta3); margin-top:4px}
.pregunta + .pregunta{margin-top:16px}
.pregunta > label, .pregunta > .etq{display:block; font-weight:600; margin-bottom:8px}

/* formularios */
.campo{display:flex; flex-direction:column; gap:5px}
.campo > span{font-size:13px; color:var(--tinta2); font-weight:500}
.entrada, select.entrada, textarea.entrada{min-height:44px; border-radius:10px; border:1px solid var(--linea2);
  background:var(--sup); padding:8px 12px; width:100%}
textarea.entrada{min-height:80px; resize:vertical}
.entrada:focus{outline:2px solid var(--acento); outline-offset:0; border-color:transparent}
.interruptor{display:flex; align-items:center; gap:12px; padding:10px 0; cursor:pointer}
.interruptor input{appearance:none; width:44px; height:26px; border-radius:99px; background:var(--linea2); position:relative; flex:none; transition:background .15s; cursor:pointer}
.interruptor input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s}
.interruptor input:checked{background:var(--acento)}
.interruptor input:checked::after{left:21px}
.casilla{display:flex; align-items:center; gap:10px; padding:8px 0; cursor:pointer}
.casilla input{width:20px; height:20px; accent-color:var(--acento)}

/* barras de progreso */
.barra{height:8px; border-radius:99px; background:var(--hueco); overflow:hidden}
.barra > i{display:block; height:100%; border-radius:99px; background:var(--acento)}
.barra.fina{height:5px}
.barra.fuerza > i{background:var(--fuerza)}
.barra.carrera > i{background:var(--carrera)}

/* lista de filas tocables */
.lista{display:flex; flex-direction:column}
.lista > .item{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea); text-align:left; width:100%}
.lista > .item:last-child{border-bottom:none}
.item .mini{width:52px; height:40px; border-radius:8px; object-fit:cover; background:var(--hueco); flex:none}
.mini-ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none}

/* ---------------- Hoy ---------------- */
.semana{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center}
.semana .dia{display:flex; flex-direction:column; align-items:center; gap:4px}
.semana .dia b{font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--tinta3)}
.semana .punto{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--hueco); color:var(--tinta3)}
.semana .punto svg{width:16px; height:16px}
.semana .punto.fuerza{background:var(--fuerza-suave); color:var(--fuerza-txt)}
.semana .punto.carrera{background:var(--carrera-suave); color:var(--carrera-txt)}
.semana .punto.movil{background:var(--movil-suave); color:var(--movil-txt)}
.semana .punto.hecho{color:#fff}
.semana .punto.hecho.fuerza{background:var(--fuerza)}
.semana .punto.hecho.carrera{background:var(--carrera)}
.semana .punto.hecho.movil{background:var(--movil)}
.semana .punto.hoy{outline:2px solid var(--acento); outline-offset:2px}
.semana .punto.pausa{background:repeating-linear-gradient(45deg,var(--hueco) 0 4px,var(--linea) 4px 8px)}

.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.kpi{background:var(--sup2); border-radius:10px; padding:10px}
.kpi .v{font-family:var(--sans); font-size:22px; font-weight:600; line-height:1.1}
.kpi .v small{font-size:12px; font-weight:500; color:var(--tinta3)}
.kpi .e{font-size:11.5px; color:var(--tinta3); margin-top:2px; line-height:1.3}

.anillo{width:64px; height:64px; flex:none}
.anillo circle{fill:none; stroke-width:7}
.anillo .fondo{stroke:var(--hueco)}
.anillo .valor{stroke:var(--acento); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%}
.anillo text{font-family:var(--mono); font-size:15px; font-weight:600; fill:var(--tinta); text-anchor:middle; dominant-baseline:central}

.insight{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--linea)}
.insight:last-child{border-bottom:none}
.insight .ico-est{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none}
.est-mejora{background:var(--bien-suave); color:var(--bien-txt)}
.est-estable{background:var(--hueco); color:var(--tinta2)}
.est-estancado{background:var(--alerta-suave); color:var(--alerta-txt)}
.est-baja{background:var(--critico-suave); color:var(--critico-txt)}
.est-pocos{background:var(--hueco); color:var(--tinta3)}

/* ---------------- sesión activa ---------------- */
.sesion{position:fixed; inset:0; z-index:50; background:var(--plano); overflow-y:auto; overscroll-behavior:contain}
.sesion-cab{position:sticky; top:0; z-index:5; background:var(--plano); border-bottom:1px solid var(--linea);
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px}
.sesion-cab .fila{max-width:600px; margin:0 auto}
.sesion-cuerpo{max-width:600px; margin:0 auto; padding:14px 16px calc(120px + env(safe-area-inset-bottom))}
.cronometro{font-family:var(--mono); font-size:13px; color:var(--tinta2); font-variant-numeric:tabular-nums}
.pasos-sesion{display:flex; gap:4px; margin-top:8px}
.pasos-sesion i{flex:1; height:4px; border-radius:99px; background:var(--hueco)}
.pasos-sesion i.hecho{background:var(--acento)}
.pasos-sesion i.actual{background:var(--acento); opacity:.45}

.media-ej{position:relative; border-radius:12px; overflow:hidden; background:var(--hueco); aspect-ratio:3/2}
.media-ej img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.media-ej img.b{animation:alternar 2.4s infinite steps(1)}
@keyframes alternar{0%{opacity:0} 50%{opacity:1}}
.media-ej .pie{position:absolute; left:8px; bottom:8px; display:flex; gap:6px}
.media-ej .pie .chip{background:rgba(0,0,0,.55); color:#fff}
.media-duo{display:grid; grid-template-columns:3fr 2fr; gap:10px; align-items:center}
.mapa-muscular{width:100%; height:auto; display:block}
.mapa-muscular .silueta > circle, .mapa-muscular .silueta > rect, .mapa-muscular .silueta > path{fill:var(--cuerpo)}
.mapa-muscular .miembros line{stroke:var(--cuerpo); stroke-linecap:round}
.mapa-muscular .miembros circle, .mapa-muscular .miembros ellipse{fill:var(--cuerpo)}
.mapa-muscular .m{fill:var(--m0); transition:fill .2s}
.mapa-muscular .m.s{fill:var(--ms)}
.mapa-muscular .m.p{fill:var(--mp)}
.mapa-muscular .m.c1{fill:var(--c1)} .mapa-muscular .m.c2{fill:var(--c2)}
.mapa-muscular .m.c3{fill:var(--c3)} .mapa-muscular .m.c4{fill:var(--c4)}
.mapa-muscular .lineas line{stroke:var(--sup); stroke-width:1; opacity:.7}
.mapa-muscular .rotulo-vista{font-family:var(--mono); font-size:12px; fill:var(--tinta3); text-anchor:middle}
.leyenda{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--tinta2)}
.leyenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}

.objetivo{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.series{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.serie{display:grid; grid-template-columns:34px 1fr 1fr auto; gap:8px; align-items:center;
  padding:8px; border-radius:12px; background:var(--sup2); border:1px solid var(--linea)}
.serie.hecha{background:var(--bien-suave); border-color:transparent}
.serie.actual{border-color:var(--acento); box-shadow:0 0 0 1px var(--acento) inset}
.serie .n{font-family:var(--mono); font-weight:600; color:var(--tinta3); text-align:center}
.serie.calentamiento .n{color:var(--alerta-txt)}
.stepper{display:flex; align-items:center; background:var(--sup); border:1px solid var(--linea2); border-radius:10px; overflow:hidden; min-height:44px}
.stepper button{width:36px; align-self:stretch; font-size:20px; color:var(--tinta2); font-weight:500}
.stepper button:active{background:var(--hueco)}
.stepper input{width:100%; min-width:0; text-align:center; border:none; background:none; font-family:var(--mono);
  font-weight:600; font-size:16px; padding:0; -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper .ud{font-size:11px; color:var(--tinta3); padding-right:6px}
.ok-serie{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--sup); border:1px solid var(--linea2); color:var(--tinta3)}
.serie.hecha .ok-serie{background:var(--bien); border-color:var(--bien); color:#fff}
.rir-pick{display:flex; gap:6px; margin-top:6px; grid-column:1 / -1; align-items:center; flex-wrap:wrap}
.rir-pick span{font-size:12px; color:var(--tinta2); margin-right:2px}
.rir-pick button{min-width:38px; min-height:34px; border-radius:9px; background:var(--sup); border:1px solid var(--linea2); font-family:var(--mono); font-size:13px}
.rir-pick button.activa{background:var(--acento); color:var(--sobre-acento); border-color:var(--acento)}

.descanso{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--sup); border-top:1px solid var(--linea);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px rgba(0,0,0,.08)}
.descanso .in{max-width:600px; margin:0 auto; display:flex; align-items:center; gap:12px}
.descanso .t{font-family:var(--mono); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; min-width:92px}
.descanso.fin .t{color:var(--acento-txt)}

.accion-fija{position:fixed; left:0; right:0; bottom:0; z-index:55; padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--plano) 70%, transparent)}
.accion-fija .in{max-width:600px; margin:0 auto; display:flex; gap:8px}

/* intervalos de carrera */
.reloj-carrera{text-align:center; padding:18px 12px; border-radius:16px; background:var(--carrera-suave)}
.reloj-carrera.caminar{background:var(--acento-suave)}
.reloj-carrera.pausa{background:var(--hueco)}
.reloj-carrera .fase{font-family:var(--serif); font-size:34px; line-height:1.1; font-weight:600}
.reloj-carrera .t{font-family:var(--mono); font-size:64px; font-weight:600; line-height:1; margin:10px 0; font-variant-numeric:tabular-nums}
.reloj-carrera .sig{font-size:14px; color:var(--tinta2)}
.bloques{display:flex; gap:2px; margin-top:14px; height:10px}
.bloques i{border-radius:3px; background:var(--linea2)}
.bloques i.trotar{background:var(--carrera); opacity:.35}
.bloques i.caminar{background:var(--acento); opacity:.35}
.bloques i.hecho{opacity:1}
.bloques i.actual{opacity:1; outline:2px solid var(--tinta); outline-offset:1px}

/* ---------------- hojas (modales desde abajo) ---------------- */
.velo{position:fixed; inset:0; z-index:80; background:rgba(8,20,18,.45); display:flex; align-items:flex-end; justify-content:center;
  animation:aparecer .15s ease-out}
@keyframes aparecer{from{opacity:0}}
.hoja{background:var(--plano); width:100%; max-width:600px; max-height:92vh; overflow-y:auto; border-radius:18px 18px 0 0;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom)); animation:subir .2s ease-out; overscroll-behavior:contain}
@keyframes subir{from{transform:translateY(24px)}}
.hoja .asa{width:40px; height:4px; border-radius:99px; background:var(--linea2); margin:4px auto 10px}
.hoja-cab{display:flex; align-items:center; gap:10px; margin-bottom:12px; position:sticky; top:-8px; background:var(--plano); padding:6px 0; z-index:2}
.hoja-cab h2{font-family:var(--serif); font-size:21px; flex:1}
@media (min-width:700px){ .velo{align-items:center} .hoja{border-radius:18px; max-height:88vh} }

/* fichas técnicas */
.ficha h3{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta3); margin:16px 0 6px; font-weight:500}
.ficha ol li + li, .ficha ul li + li{margin-top:5px}
.error-fila{padding:8px 10px; border-radius:10px; background:var(--sup2); border:1px solid var(--linea)}
.error-fila + .error-fila{margin-top:6px}
.error-fila b{display:block; font-weight:600; color:var(--critico-txt); font-size:14px}
.error-fila span{font-size:14px; color:var(--tinta2)}
.alto{padding:10px 12px; border-radius:10px; background:var(--critico-suave); color:var(--critico-txt); font-size:14px}

/* avisos */
.avisos{position:fixed; left:0; right:0; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px}
.aviso{pointer-events:auto; background:var(--tinta); color:var(--plano); padding:11px 14px; border-radius:12px; font-size:14px;
  max-width:560px; width:100%; display:flex; gap:10px; align-items:center; box-shadow:0 6px 20px rgba(0,0,0,.2); animation:subir .2s ease-out}
.aviso button{color:var(--acento-suave); font-weight:600; margin-left:auto; white-space:nowrap}

/* gráficos */
.grafico{width:100%; height:auto; display:block; overflow:visible}
.grafico .eje{stroke:var(--linea); stroke-width:1}
.grafico .rejilla{stroke:var(--linea); stroke-width:1}
.grafico .etq{font-family:var(--mono); font-size:10px; fill:var(--tinta3)}
.grafico .linea{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.grafico .punto{stroke:var(--sup); stroke-width:2}
.grafico .area{opacity:.12}
.grafico .banda{fill:var(--bien); opacity:.08}
.spark{width:84px; height:26px; flex:none}
.spark .linea{fill:none; stroke-width:1.8; stroke:var(--acento)}

/* logros */
.logros{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.logro{padding:10px 8px; border-radius:12px; background:var(--sup2); text-align:center; border:1px solid var(--linea)}
.logro .emb{width:40px; height:40px; margin:0 auto 6px; border-radius:50%; display:grid; place-items:center; background:var(--hueco); color:var(--tinta3)}
.logro.tiene .emb{background:var(--acento); color:var(--sobre-acento)}
.logro b{display:block; font-size:12.5px; line-height:1.25}
.logro small{display:block; font-size:11px; color:var(--tinta3); line-height:1.3; margin-top:3px}
.logro:not(.tiene){opacity:.7}

.vacio{padding:26px 10px; text-align:center; color:var(--tinta3)}
.tabla{width:100%; border-collapse:collapse; font-size:13.5px}
.tabla th{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta3); font-weight:500; text-align:left; padding:6px 4px; border-bottom:1px solid var(--linea)}
.tabla td{padding:7px 4px; border-bottom:1px solid var(--linea); font-variant-numeric:tabular-nums}
.tabla td.n, .tabla th.n{text-align:right}

.cita{font-size:12.5px; color:var(--tinta3); line-height:1.45}
.cita a{color:var(--tinta2)}
.nivel-ev{display:inline-block; font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:5px; background:var(--hueco); color:var(--tinta2); letter-spacing:.04em}

@media (min-width:900px){
  body{font-size:16px}
  .app, .cab-in, .nav-in{max-width:760px}
}

/* gráficos: tooltip y hover */
.grafico-caja{position:relative; border-radius:8px}
.grafico-caja:focus-visible{outline:2px solid var(--acento); outline-offset:4px}
.grafico-caja .tip{position:absolute; top:-4px; pointer-events:none; background:var(--sup); border:1px solid var(--linea2);
  border-radius:8px; padding:4px 8px; box-shadow:var(--sombra); font-size:12px; display:flex; flex-direction:column; min-width:88px; z-index:2}
.grafico-caja .tip b{font-weight:600; color:var(--tinta)}
.grafico-caja .tip span{color:var(--tinta3)}
.grafico .col.activa path{opacity:.78}
.grafico .col.activa .punto{r:5.5}
.tabla-grafico table{margin-top:6px}
.kpi-grande{font-family:var(--sans)}
details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
details.tarjeta > summary::after{content:"▾"; margin-left:6px; color:var(--tinta3)}
details.tarjeta[open] > summary::after{content:"▴"}
label.btn{cursor:pointer}
.hoja .lista > .item{min-height:48px}
.nav[hidden]{display:none}
select.entrada{appearance:auto}

.series-cab{display:grid; grid-template-columns:34px 1fr 1fr 44px; gap:8px; padding:0 8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta3); text-align:center; margin-bottom:-2px}
.stepper button{width:32px}
.serie{grid-template-columns:34px 1fr 1fr 44px}

.rotulo .chip{font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:12px}