/* ===================== Coloso — estilos =====================
   Identidad tomada del demo aprobado (coloso-demo.html): wordmark COLOSO con la O
   ámbar, acento ámbar, dark/light por tokens CSS, mobile-first. ============ */

:root{
  --bg:#F5F3EF; --card:#FFFFFF; --card2:#ECE9E2; --line:#DDD8CE;
  --ink:#1F232B; --ink2:#5C6472; --ink3:#8B8F98;
  --brand:#8A6116; --brand-soft:#8A611622; --cat2:#2E64A8;
  --good:#2E7D53; --good-soft:#2E7D5320; --warn:#A66A00; --warn-soft:#A66A0022; --bad:#B3402F; --bad-soft:#B3402F1c;
  --chip:#E7E2D8;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#14171C; --card:#1C2028; --card2:#232833; --line:#2E3440;
  --ink:#E8E6E1; --ink2:#9AA0AB; --ink3:#6B7280;
  --brand:#D9A441; --brand-soft:#BE8A2426; --cat2:#4E82BE;
  --good:#4CAF7D; --good-soft:#4CAF7D22; --warn:#D9A441; --warn-soft:#D9A44122; --bad:#E0604C; --bad-soft:#E0604C22;
  --chip:#2A2F3A;
}}
:root[data-theme="dark"]{
  --bg:#14171C; --card:#1C2028; --card2:#232833; --line:#2E3440;
  --ink:#E8E6E1; --ink2:#9AA0AB; --ink3:#6B7280;
  --brand:#D9A441; --brand-soft:#BE8A2426; --cat2:#4E82BE;
  --good:#4CAF7D; --good-soft:#4CAF7D22; --warn:#D9A441; --warn-soft:#D9A44122; --bad:#E0604C; --bad-soft:#E0604C22;
  --chip:#2A2F3A;
}
:root[data-theme="light"]{
  --bg:#F5F3EF; --card:#FFFFFF; --card2:#ECE9E2; --line:#DDD8CE;
  --ink:#1F232B; --ink2:#5C6472; --ink3:#8B8F98;
  --brand:#8A6116; --brand-soft:#8A611622; --cat2:#2E64A8;
  --good:#2E7D53; --good-soft:#2E7D5320; --warn:#A66A00; --warn-soft:#A66A0022; --bad:#B3402F; --bad-soft:#B3402F1c;
  --chip:#E7E2D8;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45}
.wrap{max-width:520px;margin:0 auto;padding:0 14px 90px}
@media(min-width:900px){ .wrap{max-width:960px} }

/* ---------- logo ---------- */
.logo{display:flex;align-items:baseline;gap:8px}
.logo b{font-size:24px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.logo b .o{color:var(--brand)}
.logo.big b{font-size:40px}
.demo-tag{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--brand);
  border:1px solid var(--brand);border-radius:4px;padding:2px 6px;text-transform:uppercase}

/* ---------- login ---------- */
.login{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px}
.login .muted{margin:0}
.login .btn{margin-top:6px}

/* ---------- header ---------- */
header{padding:18px 2px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.head-tools{display:flex;gap:6px;align-items:center}
.icon-btn{border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font:inherit;font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer}
.icon-btn:hover{color:var(--brand);border-color:var(--brand)}
.icon-btn:focus-visible{outline:2px solid var(--cat2);outline-offset:2px}

.hoy{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-bottom:14px}
.hoy .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none}
.hoy b{font-weight:700}
.hoy span{color:var(--ink2);font-size:13px}

/* ---------- tabs ---------- */
nav{position:sticky;top:0;z-index:5;background:var(--bg);margin:0 -14px;padding:6px 14px 10px;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
nav::-webkit-scrollbar{display:none}
nav button{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer}
nav button.on{background:var(--brand);border-color:var(--brand);color:var(--bg);font-weight:700}
nav button:focus-visible{outline:2px solid var(--cat2);outline-offset:2px}
section{display:none;padding-top:14px}
section.on{display:block}
@media(min-width:900px){ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} }

h2{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:18px 2px 8px}
h3.subh{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px}
.muted{color:var(--ink2);font-size:13px}
.num{font-variant-numeric:tabular-nums}

/* ---------- progresión cards ---------- */
.ex-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ex-head b{font-size:15px}
.ex-tags{display:flex;align-items:center;gap:6px;flex:none}
.pin{background:none;border:none;cursor:pointer;font-size:17px;line-height:1;padding:0 2px;color:var(--ink3);transition:color .15s}
.pin:hover{color:var(--brand)}
.pin.on{color:var(--brand)}
.pin:focus-visible{outline:2px solid var(--cat2,#2E64A8);outline-offset:2px;border-radius:4px}
.card.fijado{border-color:var(--brand)}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink2)}
.pill.bilbo{background:var(--brand-soft);color:var(--brand)}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.bar{height:8px;border-radius:4px;background:var(--card2);margin:10px 0 6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--brand)}
.bar i.full{background:var(--good)}
.ex-foot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2)}
.ex-foot b{color:var(--ink)}

