:root{
  --bg:#F3F5F0; --surface:#FFFFFF; --surface-2:#E9EEE6; --ink:#15201A; --muted:#3E4C44; --line:#B9C5B6;
  --accent:#2E6A4E; --accent-ink:#FFFFFF; --accent-soft:#DAEAE0;
  --pencil:#7A4B00; --pencil-soft:#F5E8CC;
  --bad:#A63D2B; --bad-soft:#F6DEDA; --ok:#22663A; --ok-soft:#DCEEE1;
  --pide:#0B57D0; --pide-soft:#E8F0FE;
  --shadow:0 1px 2px rgba(28,38,32,.06),0 4px 14px rgba(28,38,32,.05);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101612; --surface:#18201B; --surface-2:#202A24; --ink:#F1F5F2; --muted:#C3CEC7; --line:#48584E;
    --accent:#7FC4A0; --accent-ink:#0E1A13; --accent-soft:#1E382B;
    --pencil:#E3B561; --pencil-soft:#3A2E16;
    --bad:#F08C78; --bad-soft:#3E221D; --ok:#88D29E; --ok-soft:#1B3424;
    --pide:#8AB4F8; --pide-soft:#172A4A;
    --shadow:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101612; --surface:#18201B; --surface-2:#202A24; --ink:#F1F5F2; --muted:#C3CEC7; --line:#48584E;
  --accent:#7FC4A0; --accent-ink:#0E1A13; --accent-soft:#1E382B;
  --pencil:#E3B561; --pencil-soft:#3A2E16;
  --bad:#F08C78; --bad-soft:#3E221D; --ok:#88D29E; --ok-soft:#1B3424;
  --pide:#8AB4F8; --pide-soft:#172A4A;
  --shadow:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* PEDIDO 19: letra más grande por defecto (se lee cómodo sin configurar nada); A− / A+ en Inicio */
html{font-size:20px}
html[data-letra="grande"]{font-size:22px}
html[data-letra="muy_grande"]{font-size:25px}
body{overflow-wrap:break-word}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.5;padding-inline:16px;padding-block:0 48px;min-height:100vh}
.wrap{max-width:780px;margin:0 auto}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header.top{background:var(--bg);padding-block:14px 8px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.mark{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:20px;height:20px;fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.userbox{display:flex;align-items:center;gap:6px}
.pill{font-size:.78rem;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--pencil-soft);color:var(--pencil)}
/* PEDIDO 17/19: todas las pestañas completas en cualquier ancho, como BOTONES parejos y fáciles de tocar (pasan a otra
   fila; nunca se desplaza hacia un lado) */
nav.tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,6.4em),1fr));gap:6px;font-size:.95rem}
nav.tabs button{border:2px solid var(--line);background:var(--surface);padding:8px 6px;min-height:56px;border-radius:12px;cursor:pointer;
  color:var(--ink);font-weight:700;font-size:inherit;white-space:normal;overflow-wrap:anywhere;line-height:1.15;box-shadow:var(--shadow)}
nav.tabs button:hover{border-color:var(--accent)}
nav.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

main{display:flex;flex-direction:column;gap:18px;padding-top:18px}
.stack{display:flex;flex-direction:column;gap:18px}
.banner{background:var(--pencil-soft);color:var(--ink);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:.92rem}
.banner b{color:var(--pencil)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.panel h2{font-size:1.15rem;font-weight:700}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.row.between{justify-content:space-between;align-items:center}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.row > .field{flex:1 1 160px}
.field label{font-size:.8rem;color:var(--muted);font-weight:700}
select,input[type=date],input[type=time],input[type=tel],input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],textarea{background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-height:56px}
textarea{resize:vertical;min-height:120px;line-height:1.55}
#dictado{font-size:1.05rem;min-height:140px;background:var(--surface-2);border-color:transparent}
.btn{border:1px solid var(--line);background:var(--surface);padding:9px 16px;border-radius:10px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);min-height:56px;border-width:2px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.danger.armed{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.small{padding:8px 14px;font-size:.95rem;min-height:56px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn:disabled{opacity:.5;cursor:default}
.btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* micrófono: botón grande normal, arriba del cuadro de texto (no flota al desplazarse) */
.micbar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.micbar .micestado{min-width:0;flex:1}
.micbar .micestado span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.micbtn{flex:none;min-width:120px;height:64px;padding:0 20px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 2px 10px rgba(46,106,78,.3);transition:transform .15s}
.micbtn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.micbtn:active{transform:scale(.96)}
.micbtn.on{background:var(--bad);box-shadow:0 0 0 0 rgba(166,61,43,.5);animation:pulso 1.4s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(166,61,43,.45)}70%{box-shadow:0 0 0 16px rgba(166,61,43,0)}100%{box-shadow:0 0 0 0 rgba(166,61,43,0)}}
.micestado{display:flex;flex-direction:column;gap:2px;font-size:.92rem;color:var(--muted)}
.micestado b{color:var(--ink);font-size:1rem}

.hint{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.hint .mic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center}
.hint .mic svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:2px dashed var(--line);background:transparent;border-radius:999px;padding:6px 14px;font-size:.9rem;min-height:56px;cursor:pointer;color:var(--muted)}
.chip:hover{border-style:solid;color:var(--ink)}

/* recordatorio */
.reminder{background:var(--accent-soft);border:0;box-shadow:none}
.reminder .head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.reminder dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.reminder dt{font-size:.8rem;color:var(--muted);font-weight:700;padding-top:2px}
.reminder dd{margin:0}
.reminder .todo{background:var(--surface);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:.93rem}
.reminder .todo b{color:var(--accent)}

