/* MediSim CR · hoja de estilos única (sin frameworks, ~12 KB) */
:root{
  --ink:#0E1B2C; --ink-2:#18304A; --teal:#0F7C7A; --teal-d:#0A5E5C;
  --mint:#2ED3A0; --mint-bg:#E3F8F1; --coral:#FF5A5F; --coral-bg:#FFE9EA;
  --amber:#F2A93B; --amber-bg:#FFF4E0; --surface:#F3F7F9; --card:#FFFFFF;
  --line:#DCE5EB; --text:#14212E; --muted:#5A6B7B;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --f-head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* 2.19-community-r2 (hallazgo detectado en la barrida visual/responsive de esta ronda, verificando el
   stepper accesible de la encuesta post-simulación, encargo P0-8): cualquier elemento con una clase que
   fije `display` explícito (p. ej. .btn{display:inline-flex}) IGNORA el estilo por defecto del navegador
   para el atributo `hidden` (display:none), porque una regla de autor con la MISMA especificidad que
   `[hidden]` (un selector de atributo) le gana a la hoja de estilos del user-agent en la cascada — pasar
   `.hidden = true` desde JavaScript tiene exactamente el mismo problema, ya que equivale a poner el
   atributo. Esto ya se había parcheado dos veces de forma puntual más abajo (.session-veil[hidden] y
   .time-fields [hidden]) sin arreglar la causa: cada función nueva que combina `hidden` con una clase de
   `display` propio (aquí, el stepper de la encuesta: los botones "Atrás"/"Siguiente"/"Enviar" son .btn)
   vuelve a pisar la misma piedra — confirmado con Playwright: getComputedStyle de un <button class="btn"
   hidden> daba display:inline-flex, no none, así que en el paso 1 de la encuesta los tres botones de
   navegación se veían simultáneamente (y esa pelea de espacio fue la causa real del overflow horizontal
   a 360/375px que se corrigió en templates/Survey/post_simulation.php). Esta regla, con !important y
   colocada primero, hace que `hidden` vuelva a ganar siempre sin tocar ninguna regla existente. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
fieldset{min-width:0}  /* v2.24.1: el UA fija min-width:min-content y ensancha la página con contenido largo (árbol de áreas sin JS, texto 150%) */
body{margin:0;background:var(--surface);color:var(--text);font:1.0625rem/1.6 var(--f-body)}
img,svg{max-width:100%;display:block}
a{color:var(--teal);text-underline-offset:3px}
h1,h2,h3{font-family:var(--f-head);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:800}
h2{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--mint);border-radius:4px}
.wrap{width:min(1120px,100% - 2rem);margin-inline:auto}
.narrow{width:min(760px,100% - 2rem);margin-inline:auto}
.muted{color:var(--muted)} .small{font-size:.9rem}
.sr{position:absolute;left:0;top:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}