/* ---------- chart ---------- */
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.seg button{border:1px solid var(--line);background:var(--card2);color:var(--ink2);font:inherit;
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:700}
.seg button:focus-visible{outline:2px solid var(--cat2);outline-offset:2px}
.chart-box{position:relative;height:220px;overflow:hidden}
.chart-box canvas{max-width:100%}
.pt-info{margin-top:8px;font-size:13px;background:var(--card2);border-radius:8px;padding:8px 10px;color:var(--ink2)}
.pt-info b{color:var(--ink)}

.mini-sel{border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;
  font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;cursor:pointer}
.mini-sel:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ---------- heatmap ---------- */
.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--card2)}
.heat i.d1{background:var(--brand-soft)}
.heat i.d2{background:var(--brand)}
.heat-leg{display:flex;gap:12px;margin-top:8px;font-size:12px;color:var(--ink2);align-items:center}
.heat-leg i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-1px}

.sesion{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);gap:8px}
.sesion:last-child{border-bottom:0}
.sesion .fecha{font-size:12px;color:var(--ink3);width:64px;flex:none}
.sesion .qué{flex:1}
.sesion .qué b{font-size:14px}
.sesion .qué span{display:block;font-size:12px;color:var(--ink2)}
.pr-badge{font-size:11px;font-weight:700;color:var(--brand);background:var(--brand-soft);
  border-radius:999px;padding:3px 8px;flex:none}

/* ---------- volumen ---------- */
.vrow{display:grid;grid-template-columns:76px 1fr 34px;align-items:center;gap:10px;margin:9px 0}
.vrow .lbl{font-size:13px;color:var(--ink2)}
.vtrack{position:relative;height:14px;background:var(--card2);border-radius:4px}
.vtrack .band{position:absolute;top:0;bottom:0;background:var(--ink3);opacity:.14;border-radius:2px}
.vtrack i{position:absolute;top:2px;bottom:2px;left:0;border-radius:3px;background:var(--brand)}
.vtrack i.low{background:var(--warn)}
.vrow .val{font-size:13px;font-weight:700;text-align:right}

/* ---------- tablas ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.delta-up{color:var(--good);font-weight:700}
.delta-eq{color:var(--ink3)}

/* ---------- rutinas ---------- */
details{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--card2)}
details summary{cursor:pointer;padding:11px 12px;font-weight:700;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary .muted{font-weight:400}
.r-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);font-size:13.5px}
.r-item span{color:var(--ink2);font-size:12px}
.btn{display:inline-block;border:1px solid var(--brand);color:var(--brand);background:none;font:inherit;
  font-size:13px;font-weight:700;padding:8px 16px;border-radius:10px;cursor:pointer}
.btn.solid{background:var(--brand);color:var(--bg)}
.btn:focus-visible{outline:2px solid var(--cat2);outline-offset:2px}

/* ---------- ejercicios ---------- */
.search{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:14px;padding:10px 13px;border-radius:10px;margin-bottom:10px}
.search:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.e-item{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.e-item:last-child{border-bottom:0}
.e-item:hover b{color:var(--brand)}
.e-item span{font-size:12px;color:var(--ink3)}
.note{font-size:12px;color:var(--ink3);margin-top:14px;text-align:center}

/* ===================== Desktop: aprovechar la pantalla grande =====================
   Mobile-first arriba; acá se ensancha para que los reportes rindan en la compu.
   Se aplica sólo en pantallas anchas, sin tocar el layout de teléfono. */
@media (min-width:1000px){
  .wrap{max-width:1180px; padding-left:24px; padding-right:24px}
  header{padding-top:24px}
  /* el gráfico de progresión, más grande cuando hay lugar */
  .chart-box{height:360px}
  /* tablas y textos un toque más grandes en desktop */
  .tbl{font-size:14px}
  .tbl td{padding:11px 10px}
  /* heatmap con celdas más cómodas */
  .heat i{border-radius:4px}
}
@media (min-width:1000px) and (max-width:1319px){
  /* tarjetas de estado a 2 columnas (ya venían así por .grid2) */
  .grid2{grid-template-columns:1fr 1fr}
}
@media (min-width:1320px){
  /* pantallas grandes: 3 columnas de tarjetas de estado */
  .grid2{grid-template-columns:repeat(3,1fr)}
}
/* el nav de pestañas centrado y con aire en desktop (no pegado al borde) */
@media (min-width:1000px){
  nav{border-radius:12px; margin:0 0 4px; border:1px solid var(--line); padding:8px 10px; top:8px}
}