/* vista previa */
.preview{display:flex;flex-direction:column;gap:10px}
.items{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:108px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.tag{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px;text-align:center}
.t-falta{background:var(--bad-soft);color:var(--bad)}
.t-atraso{background:var(--pencil-soft);color:var(--pencil)}
.t-fj{background:#FFF2CC;color:#7A5A00}
:root[data-theme="dark"] .t-fj{background:#3A3215;color:#E8CF7A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-fj{background:#3A3215;color:#E8CF7A}}
.t-tsi{background:var(--ok-soft);color:var(--ok)}
.t-tno{background:var(--bad-soft);color:var(--bad)}
.t-nota{background:var(--accent-soft);color:var(--accent)}
.t-clase{background:var(--surface);color:var(--muted);outline:1px solid var(--line)}
.x{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:1.3rem;line-height:1;padding:4px 8px;border-radius:6px;min-width:34px;min-height:34px}
.x:hover{background:var(--surface);color:var(--bad)}
.warn{font-size:.88rem;color:var(--pencil);background:var(--pencil-soft);padding:8px 12px;border-radius:10px}
.error{font-size:.9rem;color:var(--bad);background:var(--bad-soft);padding:8px 12px;border-radius:10px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.empty{color:var(--muted);font-size:.93rem;padding:6px 0}

/* reporte */
.tablewrap{overflow-x:auto;margin-inline:-4px;position:relative}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.bar{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.bar i{display:block;width:54px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.bar i b{display:block;height:100%;background:var(--ok)}
.avg{font-weight:700}
.avg.low{color:var(--bad)}
.alerts{display:flex;flex-wrap:wrap;gap:6px}
.alert{font-size:.84rem;padding:4px 10px;border-radius:999px;background:var(--bad-soft);color:var(--bad)}

/* leccionario */
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.log li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.log li:last-child{border-bottom:0}
.log li.vacio{display:block}
.log .date{font-family:var(--display);font-weight:700;line-height:1.2}
.log .date small{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:.8rem}
.log .body{display:flex;flex-direction:column;gap:3px;font-size:.94rem}
.log .body .t{font-weight:700;font-size:1rem}
.kv{color:var(--muted)}
.kv b{color:var(--ink);font-weight:400}

/* cursos */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.course{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.course h3{font-size:1.1rem}

/* acceso */
.auth{max-width:420px;margin:0 auto;padding-top:max(40px,8vh);display:flex;flex-direction:column;gap:18px}
.auth .brand{justify-content:center}
.auth .lead{text-align:center;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.check input{width:34px;height:34px;margin-top:0;flex:none;accent-color:var(--accent)}
.switch{text-align:center;font-size:.92rem}
/* PEDIDO 36 (B6, regla R8 en toda la app): lo que se toca se ve como botón también dentro de una frase («¿Olvidaste tu
   contraseña?», «Crea una», «Volver», «Cambiar»): marco y fondo, sin subrayado. Solo los enlaces de los textos legales quedan como enlaces */
.linkbtn{border:2px solid var(--line);background:var(--surface);color:var(--accent);font-weight:700;cursor:pointer;padding:6px 12px;
  border-radius:10px;text-decoration:none;min-height:56px;display:inline-flex;align-items:center;font:inherit;font-weight:700;margin:2px 0}
.linkbtn:hover{border-color:var(--accent)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;font-weight:700;font-size:.92rem;z-index:20;max-width:calc(100% - 32px)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin,.micbtn.on{animation:none}}
@media (max-width:520px){
  .item{grid-template-columns:1fr auto}
  .item .tag{justify-self:start;grid-column:1/-1}
  .log li{grid-template-columns:1fr;gap:4px}
  .log li.vacio{display:block}
  .micbtn{min-width:108px;height:60px}
}
/* estudiante por resolver en la vista previa */
.item.pend{outline:1px dashed var(--pencil);background:var(--pencil-soft)}
.t-elegir{background:var(--surface);color:var(--pencil);outline:1px solid var(--pencil)}
.resolver{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.resolver select{width:auto;min-width:0;max-width:100%;min-height:36px;padding:5px 9px}
.toast{display:flex;align-items:center;gap:12px;width:max-content}
#toastMsg{flex:1 1 auto;min-width:0}
.toastbtn{border:0;background:var(--accent-soft);color:var(--accent);font-weight:700;border-radius:8px;padding:6px 14px;cursor:pointer;white-space:nowrap;min-height:56px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* avisos a representantes */
.btn.wa{border-color:#1F8F4E;color:#1F7A45}
.btn.wa.primary{background:#1F8F4E;border-color:#1F8F4E;color:#fff}
:root[data-theme="dark"] .btn.wa:not(.primary){color:#7FD8A2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.wa:not(.primary){color:#7FD8A2}}
.t-aviso{background:#DCF3E4;color:#1F7A45}
.alert{display:inline-flex;align-items:center;gap:6px}
.alert button{border:0;border-radius:999px;background:var(--surface);color:#1F7A45;font-weight:700;font-size:.9rem;padding:4px 14px;cursor:pointer;min-height:56px}
/* (el nombre de cada estudiante en el Reporte sigue como texto con subrayado punteado: es una celda de tabla, no un botón suelto) */
.linkbtn.nombre{color:var(--ink);text-decoration:underline dotted;text-underline-offset:3px;font-weight:400;text-align:left;white-space:nowrap;border:0;background:none;padding:0 4px;border-radius:0}
td.acc,td.notas{white-space:nowrap}
td.acc{text-align:right}
.icono-wa{white-space:nowrap;border:2px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 12px;cursor:pointer;color:#1F7A45;font-weight:700;font-size:.9rem;min-height:56px}
dialog.dlg{border:1px solid var(--line);border-radius:16px;padding:0;background:var(--surface);color:var(--ink);width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px);box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog.dlg-ancho{width:min(860px,calc(100% - 24px))}
dialog.dlg::backdrop{background:rgba(16,22,18,.55)}
.dlghead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 18px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.dlghead h2{font-size:1.2rem}
.dlgbody{padding:14px 18px 18px;display:flex;flex-direction:column;gap:14px}
.dlgbody h3{font-size:1rem}
.extras{display:flex;flex-direction:column;gap:10px}
.extras:empty{display:none}
fieldset.opciones{border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:6px;margin:0}
fieldset.opciones legend{font-size:.8rem;color:var(--muted);font-weight:700;padding:0 4px}
.para{background:var(--surface-2);border-radius:10px;padding:8px 12px}
.cel-ok{color:var(--ok)}
.cel-mal{color:var(--bad);font-weight:700}
input.invalido{border-color:var(--bad);background:var(--bad-soft)}
.avisos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.avisos li{background:var(--surface-2);border-radius:10px;padding:8px 12px;font-size:.9rem}
.avisos li details summary{cursor:pointer}
.avisos li pre{white-space:pre-wrap;font-family:var(--body);margin:6px 0 0}
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.resumen div{background:var(--surface-2);border-radius:10px;padding:8px 10px}
.resumen b{display:block;font-size:1.2rem;font-family:var(--display)}
.progreso{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.progreso i{display:block;height:100%;background:#1F8F4E}
table.reps{min-width:680px}
table.reps input,table.reps select{min-height:36px;padding:5px 8px}
details.pegar{border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
details.pegar[open]{display:flex;flex-direction:column;gap:8px}
details.pegar summary{cursor:pointer;font-weight:700}

/* ================= modo fácil ================= */
.barra{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.confirmar{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.confirmar b{color:var(--bad)}
/* PEDIDO 32 (R7): la pregunta antes de usar la IA (azul, como lo que el docente responde) y «Cancelar» mientras trabaja */
.confirmar-ia{margin-top:6px}
.confirmar-ia b{color:var(--pide)}
.cancelar-ia{margin-top:6px}
.aviso-arreglo{align-items:center;gap:8px}
.aviso-arreglo p{margin:0}
/* pantalla de inicio */
.inicio{display:flex;flex-direction:column;gap:20px}
.saludo{font-size:1.6rem;font-weight:800}
.hoy{margin-top:6px;font-size:1.1rem}
.tiles{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:560px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:flex;align-items:center;gap:18px;min-height:112px;padding:16px 20px;border-radius:18px;border:2px solid var(--accent);
  background:var(--surface);color:var(--ink);font:inherit;font-size:1.3rem;font-weight:800;text-align:left;cursor:pointer;box-shadow:var(--shadow)}
.tile svg{flex:none;width:56px;height:56px;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tile:hover,.tile:focus-visible{background:var(--accent-soft)}
.tile:active{transform:scale(.99)}
/* asistente paso a paso */
.asistente{display:flex;flex-direction:column;gap:16px;padding-bottom:96px}
.asistente h2{font-size:1.45rem;font-weight:800}
.paso-cuerpo{display:flex;flex-direction:column;gap:16px}
.paso-pie{display:flex;justify-content:space-between;gap:12px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:2px solid var(--line);z-index:3}
.paso-pie .btn{flex:1;font-size:1.1rem;min-height:60px}
dialog .paso-pie{position:static;background:none}
.guia{font-size:1.1rem;line-height:1.55}
.ejemplo{font-size:1rem;background:var(--surface-2);border-radius:12px;padding:12px 14px}
.opciones-grandes{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.opciones-grandes{grid-template-columns:1fr 1fr}}
.opcion{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:72px;padding:14px 18px;border-radius:14px;border:2px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;position:relative}
.opcion b{font-size:1.2rem}
.opcion span{color:var(--muted);font-size:.95rem}
.opcion:hover,.opcion:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.opcion .hoy-badge{position:absolute;top:10px;right:12px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 10px;font-weight:700;font-size:.85rem}
.cuenta{font-size:1.1rem}
.tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:360px){.tarjetas{grid-template-columns:1fr}}
.tarjeta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:76px;padding:10px 14px;border-radius:14px;border:2px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tarjeta b{font-size:1.05rem;line-height:1.25}
.tarjeta span{font-weight:700;font-size:.95rem;color:var(--ok)}
.tarjeta.est-falta{background:var(--bad-soft);border-color:var(--bad)}
.tarjeta.est-falta span{color:var(--bad)}
.tarjeta.est-atraso{background:var(--pencil-soft);border-color:var(--pencil)}
.tarjeta.est-atraso span{color:var(--pencil)}
.resumen-grande{display:grid;grid-template-columns:1fr;gap:10px}
.resumen-grande div{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.resumen-grande span{font-weight:700}
.resumen-grande b{font-size:1.6rem;font-family:var(--display)}
.resumen-grande small{grid-column:1/-1;color:var(--muted);font-size:.95rem}
.listo{font-size:1.25rem;font-weight:700;line-height:1.5}
.btn.grande{font-size:1.2rem;min-height:64px}
.notas-lista{display:flex;flex-direction:column;gap:8px}
.nota-fila{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:8px 12px}
.nota-fila span{font-weight:700}
.nota-fila input{text-align:center;font-size:1.2rem;font-weight:700}
/* ayuda y tutorial */
.dibujo{display:flex;justify-content:center;color:var(--ink)}
.dibujo svg{width:min(260px,100%);height:auto}
.dibujo .lin{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.dibujo .suave{opacity:.55}
.dibujo .acento{fill:var(--accent);stroke:none}
.dibujo .blanco{fill:var(--accent-ink)}
.dibujo text{font-family:var(--display);font-weight:800;text-anchor:middle;fill:currentColor}
.dibujo .num{font-size:26px}
.dibujo .grande-t{font-size:54px}
.dibujo .txt{font-size:16px}
.dibujo .blanco-t{fill:var(--accent-ink)}
.pasos-ayuda{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:10px;font-size:1.1rem;line-height:1.5}
.tut-texto{font-size:1.2rem;line-height:1.55}

/* seguridad: medidor de contraseña */
.medidor{display:flex;flex-direction:column;gap:4px;font-size:.95rem}
.medidor:empty{display:none}
.barra-fuerza{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:220px}
.barra-fuerza i{height:8px;border-radius:4px;background:var(--surface-2)}
.medidor.debil b{color:var(--bad)} .medidor.debil .barra-fuerza i:nth-child(1){background:var(--bad)}
.medidor.buena b{color:var(--pencil)} .medidor.buena .barra-fuerza i:nth-child(-n+2){background:var(--pencil)}
.medidor.muy-buena b{color:var(--ok)} .medidor.muy-buena .barra-fuerza i{background:var(--ok)}
.ok-caja{background:var(--ok-soft);color:var(--ink);border-radius:10px;padding:10px 12px}

/* página de privacidad */
/* PEDIDO 36 (E4): los textos legales con letra más pequeña, justificados y compactos (como unos términos de servicio) */
.doc{max-width:720px;margin:0 auto;padding-block:24px;display:flex;flex-direction:column;gap:8px;font-size:.92rem;line-height:1.45;text-align:justify}
.doc h1{font-size:1.5rem;text-align:left}
.doc h2{font-size:1.02rem;margin-top:8px;text-align:left}
.doc p{margin:0}
.doc ul,.doc ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.doc .indice-doc{text-align:left}

/* exámenes y refuerzo (pedido 4) */
.estado{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 12px;min-height:56px;cursor:pointer;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;font-weight:700;font-size:.92rem;color:var(--ink)}
.estado small{font-weight:400;font-size:.76rem;color:var(--muted)}
.estado.e-pendiente{border-color:var(--bad);background:var(--bad-soft)}
.estado.e-pendiente small{color:var(--bad)}
.estado.e-en_proceso{border-color:var(--pencil);background:var(--pencil-soft)}
.estado.e-en_proceso small{color:var(--pencil)}
.estado.e-superado{border-color:var(--ok);background:var(--ok-soft)}
.estado.e-superado small{color:var(--ok)}
.estado .veces{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.falta-calificar{font-size:.78rem;font-weight:700;color:var(--pencil);background:var(--pencil-soft);border-radius:6px;padding:2px 8px}
tr.sin-nota td{background:var(--surface-2)}
.siguiente{background:var(--accent-soft);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.siguiente .grande{font-size:1.3rem;font-family:var(--display)}
.ex-campos{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.ex-campos .field{flex:1 1 150px}
.ex-campos .field.corto{flex:0 0 96px}
.stack-sm{display:flex;flex-direction:column;gap:6px;min-width:0}
.positivo{color:var(--pencil)}
.temas-curso{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.barra-t{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:4px 0}
.barra-t i{display:block;height:100%;background:var(--bad)}
.ref-est{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
.evolucion{margin:0}
.evolucion svg{width:100%;max-width:460px;height:auto}
.barra-nota{fill:var(--accent)}
.barra-nota.baja{fill:var(--bad)}
.evolucion .gt{font-size:9px;text-anchor:middle;fill:var(--ink)}
.linea7{stroke:var(--bad);stroke-width:1;stroke-dasharray:4 3}
@media (max-width:560px){ .item .ex-campos .field{flex:1 1 100%} .ex-campos .field.corto{flex:1 1 100%} }
.temas-fila{display:block;font-size:.8rem;color:var(--bad);font-weight:700}
/* panel para elegir el estado de un tema de refuerzo */
.panel-estado{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);margin-top:8px}
.botones-estado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.estado-btn{min-height:64px;font-size:1rem;border-width:3px;padding:8px 6px;min-width:0;white-space:normal;text-align:center;line-height:1.2}
.estado-btn.e-pendiente{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.estado-btn.e-en_proceso{background:var(--pencil-soft);border-color:var(--pencil);color:var(--pencil)}
.estado-btn.e-superado{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.estado-btn[aria-pressed="true"].e-pendiente{background:var(--bad);color:#fff}
.estado-btn[aria-pressed="true"].e-en_proceso{background:var(--pencil);color:#fff}
.estado-btn[aria-pressed="true"].e-superado{background:var(--ok);color:#fff}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .estado-btn[aria-pressed="true"]{color:var(--bg)} }
:root[data-theme="dark"] .estado-btn[aria-pressed="true"]{color:var(--bg)}
@media (max-width:340px){ .botones-estado{grid-template-columns:1fr} }
/* mi horario de clases */
.ahora-card{background:var(--accent-soft);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.ahora-txt{font-family:var(--display);font-size:1.45rem;line-height:1.25}
.ahora-txt.libre{font-size:1.15rem}
.btn.grande{min-height:64px;font-size:1.1rem;width:100%}
.siguiente-clase{background:var(--surface);border-radius:10px;padding:10px 12px;font-size:1rem}
.dia-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.dia-lista li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--surface)}
.dia-lista .hora{font-family:var(--mono);font-weight:500;min-width:3.4em}
.dia-lista li.clase-pasada{opacity:.55}
.dia-lista li.clase-actual{outline:3px solid var(--accent);font-weight:700}
.dia-lista .hecho{margin-left:auto;color:var(--ok);font-weight:800}
.ahora-badge{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700}
.dia-lista .hecho + .ahora-badge{margin-left:0}
.horario-tabla{border-collapse:separate;border-spacing:3px;width:100%;min-width:560px}
.horario-tabla th{font-size:.8rem;color:var(--muted);text-align:center;padding:4px}
.horario-tabla .hora-fila{font-family:var(--mono);font-weight:500;white-space:nowrap;text-align:left}
.horario-tabla .hora-fila small{display:block;font-family:var(--body);font-weight:400}
.horario-tabla td{padding:0}
.celda{width:100%;min-height:56px;border:2px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:.85rem;padding:4px;color:var(--ink)}
.celda small{font-size:.72rem;color:var(--muted)}
.celda.vacia{border-style:dashed;color:var(--muted)}
.celda .mas{font-size:1.2rem;opacity:.5}
.celda.ocupada{background:var(--accent-soft);border-color:var(--accent)}
.celda.recreo{background:var(--pencil-soft);border-color:var(--pencil);color:var(--pencil);font-weight:700}
.celda.nuevo{outline:3px solid var(--pencil);outline-offset:1px}
.pregunta-curso{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--pencil-soft);border-radius:10px;padding:10px 12px}
.recreo-fila .field{flex:1 1 120px}
.horario-tabla .hora-fila{position:sticky;left:0;z-index:1;background:var(--surface)}
.creado-caja{background:var(--ok-soft);border:3px solid var(--ok);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:1.05rem}
.creado-titulo{font-family:var(--display);font-size:1.4rem;font-weight:800;color:var(--ok);line-height:1.2}
.candado{border:0;background:transparent;cursor:pointer;font-size:.95rem;padding:0 4px;min-height:32px;min-width:32px;opacity:.85;vertical-align:middle}
.candado:hover{opacity:1}
.candado-fijo{font-size:.9rem}
.zona-datos{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.zona-datos .row{gap:8px}
.aviso-correo{margin:8px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.aviso-correo .btn{font-size:.82rem;padding:4px 10px}

/* ---------- suscripción (suscripcion.js) y panel del administrador (admin.js) ---------- */
.aviso-plan{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:10px;background:var(--pencil-soft);color:var(--pencil);font-size:.92rem;font-weight:700}
.aviso-plan.vencido{background:var(--bad-soft);color:var(--bad)}
.aviso-plan.activo{background:var(--ok-soft);color:var(--ok)}
.aviso-plan[hidden]{display:none}
.plan-datos{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0}
.plan-datos dt{font-size:.78rem;color:var(--muted);font-weight:700}
.plan-datos dd{margin:2px 0 0;font-weight:700}
/* letra grande y sin detalles técnicos: pantalla pendiente, «Mi plan» y el paso a paso de pago */
.texto-grande{font-size:1.15rem}
.texto-grande p{margin:0}
.pendiente .panel{gap:18px}
.pendiente h2{font-size:1.7rem}
.mi-plan{border:2px solid var(--line);border-radius:14px;padding:14px}
.mi-plan #miPlanLinea{font-weight:700;font-size:1.25rem}
.opcion-plan{flex-direction:column;align-items:flex-start;text-align:left;gap:4px;width:100%;min-height:88px;padding:14px 18px}
.opcion-plan b{font-size:1.4rem;font-family:var(--display)}
.opcion-plan span{font-weight:400;color:var(--muted);font-size:1rem}
.tarjeta-anual{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:20px;border-radius:16px;border:3px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:inherit;text-align:left;cursor:pointer}
.tarjeta-anual[aria-pressed="false"]{background:var(--accent-soft);color:var(--ink)}
.tarjeta-anual .etiqueta{font-size:.9rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--accent)}
.tarjeta-anual .titulo{font-size:1.3rem;font-weight:700}
.tarjeta-anual .ahorro{font-size:2rem;font-weight:800;font-family:var(--display);line-height:1.1}
.tarjeta-anual .equivale{font-size:1.05rem}
.opcion-mensual{width:100%;background:transparent;border:2px solid var(--ink);color:var(--ink);font-size:1.05rem}
.opcion-mensual[aria-pressed="true"]{border-width:3px;border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.tarjeta-anual[aria-pressed="false"]{border-color:var(--line)}
.confirmacion{font-size:1.6rem;font-weight:800;font-family:var(--display);line-height:1.25}
.datos-banco{display:grid;gap:10px;margin:0}
.datos-banco div{border-bottom:1px solid var(--line);padding-bottom:8px}

/* barra de progreso al subir un archivo (subidas.js): usa rem, así que respeta el modo fácil (letra grande) */
.subida{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);margin-block:8px;overflow:hidden}
.subida-info{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:1rem}
.subida-barra-fondo{background:var(--surface-2);border-radius:999px;height:14px;overflow:hidden;margin-block:10px}
.subida-barra{height:100%;background:var(--accent);border-radius:999px;width:0%;transition:width .15s linear}
.subida-barra.indeterminada{width:40%!important;animation:subida-indeterminada 1.1s ease-in-out infinite}
@keyframes subida-indeterminada{0%{margin-left:-40%}100%{margin-left:100%}}
.subida [data-estado]{margin:0;font-size:1rem}
.datos-banco dt{font-size:.9rem;color:var(--muted);font-weight:700}
.datos-banco dd{margin:2px 0 0;font-weight:700;font-size:1.2rem;overflow-wrap:anywhere}
.vista-archivo img{max-width:100%;max-height:260px;border-radius:10px;border:1px solid var(--line)}
.comprobante{display:grid;grid-template-columns:120px 1fr;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px}
.comprobante .miniatura{width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;background:var(--surface-2)}
.comprobante .pdf{display:grid;place-items:center;width:120px;height:120px;border-radius:8px;border:1px dashed var(--line);font-weight:700}
@media (max-width:480px){.comprobante{grid-template-columns:1fr}}
dialog.dlg-foto{width:min(960px,calc(100% - 24px))}
dialog.dlg-foto img{display:block;max-width:100%;height:auto;margin:0 auto}
.filtros{display:flex;flex-wrap:wrap;gap:6px}
.filtros .btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------- Asistente académico (asistente.js) ---------- */
.respuesta-asistente{white-space:pre-line;background:var(--surface-2);border-radius:12px;padding:14px 16px;line-height:1.5}
.historial-item{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.historial-item:first-child{border-top:0;padding-top:0;margin-top:0}

/* ---------- Guías y planificaciones (planificaciones.js) ---------- */
.observacion{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.propuesta-diff{border-top:1px dashed var(--line);padding-top:10px;margin-top:2px}

/* ---------- Planificar paso a paso (PEDIDO 11): una cosa por pantalla, botones grandes, celular primero ---------- */
#v-planificar{font-size:1.15rem}
#v-planificar select,#v-planificar textarea,#v-planificar input:not([type=checkbox]):not([type=radio]):not([type=file]){min-height:48px;font-size:1.05rem}
#v-planificar .btn,#v-planificar .btn.small{min-height:48px}
.paso-barra{height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.paso-barra-relleno{height:100%;background:var(--accent);border-radius:999px;transition:width .2s}
.paso-texto{font-weight:800;font-size:1.1rem}
.paso-nav{display:flex;gap:10px}
.paso-nav .btn{flex:1}
.ayuda-boton{width:48px;height:48px;border-radius:50%;border:2px solid var(--accent);background:var(--surface);color:var(--accent);font-weight:800;font-size:1.25rem;cursor:pointer;flex:none}
.ayuda{background:var(--accent-soft);border-radius:10px;padding:10px 14px;font-size:1rem}
.voz-barra{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.voz-barra .btn{flex:1 1 28%;min-width:96px}
.voz-barra .btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.voz-barra .voz-deshacer{flex:0 1 auto}
.seccion-aprobada{border-color:var(--ok);background:var(--ok-soft)}
.btn.listo{background:var(--ok);border-color:var(--ok);color:var(--accent-ink)}
.guia-plan{border:2px solid var(--accent);border-radius:16px;padding:16px;background:var(--accent-soft)}
.guia-plan[hidden]{display:none}
.guia-plan-caja{max-width:560px}
.requisito{border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.requisito.cumple{border-color:var(--ok)}
.requisito.no_cumple{border-color:var(--bad)}
.pill.mal{background:var(--bad-soft);color:var(--bad)}
.pill.gris{background:var(--surface-2);color:var(--muted)}
.chip-tema{min-height:48px}

/* ---------- modo fácil de planificación (PEDIDO 12) ---------- */
.toast.toast-ok{background:var(--ok,#1e7d3a);color:#fff}
.soltar{display:flex;align-items:center;gap:16px;padding:28px 20px;border:3px dashed var(--line,#999);border-radius:16px;cursor:pointer;font-size:1.15rem;background:var(--panel,transparent)}
.soltar:hover,.soltar:focus-visible,.soltar.encima{border-color:var(--accent,#2b6cb0);outline:none}
.soltar-icono{font-size:2rem;line-height:1}
.ok-texto{color:var(--ok,#1e7d3a);font-weight:700}
.reconoci{font-size:1.15rem;font-weight:700}
.avisos-simples{margin:0;padding-left:1.2em}
.avisos-simples li{margin:.3em 0}
.vista-previa{border:1px solid var(--line,#ccc);border-radius:12px;padding:12px;background:var(--panel,transparent);overflow:auto;max-height:70vh;max-width:100%;position:relative;isolation:isolate}
.tabla-scroll{overflow-x:auto;max-width:100%}
.tabla-vista{border-collapse:collapse;width:100%;font-size:.9rem}
.tabla-vista th,.tabla-vista td{border:1px solid var(--line,#ccc);padding:6px 8px;vertical-align:top;text-align:left}
.tabla-vista thead th{background:var(--soft,rgba(0,0,0,.05))}
.opcion-avanzada{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.opcion-avanzada .ayuda{flex-basis:100%}
.chip-periodo[aria-pressed="true"]{outline:3px solid var(--accent,#2b6cb0)}
.chip-unidad[aria-pressed="true"]{outline:3px solid var(--accent,#2b6cb0)}
.icono-formato{max-height:72px;max-width:220px;display:block;margin:4px 0}
.rejilla-iconos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:8px 0 12px}
.icono-propuesto select{width:100%}
.warn-texto{color:var(--pencil);font-weight:700;margin-top:4px}
/* PEDIDO 17: el curso elegido arriba y los documentos de ese curso con «Cambiar» y «Quitar» */
.curso-arriba{background:var(--surface-2);border-radius:12px;padding:10px 14px;justify-content:space-between;align-items:center;font-size:1.1rem}
.doc-curso{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px 14px}
.doc-curso.ministerio{border-color:var(--pencil);background:var(--pencil-soft)}
#facilCursos .btn{min-height:64px;font-size:1.15rem;white-space:normal}

/* ---------- PEDIDO 19: reglas generales de uso ---------- */
/* Lo que el docente debe responder o marcar: el MISMO estilo en toda la app (color vivo, borde claro, letra más grande) */
.responder{background:var(--pide-soft);border:3px solid var(--pide);border-radius:14px;padding:14px 16px;font-size:1.08rem;
  color:var(--ink);display:flex;flex-direction:column;gap:10px}
.responder b,.responder label,.responder p{color:var(--ink)}
.responder .check{font-size:1.1rem;font-weight:700;align-items:center}
.responder .check input{width:40px;height:40px;accent-color:var(--pide)}
.responder .field label{font-size:1rem;color:var(--ink)}
/* una línea corta con lo que la app ya decidió y un enlace pequeño «Cambiar» */
.aviso-auto{font-size:1rem;color:var(--ink)}
.enlace{border:2px solid var(--line);background:var(--surface);color:var(--accent);font:inherit;font-weight:700;text-decoration:none;
  cursor:pointer;padding:6px 12px;border-radius:10px;min-height:56px;display:inline-flex;align-items:center;margin:2px 0}
.enlace:hover{border-color:var(--accent)}
/* la confirmación aparece ahí mismo, debajo del botón tocado */
p.confirmado{color:var(--ok);font-weight:700;font-size:1rem}
p.confirmado::before{content:"✓ "}
p.confirmado.error{color:var(--bad);background:none;padding:0}
p.confirmado.error::before{content:""}
/* por qué un botón está apagado */
.porque{font-size:.95rem;color:var(--ink);font-weight:700}
/* texto dentro de un botón verde: siempre con contraste */
.btn.primary .muted,.btn.primary .small,.btn.primary span{color:inherit}
.grupo-opciones{display:flex;flex-direction:column;gap:8px}
.grupo-opciones h4{margin:6px 0 0;font-size:1.1rem}
.chip-tema{white-space:normal;text-align:left;justify-content:flex-start;line-height:1.3}
.chip-tema[aria-pressed="true"]{outline:3px solid var(--pide);outline-offset:2px}
/* Inicio: tamaño de letra y tema */
.ajustes-vista{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;background:var(--surface);border:2px solid var(--line);
  border-radius:14px;padding:10px 14px}
.ajuste{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ajuste > span{font-weight:700}
.ajuste .btn{min-width:64px}
.ajuste .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pendiente-legal{background:var(--pencil-soft);border-radius:10px;padding:8px 12px}
/* PEDIDO 35: línea discreta del pie que abre «Acerca de», y el bloque «¿Necesitas ayuda?» */
.pie-acerca{text-align:center;font-size:.8rem;color:var(--muted);margin-top:6px}
.pie-acerca .enlace{font-size:.8rem;color:var(--muted);text-decoration:none;background:var(--surface);border:2px solid var(--line);
  border-radius:10px;padding:6px 12px;min-height:56px;cursor:pointer}
.pie-acerca .enlace:empty{display:none}
.ayuda-contacto{border-top:1px solid var(--line);padding-top:12px}
.ayuda-contacto h3{font-size:1rem}
.contacto-botones{display:flex;flex-wrap:wrap;gap:8px}
.doc .pie-acerca{margin-top:18px}
.doc .dato-app{font-weight:600}
/* PEDIDO 35-B: índice al inicio de los Términos y del Aviso de privacidad; los saltos no quedan bajo el borde */
.indice-doc{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 14px}
.indice-doc ol{margin:6px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:2px}
.indice-doc a{overflow-wrap:anywhere}
.doc h2[id]{scroll-margin-top:12px}
.doc{overflow-wrap:break-word}
/* con la letra en su tamaño máximo nada se sale de la pantalla */
.tablewrap,.tabla-scroll,.vista-previa{max-width:100%}
img,svg,video{max-width:100%}
.userbox{flex-wrap:wrap}
/* los demás lugares donde se pregunta algo, con el mismo estilo resaltado */
.pregunta-curso{background:var(--pide-soft);border:3px solid var(--pide)}
.item.pend{outline:3px solid var(--pide);background:var(--pide-soft)}
.t-elegir{color:var(--pide);outline:2px solid var(--pide)}
.course.recien{outline:3px solid var(--ok);outline-offset:2px}
/* PEDIDO 21: avance por paralelo */
.aviso-atraso{background:var(--bad-soft);border-left:6px solid var(--bad);border-radius:10px;padding:8px 12px;font-weight:700}
.semana-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.semana-nav .field{flex:1 1 160px;min-width:0}
.semana-titulo{font-family:var(--display);font-weight:800;font-size:1.25rem;margin:0}
.nota-semana{display:flex;flex-direction:column;gap:8px}
.nota-semana #avNota{background:var(--pencil-soft);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:1.08rem;margin:0}
.paralelos-botones{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.paralelos-botones .btn{min-width:64px;font-size:1.2rem;font-weight:700}
.paralelos-botones .btn[aria-pressed="true"],#avAcciones .btn[aria-pressed="true"],#avGrupos .btn[aria-pressed="true"],
#facilMomentosOpciones .btn[aria-pressed="true"],.av-editar .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#avGrupos .btn,#facilMomentosOpciones .btn{white-space:normal;text-align:left;justify-content:flex-start}
#avAcciones .btn{white-space:normal}
.av-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.av-item{border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:6px;min-width:0;overflow-wrap:anywhere}
.av-item-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.av-paralelo{font-size:1.15rem}
/* PEDIDO 22: etiqueta propia (antes compartía .estado con el refuerzo y el texto quedaba corrido a un lado) */
.estado-av{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:4px;border-radius:999px;padding:4px 12px;font-weight:700;border:2px solid currentColor;line-height:1.2;white-space:normal}
.est-ok{color:var(--ok);background:var(--ok-soft)}
.estado-av.est-ok::before{content:"✓"}
.est-adelanto{color:var(--accent);background:var(--accent-soft)}
.estado-av.est-adelanto::before{content:"»"}
.est-atraso{color:var(--bad);background:var(--bad-soft)}
/* PEDIDO 26: solo en la etiqueta del avance (antes salía un «!» suelto sobre el nombre de quien llegó tarde en «Tomar asistencia») */
.estado-av.est-atraso::before{content:"!"}
.est-sin{color:var(--pencil);background:var(--pencil-soft)}
.estado-av.est-sin::before{content:"—"}
.est-gris{color:var(--muted);background:var(--surface-2)}
.avance-tabla tbody tr[data-fila]{cursor:pointer}
.avance-tabla tbody tr[aria-selected="true"]{background:var(--accent-soft)}
.avance-tabla{width:100%;border-collapse:collapse;font-size:1.05rem}
.avance-tabla th,.avance-tabla td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.avance-tabla tbody th{font-size:1.25rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* en el celular, cada paralelo es una tarjeta (nada se sale de la pantalla) */
@media (max-width:640px){
  .avance-tabla thead{display:none}
  .avance-tabla,.avance-tabla tbody{display:block;width:100%}
  .avance-tabla tr{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;border:2px solid var(--line);border-radius:12px;margin-bottom:8px;padding:6px 10px;background:var(--surface)}
  .avance-tabla tbody th{grid-column:1;grid-row:1 / span 5;align-self:center;text-align:center;font-size:1.5rem}
  .avance-tabla th,.avance-tabla td{border:0;padding:2px 0;min-width:0}
  .avance-tabla td.vacio{display:none}
  .avance-tabla td::before{content:attr(data-titulo) ": ";font-weight:700;color:var(--muted);font-size:.95rem}
  .avance-tabla td{grid-column:2}
}
/* PEDIDO 22 (R3): el aviso junto a lo que se tocó, dentro de la página (no flota ni tapa nada) */
.toast.en-linea{position:static;transform:none;left:auto;bottom:auto;width:auto;max-width:100%;margin:8px 0;white-space:normal;flex-wrap:wrap}
/* PEDIDO 22: un grupo de paralelos = una ficha que se abre */
.grupo-cursos>summary,.paralelo-ficha>summary{cursor:pointer;font-size:1.1rem;padding:8px 0;min-height:48px}
.paralelo-ficha{border-top:1px solid var(--line);padding:4px 0}
.paralelo-ficha>.course{border:0;padding:0;box-shadow:none}
.grupo-paralelos{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:left}

/* PEDIDO 22: fuga de clase */
.t-fuga{background:var(--bad-soft);color:var(--bad)}
/* PEDIDO 22 (R5): el Reporte no obliga a deslizar de lado: cada estudiante es una tarjeta (el panel mide ~740 px
   también en la computadora, y la tabla de 9 columnas no entraba). */
#repTabla .notas{white-space:normal}
/* PEDIDO 26: tarjetas solo en celular y tableta; desde 1000 px, tabla compacta con todas las columnas */
@media (max-width:999px){
  #repTabla thead{display:none}
  #repTabla,#repTabla tbody{display:block;width:100%}
  #repTabla tr{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;border:2px solid var(--line);border-radius:12px;margin-bottom:8px;padding:8px 10px;background:var(--surface)}
  #repTabla td{border:0;padding:0;text-align:left;min-width:0}
  #repTabla td.est{flex:1 1 100%}
  #repTabla td[data-titulo]::before{content:attr(data-titulo) ": ";font-weight:700;color:var(--muted);font-size:.85rem;font-family:var(--body)}
  #repTabla td.notas{flex:1 1 100%}
  #repTabla td.acc{flex:1 1 100%}
}
/* PEDIDO 22 (R5): a 360 px nada obliga a deslizar de lado: el Reporte, el avance y la vista previa se ven como tarjetas */
.tabla-vista{min-width:0}
@media (max-width:640px){
  #repTabla,#avTabla,#exTabla{min-width:0}
  .tabla-vista thead{display:none}
  .tabla-vista,.tabla-vista tbody,.tabla-vista tr,.tabla-vista th,.tabla-vista td{display:block;width:100%}
  .tabla-vista tr{border:1px solid var(--line,#ccc);border-radius:10px;margin-bottom:8px;padding:4px 8px}
  .tabla-vista th,.tabla-vista td{border:0;padding:3px 0;overflow-wrap:anywhere}
  .tabla-vista td[data-titulo]:not([data-titulo=""])::before{content:attr(data-titulo);display:block;font-weight:700;color:var(--muted);font-size:.85rem}
}
#repTabla{min-width:0}
#repTabla .notas>span{white-space:nowrap}
#repTabla .bar i{display:none}

/* ================= PEDIDO 23 ================= */
/* El aviso «Guardado: N registros» con sus dos botones no cabía en 360 px: los botones no se partían y el texto quedaba en
   una columna de una letra. Ahora el texto ocupa su renglón y los botones bajan al siguiente (una o dos líneas). */
.toast{flex-wrap:wrap;row-gap:6px}
#toastMsg{flex:1 1 14ch;min-width:min(14ch,100%)}
.toast:not(.en-linea){width:auto;max-width:min(520px,calc(100% - 24px))}
@media (max-width:520px){.toast:not(.en-linea){left:12px;right:12px;transform:none;max-width:none}}
/* D1: horario en el teléfono = lista de un día con los botones de los días arriba; la tabla, solo en pantalla ancha */
.horario-dias{display:none}
.dias-botones{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:6px;margin-bottom:8px}
.dia-boton{min-height:56px;padding:6px 2px;justify-content:center;font-weight:700}
.dia-boton[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dia-boton.con-nuevo{outline:2px dashed var(--pencil);outline-offset:-4px}
.dia-titulo{margin:6px 0;font-size:1.15rem}
.dia-horas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dia-horas li{display:grid;grid-template-columns:minmax(5.2rem,auto) 1fr;gap:8px;align-items:stretch}
.dia-horas .hora{font-family:var(--mono);font-size:.9rem;display:flex;flex-direction:column;justify-content:center;color:var(--muted)}
.dia-horas .hora small{font-family:var(--body)}
.dia-horas .celda{width:100%;min-height:56px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:2px}
.dia-horas .celda small{display:block}
@media (max-width:700px){
  .horario-dias{display:block}
  .tabla-solo-ancha{display:none}
}
.dia-horas .celda{align-items:flex-start;padding:8px 12px;font-size:1rem}
.dia-horas .celda small{font-size:.85rem}
.dia-horas .celda .mas{font-size:1rem;opacity:.8}
/* D2 y D3: en el teléfono una tabla ancha se ve como tarjetas, una por fila, con «Columna: valor» (static/tablas.js) */
@media (max-width:999px){  /* PEDIDO 26: también a 768 px (la tabla del administrador se deslizaba) */
  table.tabla-tarjetas{display:block;min-width:0;width:100%}
  table.tabla-tarjetas>thead{display:none}
  table.tabla-tarjetas>tbody{display:block}
  table.tabla-tarjetas>tbody>tr{display:block;border:2px solid var(--line);border-radius:12px;margin-bottom:8px;padding:8px 10px;background:var(--surface)}
  table.tabla-tarjetas>tbody>tr>td{display:block;border:0;padding:2px 0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  table.tabla-tarjetas>tbody>tr>td[data-t]:not([data-t=""])::before{content:attr(data-t) ": ";font-weight:700;color:var(--muted);font-size:.85rem;font-family:var(--body)}
  table.tabla-tarjetas>tbody>tr>td:empty{display:none}
}
/* D3: el panel del administrador usa el ancho de la pantalla y sus tablas caben a 1280 px (el texto largo, en «Ver más») */
.wrap-admin{max-width:1180px}
[data-ver-mas] table{min-width:0}
[data-ver-mas] td{overflow-wrap:break-word;vertical-align:top}
[data-ver-mas] td.texto-sin-espacios{overflow-wrap:anywhere;min-width:18ch}  /* una dirección web larga se parte en vez de ensanchar la tabla */
[data-ver-mas] th{white-space:normal}
.ver-mas{display:inline}
.ver-mas>summary{display:inline;cursor:pointer;color:var(--accent);font-weight:700;text-decoration:underline}
.ver-mas[open]>summary{display:block;margin:4px 0}
.tarjeta-dato{border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);display:grid;gap:6px}
.correo-texto{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:.85rem;margin:6px 0 0;padding:8px;background:var(--surface-2);border-radius:8px}
/* D4 (regla R6): cada campo se toca y se escribe; «Dictar» es UN solo botón pequeño al lado del campo */
.voz-barra{display:block;margin:4px 0 0}
.voz-barra .btn{flex:none;min-width:0;min-height:56px;padding:6px 12px;font-size:.9rem}
.field:has(>.voz-barra){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}
.field:has(>.voz-barra)>*{grid-column:1/-1}
.field:has(>.voz-barra)>[data-voz]{grid-column:1}
.field:has(>.voz-barra)>.voz-barra{grid-column:2;margin:0}

/* ================= PEDIDO 25: modo sin conexión ================= */
/* La línea de arriba (sin señal / se enviaron N anotaciones): mismo estilo que los demás avisos automáticos */
.linea-senal{margin-top:8px;padding:8px 12px;border-radius:10px;background:var(--pencil-soft);color:var(--ink);font-weight:700}
.linea-senal[data-tipo="enviado"]{background:var(--ok-soft)}
.linea-senal[hidden]{display:none}
/* La etiqueta de pendientes ahora se toca (abre la lista): es un botón con forma de etiqueta */
button.pill{border:0;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;min-height:40px;max-width:100%;white-space:normal;text-align:left;border-radius:12px;padding:6px 12px}
button.pill:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pendientes-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pendiente{border:2px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px;background:var(--surface)}
.pendiente.fallido{border-color:var(--bad)}
.pendiente .error{font-weight:700}
.pendiente-detalle ul{margin:0;padding-left:18px}
/* Lo que pide internet se ve apagado mientras no hay señal */
body.sin-senal [data-intentar-ia],body.sin-senal [data-avisar],body.sin-senal [data-preparar],body.sin-senal #btnVarios,body.sin-senal #refAvisar,
body.sin-senal .wa,body.sin-senal .icono-wa,body.sin-senal [data-tarea=avisar],body.sin-senal a[href^="/api/"],body.sin-senal a[download],
body.sin-senal #btnPreguntarHorario,body.sin-senal [data-agregar],body.sin-senal [data-ex-agregar],body.sin-senal [data-separar],
body.sin-senal nav.tabs [data-tab=planificar],body.sin-senal nav.tabs [data-tab=asistente],
body.sin-senal .tile[data-ir-tab=planificar],body.sin-senal .tile[data-ir-tab=asistente]{opacity:.5}
[inert]{opacity:.45;pointer-events:none;user-select:none}
.necesita-internet{padding:10px 12px;border-radius:10px;background:var(--pencil-soft);font-weight:700}
.necesita-internet[hidden]{display:none}
/* El micrófono sin señal: la línea va junto al botón, entera */
.micbar.mic-sin-senal .micestado span{color:var(--ink);font-weight:700;white-space:normal}
/* Marcar con botones (marcar.js) */
.marcar-caja{border-top:2px solid var(--line);padding-top:12px;margin-top:4px}
/* las columnas dependen del tamaño de la letra: con la letra más grande, en un celular angosto, un botón por fila */
.marcar-acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:8px}
.marcar-acciones .btn{width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.2;justify-content:center;text-align:center}
.marcar-acciones .btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tarjeta.est-tarea{background:var(--ok-soft);border-color:var(--ok)}
.tarjeta[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.tarjeta span{overflow-wrap:anywhere}


/* ================= PEDIDO 26 ================= */
/* Encabezado en una fila: marca a la izquierda; nombre, Ayuda y Salir a la derecha */
.userbox{justify-content:flex-end;gap:8px}
.userbox .barra{display:inline-flex;gap:8px;flex-wrap:wrap}
header.top{gap:8px;padding-block:10px 8px}
/* Menú. Celular (hasta 699 px): Inicio · Dictar · Reporte · «Más»; lo demás aparece al tocar «Más». */
nav.tabs .tab-mas{display:none}
@media (max-width:699px){
  .brand h1{font-size:1.15rem}
  #userPill{display:none}
  nav.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  nav.tabs button{min-height:56px;padding:6px 4px}
  nav.tabs button[data-tab="inicio"]{order:1}
  nav.tabs button[data-tab="dictar"]{order:2}
  nav.tabs button[data-tab="reporte"]{order:3}
  nav.tabs .tab-mas{display:block;order:4;border:2px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;
    color:var(--ink);font-weight:700;font-size:inherit;min-height:56px;box-shadow:var(--shadow)}
  nav.tabs .tab-mas::after{content:" ▾"}
  nav.tabs .tab-mas[aria-expanded="true"]::after{content:" ▴"}
  nav.tabs .tab-mas.activo{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  nav.tabs button[data-en-mas]{display:none;order:5}
  nav.tabs.mas-abierto button[data-en-mas]{display:block}
}
@media (max-width:440px){ .brand h1{display:none} }
/* Computadora (1000 px o más): contenido más ancho y el menú en UNA sola fila */
@media (min-width:1000px){
  .wrap{max-width:1200px}
  nav.tabs{display:flex;flex-wrap:wrap;gap:6px;font-size:.82rem}
  nav.tabs button{flex:1 1 auto;min-height:46px;padding:6px 10px;white-space:nowrap;overflow-wrap:normal}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile{min-height:96px}
}
/* Inicio según el horario */
.ahora-linea{font-size:1.1rem;margin:0}
.ahora-card.sin-clase{background:var(--surface);border:2px solid var(--line);padding:10px 14px}
.ahora-card.sin-clase .siguiente-clase{display:none}
/* El aviso del micrófono sin señal: DEBAJO del botón, a todo el ancho */
.micbar{flex-wrap:wrap}
.mic-aviso{flex:1 1 100%;margin:0;padding:8px 12px;border-radius:10px;background:var(--pencil-soft);color:var(--ink);font-weight:700;font-size:.95rem}
.micbar.mic-sin-senal .micestado span:empty{display:none}
/* Botones de marcar: de dos en dos en el celular (con la letra más grande, uno por fila) */
.marcar-acciones{grid-template-columns:repeat(auto-fit,minmax(min(100%,6.5rem),1fr))}
.marcar-acciones .btn{font-size:1rem;padding:8px 8px;overflow-wrap:break-word;hyphens:manual}
/* Fichas en cuadrícula: sin estirarse ni dejar huecos */
.opciones-grandes{align-items:start}
.opciones-grandes .grupo-paralelos{grid-column:1/-1}
.tarjetas{grid-auto-rows:1fr}
.opcion[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.paralelos-botones .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#dicCursos{margin-top:4px}
/* Cursos: cada curso cerrado en una línea; dentro, los campos a todo el ancho y «Dictar» pequeño debajo */
.courses{grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));align-items:start}
.curso-suelto{padding:4px 14px}
.curso-suelto>summary{cursor:pointer;font-size:1.1rem;padding:8px 0;min-height:48px}
.curso-suelto>.course{border:0;padding:0 0 8px;box-shadow:none}
.course .row>.field,#v-cursos .row>.field{flex:1 1 100%}
.course .voz-barra .btn{padding:4px 12px;font-size:.85rem}
/* Plantillas: el mensaje de muestra, como se verá */
.mensaje-ejemplo{white-space:pre-line;background:var(--surface-2);border-radius:12px;padding:12px 14px;line-height:1.5}
/* Mi cuenta: «Eliminar mi cuenta» al final y separado */
.zona-peligro{margin-top:24px;border-color:var(--bad-soft)}
.panel>section>h2{font-size:1.15rem}
/* Reporte: tarjeta («Tareas» en su renglón, junto a su título) */
@media (max-width:999px){ #repTabla td .bar{display:inline-flex;justify-content:flex-start} }
/* Reporte desde 1000 px: tabla compacta (40 estudiantes sin bajar veinte pantallas) */
@media (min-width:1000px){
  #repTabla{font-size:.85rem}
  #repTabla th,#repTabla td{padding:4px 6px}
  #repTabla .bar i{display:block;width:40px}
  /* PEDIDO 27: en la computadora, «WhatsApp» pequeño y filas bajas (con mouse no hace falta el botón de 56 px del celular) */
  #repTabla .icono-wa{min-height:30px;padding:2px 8px;font-size:.8rem;border-width:1px;border-radius:6px}
  #repTabla .linkbtn.nombre{min-height:30px}
  #repTabla td{line-height:1.25}
}
/* Avance por paralelo: la columna «Estado» sin partir palabras */
.avance-tabla th,.avance-tabla td{overflow-wrap:break-word}
.estado-av{white-space:nowrap}
@media (min-width:641px){ .avance-tabla td[data-titulo="Estado"]{width:11rem} }
/* Calificar y vista previa: lo repetido se resume en una línea que se abre */
.resumen-grupo{background:var(--surface-2);border-radius:10px;padding:6px 10px}
.resumen-grupo>summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.resumen-grupo .items{margin-top:6px}
/* Planificar: arriba solo la pregunta; lo demás en una línea */
.plan-linea{font-size:.95rem;color:var(--muted)}
.competencias-codigo{margin-left:auto;font-family:var(--mono);font-size:.85rem;color:var(--muted);text-align:right;white-space:nowrap}
#planificarBox > .plan-cabecera.plegada{display:none}
.chip-tema.con-codigo{display:flex;align-items:center;gap:12px;width:100%}
.chip-tema .chip-texto{flex:1 1 auto;min-width:0;text-align:left}
/* los botones «Cambiar» también se tocan cómodo (56 px, como todo botón) */
.enlace{min-height:56px}
@media (max-width:699px){
  /* el menú del celular: palabras enteras («Reporte», nunca «Report/e») */
  nav.tabs{font-size:.8rem;gap:4px}
  nav.tabs button,nav.tabs .tab-mas{overflow-wrap:normal;word-break:keep-all;padding:6px 2px}
  /* «Administrar pagos» está en Mi cuenta → Mi plan: en el celular el encabezado queda en una fila */
  #btnAdminPagosBarra{display:none!important}
  .brandrow{flex-wrap:nowrap}
  .userbox{flex-wrap:wrap;min-width:0}
  .ajuste>span{flex-basis:100%}
}
/* PEDIDO 27: en el celular (menos de 700 px), «Dictar» va DEBAJO del campo en toda la app, pequeño y a la izquierda;
   en pantallas anchas sigue al lado (regla R6). Así el campo usa todo el ancho y no se corta lo escrito. */
@media (max-width:699px){
  .field:has(>.voz-barra)>[data-voz]{grid-column:1/-1}
  .field:has(>.voz-barra)>.voz-barra{grid-column:1/-1;justify-self:start;margin:4px 0 0}
  .voz-barra .btn{padding:6px 14px;font-size:.85rem}
}
@media (max-width:699px){ nav.tabs.mas-abierto button[data-en-mas]{grid-column:span 2} }

/* ================= PEDIDO 27 ================= */
/* Mi perfil: la firma armada y «Cambiar mi firma» */
.firma-caja{background:var(--surface-2);border-radius:12px;padding:10px 14px;display:grid;gap:6px;justify-items:start}
.firma-caja p{margin:0}
.firma-ejemplo{font-weight:700;overflow-wrap:anywhere}
/* «¿Cómo redacto tus mensajes?»: una sola vez en Inicio y en el registro */
.botones-redaccion .btn{flex:1 1 180px}
.redaccion-registro{border:0;padding:0;margin:0}
.redaccion-registro legend{font-weight:700;margin-bottom:4px;padding:0}
/* Baja 11: anchos de la lista de elementos de una fuente (antes iban como style="" y la protección del navegador los bloqueaba) */
.ancho-tipo{max-width:140px}
.ancho-corto{max-width:110px}
.ancho-tema{max-width:160px}
/* «Instalar en mi celular» (PEDIDO 27) */
.instalar-caja{display:grid;gap:8px;justify-items:start}
.instalar-caja>.btn.grande{width:100%}
#inicioInstalar{border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface)}
.pasos-instalar li{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.paso-dibujo{flex:none;width:52px;height:52px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:#0A7AFF}
.paso-dibujo.paso-texto{font-weight:700;font-size:.9rem}
.icono-paso{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pasos-instalar{padding-left:0;list-style:none}

/* ================= PEDIDO 27: administración — pestañas y «Resumen» ================= */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.admin-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:8px 16px;border-radius:10px;border:2px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none}
.admin-tabs a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.resumen-admin{--serie-1:#2a78d6;--serie-2:#eb6834}
@media (prefers-color-scheme:dark){ :root:where(:not([data-theme="light"])) .resumen-admin{--serie-1:#3987e5;--serie-2:#d95926} }
:root[data-theme="dark"] .resumen-admin{--serie-1:#3987e5;--serie-2:#d95926}
.tarjetas-resumen{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.numero-grande{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:4px;align-content:start;min-width:0}
.ng-valor{font-family:var(--display);font-size:2.2rem;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.ng-valor.negativo{color:var(--bad,#B3261E)}
.ng-titulo{color:var(--muted);font-weight:700}
.numero-grande.utilidad{grid-column:1/-1}
@media (min-width:900px){ .numero-grande.utilidad{grid-column:span 2} }
.gasto-fijo>summary{cursor:pointer;color:var(--accent);font-weight:700;text-decoration:underline;min-height:44px;display:flex;align-items:center}
.lista-te-toca{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.lista-te-toca a{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink);text-decoration:none}
.te-toca-n{font-family:var(--display);font-size:1.6rem;min-width:2ch;text-align:center}
.lista-te-toca .nada{padding:8px 0}
.curvas-cabecera{justify-content:space-between;align-items:center;gap:10px}
.selector-rango{display:flex;gap:6px;flex-wrap:wrap}
.selector-rango .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rejilla-curvas{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.curva{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:6px;min-width:0}
.curva h3{font-size:1.05rem}
.viz-caja{position:relative;width:100%;overflow:hidden}
.viz-caja svg{display:block;max-width:100%;touch-action:pan-y}
.viz-rejilla{stroke:var(--line);stroke-width:1;opacity:.6}
.viz-eje{fill:var(--muted);font-size:11px;font-family:var(--body)}
.viz-linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz-linea.serie-1,.viz-punto.serie-1{stroke:var(--serie-1)}
.viz-linea.serie-2,.viz-punto.serie-2{stroke:var(--serie-2)}
.viz-punto{fill:var(--surface);stroke-width:2}
.viz-guia{stroke:var(--muted);stroke-width:1}
.viz-tip{position:absolute;top:4px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:.85rem;
  display:grid;gap:2px;pointer-events:none;box-shadow:var(--shadow);white-space:nowrap}
.viz-leyenda{display:flex;gap:14px;flex-wrap:wrap;margin:0;font-size:.9rem;color:var(--muted)}
.clave{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.clave.serie-1{background:var(--serie-1)}
.clave.serie-2{background:var(--serie-2)}
.viz-frase{margin:0;color:var(--ink)}
.viz-numeros>summary{cursor:pointer;color:var(--accent);font-weight:700;min-height:44px;display:flex;align-items:center}
.rejilla-listas{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.lista-resumen ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.lista-resumen li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface-2);border-radius:10px;padding:8px 12px;min-width:0}
.lista-resumen li>span{min-width:0;overflow-wrap:anywhere}
.lista-resumen .wa{min-height:44px}
.viz-numeros table{min-width:0}
.admin-tabs a{flex:1 1 0;justify-content:center;padding:8px 10px}
.selector-rango .btn{flex:1 1 0;white-space:nowrap}
@media (max-width:699px){ .curvas-cabecera{flex-direction:column;align-items:stretch} .curvas-cabecera>*{min-width:0;max-width:100%} .selector-rango .btn{padding:8px 6px;min-width:0} }
.viz-numeros table{font-size:.85rem}
.viz-numeros th,.viz-numeros td{padding:4px 6px;white-space:normal;overflow-wrap:anywhere}

/* ---------------------------------------------------------------- PEDIDO 28: planes, prueba gratis y recomendar */
.aviso-prueba{margin:0;padding:10px 12px;border-radius:10px;background:var(--ok-soft);color:var(--ink);font-size:1rem}
.contadores{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.contadores li{padding:8px 12px;border-radius:10px;background:var(--pencil-soft);font-weight:700}
.precio-plan{font-weight:700 !important;color:var(--ink) !important}
.opcion-mensual{flex-direction:column;align-items:flex-start;text-align:left;white-space:normal;height:auto;padding:12px 16px}
.opcion-mensual .small{font-weight:400}
.tarjeta-anual .equivale{white-space:normal;text-align:left}
#pagoTrimestres .row .btn{flex:1 1 180px}
#pagoTrimestres .btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.aviso-cuota{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:10px;background:var(--pencil-soft);font-weight:700}
.aviso-cuota[hidden]{display:none}
.ejemplo-pregunta{border-left:4px solid var(--accent);padding:2px 0 2px 12px;display:grid;gap:4px}
.ejemplo-pregunta p{margin:0}
#asistenteEjemplo{font-style:italic}
/* panel del administrador */
.sospechosa{border-color:var(--bad) !important;background:var(--bad-soft)}
.marca-sospecha{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--bad);color:#fff;font-size:.8rem;font-weight:700}
.monto-distinto{display:inline-block;padding:4px 10px;border-radius:8px;background:var(--bad-soft);color:var(--bad);font-weight:700}
.monto-igual{color:var(--ok);font-weight:700}
.precios-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
/* PEDIDO 36 (F2): «Datos de la app»: un campo debajo de otro, a todo el ancho */
.ajustes-campos{display:grid;grid-template-columns:1fr;gap:12px}
.ajustes-campos .field,.ajustes-campos .field input{width:100%;max-width:none;min-width:0}
/* PEDIDO 36 (F1 y F4): en «Te toca hoy», lo urgente en rojo */
.lista-te-toca li.urgente a{color:var(--bad);background:var(--bad-soft)}
/* PEDIDO 36 (F4 y F5): tarjetas de pedidos del administrador y la respuesta de la ayuda */
.pedido{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px}
.pedido.urgente{border:2px solid var(--bad)}
.pedido p{margin:0}
.pregunta-soporte{font-size:1.05rem}
.respuesta-soporte{border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.respuesta-soporte p{margin:0 0 6px}
b.negativo{color:var(--bad)}
.pendiente-legal ul{margin:4px 0 4px 20px;padding:0}
/* PEDIDO 29: sin señal, en Planificar y el Asistente basta la línea «Esto necesita internet…» (no dos avisos seguidos) */
body:has(.view:not([hidden]) > .necesita-internet:not([hidden])) #lineaSenal[data-tipo="sin"]{display:none}
#miPlan .aviso-correo{margin:0;padding-top:8px}

/* PEDIDO 32 (E.1): en la computadora (1000 px o más) los formularios usan el ancho de la pantalla, en columnas; la franja
   angosta es solo para el celular. «Inicia sesión» y «Crea tu cuenta» en dos columnas; el curso abierto en Cursos ocupa
   toda la fila (antes, media pantalla) y sus campos van de dos en dos. */
@media (min-width:1000px){
  .auth{max-width:1080px}
  #fLogin,#fRegistro{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;align-items:start}
  #fLogin>*,#fRegistro>*{grid-column:1/-1}
  #fLogin>.field,#fRegistro>.field{grid-column:auto}
  .courses>details[open]{grid-column:1/-1}
  .course .row>.field,#v-cursos .row>.field{flex:1 1 0;min-width:0}
}
/* PEDIDO 33 (regla R8): todo lo que se toca se ve como botón, con marco y fondo. PEDIDO 36 (B6): también lo que va dentro
   de una frase («Cambiar», «Crea una», «¿Olvidaste tu contraseña?»: .enlace y .linkbtn). Solo «ver más» y los enlaces de
   los textos legales siguen como enlaces. */
.btn.enlace-boton,a.btn.small{display:inline-flex}
.btn.ghost{border-color:var(--line);background:var(--surface-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.ghost.avanzadas{width:100%;min-height:56px;font-weight:600;font-size:.95rem;color:var(--muted);background:var(--surface)}
.x,.candado{border:2px solid var(--line);background:var(--surface)}
.x:hover,.candado:hover{border-color:var(--accent)}
.chip{background:var(--surface)}
.toastbtn,.alert button{border:2px solid currentColor}
button.pill{border:2px solid var(--line)}
details:not(.ver-mas)>summary{border:2px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 14px;
  min-height:48px;font-weight:700;cursor:pointer;list-style-position:inside}
details:not(.ver-mas)>summary:hover{border-color:var(--accent)}
details.pegar>summary,.avisos li details>summary{width:fit-content;max-width:100%}
/* D.2: dos botones lado a lado en la computadora; uno debajo del otro en el celular */
.botones-par{display:flex;flex-wrap:wrap;gap:10px}
.botones-par>.btn{flex:1 1 280px;width:auto}
/* D.3: «Sí, hacerla» y los demás botones de una confirmación nunca se parten en dos renglones */
.confirmar .btn{white-space:nowrap;flex:none}
/* PEDIDO 36 (C2 y C5): historial del cupo (en rojo lo que contó más de 1) y avisos de la IA para el administrador */
.alerta-cupo{color:var(--danger,#b00020);font-weight:700}
tr.alerta-cupo td{color:var(--danger,#b00020)}
.aviso-ia{border:2px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--surface)}
.aviso-ia p{margin:0 0 6px}

/* PEDIDO 36 (D4): los Términos y el Aviso se leen dentro de la ventana */
.lector-legal{width:100%;height:50vh;border:2px solid var(--line);border-radius:10px;background:#fff}
/* PEDIDO 36 (A2): las dos versiones de un código, lado a lado (en el celular, una debajo de la otra) */
.lado-a-lado{align-items:flex-start;gap:12px;flex-wrap:wrap}
.lado-a-lado .lado{flex:1 1 240px;min-width:0}

/* PEDIDO 36 (A4): el editor del texto del estudiante ocupa todo el ancho de su fila */
.ancho-total{width:100%}