/* Inicio: cabecera de color con lo esencial del día; debajo, sin recuadros,
   las tareas, una fila de cifras y la semana. En ordenador, dos columnas. */
.ini-hero{ --hero: color-mix(in srgb, var(--coral) 80%, #000); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px;
  padding:20px 20px 22px; border-radius:24px; color:#fff;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--coral) 92%, #fff) 0%, transparent 60%), var(--hero); }
.ini-hero-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.ini-fecha{ font-size:13px; font-weight:500; color: rgba(255,255,255,.88); }
.ini-h{ font-family: var(--title); font-size:44px; font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:1; margin:4px 0 0; color:#fff; }
.ini-hero-fila{ display:flex; align-items:center; gap:14px; }
.ini-hero-anillo{ width:64px; height:64px; flex-shrink:0; }
.ini-hero-anillo circle{ fill:none; stroke-width:4; }
.ini-hero-anillo .fondo{ stroke: rgba(255,255,255,.28); }
.ini-hero-anillo .valor{ stroke:#fff; stroke-linecap:round; transition: stroke-dasharray .6s cubic-bezier(.2,.7,.2,1); }
.ini-hero-anillo text{ fill:#fff; font-size:9px; font-weight:700; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ini-hero-txt{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.ini-hero-txt > b{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.ini-hero-exa{ border:0; background:none; padding:0; font:inherit; font-size:13.5px; color: rgba(255,255,255,.92); cursor:pointer; text-align:left; font-variant-numeric: tabular-nums; }
.ini-hero-exa b{ color:#fff; }
.ini-hero-exa:hover{ color:#fff; text-decoration: underline; text-underline-offset:3px; }
.ini-hero :focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ini-encurso{ display:flex; flex-direction:column; gap:8px; }

.ini-cuerpo{ display:grid; grid-template-columns: minmax(0, 1fr); gap:6px; margin-top:8px; }
.ini-col{ min-width:0; display:flex; flex-direction:column; gap:6px; }
@media (min-width: 900px){
  .ini-cuerpo{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap:40px; margin-top:14px; }
  .ini-encurso{ max-width:520px; }
}
.ini-sec{ display:flex; flex-direction:column; gap:6px; padding:16px 2px 4px; }
.ini-label{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--muted); }
.ini-label > span:first-child{ min-width:0; }
.ini-aviso{ color: var(--coral); }
.ini-link{ display:inline-flex; align-items:center; gap:1px; flex-shrink:0; border:0; background:none; padding:0; font:inherit; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color: var(--coral); cursor:pointer; }
.ini-link svg{ width:15px; height:15px; }
.ini-flecha{ display:flex; color: var(--muted-2); flex-shrink:0; }
.ini-flecha svg{ width:18px; height:18px; }
.ini-barra{ display:block; height:4px; border-radius:99px; background: var(--line); overflow:hidden; }
.ini-barra i{ display:block; height:100%; border-radius:inherit; background: var(--c, var(--coral)); transition: width .5s cubic-bezier(.2,.7,.2,1); }

/* Hoy, en pequeño: «Hoy · 1 de 3», un punto por tarea y lo siguiente. Al pulsarlo, la lista entera (hoja). */
.ini-hoy{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:18px; background: var(--card); cursor:pointer; min-width:0; border:0; font:inherit; color: var(--text); text-align:left; width:100%; }
.ini-hoy:hover{ background: var(--card-hi); }
.ini-hoy:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.ini-hoy-cab{ display:flex; align-items:center; gap:10px; min-width:0; }
.ini-hoy-l{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); white-space:nowrap; }
.ini-hoy-l b{ color: var(--text); letter-spacing:0; text-transform:none; font-size:13px; }
.ini-hoy-puntos{ display:flex; gap:4px; flex:1; min-width:0; overflow:hidden; }
.ini-hoy-puntos i{ width:8px; height:8px; flex-shrink:0; border-radius:50%; background: var(--c); }
.ini-hoy-puntos i.h{ opacity:.3; }
.ini-hoy-mas{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color: var(--coral); white-space:nowrap; }
.ini-hoy-mas svg{ width:14px; height:14px; }
.ini-hoy-sig{ display:flex; align-items:center; gap:10px; min-width:0; }
.ini-hoy-sig > i{ width:10px; height:10px; flex-shrink:0; border-radius:50%; background: var(--c); }
.ini-hoy-t{ flex:1; min-width:0; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ini-hoy-sig.hecho .ini-hoy-t{ color: var(--green); }
.ini-hoy.vacio{ flex-direction:row; align-items:center; }
.ini-hoy.vacio .ini-hoy-t{ color: var(--coral); font-size:14px; }
.ini-hoy .ini-tarea-ir{ padding:6px 13px; font-size:12.5px; }
.ini-hoja .cal-hoja-cuerpo{ gap:12px; }

/* La lista de hoy (en la hoja): cuándo · punto de color · tarea · botón */
.ini-agenda{ display:flex; flex-direction:column; }
.ini-ag{ display:grid; grid-template-columns: 46px 12px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line-soft); cursor:pointer; min-width:0; }
.ini-ag:first-child{ border-top:0; padding-top:4px; }
.ini-ag-cuando{ font-size:11.5px; font-weight:600; color: var(--muted-2); }
.ini-ag.ahora .ini-ag-cuando{ color: var(--coral); font-weight:700; }
.ini-ag-punto{ width:10px; height:10px; border-radius:50%; background: var(--c); justify-self:center; }
.ini-ag.hecha .ini-ag-punto{ opacity:.35; }
.ini-check{ width:24px; height:24px; flex-shrink:0; border-radius:50%; border:2px solid var(--c); background:none; color:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition: background .15s; }
.ini-check svg{ width:13px; height:13px; }
.ini-ag.hecha .ini-check{ background: var(--c); color:#fff; }
.ini-tarea-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ini-tarea-t{ font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ini-tarea-cat{ font-size:12.5px; color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ini-ag.hecha .ini-tarea-t{ color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-2); }
.ini-tarea-test{ display:flex; align-items:center; gap:8px; margin-top:4px; font-size:11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ini-tarea-test .ini-barra{ flex:1; max-width:160px; }
.ini-tarea-ir{ flex-shrink:0; padding:8px 14px; border-radius:99px; border:0; background: var(--coral); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ini-tarea-ir:hover{ filter: brightness(1.06); }
.ini-mas{ align-self:flex-start; border:0; background:none; padding:0; font:inherit; font-size:13px; color: var(--muted); cursor:pointer; text-decoration: underline; text-underline-offset:3px; }
.ini-anadir{ width:100%; display:flex; align-items:center; gap:8px; padding:12px; border-radius:12px; border:1px dashed var(--line); background:none; color: var(--muted); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.ini-anadir span{ color: var(--coral); font-size:18px; font-weight:700; line-height:1; }

/* Cómo vas: una fila de cifras separadas por líneas finas */
.ini-cifras{ display:grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.ini-cifra{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:6px 0 6px 14px; border:0; border-left:1px solid var(--line); background:none; font:inherit; color: var(--text); text-align:left; }
.ini-cifra:first-child{ border-left:0; padding-left:0; }
button.ini-cifra{ cursor:pointer; }
button.ini-cifra:hover b{ color: var(--coral); }
.ini-cifra b{ font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric: tabular-nums; transition: color .15s; }
.ini-cifra b small{ font-size:15px; font-weight:600; color: var(--muted); margin-left:1px; }
.ini-cifra.aviso b{ color: var(--coral); }
.ini-cifra > span{ font-size:12.5px; color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* El examen de esta semana: una tarjeta del color de cómo vas */
.ini-exa{ width:100%; display:flex; flex-direction:column; gap:12px; padding:14px; border:0; border-radius:20px; text-align:left; font:inherit; color: var(--text); cursor:pointer;
  background: color-mix(in srgb, var(--c, var(--coral)) 11%, var(--bg)); transition: transform .15s; }
.ini-exa:active{ transform: scale(.985); }
.ini-exa:focus-visible, .ini-exa-nuevo:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.ini-exa-c{ display:flex; align-items:center; gap:12px; min-width:0; }
.ini-exa-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ini-exa-txt b{ font-size:15px; font-weight:700; }
.ini-exa-txt span{ font-size:12.5px; color: var(--muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ini-exa-falta{ font-size:13px; font-weight:700; color: var(--coral); }
.ini-exa-anillo{ width:56px; height:56px; flex-shrink:0; }
.ini-exa-anillo.grande{ width:84px; height:84px; }
.ini-exa-anillo circle{ fill:none; stroke-width:4; }
.ini-exa-anillo .fondo{ stroke: color-mix(in srgb, var(--text) 10%, transparent); }
.ini-exa-anillo .valor{ stroke-linecap:round; transition: stroke-dasharray .6s cubic-bezier(.2,.7,.2,1); }
.ini-exa-anillo text{ fill: var(--text); font-size:8.5px; font-weight:800; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ini-exa .ini-tema-cab{ font-size:12.5px; }
.ini-exa .ini-tema-cab > span{ font-weight:500; color: var(--muted); }
.ini-exa .ini-tema-cab > b{ font-size:12.5px; }
.ini-exa-nuevo{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:14px; border-radius:20px; border:1.5px dashed var(--line); background:none; font:inherit; color: var(--muted); text-align:center; cursor:pointer; }
.ini-exa-nuevo b{ font-size:14px; color: var(--coral); }
.ini-exa-nuevo span{ font-size:12px; }
.ini-exa-nuevo.ancho{ width:100%; align-items:flex-start; text-align:left; padding:16px; }
.ini-exa-nuevo:hover{ border-color: var(--muted-2); }
/* El día del examen: la tarjeta entera de color, con «Entrar al examen» */
.ini-exa-dia{ cursor:default; gap:6px; padding:18px; color:#fff; background: radial-gradient(120% 100% at 100% 0%, #F0625E 0%, transparent 65%), #C93A3F; }
.ini-exa-dia-l{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.ini-exa-dia-t{ font-family: var(--title); font-size:36px; line-height:1.05; letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; }
.ini-exa-dia-sub{ font-size:13px; opacity:.9; line-height:1.4; }
.ini-exa-dia-bot{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.ini-exa-entrar{ flex:1; min-width:180px; padding:13px 18px; border:0; border-radius:99px; background:#fff; color:#B3262C; font:inherit; font-size:15.5px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.ini-exa-entrar:hover{ filter: brightness(.97); }
.ini-exa-ver{ border:0; background:none; padding:6px 2px; font:inherit; font-size:13.5px; font-weight:600; color:#fff; cursor:pointer; }
.ini-exa-dia :focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ini-exa-hecho{ gap:4px; }
.ini-exa-hecho.ok{ --c: var(--green); } .ini-exa-hecho.mal{ --c: var(--coral); }
.ini-exa-hecho .ini-exa-dia-l{ color: var(--muted); }
.ini-exa-nota{ font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; color: var(--c); font-variant-numeric: tabular-nums; }
.ini-exa-nota small{ font-size:16px; color: var(--muted); font-weight:600; }
.ini-exa-hecho .ini-exa-dia-sub{ color: var(--muted); opacity:1; }
/* Instrucciones antes de empezar */
.ini-instr-hoja .cal-hoja-cuerpo{ gap:18px; }
.ini-instr-cifras{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ini-instr-cifras div{ display:flex; flex-direction:column; align-items:flex-start; padding:14px 16px; border-radius:16px; background: color-mix(in srgb, #E5484D 10%, var(--card)); }
.ini-instr-cifras b{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#E5484D; font-variant-numeric: tabular-nums; }
.ini-instr-cifras span{ font-size:13px; color: var(--muted); margin-top:4px; }
.ini-instr{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ini-instr li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.45; color: var(--muted); }
.ini-instr li b{ color: var(--text); }
.ini-instr-ico{ width:32px; height:32px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; background: var(--card); color: var(--text); }
.ini-instr-ico svg{ width:17px; height:17px; }
.ini-instr-formato{ align-self:flex-start; border:0; background:none; padding:0; font:inherit; font-size:13px; font-weight:600; color: var(--coral); cursor:pointer; }
/* Detalle de un examen (hoja): una tarjeta con cómo vas en total y la lista de temas */
.ini-exa-total{ --c: var(--coral); position:relative; display:flex; align-items:baseline; gap:12px; padding:18px 20px 22px; border-radius:20px; overflow:hidden;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c) 26%, transparent) 0%, transparent 60%), color-mix(in srgb, var(--c) 12%, var(--bg)); }
.ini-exa-total.bien{ --c: var(--green); } .ini-exa-total.medio{ --c: var(--amber); }
.ini-exa-total b{ font-size:52px; font-weight:800; letter-spacing:-.045em; line-height:1; color: var(--c); font-variant-numeric: tabular-nums; }
.ini-exa-total b small{ font-size:24px; letter-spacing:0; margin-left:2px; }
.ini-exa-total > span{ font-size:16px; font-weight:700; color: var(--text); }
.ini-exa-total-barra{ position:absolute; left:20px; right:20px; bottom:12px; height:4px; border-radius:99px; background: color-mix(in srgb, var(--c) 22%, transparent); overflow:hidden; }
.ini-exa-total-barra i{ display:block; height:100%; border-radius:inherit; background: var(--c); }
.ini-entra-lista{ list-style:none; margin:0; padding:4px 0; border-radius:18px; background: var(--card); }
.ini-entra{ --c: var(--coral); display:flex; align-items:center; gap:12px; padding:12px 16px; }
.ini-entra + .ini-entra{ border-top:1px solid var(--line-soft); }
.ini-entra.bien{ --c: var(--green); } .ini-entra.medio{ --c: var(--amber); } .ini-entra.flojo{ --c: var(--coral); }
.ini-aro{ width:30px; height:30px; flex-shrink:0; }
.ini-aro circle{ fill:none; stroke-width:5; }
.ini-aro .fondo{ stroke: color-mix(in srgb, var(--c) 18%, transparent); }
.ini-aro .valor{ stroke: var(--c); stroke-linecap:round; }
.ini-entra-n{ flex:1; min-width:0; font-size:15px; font-weight:600; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ini-entra-pct{ flex-shrink:0; font-size:15px; font-weight:800; color: var(--c); font-variant-numeric: tabular-nums; }
/* Detalle de un examen (hoja) */
.ini-exa-hoja .cal-hoja-cuerpo{ gap:14px; }
.ini-exa-res{ display:flex; align-items:center; gap:16px; }
.ini-nivel{ padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.ini-nivel.bien{ color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.ini-nivel.medio{ color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.ini-nivel.flojo{ color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.ini-exa-datos{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-left:16px; border-left:1px solid var(--line); font-size:13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ini-exa-datos b{ color: var(--text); font-weight:700; }
.ini-exa-fallos{ border:0; background:none; padding:0; font:inherit; color: var(--coral); cursor:pointer; text-align:left; }
.ini-exa-fallos b{ color: var(--coral); }
.ini-temas{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.ini-tema{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.ini-tema-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:14px; }
.ini-tema-cab > span{ min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ini-tema-cab small{ margin-left:6px; font-size:11.5px; font-weight:500; color: var(--muted); }
.ini-tema-cab > b{ flex-shrink:0; font-size:14px; font-variant-numeric: tabular-nums; }
.ini-pila{ display:flex; height:6px; border-radius:99px; background: var(--line); overflow:hidden; }
.ini-pila i{ display:block; height:100%; }
.ini-pila .v, .ini-leyenda .v{ background: var(--green); }
.ini-pila .a, .ini-leyenda .a{ background: var(--amber); }
.ini-pila .r, .ini-leyenda .r{ background: var(--coral); }
.ini-tema-n{ font-size:12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ini-tema-n em{ font-style:normal; color: var(--coral); }
.ini-leyenda{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:11.5px; color: var(--muted); }
.ini-leyenda span{ display:inline-flex; align-items:center; gap:5px; }
.ini-leyenda i{ width:8px; height:8px; border-radius:50%; background: var(--line); }

/* Lo que está a medias: dentro de la cabecera, en tarjeta del color del fondo */
.ini-continuar{ width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; text-align:left; font:inherit; color: var(--text);
  background: var(--bg); border:0; border-radius:16px; cursor:pointer; box-shadow: 0 6px 18px -10px rgba(0,0,0,.45); }
.ini-continuar:hover{ background: var(--card); }
.ini-continuar-ico{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: var(--coral); color:#fff; }
.ini-continuar-ico svg{ width:14px; height:14px; margin-left:2px; }
.ini-continuar-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ini-continuar-txt b{ font-size:15px; }
.ini-continuar-txt > span{ font-size:12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ini-continuar-txt .ini-barra{ margin-top:5px; max-width:240px; }

/* Volver desde el calendario */
.cal-volver{ margin-bottom:14px; width:max-content; }

/* Tu examen (js/examen.js): cuenta atrás con el ritmo diario */
.exa-tarjeta{ width:100%; display:flex; align-items:flex-start; gap:16px; padding:14px 16px; text-align:left; font:inherit; color: var(--text);
  background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.exa-tarjeta:hover{ background: var(--card); }
.exa-tarjeta.exa-sin{ align-items:center; }
.exa-ico{ width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color: var(--muted); }
.exa-ico svg{ width:20px; height:20px; }
.exa-cuenta{ min-width:56px; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-start; line-height:1; color: var(--coral); }
.exa-cuenta b{ font-size:30px; font-weight:650; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.exa-cuenta span{ font-size:12px; font-weight:500; margin-top:4px; color: var(--muted); }
.exa-tarjeta.pasado .exa-cuenta{ color: var(--muted); }
.exa-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.exa-txt > b{ font-size:15px; font-weight:500; }
.exa-txt > span{ font-size:12.5px; color: var(--muted); }
.exa-ritmo{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:13px; line-height:1.45; color: var(--text); }
.exa-ritmo span{ display:block; font-size:12px; color: var(--muted); margin-top:2px; }
.exa-sim{ align-self:flex-start; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:10px; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background: var(--bg); color: var(--text); font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.exa-sim:hover{ background: var(--card); }
/* Hoja de ajustes */
.exa-fecha{ display:flex; gap:8px; align-items:center; }
.exa-fecha .cal-in{ flex:1; }
.exa-otro{ width:84px; padding:8px 10px; border-radius:99px; text-align:center; }
.exa-rango{ width:100%; accent-color: var(--coral); }
.exa-nota{ line-height:1.45; }
.exa-hist{ margin-top:6px; }
/* Resultado del Simulacro oficial */
.simc-oficial{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 12px; margin-top:10px; font-size:12.5px; color: var(--muted); }
.simc-veredicto{ padding:3px 10px; border-radius:99px; font-weight:800; font-size:12px; color:#fff; background: var(--green); }
.simc-veredicto.mal{ background: var(--coral); }


/* Pantalla grande: la cabecera ancha con lo de hoy dentro, y al lado lo que está a medias y el examen.
   En el móvil se ve lo de siempre (.ini-movil). */
.ini-pc{ display:none; }
@media (min-width: 900px){
  .ini-movil{ display:none; }
  /* Llena el alto de la pantalla: «Cómo vas» se estira hasta abajo */
  .ini-pc{ display:grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(200px, 1fr); gap:22px; align-items:stretch;
    min-height: calc(100dvh - var(--header-h, 72px) - 32px - 40px); }
  .ini-cvg{ grid-column: 1 / -1; }
}
.ini-heropc{ display:grid; grid-template-columns: 210px minmax(0, 1fr); gap:28px; padding:26px 26px 26px 28px; border-radius:26px; color:#fff;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--coral) 92%, #fff) 0%, transparent 60%), color-mix(in srgb, var(--coral) 80%, #000); }
.ini-heropc-izq{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.ini-heropc .ini-h.ini-heropc-dia{ font-size:96px; line-height:.9; margin:6px 0 2px; letter-spacing:0; }
.ini-heropc-mes{ font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.92; margin-bottom:18px; }
.ini-heropc-n{ display:flex; flex-direction:column; margin-bottom:14px; }
.ini-heropc-n b{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric: tabular-nums; }
.ini-heropc-n span{ font-size:13.5px; opacity:.9; }
.ini-heropc-add{ margin-top:auto; padding:9px 16px; border-radius:99px; border:1.5px solid rgba(255,255,255,.7); background:none; color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ini-heropc-add:hover{ background: rgba(255,255,255,.14); }
.ini-heropc-izq .ini-hero-exa{ margin-bottom:18px; }
.ini-heropc :focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ini-heropc-tareas{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.ini-ht{ display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:16px; background: rgba(255,255,255,.14); color:#fff; cursor:pointer; min-width:0; border:0; font:inherit; text-align:left; transition: background .15s; }
.ini-ht:hover{ background: rgba(255,255,255,.2); }
.ini-ht.ya{ background:#fff; color:#09090B; box-shadow:0 12px 28px -16px rgba(0,0,0,.55); }
.ini-ht.hecha{ opacity:.6; }
.ini-ht.hecha .ini-ht-txt b{ text-decoration: line-through; }
.ini-ht-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ini-ht-txt b{ font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ini-ht-txt span{ font-size:12.5px; opacity:.85; }
.ini-ht.ya .ini-ht-txt span{ color: #63636B; opacity:1; }
.ini-ht-ir{ flex-shrink:0; padding:9px 18px; border:0; border-radius:99px; background:#fff; color:#B3262C; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; }
.ini-ht.ya .ini-ht-ir{ background: var(--coral); color:#fff; }
.ini-ht-check{ width:28px; height:28px; flex-shrink:0; border-radius:50%; border:2px solid rgba(255,255,255,.85); background:none; color:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.ini-ht-check svg{ width:14px; height:14px; }
.ini-ht.ya .ini-ht-check{ border-color: var(--coral); }
.ini-ht.hecha .ini-ht-check{ background: rgba(255,255,255,.85); color: color-mix(in srgb, var(--coral) 80%, #000); }
.ini-ht-nueva{ justify-content:center; font-weight:700; border:1.5px dashed rgba(255,255,255,.6); background:none; }
.ini-ht-mas{ align-self:flex-start; border:0; background:none; padding:2px 4px; font:inherit; font-size:13px; font-weight:600; color:#fff; cursor:pointer; }
/* Panel «Para seguir»: misma altura y esquinas que el recuadro, una fila por cosa */
.ini-panel{ display:flex; flex-direction:column; padding:10px 20px 8px; border-radius:26px; background: var(--card); min-width:0; }
.ini-panel-t{ padding:12px 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
.ini-panel-vacio{ padding:14px 0; font-size:14px; color: var(--muted); }
.ini-panel .ini-continuar{ background:none; box-shadow:none; border-radius:0; padding:16px 0; border-top:1px solid var(--line); }
.ini-panel .ini-continuar:first-of-type{ border-top:0; }
.ini-panel .ini-continuar:hover{ background:none; }
.ini-panel .ini-continuar:hover .ini-continuar-txt b{ color: var(--coral); }
.ini-panel .ini-continuar-ico{ width:42px; height:42px; }
.ini-panel .ini-continuar-txt b{ font-size:15px; transition: color .15s; }
.ini-panel .ini-barra{ max-width:none; }
.ini-marcadas .ini-continuar-ico{ background:#3A8EE6; font-size:16px; margin-left:0; }
.ini-fila-exa .ini-continuar-ico{ background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-weight:800; font-size:17px; }
.ini-fila-exa.hoy .ini-continuar-ico{ background:#E5484D; color:#fff; }
.ini-fila-exa.hoy .ini-continuar-txt b{ color:#E5484D; }
.ini-fila-exa.con-anillo .ini-continuar-ico{ background:none; }
.ini-fila-exa .ini-exa-anillo{ width:42px; height:42px; }
.ini-fila-exa .ini-exa-anillo text{ font-size:9.5px; }
.ini-marcadas .ini-continuar-ico{ color:#fff; }
/* Cómo vas, a todo el ancho debajo (solo pantalla grande): un anillo grande con el % y, al lado, las preguntas en pequeño */
.ini-cvg{ display:grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-radius:26px; background: var(--card); padding:8px; }
.ini-cv{ --c: var(--coral); display:flex; align-items:center; justify-content:center; gap:22px; padding:26px 24px; border:0; border-radius:20px; background:none; font:inherit; color: var(--text); text-align:left; cursor:pointer; min-width:0; }
.ini-cv + .ini-cv{ box-shadow: inset 1px 0 0 var(--line); border-radius:0 20px 20px 0; }
.ini-cv:hover{ background: var(--card-hi); }
.ini-cv-aro{ position:relative; width:132px; height:132px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ini-cv-aro svg{ position:absolute; inset:0; width:100%; height:100%; }
.ini-cv-aro circle{ fill:none; stroke-width:9; }
.ini-cv-aro .fondo{ stroke: color-mix(in srgb, var(--c) 16%, transparent); }
.ini-cv-aro .valor{ stroke: var(--c); stroke-linecap:round; transition: stroke-dasharray .6s cubic-bezier(.2,.7,.2,1); }
.ini-cv-aro b{ position:relative; font-size:34px; font-weight:800; letter-spacing:-.035em; font-variant-numeric: tabular-nums; }
.ini-cv-aro b small{ font-size:16px; font-weight:700; color: var(--muted); margin-left:1px; letter-spacing:0; }
.ini-cv.aviso .ini-cv-aro b{ color: var(--coral); }
.ini-cv-txt{ min-width:0; display:flex; flex-direction:column; gap:3px; font-size:13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ini-cv-t{ font-size:16px; font-weight:700; color: var(--text); margin-bottom:4px; }
.ini-cv-txt strong{ color: var(--text); font-weight:700; }
.ini-cv-txt em{ font-style:normal; font-weight:600; color: var(--coral); margin-top:4px; }
/* Cómo vas con examen esta semana: un anillo por tema que entra */
.ini-cvg-exa{ display:flex; flex-direction:column; padding:8px 8px 12px; }
.ini-cvg-t{ display:flex; align-items:baseline; gap:12px; padding:16px 22px 4px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
.ini-cvg-t span{ text-transform:none; letter-spacing:0; font-weight:600; color: var(--text); }
.ini-cvg-temas{ flex:1; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-content:center; }
.ini-cvg-temas .ini-cv + .ini-cv{ box-shadow:none; border-radius:20px; }
.ini-cvg-temas .ini-cv{ justify-content:flex-start; }
.ini-cvg-temas .ini-cv-aro{ width:112px; height:112px; }
.ini-cvg-temas .ini-cv-aro b{ font-size:28px; }
.ini-cvg-temas .ini-cv-t{ font-size:15px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }


/* Examen compartido: quién lo tiene y su nota */
.ini-exa-gente{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.ini-exa-gente-t{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }
.ini-exa-notas{ list-style:none; margin:0; padding:4px 0; border-radius:18px; background: var(--card); }
.ini-exa-notas li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; font-size:15px; }
.ini-exa-notas li + li{ border-top:1px solid var(--line); }
.ini-exa-notas li.yo span{ font-weight:700; }
.ini-exa-notas b{ font-variant-numeric: tabular-nums; }
.ini-exa-notas b.ok{ color: var(--green); }
.ini-exa-notas b.mal{ color: var(--coral); }
.ini-exa-notas i{ font-style:normal; font-size:13px; color: var(--muted); }