/* styles.css — mobile-first, diseño ligero: listas compactas + hojas modales */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --ink:#1c2733; --muted:#5b6b7b; --line:#e3e8ee;
  --accent:#0e7490; --bad:#b42318; --bad-bg:#fbeae8; --warn:#8a5a00; --warn-bg:#faf1d8; --ok:#116c3e; --ok-bg:#e2f4e8;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --t-xs:.75rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.125rem; --t-xl:1.375rem;
  --radius:14px; --tap:48px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#12181f; --surface:#1a222b; --ink:#e8edf2; --muted:#93a3b3; --line:#2b3642;
    --bad:#f0857a; --bad-bg:#3a1f1c; --warn:#e2b84e; --warn-bg:#332a14; --ok:#7fd8a5; --ok-bg:#15301f; }
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }
.theme-jimena{ --accent:#6d28d9 }
@media (prefers-color-scheme: dark){ .theme-jimena{ --accent:#a78bfa } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:var(--t-md);line-height:1.45;padding-bottom:76px}
button{font:inherit;cursor:pointer}
a{color:var(--accent)}
:is(button,summary,input,select,textarea,a):focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Barra superior */
.appbar{position:sticky;top:0;z-index:5;background:var(--accent);color:#fff;padding:var(--s2) var(--s4);display:flex;align-items:center;gap:var(--s2)}
.appbar .brandbtn{background:none;border:none;padding:0;flex:none;cursor:pointer;line-height:0}
.appbar .brand{width:34px;height:34px;background:#fff;border-radius:9px;padding:2px;object-fit:contain}
.appbar h1{margin:0;font-size:var(--t-lg);font-weight:650;flex:1}
.appbar button{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:var(--s1) var(--s3);font-size:var(--t-xs);min-height:36px}
.appbar button.iconbtn{display:grid;place-items:center;padding:0;width:36px}
.svg-i,.i{vertical-align:middle}

.wrap{max-width:640px;margin:0 auto;padding:var(--s3) var(--s4)}
@media (min-width:900px){ .wrap{max-width:760px} }

/* Nav inferior */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:5;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:var(--s1) var(--s1) max(var(--s1), env(safe-area-inset-bottom))}
.bottomnav button{flex:1;max-width:120px;background:none;border:none;color:var(--muted);font-size:var(--t-xs);min-height:54px;border-radius:var(--s2);display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--s1)}
.bottomnav button .ic{line-height:0}
.bottomnav button.on{color:var(--accent);font-weight:700}

/* Tarjetas y listas compactas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.card h2{margin:0 0 var(--s2);font-size:var(--t-md);font-weight:700}
.card h2 small{color:var(--muted);font-weight:400;font-size:var(--t-xs)}
.mutet{color:var(--muted);font-size:var(--t-sm)}
.xs{font-size:var(--t-xs);color:var(--muted)}

.item{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:var(--s3) var(--s1);min-height:var(--tap);color:var(--ink)}
.item:last-child{border-bottom:none}
.item .tt{flex:1;min-width:0}
.item .tt b{display:block;font-size:var(--t-sm)}
.item .tt span{display:block;font-size:var(--t-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .chev{color:var(--muted)}
.item.done .tt b{color:var(--muted);text-decoration:line-through}

.dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--line)}
.dot.realizada{background:var(--ok)} .dot.omitida{background:var(--bad)}
.dot.en_progreso{background:var(--warn)} .dot.no_aplica{background:var(--muted)}

.pill{display:inline-block;padding:1px var(--s2);border-radius:999px;font-size:var(--t-xs);font-weight:600;white-space:nowrap}
.pill.alto,.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.nota,.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.neutral{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.pill.ia{background:var(--bg);color:var(--muted);border:1px dashed var(--muted)}

/* Nota breve (sustituye banners pesados) */
.note{display:flex;gap:var(--s2);align-items:center;background:none;border:none;color:var(--muted);font-size:var(--t-xs);padding:var(--s1) 0;margin-bottom:var(--s2);text-align:left;width:100%}
.note u{text-decoration:underline dotted}

/* Progreso hidratación */
.progress{height:12px;background:var(--line);border-radius:6px;overflow:hidden;margin:var(--s2) 0 var(--s1)}
.progress i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .2s}
.hydrow{display:flex;gap:var(--s2);margin-top:var(--s2)}
.hydrow button{flex:1;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700;font-size:var(--t-sm)}
.nums{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--muted)}

/* Fecha */
.datebar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.datebar button{min-height:44px;min-width:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700}
.datebar .cur{flex:1;text-align:center;font-weight:700;font-size:var(--t-sm)}
.datebar .cur .xs{display:block;font-weight:400}

/* Sub-pestañas segmentadas (Perfil: Guía / Exámenes) */
.segtabs{display:flex;gap:var(--s1);background:var(--line);border-radius:12px;padding:3px;margin-bottom:var(--s3)}
.segtabs button{flex:1;min-height:44px;border:none;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;font-size:var(--t-sm)}
.segtabs button.on{background:var(--surface);color:var(--accent)}

/* Chips de día */
.daytabs{display:flex;gap:var(--s1);overflow-x:auto;margin-bottom:var(--s3);padding-bottom:2px}
.daytabs button{min-height:42px;min-width:50px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:600;font-size:var(--t-sm)}
.daytabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* Selector / lock */
.center{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--s4);padding:var(--s5);text-align:center}
.bigbtn{width:100%;max-width:340px;min-height:60px;border-radius:var(--radius);border:2px solid var(--line);background:var(--surface);font-size:var(--t-lg);font-weight:700;color:var(--ink)}
.bigbtn.h{border-color:#0e7490;color:#0e7490}
.bigbtn.j{border-color:#6d28d9;color:#6d28d9}
.pinbox{width:100%;max-width:280px;display:flex;flex-direction:column;gap:var(--s3)}
.pinbox input{font-size:1.5rem;text-align:center;letter-spacing:.4em;border:2px solid var(--line);border-radius:var(--radius);padding:var(--s3);min-height:56px;background:var(--surface);color:var(--ink)}
.pinbox button{min-height:52px;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;font-weight:700;font-size:var(--t-md)}
.err{color:var(--bad);font-size:var(--t-sm)}

/* Acordeones y tablas */
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:var(--s3)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);font-weight:600;font-size:var(--t-sm);min-height:var(--tap)}
summary::before{content:"▸";color:var(--muted)}
details[open] summary::before{content:"▾"}
summary .cnt{margin-left:auto}
details .inner{padding:0 var(--s4) var(--s3)}
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th{font-size:var(--t-xs);color:var(--muted);text-align:left;padding:var(--s2);border-bottom:2px solid var(--line)}
td{padding:var(--s2);border-bottom:1px solid var(--line);vertical-align:top}
tr.f-alto td{background:var(--bad-bg)}
tr.f-nota td{background:var(--warn-bg)}