/* Barra superior */
.topbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:20}
.topbar .wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font:800 1.25rem var(--f-head)}
.brand svg{width:34px;height:34px}
.brand b{color:var(--mint);font-weight:800}
.nav{margin-left:auto;display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
/* :not(.btn) — corrección 2ª ronda: un <a class="btn btn-cta ..."> dentro de .nav (los CTA del header,
   "Comenzar prueba gratis"/"Ir a mi panel") tiene la misma especificidad que .btn-cta para el color de
   fondo pero .nav a (clase + elemento) es MÁS específico que .btn-cta (una sola clase) para el color de
   texto, así que pisaba silenciosamente el color pensado para el botón (var(--on-cta)) con el color de
   enlace de navegación (#CFE0EA), dando un contraste de 1.41:1 sobre el fondo menta del CTA (mínimo
   exigido 4.5:1 — hallazgo real de axe/Lighthouse en Home V2). Excluir .btn de estas reglas deja que
   .btn/.btn-cta decidan su propio color, sin tocar el estilo de los enlaces de navegación normales. */
.nav a:not(.btn){color:#CFE0EA;text-decoration:none;padding:.45rem .8rem;border-radius:999px;font-size:.95rem}
.nav a:not(.btn):hover,.nav a.on:not(.btn){background:var(--ink-2);color:#fff}
.nav .who{color:#8FA7B8;font-size:.9rem;padding-left:.5rem}
@media (max-width:720px){.nav .who{display:none}.nav a{padding:.4rem .55rem;font-size:.88rem}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;
  font:700 1rem var(--f-body);padding:.85rem 1.4rem;border-radius:999px;text-decoration:none;
  background:var(--teal);color:#fff;min-height:48px;transition:background .15s,transform .1s}
.btn:hover{background:var(--teal-d)} .btn:active{transform:translateY(1px)}
.btn.big{font-size:1.1rem;padding:1rem 1.8rem;min-height:56px}
.btn.mint{background:var(--mint);color:var(--ink)} .btn.mint:hover{background:#25BD8E}
.btn.ghost{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.btn.ghost:hover{background:var(--mint-bg)}
.btn.danger{background:var(--coral)} .btn.danger:hover{background:#E6484D}
.btn.sm{padding:.45rem .9rem;min-height:36px;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Mensajes */
.flash{padding:.9rem 1.1rem;border-radius:var(--r-md);margin:1rem 0;font-weight:600;cursor:pointer;border-left:6px solid}
.flash.success{background:var(--mint-bg);border-color:var(--mint)}
.flash.error{background:var(--coral-bg);border-color:var(--coral)}
.flash.warning{background:var(--amber-bg);border-color:var(--amber)}
.flash.info,.flash.default{background:#E7F1F8;border-color:var(--teal)}
.flash.hidden{display:none}

/* Formularios */
label{display:block;font-weight:700;margin:.9rem 0 .35rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;font:1.05rem var(--f-body);padding:.8rem .95rem;border:2px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--text);min-height:50px}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 4px rgba(15,124,122,.15)}
.code-input{font:700 1.2rem ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.hint{color:var(--muted);font-size:.88rem;margin-top:.3rem}
.error-message{color:#B3261E;font-size:.9rem;margin-top:.3rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin-top:1rem}
.check input{width:22px;height:22px;margin-top:3px}

/* Pantallas de acceso */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-side{background:var(--ink);color:#fff;padding:3rem clamp(1.5rem,5vw,4rem);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-side .quote{font:600 clamp(1.4rem,2.6vw,2.1rem)/1.3 var(--f-head);max-width:22ch}
.auth-side .ecg{position:absolute;left:0;right:0;bottom:22%;opacity:.9}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem}
.auth-card{width:min(440px,100%)}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth-side{min-height:220px;padding:1.5rem}.auth-side .ecg{bottom:10%}}

/* ECG: el elemento distintivo */
.ecg path{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ecg .trace{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 2.4s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ecg .trace{animation:none;stroke-dashoffset:0}}

/* Portada */
.hero{background:var(--ink);color:#fff;padding:clamp(3rem,8vw,6rem) 0 0;position:relative;overflow:hidden}
.hero h1{max-width:16ch;color:#fff}
.hero .lead{font-size:1.2rem;color:#C7D8E3;max-width:52ch}
.hero .ecg{margin-top:2.5rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:2rem;padding:3rem 0}
.facts dt{font:800 2.4rem var(--f-head);color:var(--teal)}
.facts dd{margin:0;color:var(--muted)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:1.25rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem 1fr;gap:1rem;align-items:start}
.steps li::before{content:counter(s);font:800 1.6rem var(--f-head);color:var(--ink);background:var(--mint);width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center}
.band{background:#fff;border-block:1px solid var(--line);padding:3rem 0}
.foot{padding:2rem 0;color:var(--muted);font-size:.9rem}

/* Panel del estudiante */
.page{padding:2rem 0 4rem}
.greet{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.phrase{font:600 1.15rem/1.4 var(--f-head);color:var(--ink);border-left:5px solid var(--mint);padding:.3rem 0 .3rem 1rem;margin:1rem 0 2rem;max-width:60ch}
.grid{display:grid;gap:1.25rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.panel.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.panel.dark .muted{color:#9FB5C4}
.meter{height:12px;background:#E4ECF1;border-radius:999px;overflow:hidden;margin:.6rem 0}
.meter i{display:block;height:100%;background:var(--teal);border-radius:999px}
.panel.dark .meter{background:#22405C} .panel.dark .meter i{background:var(--mint)}
.kpi{font:800 2.6rem/1 var(--f-head)}
.subtable{width:100%;border-collapse:collapse;font-size:.95rem}
.subtable td,.subtable th{padding:.55rem .4rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.subtable th{font-size:.82rem;color:var(--muted);font-weight:700}
.subtable .bar{width:38%}
/* 2.15.2: la etiqueta puede decir la causa de una omisión, así que en pantallas angostas se ajusta en vez de
   empujar la página a lo ancho. Cuando cabe en una línea, se ve igual que antes. */
.pill{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:.15rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700}
.pill.ok{background:var(--mint-bg);color:#0B6B4F} .pill.bad{background:var(--coral-bg);color:#A62B2F}
.pill.warn{background:var(--amber-bg);color:#8A5A0B} .pill.neutral{background:#E7EEF3;color:var(--muted)}
.resume{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;background:var(--amber-bg);border:2px solid var(--amber);border-radius:var(--r-lg);padding:1rem 1.25rem;margin-bottom:1.5rem}

/* Asistente de nueva práctica */
.choice-group{border:0;padding:0;margin:0 0 2rem}
.choice-group legend{font:700 1.3rem var(--f-head);margin-bottom:.8rem}
.choices{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.choice{position:relative}
.choice input{position:absolute;opacity:0}
.choice span{display:block;height:100%;background:#fff;border:2px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem;cursor:pointer;font-weight:400}
.choice span strong{display:block;font:700 1.08rem var(--f-head);margin-bottom:.2rem}
.choice input:checked+span{border-color:var(--teal);background:var(--mint-bg);box-shadow:inset 0 0 0 1px var(--teal)}
.choice input:focus-visible+span{outline:3px solid var(--mint);outline-offset:2px}
.reveal{margin-top:1rem}
/* Mejora progresiva: los bloques por modo se ocultan solo cuando hay JS que los muestre */
html.js .reveal.js-hidden{display:none}
html.js .reveal.js-hidden.show{display:block}

/* Pantalla de pregunta */
.q-top{background:var(--ink);color:#fff;padding:.9rem 0}
.q-top .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.q-count{font:700 1.05rem var(--f-head)}
.q-sub{color:#9FB5C4;font-size:.9rem}
.progress-ecg{flex:1 1 240px;height:34px;min-width:180px}
.progress-ecg svg{width:100%;height:34px}
.progress-ecg .bg{stroke:#2A4863;stroke-width:2.5;fill:none}
.progress-ecg .fg{stroke:var(--mint);stroke-width:3;fill:none;transition:stroke-dashoffset .6s}
.timer{display:flex;align-items:center;gap:.5rem;font:800 1.3rem ui-monospace,Consolas,monospace;min-width:5.5rem;justify-content:flex-end}
.timer svg{width:36px;height:36px;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:5}
.timer .t-bg{stroke:#2A4863} .timer .t-fg{stroke:var(--mint);transition:stroke-dashoffset 1s linear}
.timer.low .t-fg{stroke:var(--coral)} .timer.low{color:var(--coral)}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem);margin:1.5rem 0}
.case .stem{font-size:1.18rem;line-height:1.7;margin:0}
.case .tag{color:var(--muted);font-size:.88rem;margin-bottom:.8rem}
.options{display:grid;gap:.8rem;margin:0 0 1.5rem;padding:0;list-style:none}
.opt{position:relative}
.opt input{position:absolute;opacity:0}
.opt label{margin:0;display:grid;grid-template-columns:2.6rem 1fr;gap:.9rem;align-items:center;background:#fff;
  border:2px solid var(--line);border-radius:var(--r-md);padding:1rem;cursor:pointer;font-weight:400;font-size:1.08rem;min-height:64px}
.opt .letter{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font:800 1.1rem var(--f-head);background:var(--surface);color:var(--ink)}
.opt input:checked+label{border-color:var(--teal);background:var(--mint-bg)}
.opt input:checked+label .letter{background:var(--teal);color:#fff}
.opt input:focus-visible+label{outline:3px solid var(--mint);outline-offset:2px}
.opt.correct label{border-color:var(--mint);background:var(--mint-bg)}
.opt.correct .letter{background:var(--mint);color:var(--ink)}
.opt.wrong label{border-color:var(--coral);background:var(--coral-bg)}
.opt.wrong .letter{background:var(--coral);color:#fff}
.opt.locked label{cursor:default}
.opt .why{grid-column:2;font-size:.95rem;color:var(--muted);margin-top:.2rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center}
#verdict{scroll-margin-top:6rem}
.verdict{border-radius:var(--r-lg);padding:1.1rem 1.3rem;margin:1.5rem 0 1rem;font:700 1.25rem var(--f-head);display:flex;gap:.8rem;align-items:center}
.verdict.ok{background:var(--mint);color:var(--ink)} .verdict.bad{background:var(--coral);color:#fff}
.explain{background:#fff;border:1px solid var(--line);border-left:6px solid var(--teal);border-radius:var(--r-md);padding:1.25rem 1.4rem;margin-bottom:1.5rem}
.explain h3{margin-bottom:.4rem}

/* Resultados */
.score{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.ring{width:170px;height:170px;position:relative}
.ring svg{transform:rotate(-90deg);width:170px;height:170px}
.ring circle{fill:none;stroke-width:14}
.ring .r-bg{stroke:#22405C} .ring .r-fg{stroke:var(--mint)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 2.6rem var(--f-head)}
@media (max-width:600px){.score{grid-template-columns:1fr;justify-items:center;text-align:center}}
details.review{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.8rem}
details.review summary{cursor:pointer;padding:1rem 1.2rem;list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center}
details.review summary::-webkit-details-marker{display:none}
details.review[open] summary{border-bottom:1px solid var(--line)}
details.review .body{padding:1.2rem}
.tabs{display:flex;gap:.5rem;margin:1rem 0}
.tabs a{padding:.5rem 1rem;border-radius:999px;text-decoration:none;background:#fff;border:1px solid var(--line);color:var(--text)}
.tabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Admin */
.admin-layout{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.admin-side{background:var(--ink);color:#fff;padding:1.25rem}
.admin-side a{display:block;color:#CFE0EA;text-decoration:none;padding:.6rem .8rem;border-radius:var(--r-sm);margin:.15rem 0}
.admin-side a:hover,.admin-side a.on{background:var(--ink-2);color:#fff}
.admin-main{padding:1.5rem clamp(1rem,3vw,2.5rem)}
@media (max-width:860px){.admin-layout{grid-template-columns:1fr}.admin-side{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}.admin-side .brand{width:100%}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:1rem;margin:1rem 0 2rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem}
.stat b{display:block;font:800 2rem var(--f-head)} .stat span{color:var(--muted);font-size:.9rem}
.stat.alert{border-color:var(--amber);background:var(--amber-bg)}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
table.data{width:100%;border-collapse:collapse;font-size:.93rem}
table.data th,table.data td{padding:.65rem .8rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.data th{background:#F7FAFB;font-size:.82rem;color:var(--muted)}
table.data td.wrap-cell{white-space:normal;min-width:260px}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-bottom:1rem}
.filters input,.filters select{min-height:42px;padding:.5rem .7rem;width:auto}
.inline{display:inline} .inline form{display:inline}
.paginator{display:flex;gap:.3rem;list-style:none;padding:0;margin:1rem 0;flex-wrap:wrap}
.paginator li a,.paginator li span{display:block;padding:.35rem .75rem;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);text-decoration:none}
.paginator li.active a{background:var(--ink);color:#fff}
.codes{font:600 1rem ui-monospace,Consolas,monospace;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1rem;columns:3 190px}

/* Ajustes móviles */
.brand svg{flex-shrink:0}
@media (max-width:720px){
  .topbar .wrap{flex-wrap:wrap;gap:.2rem;padding:.55rem 0;min-height:0}
  .nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .topbar{position:static}
  .subtable .bar{display:none}
  .case .stem{font-size:1.08rem}
}
@media (max-width:860px){ .auth-side .ecg{display:none} .auth-side .quote{margin:1rem 0} }

/* v2: avisos, pagos, informe ECOM */
.badge{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;background:var(--coral);color:#fff;font:700 .75rem var(--f-body);vertical-align:middle}
.payinfo{background:var(--mint-bg);border:1px solid #BDEBDC;border-radius:var(--r-md);padding:1rem 1.1rem;margin:1rem 0}
.payamount{font:700 1.15rem var(--f-head);margin:0 0 .6rem}
table.ecom .area-row td{background:#EEF4F7}
.notice.unread{border-left:6px solid var(--teal)}
.pill.warn{background:var(--amber-bg);color:#8A5A0B}

/* v2: protección de contenido (disuasión de capturas y copia) */
.protect .case,.protect .options,.protect .explain,.protect details.review{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.protect img{pointer-events:none}
.veil{display:none}
.protect.veiled .veil{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:rgba(14,27,44,.96);color:#fff;text-align:center;font:600 1.2rem var(--f-head);padding:2rem}
.protect.veiled main{filter:blur(18px)}
@media print{
  .topbar,.nav,.no-print,.actions .btn,.q-top .timer,.admin-side,.skip-link,.flash-area,.flash,.session-veil,form.filters,.nav-toggle,.js-only,.paginator,.tabs{display:none!important}
  .admin-layout{display:block}
  .admin-main{padding:0}
  .table-wrap{overflow:visible!important;border:0!important;max-width:none}
  .table-wrap svg{min-width:0!important;max-width:100%}
  table.data{font-size:10pt}
  table.data tr,.stat{break-inside:avoid}
  .pill,.stat,.meter,.meter i,.verdict{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit;text-decoration:none}
  h1,h2{break-after:avoid}
  body.protect .case,body.protect .options,body.protect .explain,body.protect details.review,body.protect .review-block{display:none!important}
  body.protect main::before{content:"Contenido protegido de MediSim CR: las preguntas y explicaciones no se pueden imprimir.";display:block;font:700 14pt Arial;margin-bottom:1rem}
  body{background:#fff}
  .panel{border:1px solid #ccc;break-inside:avoid}
  .panel.dark{background:#fff;color:#000}
}


/* ===== v2.1 · Accesibilidad y responsive ===== */
:root{--coral-strong:#C2303A;--mint-text:#0B6B4F}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.skip-link{position:absolute;left:.5rem;top:-4rem;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:8px;font-weight:700}
.skip-link:focus{top:.5rem}
main:focus{outline:none}
td,th,.who,.muted,p,h1,h2,h3{overflow-wrap:anywhere}
input,select,textarea{max-width:100%}
/* contraste AA: coral de texto blanco pasa a tono fuerte (≥4.5:1) */
.btn.danger,.verdict.bad,.badge{background:var(--coral-strong)}
.btn.danger:hover{background:#A6252E}
.timer.low .t-fg{stroke:#FF7A7E}
/* objetivos táctiles ≥44px */
.btn.sm{min-height:44px;padding:.55rem 1rem}
.nav a,.nav .nav-logout{min-height:44px;display:inline-flex;align-items:center}
.paginator li a,.paginator li span{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.tabs a{min-height:44px;display:inline-flex;align-items:center}
.flash{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;cursor:default}
.flash-close{background:transparent;border:0;font-size:1.4rem;line-height:1;min-width:44px;min-height:44px;cursor:pointer;color:inherit;margin:-.6rem -.6rem -.6rem 0}
.tabs{flex-wrap:wrap}
.filters>div{min-width:min(160px,100%)}
.table-wrap:focus-visible{outline:3px solid var(--ink)}
.table-hint{display:none;font-size:.85rem;color:var(--muted);margin:.3rem 0}
@media (max-width:720px){.table-hint{display:block}}
/* menú móvil */
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:.5rem;background:transparent;color:#fff;border:2px solid #2A4863;border-radius:999px;padding:.4rem .9rem;min-height:44px;font:700 .95rem var(--f-body);cursor:pointer}
.nav-toggle-bars{width:18px;height:2px;background:#fff;position:relative;display:inline-block}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.nav-toggle-bars::before{top:-6px}.nav-toggle-bars::after{top:6px}
/* Sin JavaScript (o si medisim.js no cargó) el menú queda SIEMPRE visible y el botón "Menú" oculto.
   Solo cuando el script conectó el botón (html.nav-ready) el menú pasa a desplegable. */
@media (max-width:860px){
  .topbar .wrap.topbar-inner{flex-wrap:wrap;padding:.5rem 0}
  .nav{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;gap:.25rem;overflow:visible;margin:.4rem 0 .2rem}
  html.nav-ready .nav-toggle{display:inline-flex}
  html.nav-ready .nav{display:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  html.nav-ready .nav.open{display:flex}
  .nav a,.nav .nav-logout{border-radius:8px;padding:.6rem .8rem;white-space:normal}
  .nav .who{display:none}
}
/* Controles que solo funcionan con JavaScript (p. ej. "Imprimir"): ocultos sin JS */
html:not(.js) .js-only{display:none!important}
/* tablas como tarjetas en móvil (cuando la tabla lo declara) */
@media (max-width:640px){
  .admin-main{padding:1rem .75rem}
  .score .ring,.score .ring svg{width:140px;height:140px}
  .kpi{font-size:2.1rem}
}
@media (max-height:500px) and (orientation:landscape){.topbar{position:static}.q-top{position:static}}
.session-veil{position:fixed;inset:0;z-index:150;background:rgba(14,27,44,.96);color:#fff;display:grid;place-items:center;font:600 1.2rem var(--f-head)}
.session-veil[hidden]{display:none}
body.revoked main{visibility:hidden}
.opt label{min-height:56px}
.shortcuts{font-size:.9rem;color:var(--muted);display:flex;gap:.5rem;align-items:center;margin:.5rem 0 0}
.shortcuts input{width:22px;height:22px}
.error-message{color:#A6252E}
input[aria-invalid="true"]{border-color:var(--coral-strong)}

/* ===== Portada promocional ===== */
.lp-hero{background:var(--ink);color:#fff;padding:clamp(2.5rem,7vw,5.5rem) 0 0;overflow:hidden}
.lp-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.lp-hero h1{color:#fff;font-size:clamp(2rem,5.2vw,3.6rem);max-width:15ch}
.lp-hero .lead{color:#C7D8E3;font-size:clamp(1.05rem,2vw,1.25rem);max-width:48ch}
.lp-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 .6rem}
.btn.on-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn.on-dark:hover{background:rgba(255,255,255,.1)}
.lp-note{color:#9FB5C4;font-size:.9rem}
.lp-sample{background:#fff;color:var(--text);border-radius:var(--r-lg);padding:1.2rem;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.lp-sample .tag{display:inline-block;font-size:.78rem;font-weight:700;color:var(--muted);text-transform:none;margin-bottom:.4rem}
.lp-sample .opt-demo{border:2px solid var(--line);border-radius:12px;padding:.6rem .8rem;margin:.45rem 0;font-size:.95rem}
.lp-sample .opt-demo.ok{border-color:var(--mint);background:var(--mint-bg)}
.lp-section{padding:clamp(2.5rem,6vw,4.5rem) 0}
.lp-section.alt{background:#fff;border-block:1px solid var(--line)}
.lp-section h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:.6rem}
.lp-sub{color:var(--muted);max-width:60ch;margin-bottom:1.8rem}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1rem}
.product{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem}
.product.soon{background:transparent;border-style:dashed}
.product .status{display:inline-block;font-size:.8rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;margin-bottom:.6rem}
.product .status.live{background:var(--mint-bg);color:var(--mint-text)}
.product .status.soon{background:#E7EEF3;color:var(--muted)}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1.2rem;list-style:none;padding:0;margin:0}
.benefits li{border-left:5px solid var(--mint);padding:.2rem 0 .2rem 1rem}
.benefits h3{margin-bottom:.3rem}
.license-card{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(1.3rem,4vw,2.2rem);max-width:520px}
.license-card .price{font:800 clamp(2.2rem,6vw,3rem)/1 var(--f-head);margin:.4rem 0}
.license-card ul{padding-left:1.2rem;color:#DCE8EF}
.license-card li{margin:.35rem 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.7rem}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;min-height:44px;list-style-position:inside}
.faq details p{padding:0 1.2rem 1rem;margin:0}
.lp-footer{background:var(--ink);color:#C7D8E3;padding:2.2rem 0;font-size:.95rem}
.lp-footer a{color:#fff}
.lp-footer .cols{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start}
@media (max-width:860px){.lp-hero-grid{grid-template-columns:1fr}.lp-sample{display:none}}
.legal{max-width:760px}
.legal h2{margin-top:1.8rem}

/* v2.1 · panel admin sin desborde en móvil: los hijos del grid pueden encogerse */
.admin-layout{grid-template-columns:minmax(0,230px) minmax(0,1fr)}
.admin-layout>*{min-width:0}
@media (max-width:860px){.admin-layout{grid-template-columns:minmax(0,1fr)}.admin-side a{flex:1 1 auto;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center}}
.grid>*,.stats>*,.lp-hero-grid>*{min-width:0}
pre,.codes,code{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;max-width:100%}
@media (max-width:520px){
  details.review summary{grid-template-columns:auto 1fr;gap:.5rem}
  details.review summary>span:last-child{grid-column:2;justify-self:start}
}

/* v2.4 · plazo visible sin JavaScript */
.deadline{font-size:.95rem;color:var(--muted);margin:.4rem 0 0}
.q-top .deadline{color:#C7D8E3;margin:.2rem 0 0}

/* v2.6 · Mi repaso, reportes y estado de la respuesta */
.review-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.review-row{padding:1rem 1.2rem}
.review-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.review-stem{margin:.6rem 0 .8rem;overflow-wrap:anywhere}
.review-case{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem}
.radio-line{display:flex;gap:.6rem;align-items:center;min-height:44px;cursor:pointer}
.radio-line input{width:1.2rem;height:1.2rem}
.answer-status{margin:.8rem 0 0;padding:.7rem 1rem;border-radius:var(--r-md);border:1px solid var(--line);font-weight:600}
.answer-status:empty{display:none}
.answer-status.sending{background:#E7F1F8;border-color:var(--teal)}
.answer-status.ok{background:var(--mint-bg);border-color:var(--mint)}
.answer-status.warn{background:var(--amber-bg);border-color:var(--amber)}
.answer-status.fail{background:var(--coral-bg);border-color:var(--coral)}
.report-comment{white-space:pre-wrap;overflow-wrap:anywhere;background:#F6F9FB;border:1px solid var(--line);border-radius:var(--r-md);padding:.8rem 1rem}

/* v2.7 · consolidación: palabras largas del caso no desbordan en 320 px; enlaces dentro de avisos con contraste AA */
.case p,.options label>span,.explain p,.review-case,.review-stem{overflow-wrap:anywhere;min-width:0}
.options label{min-width:0}
.flash a{color:inherit;text-decoration:underline;font-weight:700}

/* v2.8 · Mi plan de estudio */
ul.plain{list-style:none;padding:0;margin:.4rem 0 1rem}
ul.plain li{margin:.35rem 0;overflow-wrap:anywhere}
.plan-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.plan-list li{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);padding:.8rem 1rem;background:#fff}
.plan-list li>div{min-width:0;flex:1 1 16rem;overflow-wrap:anywhere}
.plan-list form{margin:0}

/* 2.11 · simulacro personalizado y tiempo total */
.tree{border:1px solid var(--line);border-radius:var(--r-md);padding:.8rem 1rem;margin-top:1rem;background:#fff}
.tree legend{font-weight:700;padding:0 .3rem}
.tree .check{margin-top:.5rem}
.tree-subs{margin:0 0 .6rem 1.9rem}
.tree-subs .check{margin-top:.3rem}
.time-fields{margin-top:1rem}
.total-timer{font:700 1.05rem var(--f-head);background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:999px;padding:.3rem .8rem;white-space:nowrap}
.total-timer.low{border-color:var(--coral);color:#A62B2F}
.stats-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));margin:1rem 0}
.stats-grid div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:.6rem .8rem}
.stats-grid b{display:block;font:700 1.5rem var(--f-head)}
.time-fields [hidden]{display:none !important}

/* ── Imagen de la pregunta (2.17) ─────────────────────────────────────────────────────────────────────
   width:auto + max-width:100% hace dos cosas a la vez: la imagen nunca se sale del contenedor (no hay
   desplazamiento horizontal ni en móvil) y tampoco se agranda más allá de su tamaño real, que en una
   radiografía se vería como una mancha borrosa.
   height:auto conserva la proporción: la imagen no se deforma nunca.
   max-height limita las verticales (tórax, columna) para que las opciones A/B/C no queden fuera de la
   pantalla; el navegador reduce el ancho en la misma proporción, así que sigue sin deformarse. */
.q-img{margin:1.25rem 0 0;padding:0}
.q-img img{width:auto;max-width:100%;height:auto;max-height:70vh;margin:0 auto;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.q-img-credito{color:var(--muted);font-size:.85rem;margin:.5rem 0 0;text-align:center}
@media (max-width:640px){
  /* En pantallas angostas conviene aprovechar todo el ancho: el detalle clínico se pierde si se achica. */
  .q-img img{width:100%;max-height:none}
}
@media print{
  /* Al imprimir la revisión, la imagen no debe partirse entre dos páginas. */
  .q-img{break-inside:avoid;page-break-inside:avoid}
  .q-img img{max-height:none;border:0}
}
/* Ampliar la imagen (patch B015 v013): enlace al archivo completo, crédito con enlaces y objetivo táctil legible. */
.q-img-ampliar{display:block;cursor:zoom-in}
.q-img-ampliar:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.q-img-credito{overflow-wrap:anywhere}
.q-img-credito a{color:inherit;text-decoration:underline}
.q-img-abrir{margin:.35rem 0 0;text-align:center;font-size:.9rem}
.q-img-abrir a{display:inline-block;padding:.5rem .75rem}

/* ===== 2.18 · Reportes ECOM v2 (templates/Reports/index_v2.php, detrás de MediSim.reportsV2.enabled) =====
   Aditivo: no cambia ninguna regla existente. Reutiliza table.data.cards (ya usada en Practice/history.php,
   Admin/ItemStats, etc.) para el paso de tabla a tarjeta en móvil; solo agrega estilos propios de este reporte. */
.v2-step{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:2rem 0 .5rem}
.v2-area{border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem 1rem;margin-bottom:.8rem;background:#fff}
.v2-area:last-child{margin-bottom:0}
.v2-area summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.v2-area summary::-webkit-details-marker{display:none}
.v2-area summary::before{content:'▸';display:inline-block;margin-right:.3rem;transition:transform .15s}
.v2-area[open] summary::before{transform:rotate(90deg)}
.v2-area .table-wrap{margin-top:.8rem}
.mini-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.mini-card{border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .9rem;background:#fff}
.mini-card-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-weight:700}
@media (max-width:640px){
  .v2-step{margin:1.4rem 0 .4rem}
}

/* 2.21.2 · Crédito del desarrollador / pie de la app */
.app-footer{border-top:1px solid var(--line,#d9e2ea);margin-top:2.5rem;padding:1.25rem 0 1.75rem;font-size:.88rem;color:var(--muted,#5b6b78)}
.dev-credit{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center;justify-content:space-between;margin:1rem 0 0;font-size:.88rem;line-height:1.5}
.dev-credit p{margin:0}
.dev-credit a{text-decoration:underline;text-underline-offset:2px}
.auth-main .dev-credit{width:min(440px,100%);justify-content:center;text-align:center;margin-top:1.25rem}
.lp-footer .dev-credit,.site-footer .dev-credit{border-top:1px solid rgba(255,255,255,.16);padding-top:1rem}
@media (max-width:560px){.dev-credit{flex-direction:column;align-items:flex-start}.auth-main .dev-credit{align-items:center}}

/* 2.21.2 · Planes de suscripción */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1rem 0}
.plan-card{border:1px solid var(--line,#d9e2ea);border-radius:12px;padding:1rem 1.1rem;background:var(--card,#fff)}
.plan-card.is-best{border-color:var(--mint,#17a589);box-shadow:0 0 0 2px rgba(23,165,137,.18)}
.plan-card h3{margin:.1rem 0 .4rem;font-size:1.05rem}
.plan-price{margin:.1rem 0 .3rem}
.plan-price strong{font-size:1.6rem}
.plan-card .btn{width:100%;margin-top:.6rem}
.sub-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.5rem 1.25rem;margin:.75rem 0}
.sub-plan dt{font-size:.8rem;color:var(--muted,#5b6b78)}
.sub-plan dd{margin:0;font-weight:600}

/* 2.22.1 · Continuar con Google/Apple y enlaces a redes sociales */
.social-auth{display:grid;gap:.6rem;margin:1rem 0 .25rem}
.social-auth .social-btn{width:100%;min-height:48px}
.social-auth .hint{margin:.1rem 0 0;font-size:.85rem}
.social-sep{display:flex;align-items:center;gap:.75rem;margin:.4rem 0 0;color:var(--muted,#5b6b7a);font-size:.9rem}
.social-sep::before,.social-sep::after{content:"";flex:1;border-top:1px solid currentColor;opacity:.3}
.social-list{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.6rem}
.social-links{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;list-style:none;margin:.5rem 0 0;padding:0}
.social-links a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .6rem;text-decoration:underline;text-underline-offset:2px}
.dev-credit .social-links{flex-basis:100%;justify-content:inherit}
/* >>> INC-0731 BEGIN · Pie en móvil (no editar entre marcadores; para revertir, borre desde BEGIN hasta END).
   Causa raíz: .dev-credit hereda flex-wrap:wrap; la media query de ≤560px solo cambiaba la DIRECCIÓN a columna y .social-links conserva flex-basis:100%,
   que en un contenedor en columna se resuelve contra la ALTURA. Dentro de .auth-main (columna flex de altura definida: /ingresar, /registro, /recuperar,
   /admin/ingresar…) cada bloque pasaba a una columna nueva a la derecha del viewport (scrollWidth ≈ 2× el ancho, pie fuera de pantalla). Solo se manifiesta con
   redes sociales configuradas. Debe ir DESPUÉS de la regla .dev-credit .social-links (misma especificidad: gana la última). */
@media (max-width:560px){.dev-credit{flex-direction:column;flex-wrap:nowrap}.dev-credit>*{max-width:100%;min-width:0}.dev-credit .social-links{flex-basis:auto;justify-content:inherit}}
/* <<< INC-0731 END */

/* r3 · Checkout con identidad MedisimCR (Finalizar suscripción). El formulario de tarjeta es el componente seguro del procesador;
   aquí solo se compone la página que lo rodea. Mobile-first, sin scroll horizontal. */
.checkout{width:min(960px,100% - 2rem);margin-inline:auto;padding-block:1.25rem}
.checkout-brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-head);font-weight:800;color:var(--ink);margin:0 0 .25rem}
.checkout-logo{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:9px;background:var(--teal);color:#fff;font-weight:800}
.checkout h1{margin:.1rem 0 .8rem}
.checkout-steps{display:flex;flex-wrap:wrap;gap:.4rem .9rem;list-style:none;margin:0 0 1.1rem;padding:0;font-size:.92rem;color:var(--muted)}
.checkout-steps li{display:flex;align-items:center;gap:.4rem}
.checkout-steps li span{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#E7EEF3;color:var(--muted);font-weight:700;font-size:.85rem}
.checkout-steps li.done span{background:var(--mint-bg);color:var(--mint-text)}
.checkout-steps li.now{color:var(--ink);font-weight:700}
.checkout-steps li.now span{background:var(--teal);color:#fff}
.checkout-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:820px){.checkout-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.checkout h2{font-size:1.15rem;margin:0 0 .6rem}
.checkout-plan{font-family:var(--f-head);font-weight:800;font-size:1.25rem;margin:.1rem 0}
.checkout-price{margin:.1rem 0 .6rem}.checkout-price strong{font-size:1.9rem;color:var(--ink)}.checkout-price span{color:var(--muted)}
.checkout-terms{padding-left:1.1rem;margin:.6rem 0 0;display:grid;gap:.4rem;font-size:.95rem}
.checkout-form{min-height:210px;margin:.6rem 0 .9rem}
.checkout-btn{width:100%;justify-content:center}
.checkout-consent{margin:.8rem 0 .5rem}
.checkout .error-message{margin:.2rem 0 .8rem}

/* 2.23.1 · Actividad y comentarios (revisión humana) */
.rc-top{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between}
.rc-list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.9rem}
.rc-item{display:grid;grid-template-columns:2.2rem 1fr;gap:.7rem;align-items:start}
.rc-reply{margin-left:.2rem;padding-left:.7rem;border-left:2px solid var(--line)}
.rc-avatar{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ink-2);color:#fff;display:grid;place-items:center;font:700 .8rem var(--f-body)}
.rc-main{min-width:0}
.rc-head{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center}
.rc-head time{color:var(--muted);font-size:.85rem}
.rc-body{margin:.3rem 0;overflow-wrap:anywhere;line-height:1.5}
.rc-actions{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.rc-actions summary{cursor:pointer;color:var(--teal-d);font-weight:700}
.rc-form{display:grid;gap:.4rem;margin:.4rem 0;max-width:42rem}
.rc-form textarea,.rc-form select,.rc-form input[type=text],.rc-form input:not([type=hidden]){width:100%;max-width:100%}
@media (max-width:600px){.rc-item{grid-template-columns:1.8rem 1fr}.rc-avatar{width:1.8rem;height:1.8rem;font-size:.7rem}}

/* ===== 2.23.2 · Revisión humana como estación de trabajo (móvil primero) ===== */
.rv-head{position:sticky;top:0;z-index:30;background:var(--bg,#fff);border-bottom:1px solid #e5e7eb;padding:.4rem 0 .5rem;margin-bottom:.6rem}
.rv-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.rv-bar>a{min-height:44px;display:inline-flex;align-items:center}
.rv-pos{font-weight:600}.rv-short{display:none}
.rv-step{margin-left:auto;display:flex;gap:.4rem}
.rv-step .btn,.rv-fixbar .btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.is-off{opacity:.45;pointer-events:none}
.rv-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:.15rem .6rem;border-radius:999px;background:#eef2f6;font-size:.85rem;color:inherit;text-decoration:none;border:0}
.chip-btn{min-height:44px;cursor:pointer;font:inherit;font-size:.9rem;background:#e0ecf5}
.chip-btn.warn{background:#fde8c8}
.rv-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:1rem;align-items:start}
.rv-layout>*{min-width:0}
.rv-side{position:sticky;top:7.5rem;max-height:calc(100vh - 8.5rem);overflow:auto;border:1px solid #e5e7eb;border-radius:12px;padding:.8rem;background:#fff}
.rv-side .rc-form textarea,.rv-main textarea{max-width:100%}
.rv-close{display:none}
.rv-fixbar,.rv-scrim{display:none}
.rv-main img,.rv-side img{max-width:100%;height:auto}
.rv-checklist{list-style:none;padding:0;margin:.4rem 0}.rv-checklist label{display:flex;gap:.6rem;align-items:center;min-height:44px}
.rv-checklist input{width:22px;height:22px}
.rv-side table,.rv-main table{max-width:100%}
.rv-lastrej{border-left:4px solid #e0a000}
kbd{border:1px solid #bbb;border-radius:4px;padding:0 .3rem;background:#f6f6f6}
@media (max-width:900px){
  .rv-page .admin-side{display:none}
  .rv-page .admin-main{padding:.5rem .75rem calc(76px + env(safe-area-inset-bottom))}
  .rv-layout{grid-template-columns:minmax(0,1fr)}
  .rv-long,.rv-keys,.rv-meta{display:none}.rv-short{display:inline}
  .rv-step{display:none}
  .rv-head h1{font-size:1.1rem}
  html.js .rv-side,html.js .rv-decision{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:82vh;overflow:auto;z-index:50;border-radius:16px 16px 0 0;background:#fff;
    padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.25);transform:translateY(105%);visibility:hidden;transition:transform .2s ease}
  html.js .rv-side.open,html.js .rv-decision.open{transform:none;visibility:visible}
  html.js .rv-close{display:inline-flex;min-height:44px;float:right}
  html.js .rv-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
  html.js .rv-scrim[hidden]{display:none}
  html.js .rv-decision .rv-actions{display:flex;flex-direction:column;align-items:stretch}
  html.js .rv-decision .rv-actions .btn,.rv-decision details summary{min-height:48px;width:100%}
  .rv-fixbar{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:35;background:#fff;border-top:1px solid #d5dbe1;padding:.5rem calc(.6rem + env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) calc(.6rem + env(safe-area-inset-left))}
  .rv-fixbar .btn{flex:1 1 0;min-height:48px;font-size:1rem}
  .rv-fixbar .btn:nth-child(1),.rv-fixbar .btn:nth-child(4){flex:0 0 52px}
  body.rv-sheet-open{overflow:hidden}
}
@media (max-width:360px){.rv-fixbar .btn{font-size:.9rem;padding:.4rem}}
@media (max-width:900px) and (min-width:0){.rv-main .grid.two{grid-template-columns:minmax(0,1fr)}}

.rv-info{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
.rv-chips .chip-btn{flex:1 1 auto;justify-content:center}
@media (max-width:480px){.rv-chips .lbl{display:none}.rv-chips{flex-wrap:nowrap}.rv-chips .chip-btn{padding:.15rem .4rem;font-size:1rem}}
@media (min-width:901px){.rv-info{display:none}}

@media (max-width:900px){html.js .rv-side .rv-close,html.js .rv-decision .rv-close{position:sticky;top:0;z-index:2;background:#fff;float:none;margin-left:auto}}

/* v2.23.3-r3 · tablas como tarjetas verticales hasta 767px (reglas base movidas desde el bloque de 640px) */
@media (max-width:767px){
  table.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.cards tr{display:block;border-bottom:1px solid var(--line);padding:.5rem 0}
  table.cards td{display:flex;justify-content:space-between;gap:1rem;border:0;white-space:normal;padding:.35rem .8rem}
  table.cards td::before{content:attr(data-label);font-weight:700;color:var(--muted);flex:0 0 40%}
  table.cards td.wrap-cell{min-width:0}
  table.cards td .cell-val{text-align:right;min-width:0;overflow-wrap:anywhere}
}
/* ===== v2.23.3 · Tablas responsive (aditivo; solo actúa sobre las clases indicadas) =====
   Causa raíz corregida: `td,th{overflow-wrap:anywhere}` (regla global de v2.1) reduce el ancho MÍNIMO
   de cada columna a una letra; en una <table> de layout automático la columna de etiquetas (<th>) se
   comprimía hasta partir las palabras letra por letra (p. ej. «Resumen» de la vista previa del simulacro).
   Solución: componente `kv-stack` para tablas atributo/valor. No se tocan table/tr/td globales. */

/* 1) Tablas atributo/valor (<th>etiqueta</th><td>valor</td>, o dos <td>) */
table.kv-stack{width:100%;border-collapse:collapse}
table.kv-stack th,table.kv-stack td{
  white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:manual;
  vertical-align:top;text-align:left}
table.kv-stack th{width:34%;min-width:9.5rem;max-width:22rem;font-weight:700;color:var(--muted)}
table.kv-stack td code,table.kv-stack td .small{overflow-wrap:anywhere}
@media (max-width:767px){
  table.kv-stack,table.kv-stack tbody,table.kv-stack tr,table.kv-stack th,table.kv-stack td{
    display:block;width:auto;max-width:none;min-width:0}
  table.kv-stack tr{padding:.55rem 0;border-bottom:1px solid var(--line)}
  table.kv-stack tr:last-child{border-bottom:0}
  table.kv-stack th,table.kv-stack td{border:0;padding:.1rem .15rem;background:transparent}
  table.kv-stack th{font-size:.82rem;line-height:1.3}
  table.kv-stack td{font-size:1rem}
}

/* 2) Patrón `table.cards` (solo ≤767px): la celda pasa a BLOQUE con la etiqueta encima del valor.
   Causa raíz: con `td{display:flex;justify-content:space-between}` cada nodo hijo (texto, <a>, <br>, <code>,
   <button>, <span class="pill">…) se volvía una columna flex independiente y se aplastaba a 1-3 letras
   (p. ej. «Detalle» en Mensajes/Outbox). En bloque, el contenido fluye con normalidad. */
@media (max-width:767px){
  table.cards td{display:block;padding:.3rem .8rem}
  table.cards td::before{display:block;font-size:.8rem;line-height:1.3;margin-bottom:.1rem}
  table.cards td:not([data-label])::before{content:none}       /* filas de mensaje (colspan) sin etiqueta */
  table.cards td:empty{display:none}                           /* celdas vacías no ocupan una línea */
  table.cards th[scope="row"]{display:block;padding:.35rem .8rem;border:0;background:transparent;font-weight:700}
  table.cards td .cell-val{display:block;text-align:left;min-width:0}
  table.cards td .cell-actions{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-start}
  table.cards td .cell-actions form,table.cards td>form{display:inline-block;margin:0}
  table.cards td .cell-actions .btn,table.cards td>.btn,table.cards td>form .btn{min-height:44px}
}

@media (max-width:767px){
  /* estilos en línea heredados (white-space:nowrap) no deben forzar desbordes dentro de tarjetas */
  table.cards td[style*="nowrap"],table.cards td code[style*="nowrap"]{white-space:normal!important}
  table.cards td code{overflow-wrap:anywhere;word-break:break-word!important}
}

/* 3) Píldoras y <code> dentro de tablas de datos: nunca se parten a mitad de palabra.
   `.pill` y `code` tienen white-space:normal + overflow-wrap:anywhere (v2.1) y, dentro de celdas nowrap de
   una tabla más ancha que su contenedor, esas columnas absorbían todo el déficit y se partían
   («Pen/die/nte», «Text/o de/ejem/plo»). Las celdas .wrap-cell conservan el ajuste de línea. */
table.data:not(.cards) td:not(.wrap-cell) .pill,
table.data:not(.cards) th .pill,
table.data:not(.cards) td:not(.wrap-cell) code,
.subtable .pill{white-space:nowrap}
/* r4: antes 641px. Entre 641 y 767px las tablas ya son tarjetas verticales, y `nowrap` en identificadores largos empujaba la tarjeta fuera de pantalla. */
@media (min-width:768px){
  table.data.cards td:not(.wrap-cell) .pill,
  table.data.cards td:not(.wrap-cell) code{white-space:nowrap}
}
@media (max-width:767px){
  table.data.cards td .pill,table.data.cards td code,table.cards td .cell-val,table.cards td .cell-val code,table.cards .subtable .pill{white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%}
}

/* 4) Tablas comparativas ya envueltas en .table-wrap que no usan `data`: mantienen sus columnas y
   desplazan horizontalmente SOLO dentro del contenedor (nunca la página). */
table.scroll-cols th,table.scroll-cols td{white-space:nowrap}
table.scroll-cols td.wrap-cell{white-space:normal;min-width:240px}
table.scroll-cols .pill,table.scroll-cols td:not(.wrap-cell) code{white-space:nowrap}

/* ===== v2.23.3-r2 · accesibilidad y densidad (aditivo) ===== */
/* Contenedores de acción con formularios/details: <div> en vez de <span> (HTML válido). En escritorio fluyen en línea. */
table.cards td div.cell-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-start}
table.cards td div.cell-actions form{margin:0}
table.cards td div.cell-actions details{min-width:0;max-width:100%}
/* Pista de desplazamiento horizontal (JS la oculta si la tabla cabe; sin JS queda visible) */
.scroll-hint{margin:.2rem 0 .3rem}
.table-wrap[tabindex="0"]:focus-visible{outline:3px solid var(--teal,#0F8B7D);outline-offset:2px}
/* Primera columna fija al desplazar (identificación de la fila mientras se comparan columnas) */
table.sticky-first th:first-child,table.sticky-first td:first-child{position:sticky;left:0;z-index:1;background:var(--card,#fff);box-shadow:1px 0 0 var(--line,#d9e2ea)}
table.sticky-first thead th:first-child,table.sticky-first tr:first-child th:first-child{z-index:2}
/* Cabeceras largas pueden partirse por palabras (nunca por letras) */
table.scroll-cols.head-wrap th{white-space:normal;overflow-wrap:break-word;min-width:6rem}
/* objetivo táctil cómodo para «Anular…» y similares dentro de tarjetas */
@media (max-width:767px){ table.cards td summary{padding:.65rem 0;cursor:pointer} }
/* Tarjetas compactas (listados densos como Banco de preguntas / Revisión): dos columnas en móvil, campos largos y acciones a ancho completo.
   Nada se oculta: solo se reorganiza. */
@media (max-width:767px){
  table.cards.cards-compact tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .9rem;padding:.55rem .8rem}
  table.cards.cards-compact td{padding:.25rem 0;min-width:0}
  table.cards.cards-compact td.cc-wide{grid-column:1/-1}
  table.cards.cards-compact td.cc-wide:last-child{padding-top:.4rem}
}
/* región aria-live vacía dentro de acciones: no añade hueco ni desborde */
@media (max-width:767px){ table.cards td .cell-actions>[role="status"]:empty{flex:0 0 0;width:0;margin-left:-.4rem} }
/* mensajes flash con identificadores largos (p. ej. nombres de variables) no desbordan en 320px */
.flash>span{overflow-wrap:anywhere}

/* ===== v2.23.3-r3 · SIN desplazamiento horizontal de tablas en móvil (≤767px) ===== */
@media (max-width:767px){
  /* las pistas de desplazamiento ya no aplican: las tablas son tarjetas verticales */
  .scroll-hint{display:none!important}
  .table-wrap{overflow-x:visible}
  /* Tarjeta con título: 1.ª celda = título a ancho completo; el resto, campos etiquetados en rejilla fluida */
  table.cards.cards-titled tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.1rem .9rem;padding:.6rem .8rem}
  table.cards.cards-titled td,table.cards.cards-titled th[scope="row"]{padding:.2rem 0;min-width:0}
  table.cards.cards-titled td:first-child,table.cards.cards-titled th[scope="row"]:first-child{grid-column:1/-1;font-weight:700}
  table.cards.cards-titled td:first-child::before{display:none}
  table.cards.cards-titled td[colspan]{grid-column:1/-1}
  table.cards.cards-titled td.cc-wide{grid-column:1/-1}
  table.cards.cards-titled td .cell-val{display:block;text-align:left}
  /* Informe ECOM: bandas por área troncal + tarjeta por subárea */
  table.cards.ecom tr.area-row{background:var(--surface);border-top:2px solid var(--line)}
  table.cards.ecom tr.area-row td:first-child{font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
  table.cards.ecom td[style*="padding-left"]{padding-left:0!important}
  /* Listas con barra (dimensión clínica, subáreas del panel, últimas prácticas): UNA TARJETA VERTICAL por registro,
     con etiqueta visible por valor (data-label desde CakePHP), barra conservada y porcentaje legible. Escritorio: tabla original. */
  table.meter-rows,table.meter-rows tbody,table.meter-rows tr,table.meter-rows td{display:block;width:auto}
  table.meter-rows thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.meter-rows tr{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem;padding:.7rem .85rem;margin:0 0 .6rem;border:1px solid var(--line);border-radius:12px;background:#fff}
  table.meter-rows td{padding:0;border:0;white-space:normal;overflow-wrap:break-word;min-width:0}
  table.meter-rows td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.1rem;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
  table.meter-rows td:first-child{font-weight:700}
  table.meter-rows td.bar{display:block!important;width:auto}
  table.meter-rows td.bar .meter{margin:.35rem 0 .15rem!important}
  table.meter-rows td:last-child{text-align:left!important;max-width:none}
}
@media (max-width:767px){
  table.scroll-cols.cards th,table.scroll-cols.cards td,table.scroll-cols.cards td.wrap-cell{white-space:normal;min-width:0}
  table.cards.cards-titled td.cc-keep-label:first-child::before,table.cards.cards-compact td.cc-keep-label:first-child::before{display:block}
  table.cards.cards-compact td[colspan]{grid-column:1/-1}
}
@media (max-width:767px){ table.cards.ecom tr.area-row td{background:transparent} }
@media (max-width:767px){
  /* gráficos SVG dentro de contenedores: se escalan al ancho (viewBox) en vez de forzar desplazamiento */
  .table-wrap svg{min-width:0!important;max-width:100%;height:auto}
  table.meter-rows{table-layout:auto}
}
/* Paneles en dos columnas que contienen una tabla de varias columnas: solo se parten en 2 si cada panel mide >=440px (evita columnas aplastadas a 768–1100px) */
.grid.two:has(table.cards){grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}

/* ===== v2.24 · cierre responsive (r4) ===== */
/* Indicadores (.stat): cifra y rótulo nunca desbordan su tarjeta (tiempos como «125 min 30 s», porcentajes, textos largos). `break-word` solo parte cuando la palabra no cabe en la línea (a diferencia de `anywhere`, no altera el ancho mínimo y no parte «Pendiente»). */
.stat{min-width:0}
.stat b{font-size:clamp(1.3rem,4.4vw + .5rem,2rem);line-height:1.15;overflow-wrap:break-word;word-break:normal;hyphens:none}
.stat span{display:block;overflow-wrap:break-word;min-width:0}
.stats-grid div{min-width:0}.stats-grid b{overflow-wrap:break-word;font-size:clamp(1.2rem,4vw + .4rem,1.5rem)}

/* v2.24 — indicadores: la cifra escala con el ancho real de su tarjeta (container query units) para que palabras como «Pendiente» u «Oportunidad» nunca se partan letra a letra. Fallback: clamp previo. */
@supports (width:1cqw){
  .stat{container-type:inline-size}
  .stat b{font-size:clamp(1.05rem,15cqw,2rem)}
}

/* v2.24 · documentos legales, editor, banner de cookies */
.legal-doc{max-width:760px;line-height:1.65;overflow-wrap:anywhere}
.legal-doc h2{font-size:1.35rem;margin:2rem 0 .6rem}
.legal-doc h3{font-size:1.1rem;margin:1.4rem 0 .4rem}
.legal-doc table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.legal-doc th,.legal-doc td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left;vertical-align:top}
.legal-meta{color:var(--muted);font-size:.92rem;margin:.2rem 0 1rem}
.legal-toc{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:.8rem 1.1rem;margin:1rem 0}
.legal-toc ol{margin:.3rem 0;padding-left:1.2rem;columns:1}
.legal-missing{background:#FFE9A8;padding:0 .25rem;border-radius:4px}
.legal-toolbar{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 .5rem}
.legal-toolbar .btn{min-height:44px}
.legal-restore summary{cursor:pointer;list-style:none}
.legal-restore[open]{min-width:min(100%,22rem)}
.legal-links a{text-decoration:underline}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:3px solid var(--teal);box-shadow:0 -6px 24px rgba(0,0,0,.15);padding:1rem}
.cookie-banner .cb-in{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}
.cookie-banner p{margin:0;flex:1 1 20rem;font-size:.95rem}
.cookie-banner .cb-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.cookie-banner .btn{min-height:44px}
.cookie-banner[hidden]{display:none}

/* v2.24.1: aviso legal de /admin/legal; bloque de ancho completo (antes .flash{display:flex} partía el <strong> y el texto en dos columnas en móvil) */
.legal-notice{display:block;width:100%;box-sizing:border-box;margin:1rem 0;padding:.9rem 1.1rem;border-radius:var(--r-md);border-left:6px solid var(--amber);background:var(--amber-bg);overflow-wrap:break-word;word-break:normal;hyphens:manual}
.legal-notice p{margin:0 0 .5rem;line-height:1.5;font-size:1rem}.legal-notice p:last-child{margin-bottom:0}

/* v2.24.1 · Navegación de administración en móvil: una columna, colapsable tras "Menú" (antes ~25 enlaces apilados empujaban el contenido miles de px).
   Sin JavaScript el menú queda visible (html.nav-ready solo lo añade medisim.js al conectar el botón). Escritorio (>860px) no cambia. */
.admin-side-head{display:block}
@media (max-width:860px){
  .admin-side{display:block;position:sticky;top:0;z-index:40;padding:.6rem .9rem;box-shadow:0 2px 8px rgba(0,0,0,.25)}
  .admin-side-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
  .admin-side-head .brand{width:auto;min-width:0}
  .admin-side>p.small{display:none}
  .admin-links{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;margin-top:.5rem}
  .admin-side .admin-links a,.admin-side .admin-links button{display:flex;align-items:center;justify-content:flex-start;text-align:left;min-height:44px;flex:none;width:100%}
  .admin-links form{margin:0}
  html.nav-ready .admin-links{display:none}
  html.nav-ready .admin-links.open{display:grid;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
}

/* v2.24.1 · Tablas dentro de documentos legales: en móvil (<=767) tarjetas verticales completas, sin scroll horizontal (antes display:block + overflow-x:auto) */
@media (max-width:767px){
  .legal-doc table.legal-cards{display:block;overflow:visible;width:100%}
  .legal-doc table.legal-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legal-doc table.legal-cards tbody,.legal-doc table.legal-cards tr,.legal-doc table.legal-cards td{display:block;width:100%;box-sizing:border-box}
  .legal-doc table.legal-cards tr:not(:has(td)){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;margin:0}
  .legal-doc table.legal-cards tr{border:1px solid var(--line);border-radius:var(--r-md);margin:0 0 .8rem;background:#fff;overflow:hidden}
  .legal-doc table.legal-cards td{border:0;border-bottom:1px solid var(--line);padding:.55rem .8rem;overflow-wrap:anywhere}
  .legal-doc table.legal-cards td:last-child{border-bottom:0}
  .legal-doc table.legal-cards td[data-label]::before{content:attr(data-label);display:block;font-weight:700;font-size:.8rem;letter-spacing:.02em;color:var(--muted);margin-bottom:.15rem}
}
/* v2.24.1 · Tarjetas compactas en pantallas muy angostas (<=339px): una columna, para que etiqueta y valor no queden en celdas de ~125px */
@media (max-width:339px){
  table.cards.cards-compact tr,table.cards.cards-titled tr{grid-template-columns:minmax(0,1fr)}
}
/* v2.24.1 · Avisos (.flash): causa raíz de «columnas comprimidas / palabras en vertical» (p. ej. /admin/legal).
   .flash era display:flex con justify-content:space-between para alinear la «×» de cerrar; cuando el aviso trae varios nodos hijos directos
   (<strong> + texto + <a>) cada nodo se volvía una COLUMNA. Ahora el aviso es un bloque; solo usa flex cuando realmente trae botón de cierre. */
.flash{display:block}
.flash:has(>.flash-close){display:flex}
.flash>ul{margin:.4rem 0 0;padding-left:1.2rem}
/* Estado de acceso (Trial/licencia) en móvil: texto a todo el ancho y botón debajo, no en una columna angosta */
@media (max-width:560px){
  .access-status .flash{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
  .access-status .flash>span{flex:1 1 100%;min-width:0}
  .access-status .flash .btn{margin-left:0!important}
}

/* v2.24.1 · Responsive global — tablas de escritorio (>=768px): causa raíz de las palabras partidas en vertical.
   `td,th{overflow-wrap:anywhere}` (v2.1) hace que el ANCHO MÍNIMO de una columna sea casi 0; con muchas columnas
   (outbox, auditoría, estado del sistema) el navegador las comprime y rompe tokens como `trial_started` o fechas en 6–7 líneas.
   Con `break-word` el mínimo es la palabra más larga y la tabla usa el contenedor con desplazamiento horizontal existente. */
@media (min-width:768px){
  table.data td,table.data th,table.small td,table.small th{overflow-wrap:break-word;word-break:normal}
  table.data td time,table.data td .nowrap{white-space:nowrap}
}