/* Hoja modal (popup inferior) */
.overlay{position:fixed;inset:0;background:rgba(10,15,20,.5);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:640px;max-height:86vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:var(--s3) var(--s4) max(var(--s4), env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.25)}
@media (min-width:900px){ .overlay{align-items:center} .sheet{border-radius:18px;max-height:80vh} }
.sheet .grip{width:44px;height:4px;border-radius:2px;background:var(--line);margin:0 auto var(--s3)}
.sheet h2{margin:0 0 var(--s2);font-size:var(--t-lg);padding-right:40px}
.sheet .x{position:sticky;float:right;top:0;min-width:40px;min-height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:1.1rem}
.sheet p{font-size:var(--t-sm)}
.sheet .meta{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s2) 0}
.sheet label{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:var(--s3)}
.sheet select,.sheet textarea,.sheet input{width:100%;border:1px solid var(--line);border-radius:10px;padding:var(--s2) var(--s3);background:var(--bg);color:var(--ink);font:inherit;min-height:44px;margin-top:var(--s1)}
.statebtns{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
.statebtns button{min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700;font-size:var(--t-sm)}
.statebtns button.sel-realizada{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.statebtns button.sel-omitida{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.statebtns button.sel-en_progreso{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.statebtns button.sel-no_aplica{border-color:var(--muted);color:var(--muted)}
/* Fila de ejercicio con acciones (ver / iniciar) */
.exrow{display:flex;align-items:center;gap:var(--s2);border-bottom:1px solid var(--line);padding:var(--s2) var(--s1);min-height:var(--tap)}
.exrow:last-of-type{border-bottom:none}
.exrow.done{opacity:.5}
.exrow.done .tt b{text-decoration:line-through}
.exrow .tt{flex:1;min-width:0}
.exrow .tt b{display:block;font-size:var(--t-sm)}
.exrow .tt span{display:block;font-size:var(--t-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icbtn{min-width:var(--tap);min-height:var(--tap);border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);display:grid;place-items:center}
.icbtn.run{background:var(--warn-bg);border-color:var(--warn)}
.icbtn:disabled{opacity:.4;cursor:default}

/* Cronómetro y registro por ejercicio */
.timerbig{font-size:2.6rem;font-weight:800;text-align:center;margin:var(--s3) 0;font-variant-numeric:tabular-nums}
.bigstart{width:100%;min-height:56px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:700;font-size:var(--t-md);margin-top:var(--s3)}
.bigstart.stop{background:var(--bad)}
.effbtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);margin-top:var(--s1)}
.effbtns button{min-height:60px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700;font-size:var(--t-xs);line-height:1.3}
.effbtns button.sel-facil{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.effbtns button.sel-intermedio{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.effbtns button.sel-dificil{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.wrow{display:flex;gap:var(--s2);margin-top:var(--s1)}
.wrow input{flex:1;min-width:0}
.uniseg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.uniseg button{min-width:52px;min-height:44px;background:var(--bg);border:none;color:var(--muted);font-weight:700}
.uniseg button.on{background:var(--accent);color:#fff}

/* Demostración de ejercicio: 2 fotogramas locales alternando (tipo GIF) */
.demo{position:relative;margin:var(--s3) auto 0;max-width:360px}
.demo img{width:100%;border-radius:10px;display:block;border:1px solid var(--line);background:#fff}
.demo img.f2{position:absolute;inset:0;opacity:0;animation:demoflip 1.6s steps(1) infinite}
@keyframes demoflip{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

.linkrow{display:flex;gap:var(--s2);margin-top:var(--s3)}
.linkrow a{flex:1;text-align:center;min-height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-weight:600;font-size:var(--t-sm);background:var(--bg)}

/* Datos */
.filerow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;border-bottom:1px solid var(--line);padding:var(--s3) 0}
.filerow:last-child{border-bottom:none}
.filerow b{flex:1;min-width:110px;font-size:var(--t-sm)}
.filerow button,.filerow label.btn{min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 var(--s3);font-size:var(--t-sm);font-weight:600;display:inline-flex;align-items:center;cursor:pointer}
.primary{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important}

.list-clean{margin:var(--s2) 0 0;padding-left:var(--s5);font-size:var(--t-sm)}
.list-clean li{margin-bottom:var(--s2)}

/* Tarjeta de perfil: anillo de puntuación + rejilla de datos */
.score{display:flex;align-items:center;gap:var(--s4);margin:var(--s2) 0}
.ring{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*3.6deg),var(--line) 0)}
.ring b{background:var(--surface);border-radius:50%;width:54px;height:54px;display:grid;place-items:center;font-size:var(--t-lg)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s2);margin-top:var(--s2)}
.kv div{border:1px solid var(--line);border-radius:10px;padding:var(--s2) var(--s3);background:var(--bg)}
.kv .k{font-size:var(--t-xs);color:var(--muted)}
.kv .v{font-weight:700;font-size:var(--t-sm)}