/* NotiApp — estilos compartidos (app, términos y privacidad).
   Dirección: panel de trabajo lavanda, como un dashboard. Títulos en Figtree, cuerpo en Atkinson Hyperlegible
   (muy legible para el turno). Tarjetas blancas con borde lila fino, etiquetas en píldora, coral para lo urgente.
   En el celular: una columna. Desde 960 px: barra lateral con navegación y camas del turno. */
:root{
 --bg:#fbfaff;--side:#f1edfc;--card:#ffffff;--ink:#1f1a3d;--mute:#6b6688;--line:#e7e2f6;
 --pri:#6c4ed6;--pri-ink:#ffffff;--soft:#efeafd;--on:#5b3fc4;--peri:#7c8ee6;
 --cta:#6c4ed6;--cta-ink:#ffffff;
 --resalta:#da0081; /* magenta (tipo Nequi): botones de la nota final y chulos de "correcto" (elegido por Paula) */
 --resalta-ink:#ffffff; /* letra sobre --resalta */
 --nota:#3f2d86; /* fondo de la nota (morado berenjena): más oscuro que el botón Guardar para que este resalte */
 --alm:#be1e4a;--alm-soft:#fce8ee;--alm-ink:#ffffff;--ok:#22a074; /* verde menta (elegido por Paula, 13-oct-2026): bolita con ✓ */
 --ok-soft:#e2f7ef;--ok-ink:#11704f; /* fondo y letra de "Nota copiada" */
 --gris:#f2f1f6;--gris-line:#e1dfea;--gris-ink:#4a4760;--gris-fuerte:#67637f; /* pestaña "Lo general" elegida */ /* turnos anteriores (gris neutro, elegido por Paula) */
 --amarillo:#fff9e6;--amarillo-ink:#5a4200;--amarillo-line:#f3dc8f; /* letrerito de aviso (pacientes se borran a las 24 h), pedido por Paula */
 --f:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
 --head:"Figtree","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
 --r:16px;--ancho-side:264px;
 /* Heridas dibujadas en el cuerpo (28-oct-2026): incisión, puntos de sutura, piel enrojecida alrededor; azul de la herida escogida.
    --her-zona va en hexadecimal: la lee el código para marcar la zona bajo el mouse */
 --her-linea:#7a2533;--her-punto:#3a2326;--her-halo:#e79a9a;--her-lecho:#b5505a;--her-azul:#1a73c9;--her-azul-claro:#e2effb;--her-zona:#1a73c9;
 /* quemaduras pintadas: un color por grado (siempre con su nombre al lado). En hexadecimal: los lee el código para pintar */
 --qm1:#f2a48f;--qm2:#d9482b;--qm3:#7a1f2b;--qm4:#2b1d1d;
 /* úlceras marcadas en el cuerpo (29-oct-2026): mancha ovalada; por presión rojiza, venosa café */
 --les-upp-borde:#8a2c3a;--les-upp-lecho:#b5505a;--les-upp-halo:#eaa4a4;--les-ven-borde:#7a3d22;--les-ven-lecho:#a8643c;--les-ven-halo:#e6b48f;
 --ayuda:#1a73c9; /* bolita «?» que abre las instrucciones */
 color-scheme:light;
}
/* Siempre claro, aunque el computador o el celular estén en modo oscuro (decisión de Paula, 7-oct-2026) */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 var(--f)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--on)}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.app{max-width:640px;margin:0 auto;padding-inline:16px;padding-block:12px 120px}

/* Armazón: barra lateral (solo pantallas anchas) + contenido */
.side{display:none}
@media (min-width:960px){
 .shell{display:grid;grid-template-columns:var(--ancho-side) minmax(0,1fr);min-height:100vh}
 .side:not([hidden]){display:flex;flex-direction:column;gap:4px;background:var(--side);padding:24px 14px 16px;position:sticky;top:0;height:100vh;overflow:auto}
 .shell:has(.side[hidden]){display:block}
 .app{max-width:920px;padding-inline:32px;padding-top:20px;width:100%}
 .shell:has(.side:not([hidden])) .bar{left:var(--ancho-side)}
 .shell:has(.side:not([hidden])) .top .dup{display:none}
 .shell:has(.side:not([hidden])) .cabecera{display:none}
}
.marca{display:flex;align-items:center;gap:8px;padding:0 6px 20px}
/* Logotipo NotiApp: cuadro lila con la N + nombre */
.logo{display:inline-flex;align-items:center;gap:9px;font:600 21px/1 var(--head);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--pri);color:var(--pri-ink);font:600 18px/1 var(--head);font-style:normal;letter-spacing:0;flex:none}
/* N redondeada de la marca (marca/n.svg) sobre el morado; la letra del HTML queda solo como respaldo */
.logo i{background:var(--pri) url(marca/n.svg) center/100% no-repeat;color:transparent}
.logo b{color:var(--pri)}
.logo.grande{font-size:27px;gap:11px}
.logo.grande i{width:42px;height:42px;border-radius:13px;font-size:24px}
.cab-marca{display:flex;align-items:center;gap:8px}
.cab-marca .beta{margin-left:0}
/* Franja superior con la marca (celular); en pantallas anchas la reemplaza la barra lateral */
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.av.mini{width:40px;height:40px;font-size:14px;border:0}
.nav{display:grid;gap:4px}
.nav button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;border:0;border-radius:12px;background:none;font:500 16px var(--head);color:var(--ink);text-align:left}

.nav button.on{background:var(--pri);color:var(--pri-ink)}
.nav svg{flex:none}
.nav .n{margin-left:auto;background:var(--card);color:var(--on);border-radius:999px;padding:1px 10px;font:600 13px/1.6 var(--f)}
.side h3{font:500 13px var(--head);color:var(--mute);margin:22px 12px 6px;padding-top:16px;border-top:1px solid var(--line)}
.camas{display:grid;gap:2px}
.camas button{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border:0;border-radius:12px;background:none;text-align:left;font-size:15px}
.camas button.on{background:var(--soft)}
.camas i{width:14px;height:14px;border-radius:4px;background:var(--pri);flex:none}
.camas i.u{background:var(--alm)}.camas i.uci{background:var(--peri)}.camas i.qx{background:var(--mute)}
.camas small{color:var(--mute)}
.yo{margin-top:auto;display:flex;gap:10px;align-items:center;padding:16px 8px 0;border-top:1px solid var(--line)}
.yo div{min-width:0}
.yo b{display:block;font:500 15px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yo small{color:var(--mute)}
.av{width:44px;height:44px;border-radius:50%;background:var(--pri);color:var(--pri-ink);display:grid;place-items:center;font:600 16px var(--head);flex:none}

/* Encabezado de cada pantalla */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:12px;display:flex;align-items:center;gap:10px}
.top .who{flex:1;min-width:0}
.top .who b{display:block;font:600 22px/1.2 var(--head);letter-spacing:-.01em}
.top .who span{display:block;color:var(--mute);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghost{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:600;min-height:44px}

/* Tipografía */
h1{font:600 30px/1.15 var(--head);letter-spacing:-.02em;margin:12px 0 10px;text-wrap:balance}
h1 em{font-style:normal}
h1 .acento{color:var(--pri)}
h2{font:600 18px/1.25 var(--head);margin:0;text-wrap:balance}
.lead{color:var(--mute);margin:0 0 20px;max-width:34em}
.q{margin:24px 0 8px;font:500 16px var(--head)}

/* Etiquetas en píldora */
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font:600 13px/1.5 var(--f);background:var(--soft);color:var(--on);white-space:nowrap}
.pill.u{background:var(--alm-soft);color:var(--alm)}
.pill.sin-guardar{background:var(--amarillo);color:var(--amarillo-ink);border:1px solid var(--amarillo-line)}
/* Letrero al volver a una cama con cosas marcadas sin guardar (borrador) */
.recup{background:var(--amarillo);border:1px solid var(--amarillo-line);color:var(--amarillo-ink);border-radius:12px;padding:10px 14px;font-size:15px;margin:14px 0 0}

/* Selección de servicio y país */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.areas button{min-height:64px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);font:500 17px var(--head)}
.areas button.on{border-color:var(--pri);background:var(--pri);color:var(--pri-ink)}

/* Campos */
.inp{width:100%;min-height:54px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 16px;font-size:18px}
.inp:focus{border-color:var(--pri);outline:none;box-shadow:0 0 0 3px var(--soft)}
.results{display:grid;gap:6px;margin-top:8px}
.results button{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.results small{color:var(--mute);display:block;font-size:13px}
.chosen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tagx{display:inline-flex;align-items:center;gap:4px;background:var(--soft);color:var(--on);border-radius:999px;padding:6px 6px 6px 14px;font-weight:600}
.tagx button{border:0;background:none;color:inherit;font-size:18px;padding:0 8px;min-height:32px}

/* Botones */
.big{width:100%;min-height:56px;border:0;border-radius:999px;background:var(--cta);color:var(--cta-ink);font:600 17px var(--head);margin-top:26px;padding:0 24px}
.big:disabled{opacity:.4;cursor:not-allowed}
/* Debajo de un botón gris: qué falta para poder seguir */
.falta{margin:10px 0 0;text-align:center;color:var(--mute);font-size:15px}
.falta:empty{display:none}
.sec2{background:var(--soft);color:var(--on)}

/* Tabla de pacientes */
.tabla{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 8px}
.tabla-h{display:flex;align-items:center;gap:10px;padding:10px 10px 6px}
.fila{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c b" "x x";gap:6px 12px;align-items:center;padding:12px 10px;border-top:1px solid var(--line);border-radius:12px}
.fila>.c{grid-area:c;min-width:0}
.fila.cur{background:var(--soft)}
.fila.cur .pill:not(.u){background:var(--card)}
.fila .cama{font:600 17px/1.3 var(--head)}

/* Pantalla de turno */
.hour{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:6px 0 12px}
.hour input{border:0;background:transparent;font:600 26px/1.1 var(--head);font-variant-numeric:tabular-nums;width:auto;min-width:0;flex:none;padding:0}
.hour .lbl{color:var(--mute);font-size:14px;flex:1}
@media (max-width:420px){.hour .lbl{visibility:hidden;min-width:0;overflow:hidden}} /* escondido y sin ocupar espacio: si no, empujaba «Ahora» fuera de la tarjeta (24-oct-2026) */
@media (max-width:359px){.hour input{font-size:22px}} /* celulares muy angostos (320 px): la hora un poco más pequeña para que quepa «Ahora» */
.watch{background:var(--alm-soft);color:var(--alm);border-radius:var(--r);padding:12px 16px;font-size:15px;margin-bottom:12px}
.watch b{display:block;font:600 16px/1.3 var(--head);margin-bottom:2px}
.watch span{display:block}
.watch-mas{display:block;min-height:44px;margin:2px 0 -6px;padding:0;border:0;background:none;color:var(--alm);font:600 15px var(--head);text-decoration:underline;text-underline-offset:3px}
/* «Vigila» en rojo cálido con borde (opción 2 de Paula, 23-oct-2026; antes el rojo frambuesa --alm con fondo rosado se veía frío).
   Solo este recuadro: «Eliminar esta cama» y los errores siguen con --alm */
:root{--vig-tx:#b42318;--vig-bg:#fff6f4;--vig-ln:#f2c4bd}
.watch{background:var(--vig-bg);color:var(--vig-tx);box-shadow:inset 0 0 0 1px var(--vig-ln)}
.watch-mas{color:var(--vig-tx)}
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:9px 14px;text-align:left;line-height:1.25}
.chip.pat{border-color:var(--pri)}
.chip.alm{border-color:var(--alm);color:var(--alm);background:var(--alm-soft)}
.chip.on{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.chip.alm.on{background:var(--alm);border-color:var(--alm);color:var(--alm-ink)}
.chip small{display:block;font-size:12px;opacity:.75;margin-top:2px}
.chip.more{border-style:dashed;color:var(--mute)}
.other{margin-top:10px;width:100%;min-height:46px;border:1px dashed var(--line);border-radius:12px;background:transparent;padding:0 14px;font-size:16px}
.other:focus{border-style:solid;border-color:var(--pri);outline:none}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.bar .in{max-width:640px;margin:0 auto;display:flex;gap:10px}
.bar .big{margin:0}

/* Nota armada */
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:22px}
.note h2{margin-bottom:8px}
.line{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.line:first-of-type{border-top:0}
.line b{font:600 15px/1.5 var(--head);font-variant-numeric:tabular-nums;color:var(--on);min-width:52px}
.line p{margin:0;flex:1;min-width:0;font-size:15px}
.line button{border:0;background:none;color:var(--mute);font-size:18px;min-width:44px;min-height:44px}
/* Editar y borrar un registro de la nota, uno sobre otro (no le quitan ancho al texto en el celular) */
.line-acc{display:flex;flex-direction:column;flex:none}
.line-acc button{display:inline-flex;align-items:center;justify-content:center}
.ev-ed{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--pri-ink) 22%,transparent)}
.ev-ed label{display:block;font:500 14px/1.3 var(--head);margin:8px 0 6px}
.ev-ed .inp{width:auto;color:var(--ink)}
.ev-ed textarea{min-height:120px;margin-top:0}
.empty{color:var(--mute);font-size:15px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.row .big{margin:0;flex:1;min-width:160px}
.row[hidden]{display:none}
textarea{width:100%;min-height:200px;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:12px 14px;font:16px/1.5 var(--f);margin-top:10px}
.foot{color:var(--mute);font-size:13px;margin-top:18px;text-align:center}
/* Debajo de la nota de enfermería (pedido de Paula, 24-oct-2026; antes era el pie de la izquierda en la pantalla de la cama) */
.nota-aviso{margin:10px 0 0;color:var(--mute);font-size:13px;text-align:center}

/* Avisos (opción C de Paula, 16-oct-2026): tarjeta abajo a todo el ancho, con ✕; los errores en rojo y se quedan hasta cerrarlos */
#toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:420px;margin:0 auto;display:flex;gap:10px;align-items:flex-start;background:var(--ink);color:var(--bg);padding:12px 8px 12px 16px;border-radius:14px;font-size:16px;line-height:1.4;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s;z-index:9}
#toast.on{opacity:1;pointer-events:auto;transform:none}
#toast.error{background:var(--alm);color:var(--alm-ink)}
.toast-t{flex:1;min-width:0;padding-top:2px}
.toast-x{flex:none;min-width:44px;min-height:44px;margin:-10px 0;border:0;background:none;color:inherit;font-size:18px}
@media (prefers-reduced-motion:reduce){#toast{transition:none;transform:none}}

/* NOC: filas Mejor / Igual / Peor en "¿Cómo lo dejas?" */
.inds{margin-bottom:12px}
.ind{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.ind:first-child{border-top:0}
.ind p{margin:0}
.ind small{display:block;color:var(--mute);font-size:13px}
.seg{display:flex;background:var(--soft);border-radius:999px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;border-radius:999px;min-height:40px;min-width:58px;padding:0 12px;font-size:15px;font-weight:600;color:var(--on)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
@media (max-width:420px){.ind{grid-template-columns:1fr}}

/* Firma, etiqueta beta y aviso de privacidad */
.firma{color:var(--mute);font-size:12px;text-align:center;margin:24px 0 4px}
.firma b{color:var(--ink)}
.beta{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--on);font:600 12px/1.4 var(--f);letter-spacing:0}
.top .who span.beta{display:inline-block;color:var(--on);font-size:12px;white-space:nowrap;overflow:visible}
.aviso{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:22px;font-size:15px}
.aviso b{font:600 16px/1.3 var(--head)}
.aviso p{margin:4px 0 0;color:var(--mute)}

/* Entrada */
.portada{margin:8px 0 18px}
.portada h1{font-size:34px;margin:16px 0 0}
.panel{background:var(--pri);color:var(--pri-ink);border-radius:20px;padding:20px;margin-top:18px}
.panel .lead{color:var(--pri-ink);opacity:.92;margin:0}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 18px 20px;margin-top:12px}
.acepto{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:15px;line-height:1.4;cursor:pointer}
.acepto input{width:24px;height:24px;margin:1px 0 0;flex:none;accent-color:var(--pri)}
.err{color:var(--alm);font-size:15px;margin:10px 0 0}

/* Código en cajitas: el input real va encima, transparente; las cajas solo muestran los números */
.otp{position:relative}
#f-codigo .q{margin-bottom:14px} /* aire entre «Código de 6 números» y los cuadritos (Paula, 21-oct-2026) */
.otp-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;color:transparent;caret-color:transparent;cursor:text}
.otp-cajas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.otp-cajas span{display:flex;align-items:center;justify-content:center;height:62px;border:1px solid var(--line);border-radius:14px;background:var(--card);font:600 28px/1 var(--head);font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s}
.otp-cajas span.on{border-color:var(--pri);animation:otp-pop .18s ease-out}
.otp.foco .otp-cajas span.activa{border-color:var(--pri);box-shadow:0 0 0 3px var(--soft)}
.otp.verificando .otp-cajas span{animation:otp-pulso .9s ease-in-out infinite;animation-delay:calc(var(--i) * 80ms)}
.otp.ok .otp-cajas span{border-color:var(--resalta);color:var(--resalta);box-shadow:none}
.otp.error .otp-cajas{animation:otp-temblor .35s}
.otp.error .otp-cajas span{border-color:var(--alm);color:var(--alm)}
.otp-ok{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0 0;color:var(--resalta);font-weight:600;font-size:18px}
.otp-ok[hidden]{display:none}
.otp-ok circle{stroke-dasharray:166;stroke-dashoffset:166;animation:otp-trazo .5s ease-out forwards}
.otp-ok path{stroke-dasharray:40;stroke-dashoffset:40;animation:otp-trazo .35s .45s ease-out forwards}
@keyframes otp-pop{50%{transform:scale(1.12)}}
@keyframes otp-pulso{50%{opacity:.45}}
@keyframes otp-temblor{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes otp-trazo{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.otp-cajas span,.otp.verificando .otp-cajas span,.otp.error .otp-cajas,.otp-ok circle,.otp-ok path{animation:none;transition:none}.otp-ok circle,.otp-ok path{stroke-dashoffset:0}}

/* Opinión sobre la nota mejorada */
.fb{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.fb-q{margin:0 0 8px;font:600 16px/1.3 var(--head)}
.fb-btns{display:flex;gap:10px;flex-wrap:wrap}
.fb-btns button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-weight:600}
.fb-btns button.on{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.fb-btns button.abajo svg{transform:rotate(180deg)}
.fb-l{display:block;margin:14px 0 0;font-weight:600;font-size:15px}
textarea.fbc{min-height:90px}
.fb-ok{color:var(--resalta);font-weight:600;margin:14px 0 0}

/* Páginas de términos y privacidad */
.doc{max-width:760px;margin:0 auto;padding:24px 16px 64px}
.doc .volver{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.doc-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.doc h1{font-size:34px;margin:18px 0 6px}
.doc .meta{color:var(--mute);font-size:14px;margin:0 0 24px}
.doc h2{margin:32px 0 8px;font-size:20px}
.doc p,.doc li{max-width:42em}
.doc ul{padding-left:20px}
.doc li{margin:6px 0}
.doc .resumen{background:var(--soft);border-radius:var(--r);padding:16px 18px;margin:18px 0}
.doc .resumen p{margin:6px 0}
.doc table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0;background:var(--card)}
.doc th,.doc td{text-align:left;border-bottom:1px solid var(--line);padding:10px 12px;vertical-align:top}
.doc th{font:600 14px var(--head);color:var(--mute)}
@media (max-width:520px){.doc table,.doc thead,.doc tbody,.doc tr,.doc th,.doc td{display:block}.doc thead{display:none}.doc td{border:0;padding:2px 12px}.doc td[data-label]:not(:first-child)::before{content:attr(data-label) ": ";font-weight:600}.doc tr{border-bottom:1px solid var(--line);padding:10px 0}}

/* Pantalla del paciente en computador (desde 1100 px; con mouse desde 1024 px, para que también salga en los portátiles de Windows con zoom
   del 125 %, que la página ve de unos 1093 px — 23-oct-2026): secciones a la izquierda y la nota fija a la derecha con su
   propio Guardar; la barra de abajo se esconde. Por debajo de 1100 px todo sigue en una columna, como en el celular. */
.guardar{display:none}
@media (min-width:1100px),(min-width:1024px) and (hover:hover) and (pointer:fine){
 .app:has(.turno){max-width:1240px;padding-bottom:40px}
 .turno{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:20px;align-items:start}
 .turno-nota{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 100px)}
 .turno-nota .note{margin-top:6px;min-height:0;overflow:auto}
 .turno-nota .guardar{display:block;flex:none;margin:0}
 .turno-nota .guardar[hidden]{display:none}
 .shell:has(.turno)+.bar{display:none}
}

/* Entrada en computador (desde 960 px): marca a la izquierda sobre lila, formulario a la derecha */
@media (min-width:960px){
 .app:has(.entrada){max-width:none;padding:0}
 .entrada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
 .entrada-marca{display:flex;background:var(--side);padding:40px 56px 56px}
 .entrada-marca .portada{display:flex;flex-direction:column;flex:1;margin:0}
 .entrada-marca h1{margin-top:auto;font-size:42px;max-width:10em}
 .entrada-form{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(32px,6vw,96px)}
 .entrada-form>*{width:100%;max-width:440px}
}

/* País fijo en Mi perfil (se elige una sola vez al registrarse) */
.pais-fijo{margin:0 0 6px;font:600 20px/1.3 var(--head)}

/* Plantillas: lista y formulario en Mi perfil; menú de / en la nota (va en el flujo, debajo de la caja) */
.pls{display:grid;gap:8px;margin:12px 0}
.pl{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.pl div{flex:1;min-width:0}
.pl b{font:600 16px/1.3 var(--head)}
.pl p{margin:2px 0 0;color:var(--mute);font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.card-pl textarea,.nadd textarea{min-height:90px}
.nadd{border-top:1px solid var(--line);margin-top:6px;padding-top:4px}
.nadd .big{margin-top:10px}
.pl-menu{display:grid;gap:2px;margin-top:6px;background:var(--card);border:1px solid var(--pri);border-radius:12px;padding:4px}
.pl-menu button{display:block;width:100%;min-height:44px;text-align:left;border:0;border-radius:10px;background:none;padding:8px 12px}
.pl-menu button:focus-visible{background:var(--soft)}
.pl-menu b{display:block;font:600 15px/1.3 var(--head)}
.pl-menu span{display:block;color:var(--mute);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-menu .empty{margin:8px 12px}
.pl-menu[hidden]{display:none}

/* Cambiar nombre y borrar una cama en Mis pacientes */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Barra de avance de "Mejorar redacción" */
.carga{margin-top:12px}
.carga-b{height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.carga-b span{display:block;height:100%;width:0;border-radius:inherit;background:var(--pri);transition:width .2s linear}
.carga p{margin:6px 0 0;color:var(--mute);font-size:14px}
@media (prefers-reduced-motion:reduce){.carga-b span{transition:none}}

/* Nota mejorada en ventana (modal) */
.ia-lista{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ia-lista p{margin:0;font-size:15px}
.ia-lista .big{margin-top:10px}
.dlg{width:min(760px,calc(100% - 24px));max-height:calc(100dvh - 24px);border:0;border-radius:20px;padding:20px;background:var(--card);color:var(--ink);overflow:auto}
.dlg::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent)}
.dlg-cab{display:flex;align-items:center;gap:12px}
.dlg-cab h2{flex:1;font-size:22px}
.dlg-x{border:0;background:var(--soft);color:var(--on);border-radius:50%;width:44px;height:44px;font-size:18px;flex:none}
.dlg .empty{margin:8px 0 0}
.nota-caja{position:relative}
.nota-caja textarea{display:block;resize:none;min-height:260px;max-height:calc(100dvh - 330px);overflow-y:auto;padding-right:56px}
.copiar-ico{position:absolute;top:18px;right:8px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--mute)}

.copiar-ico.ok{color:var(--ink);border-color:var(--mute)}
.dlg .big{margin-top:14px}
/* Celebración: chulo que se dibuja y chispas que salen una vez */
.cele{position:relative;display:grid;place-items:center;width:52px;height:52px;color:var(--resalta);flex:none}
.cele circle{stroke-dasharray:166;stroke-dashoffset:166;animation:otp-trazo .5s ease-out forwards}
.cele path{stroke-dasharray:40;stroke-dashoffset:40;animation:otp-trazo .35s .45s ease-out forwards}
.cele i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--pri);opacity:0;animation:chispa .7s .5s ease-out forwards}
.cele i:nth-child(odd){background:var(--peri)}
@keyframes chispa{0%{opacity:1;transform:rotate(calc(var(--k)*45deg)) translateY(-18px) scale(1)}100%{opacity:0;transform:rotate(calc(var(--k)*45deg)) translateY(-40px) scale(.4)}}
@media (prefers-reduced-motion:reduce){.cele circle,.cele path{animation:none;stroke-dashoffset:0}.cele i{display:none}}

/* Menú de inicio en el celular: mismas opciones que la barra lateral del computador */
.casa{display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;border:0;border-radius:12px;background:none;color:var(--on);flex:none}

/* Botón Actualizar: arriba a la derecha en el celular; debajo del logo en la barra lateral del computador */
.sync{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--on);font:600 15px var(--head);flex:none}
.sync:disabled{opacity:.75}
.side .sync{align-self:flex-start;margin:2px 0 10px}
.sync.girando svg{animation:girar 1s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sync.girando svg{animation:none}}
.menu-movil{display:flex;flex-direction:column;gap:4px;background:var(--side);border-radius:20px;padding:14px 12px 16px;margin-top:14px}
.menu-movil .nav button{min-height:56px;font-size:18px}
.menu-movil .nav .n{font-size:14px}
.menu-movil h3{font:500 13px var(--head);color:var(--mute);margin:16px 12px 6px;padding-top:14px;border-top:1px solid var(--line)}
.menu-movil .camas button{min-height:48px;font-size:16px}
.menu-movil .yo{margin-top:12px}

/* Sin zoom involuntario en el celular: cajas de texto de 16 px (iPhone agranda las menores) y sin zoom por doble toque.
   Pellizcar para agrandar sigue funcionando. */
button,a,input,textarea,select,label{touch-action:manipulation}

/* Mis pacientes, versión liviana: cama, patología y Abrir; cambiar nombre y borrar dentro de "⋯" */
.tabla-nota{margin:0 10px 6px;color:var(--mute);font-size:14px}
.fila>.fila-bts{grid-area:b;display:flex;gap:6px}
.fila .pats{color:var(--mute);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .cama .pill{vertical-align:2px;margin-left:4px}

/* Entrada en el celular: franja lila arriba con marca y frase (como la mitad izquierda del computador); formulario debajo, sin tarjeta */
@media (max-width:959px){
 .entrada-marca{background:var(--side);margin:-12px -16px 0;padding:22px 16px 30px;border-radius:0 0 28px 28px}
 .entrada-marca .portada{margin:0}
 .entrada-marca h1{margin-top:22px}
 .entrada-form{padding-top:8px}
 .entrada-form .form-card{border:0;background:none;padding:0;margin-top:0}
 .entrada-form .foot{text-align:left}
}

/* Nombre de la cama editable al tocarlo */
.cama-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;min-height:32px;text-align:left;color:inherit}
.cama-btn svg{color:var(--mute);flex:none}

.cama-ed{display:flex;gap:6px;align-items:center;width:100%}
.cama-ed .inp{flex:1 1 100px;min-width:0;min-height:44px;font-size:18px}
.cama-ed .ghost{flex:none;padding:0 14px}

/* Nota en morado berenjena (elegida por Paula): se distingue de las secciones y deja resaltar el botón Guardar */
.note{background:var(--nota);border-color:var(--nota);color:var(--pri-ink)}
.note h2{color:var(--pri-ink)}
.note .empty,.note .fb-l,.note .ia-lista p,.note .carga p{color:color-mix(in srgb,var(--pri-ink) 85%,transparent)}
.note .line{border-color:color-mix(in srgb,var(--pri-ink) 22%,transparent)}
.note .line b{color:var(--pri-ink)}
.note .line button{color:color-mix(in srgb,var(--pri-ink) 80%,transparent)}
.note .big{background:var(--card);color:var(--on)}
.note .big.sec2{background:color-mix(in srgb,var(--pri-ink) 16%,transparent);color:var(--pri-ink)}
.note textarea{background:var(--card);color:var(--ink);border-color:transparent}
.note .nadd,.note .ia-lista{border-color:color-mix(in srgb,var(--pri-ink) 22%,transparent)}
.note .pl-menu{color:var(--ink);border-color:var(--card)}
.note .pl-menu .empty{color:var(--mute)}
.note .carga-b{background:color-mix(in srgb,var(--pri-ink) 25%,transparent)}
.note .carga-b span{background:var(--resalta)}
.note :focus-visible{outline-color:var(--pri-ink)}

/* Botón "Crear nota final": varita + magenta que entra de izquierda a derecha al pasar el mouse y sale al quitarlo.
   En el celular no hay "pasar el mouse": el botón queda blanco. */
.note .big.crear{display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--card);color:var(--on);background-image:linear-gradient(var(--resalta),var(--resalta));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .4s ease,color .4s ease}
.note .big.crear svg{flex:none}
.note .big.crear:focus-visible{background-size:100% 100%;color:var(--resalta-ink)}

@media (prefers-reduced-motion:reduce){.note .big.crear{transition:none}}

/* Barrita de "Crear nota final" en el color --resalta con un destello que la recorre mientras procesa */
.carga-b span{position:relative;overflow:hidden}
.carga-b span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pri-ink) 65%,transparent),transparent);transform:translateX(-100%);animation:destello 1.3s ease-in-out infinite}
@keyframes destello{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.carga-b span::after{animation:none;display:none}}

/* Copiar en la ventana de la nota final: magenta, igual que el botón Crear nota final */
.dlg .big.copiar{background:var(--resalta);color:var(--resalta-ink)}
/* Ícono de copiar sin color (hojas redondeadas, elegido por Paula) */
.copiar-ico{color:var(--mute);border-color:var(--line)}

/* "Ver nota final": magenta, igual que Copiar nota, porque lleva a esa ventana */
.note .ia-lista .big{background:var(--resalta);color:var(--resalta-ink)}

/* Acciones de cada cama: ícono con palabra debajo. Nota final en magenta; Editar y Eliminar en morado */
.fila>.fila-bts{gap:2px}
.lb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:58px;min-height:52px;border:0;border-radius:12px;background:none;color:var(--on);font:600 12px/1.2 var(--f);padding:4px}

.lb.nf{color:var(--resalta)}
.lb.del{color:var(--on)}
.lb:disabled{opacity:.35;cursor:not-allowed}
/* Circulito suave detrás de cada ícono, del color del ícono (elegido por Paula) */
.lb{min-height:62px}
.lb svg{box-sizing:content-box;padding:7px;border-radius:50%;background:color-mix(in srgb,currentColor 14%,transparent)}

/* Franja de arriba del celular: casita + "NotiApp" + Beta, sin el cuadro de la N */
.cabecera .logo i{display:none}

/* En el celular las acciones de cada cama van solo con ícono (el nombre queda para lectores de pantalla) */
@media (max-width:959px){.lb span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.lb{min-width:48px;min-height:52px}}

/* Ventanita de confirmación */
.dlg-conf{width:min(420px,calc(100% - 32px))}
.dlg-conf h2{font-size:20px}
.dlg-conf p{color:var(--mute);margin:8px 0 0}
.conf-bts{display:flex;gap:10px;margin-top:18px}
.conf-bts .big{margin:0;flex:1;padding:0 12px}
.conf-bts .conf-si{background:var(--alm);color:var(--alm-ink)}

/* Revisión UX/UI (7-oct-2026): toda área de toque mide al menos 44 px y los botones del mismo tipo miden lo mismo */
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px}
.seg button{min-height:44px}
.cama-btn{min-height:44px}
.hour input{min-height:44px}
.camas button{min-height:44px}
.copiar-ico{width:44px;height:44px;top:16px}
.tagx{padding:2px 2px 2px 14px}
.tagx button{min-width:44px;min-height:44px;padding:0}
/* Campos de texto con la misma esquina y el mismo fondo cuando van juntos */
.inp{border-radius:12px}
.card-pl textarea{background:var(--card)}

/* Recuadro de la cama tocable: abre la cama */
.fila{cursor:pointer}

/* Servicios (y países): una sola fila en pantallas anchas; en el celular, dos por fila (más aire) */
.areas{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.areas button{min-height:56px;padding:6px 8px;line-height:1.15}
@media (max-width:699px){.areas{grid-template-columns:1fr 1fr;gap:10px}.areas button{min-height:60px}}

/* Abajo del menú: "Cerrar sesión" como una opción más (en gris) y debajo la usuaria (iniciales, correo y país) */
.yo .yo-t{flex:1;min-width:0;display:block}
.navsalir{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;border:0;border-radius:12px;background:none;font:500 16px var(--head);color:var(--mute);text-align:left}
.navsalir svg{flex:none}

.menu-movil .navsalir{min-height:56px;font-size:18px}
.menu-movil .yo-menu{margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}

/* Mis plantillas: botón "+ Nueva plantilla", formulario en tarjeta y lista con editar y borrar */
.nueva{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;border:1.5px dashed var(--pri);border-radius:var(--r);background:var(--soft);color:var(--on);font:600 17px var(--head)}

.card-pl{background:var(--card);border:1.5px solid var(--pri);border-radius:var(--r);padding:16px}
.card-pl h3{font:600 18px var(--head);margin:0 0 4px}
.row2{display:flex;gap:10px;margin-top:14px}
.row2 .big{margin:0;flex:1}
.pl-sub{display:flex;align-items:center;gap:8px;font-size:17px;margin:26px 0 10px}
.pl b .pill{margin-left:6px;vertical-align:2px}
.pl-acc{display:flex;gap:6px;flex:none}
.ib{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--soft);color:var(--on)}

/* Marca: cuadro de la N + nombre con "beta" pequeñita arriba (superíndice) */
.logo .nombre{display:inline-flex;align-items:flex-start;gap:3px}
.sup-beta{font:600 12px/1 var(--f);letter-spacing:0;color:var(--resalta);margin-top:-1px}
.logo.grande .sup-beta{font-size:13px}

/* Etiqueta Beta: morado con letra blanca para que se vea sobre cualquier fondo (el lila no contrastaba con el menú) */
.beta,.top .who span.beta{background:var(--pri);color:var(--pri-ink)}

/* Casilla de aceptar términos: del alto de un renglón, borde morado y chulo blanco sobre morado al marcarla */
.acepto{align-items:flex-start}
.acepto input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:20px;height:20px;margin:1px 0 0;flex:none;border:2px solid color-mix(in srgb,var(--pri) 60%,var(--line));border-radius:6px;background:var(--card);cursor:pointer;transition:background-color .15s,border-color .15s}

.acepto input:checked{background:var(--pri);border-color:var(--pri)}
.acepto input:checked::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid var(--pri-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.acepto input:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.acepto input{transition:none}}

/* Bolita de usuario: botón que despliega Términos y privacidad / Cerrar sesión (aparecen justo encima) */
button.yo{width:100%;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;border-radius:0;min-height:64px;padding:12px 8px 6px}
.side button.yo{margin-top:auto}
.side .yo-menu{margin-top:auto}
.side .yo-menu+button.yo{margin-top:6px}
.yo-flecha{flex:none;color:var(--mute);transform:rotate(180deg);transition:transform .15s}
button.yo.on .yo-flecha{transform:none}

.yo-menu{display:grid;gap:2px;padding:4px 0}
a.navsalir{text-decoration:none}
@media (prefers-reduced-motion:reduce){.yo-flecha{transition:none}}

/* Franja del celular: la casita arranca en el mismo borde que el contenido y queda cerca de "NotiApp" */
.cabecera .casa{margin-left:-11px;margin-right:-6px}

/* Tipo de registro (13-oct-2026): seis botones como los de servicio; Novedad o emergencia en rojo porque es la de alarmas */
.tipos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.tipos button{min-height:56px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);font:500 16px/1.2 var(--head);padding:6px 10px}
.tipos button.on{border-color:var(--pri);background:var(--pri);color:var(--pri-ink)}
.tipos button.alm{border-color:var(--alm);color:var(--alm)}
.tipos button.alm.on{background:var(--alm);color:var(--alm-ink)}
@media (min-width:700px){.tipos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

/* Edad: número y unidad (años, meses, días) en la misma fila */
/* Sexo y edad en el mismo renglón (pedido de Paula); la edad es número + desplegable años / meses / días */
.sexo-edad{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px}
.sexo{display:flex;gap:6px}
.sexo button{flex:1;min-height:54px;border-radius:12px;border:1px solid var(--line);background:var(--card);font:500 15px var(--head);padding:0 6px}
.sexo button.on{border-color:var(--pri);background:var(--pri);color:var(--pri-ink)}
.edad{display:flex;gap:6px}
.edad input.inp{flex:none;width:64px;padding:0 10px;text-align:center}
.edad select.inp{flex:1;min-width:0;padding:0 10px;font-size:16px;color:var(--ink)}

/* Signos vitales: casillas con su nombre arriba; la tensión arterial con sus dos números separados por / */
/* Signos vitales en renglones (opción 1, elegida por Paula el 16-oct-2026): nombre a la izquierda, casilla a la derecha */
.sv{margin:10px 0 4px}
.sv-c{display:grid;grid-template-columns:minmax(0,1fr) 140px;align-items:center;gap:10px;padding:4px 0;border-top:1px solid var(--line)}
.sv-c:first-child{border-top:0}
.sv-c label{font:500 15px/1.25 var(--head)}
.sv-v{display:flex;align-items:center;gap:6px}
.sv-v .inp{flex:1;min-width:0;min-height:44px;padding:0 8px;text-align:center;font:600 18px var(--head);font-variant-numeric:tabular-nums}
.sv-v small{flex:none;width:34px;color:var(--mute);font-size:13px}
.sv-ta span{color:var(--mute);font-size:18px}

/* Copiar la nota sin pasar por la nota final: magenta, como el Copiar de la ventana */
.note .big.copiar{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--resalta);color:var(--resalta-ink)}
.note .big.copiar svg{flex:none}
.nadd .row2{flex-wrap:wrap}
.nadd .row2 .big{min-width:140px}

/* Pantalla del paciente en tres pasos (13-oct-2026, maqueta aprobada por Paula): número en círculo morado = el orden real */
.paso{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font:600 18px/1.2 var(--head)}
.paso i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--pri);color:var(--pri-ink);display:inline-flex;align-items:center;justify-content:center;font:600 15px var(--head);font-style:normal}
.grupo+.grupo{margin-top:20px}
.grupo h3{font:500 16px/1.3 var(--head);margin:0 0 8px}
.libre{width:100%;min-height:72px;border:1px dashed var(--line);border-radius:12px;background:var(--card);padding:10px 14px;font:16px/1.4 var(--f);resize:vertical}
.libre:focus{border-style:solid;border-color:var(--pri);outline:none;box-shadow:0 0 0 3px var(--soft)}
/* Lo que cambió la varita, solo mientras se arma la frase (paso 3): subrayado fino + varita pequeña al final (opción 4 de Paula);
   al tocarlo o pasar el mouse dice que lo cambió la varita y qué se había escrito */
.ia-m{color:inherit;text-decoration:underline 1.5px;text-underline-offset:4px;cursor:help}
.ia-v{display:inline-block;vertical-align:-1px;margin-left:3px;opacity:.85}
.ia-m:focus-visible{outline:2px solid var(--on);outline-offset:1px}
/* La varita acaba de cambiar el texto de la casilla: verde un momento */
.libre.cambiada,.hueco-chip .hc-in.cambiada{border-style:solid;border-color:var(--ok);background:var(--ok-soft);transition:background-color .3s,border-color .3s}
@media (prefers-reduced-motion:reduce){.libre.cambiada,.hueco-chip .hc-in.cambiada{transition:none}}
.ayuda{display:inline-flex;align-items:center;gap:8px;margin-top:6px;border:0;background:none;color:var(--on);font:600 15px var(--head);min-height:44px;padding:0}
.ayuda:disabled{opacity:.6}
/* Paso 3: la frase que va a quedar; lo que llenó la auxiliar va resaltado */
.previa{background:var(--card);border:1.5px solid var(--pri);border-radius:var(--r);padding:14px 16px}
.previa small{display:block;color:var(--mute);font-size:13px;margin-bottom:6px}
.previa p{margin:0;line-height:1.55}
.previa mark{background:var(--soft);color:var(--on);border-radius:4px;padding:0 3px}
.previa .vacio{color:var(--mute)}
#guardar{margin-top:14px}
/* Perfeccionar la redacción completa: opción secundaria, como enlace dentro de la nota */
.note .enlace{display:block;width:100%;min-height:44px;border:0;background:none;color:var(--pri-ink);font:500 15px var(--head);text-decoration:underline;text-underline-offset:3px}
.note .enlace:disabled{opacity:.7;text-decoration:none}
/* Botón con espacio (___) marcado: el espacio es una casilla blanca dentro del mismo botón */
.hueco-chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.hueco-chip .hc-t{border:0;background:none;color:inherit;font:inherit;padding:0;min-height:30px;text-align:left}
.hueco-chip .hc-in{width:9em;max-width:100%;min-height:36px;border:0;border-radius:8px;padding:0 10px;font:16px var(--f);background:var(--card);color:var(--ink)}
.hueco-chip .hc-in:focus{outline:2px solid var(--pri-ink);outline-offset:1px}
/* Varita dentro del botón con espacio: pasa a lenguaje técnico lo escrito en la casilla */
.hueco-chip .hc-ia{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in srgb,var(--pri-ink) 18%,transparent);color:inherit;display:inline-flex;align-items:center;justify-content:center;padding:0}
.hueco-chip .hc-ia:focus-visible{outline:2px solid var(--pri-ink);outline-offset:1px}
.hueco-chip .hc-ia.cargando{opacity:.55}

/* Aviso de las 24 horas: letrerito amarillo (13-oct-2026, pedido por Paula) en Nuevo paciente, Mis pacientes y la pantalla del paciente */
.aviso{display:flex;gap:10px;align-items:flex-start;background:var(--amarillo);border-color:var(--amarillo-line);color:var(--amarillo-ink);padding:12px 14px}
.aviso svg{flex:none;margin-top:1px}
.aviso p{color:var(--amarillo-ink)}

/* Turnos (13-oct-2026): camas de turnos anteriores en un cajón gris con cuenta regresiva de borrado */
.prev{background:var(--gris);border:1px solid var(--gris-line);color:var(--gris-ink);border-radius:var(--r);padding:12px 14px;margin-top:14px}
.prev summary{font:600 15px/1.35 var(--head);cursor:pointer;min-height:44px;padding:4px 0}
.prev summary small{display:block;font:400 14px/1.4 var(--f);margin-top:2px}
.prev .camas{margin-top:8px;gap:6px}
.prev .camas button{background:var(--card);flex-wrap:wrap;padding:6px 12px}
.prev .fila{background:var(--card);margin-top:8px;border-top:0}
.prev-nota{font-size:13px;margin:10px 0 0}
.camas .cm-t{flex:1;min-width:0}
.cuenta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:400;color:var(--gris-ink);background:var(--card);border:1px solid var(--gris-line);border-radius:999px;padding:2px 8px;white-space:nowrap;vertical-align:middle}
.prev .camas .cuenta{background:var(--gris)}
.nuevo-turno{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:12px;font-size:16px} /* morado lleno, pedido por Paula */
.prev-aviso{margin:0 0 14px}
.prev-aviso p{margin:0 0 8px}
.prev-aviso .ghost{width:100%}
.conf-bts .conf-si.neutro{background:var(--cta);color:var(--cta-ink)}

/* Mis pacientes simple (13-oct-2026): una lista limpia, tocar la cama la abre; turnos anteriores en pantalla aparte */
.lista-pac{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-top:4px;overflow:hidden} /* overflow: el sombreado de cada cama llega a los bordes redondeados */
.pac{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:12px 16px;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:var(--ink)}
.pac:first-child{border-top:0}
.pac-t{flex:1;min-width:0}
.pac b{display:block;font:600 17px/1.3 var(--head)}
.pac b .pill{vertical-align:2px;margin-left:4px}
.pac small{display:block;color:var(--mute);font-size:14px;margin-top:2px}
.pac .ir{flex:none;color:var(--mute);font-size:24px;line-height:1}
.lista-pac.ant .pac b{color:var(--gris-ink)}
.lista-pac.ant .cuenta{background:var(--gris);flex:none}
.link-ant{display:flex;align-items:center;width:100%;min-height:48px;border:0;background:none;padding:0;margin-top:10px;color:var(--on);font:600 15px var(--head);text-align:left}
.menu-ant{padding:0 12px;margin-top:6px;font-size:14px}

/* Subtítulo de Mi turno: puede bajar a otra línea en vez de cortarse */
.who span.sub-libre{white-space:normal;overflow:visible;text-overflow:clip}

/* Turnos y pacientes (13-oct-2026): estado de cada cama y aviso al cerrar */
.est{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.3;border-radius:999px;padding:2px 9px;margin-top:6px;border:1px solid transparent}
.est.ok{background:var(--ok-soft);color:var(--ok-ink)}
.est.falta{background:var(--amarillo);color:var(--amarillo-ink);border-color:var(--amarillo-line)}
.est.vacio{background:var(--gris);color:var(--gris-ink)}
.est.incompleta{background:var(--borr);color:var(--borr-ink);border-color:var(--borr-falta)}
/* NOTAS DEL TURNO DE CADA CAMA (opción 1 de Paula, 29-oct-2026; app.js, notasCamaHTML): «Ver notas del turno» se despliega con las guardadas
   (verde) y la incompleta (amarillo) */
.pac-ver{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0 16px;border:0;border-top:1px solid var(--line);background:none;font:500 15px var(--head);color:var(--sel-tx);cursor:pointer}
.pac-ver svg{flex:none;transition:transform .2s}
.pac-ver[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.pac-ver svg{transition:none}}
.pac-ver:focus-visible{outline:3px solid var(--sel-ln);outline-offset:-3px}
.pac-reg{margin:0;padding:4px 16px 12px;list-style:none}
.pac-reg li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pac-reg li:first-child{border-top:0}
.pac-reg li.inc{margin:6px -8px 0;padding:10px 8px;border-top:0;border-radius:10px;background:var(--borr)}
.pr-h{font:500 15px var(--head);color:var(--mute);font-variant-numeric:tabular-nums}
.pr-t{display:block;font:500 15px/1.3 var(--head);color:var(--ink)}
.pr-e{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;font:500 12px/1.4 var(--head);vertical-align:1px}
.pr-e.ok{background:var(--ok-soft);color:var(--ok-ink)}
.pr-e.inc{background:var(--borr);color:var(--borr-ink);box-shadow:inset 0 0 0 1px var(--borr-falta)}
.pr-x{display:-webkit-box;margin-top:2px;overflow:hidden;font-size:14px;color:var(--mute);-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Lápiz y ✕ de cada nota en Mi turno (opción 1 de Paula, 30-oct-2026; ver «EDITAR Y BORRAR NOTAS DESDE MI TURNO» en app.js): en «Ver notas del
   turno» van a la derecha del nombre de la nota; en «Nota final», a la derecha de la hora (como dentro de la cama). La ✕ va en rojo. */
.pac-reg .pr-t:has(.acc-cama){display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.pac .acc-cama{display:inline-flex;flex-direction:row;gap:0;margin:-8px -8px -8px auto}
.acc-cama button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:6px;background:none;color:var(--mute);cursor:pointer}
.acc-cama button.rojo{color:var(--alm)}
.pac-reg .ev-ed-cama{padding:0;border-top:0}
.pr-x.entera{display:block}
.pr-mas{min-height:44px;padding:0;border:0;background:none;font:500 14px var(--head);color:var(--sel-tx);text-decoration:underline;cursor:pointer}
.pr-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px}
.pr-desc{min-height:44px;padding:0 4px;border:0;background:none;font:500 15px var(--head);color:var(--alm);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pr-seguir{min-height:44px;margin-top:0;padding:0 16px;border:0;border-radius:10px;background:var(--pri);font:500 15px var(--head);color:var(--pri-ink);cursor:pointer}
.pac-reg-vacio{margin:0;padding:4px 16px 14px;font-size:14px;color:var(--mute)}
/* «＋ Nota» arriba a la derecha de la caja y «Nota final» desplegable (opción 3 de Paula, 29-oct-2026; app.js, notaFinalCamaHTML) */
.pac-cab{display:flex;align-items:center;gap:8px;padding-right:12px}
.pac-cab .pac-abrir{flex:1;min-width:0;padding-right:4px}
.pac-nota{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--pri);font:500 15px var(--head);color:var(--pri-ink);white-space:nowrap;cursor:pointer}
.pac-nota:focus-visible{outline:3px solid var(--sel-ln);outline-offset:2px}
.pac-nf{padding:0 16px 14px}
.pac-nf .note.nf{margin-top:0}
.pac-nf .note.nf h2 small{display:inline;margin-top:0;color:inherit}
html[data-sistema] .pac-nf .note.nf .nf-reg-cab b{font:600 15px/1.5 var(--head);font-variant-numeric:tabular-nums} /* la hora como en el paso 3 (.pac b la agrandaba) */
html[data-sistema] .pac-nf .note.nf .nf-firma b{font:600 15px/1.4 var(--head)} /* la fecha, blanca sobre el azul como en el paso 3 (.pac small la ponía gris) */
.chk{display:flex;gap:12px;align-items:center;min-height:60px;padding:8px 2px;border-top:1px solid var(--line);cursor:pointer}
.chk:first-child{border-top:0}
.chk input{width:24px;height:24px;flex:none;accent-color:var(--pri)}
.chk b{display:block;font:600 16px var(--head)}
.chk small{display:block;color:var(--mute);font-size:14px}
.turnoc{background:var(--gris);border:1px solid var(--gris-line);color:var(--gris-ink);border-radius:var(--r);padding:14px;margin-top:12px}
.turnoc>b{display:block;font:600 16px/1.3 var(--head)}
.turnoc>small{display:block;font-size:14px;margin-top:2px}
.turnoc .cuenta{margin-top:8px}
.turnoc .bts{display:flex;gap:8px;margin-top:12px}
.turnoc .bts button{flex:1;min-height:44px;border-radius:999px;border:1px solid var(--gris-line);background:var(--card);font:600 15px var(--head);color:var(--ink)}
.turnoc .lista-pac{margin-top:12px}
.dlg-conf .alerta-dlg{background:var(--amarillo);border:1px solid var(--amarillo-line);color:var(--amarillo-ink);border-radius:12px;padding:10px 12px;margin-top:10px}

/* Pestañas de cada pregunta (13-oct-2026, opción 2 "bloques de color"): gris = lo general, morado = su enfermedad, rojo = alarmas.
   Siempre con su color suave; la elegida, en color fuerte con letra blanca. Arriba, la línea del filtro (tipo de nota · servicio · enfermedad). */
.filtro{margin:-4px 0 12px;color:var(--mute);font-size:14px}
.filtro b{color:var(--ink)}
.tabs{display:grid;gap:8px;margin:2px 0 12px}
.tabs.t2{grid-template-columns:1fr 1fr}
.tabs.t3{grid-template-columns:1fr 1fr 1fr}
.tab{min-height:64px;border:0;border-radius:14px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.tab b{font:600 13px/1.2 var(--head)}
.tab small{font-size:12px;opacity:.85}
.tab.g{background:var(--gris);color:var(--gris-ink)}
.tab.p{background:var(--soft);color:var(--on)}
.tab.a{background:var(--alm-soft);color:var(--alm)}
.tab.g.on{background:var(--gris-fuerte);color:var(--pri-ink)}
.tab.p.on{background:var(--pri);color:var(--pri-ink)}
.tab.a.on{background:var(--alm);color:var(--alm-ink)}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Paso 2 paso a paso (13-oct-2026): títulos desplegables, uno abierto a la vez. Bolita vacía = nada marcado; verde con ✓ = ya hay algo */
.sec.acc{padding:4px 0}
.ac{border-top:1px solid var(--line)}
.ac:first-child{border-top:0}
.ac-h{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 16px;border:0;background:none;text-align:left;color:var(--ink);font:500 16px/1.3 var(--head)}
.ac-t{flex:1;min-width:0}
.bola{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:transparent;background:var(--card)}
.hecho .bola{background:var(--ok);border-color:var(--ok);color:var(--pri-ink)}
.ac .fl{flex:none;color:var(--mute);transition:transform .2s}
.ac.ab .fl{transform:rotate(180deg)}
.ac.ab .ac-h{color:var(--on)}
.ac-c{padding:0 16px 16px}
.sig{display:block;margin-top:14px;border:0;background:none;padding:0;min-height:44px;color:var(--on);font:600 15px var(--head);text-align:left}
/* Pie del título abierto: "Siguiente" a la izquierda y "Cerrar" a la derecha */
.ac-pie{display:flex;align-items:center;gap:16px;margin-top:14px}
.ac-pie .sig{margin-top:0}
.ac-pie .cerrar{margin-left:auto;color:var(--mute);flex:none}
@media (prefers-reduced-motion:reduce){.ac .fl{transition:none}}

/* =====================================================================================================
   NUEVA ESTÉTICA (aprobada por Paula el 21-oct-2026, armada en vista previa sobre el dashboard de referencia)
   Reemplaza al lavanda de arriba sin renombrar clases. Las reglas van con atributos en <html>
   (data-nota, data-boton, data-sistema…) porque así se eligieron y así ganan en prioridad; los atributos
   están fijos en index.html, terminos.html y privacidad.html.
   · Fondo: degradado de lado a lado menta → aguamarina → celeste (claro). Barra lateral y tarjetas blancas.
   · Color: AZUL #1a73c9 = todo lo que se toca o está activo · VERDE solo «listo» (✓ de sección hecha, Nota copiada)
     · CORAL = alarma y eliminar/cancelar edición · AMARILLO = aviso. Grises neutros sin tinte.
   · Sobria: esquinas 14 (tarjetas) / 10 (botones y campos) / 8 (chips), sombras cortas, bordes de 1 px,
     sin contorno al hacer clic ni al escribir, botones blancos con borde fino (línea «Mis plantillas»).
   · Letra: Manrope 600 en títulos y controles, Atkinson 400 para leer. Escala: 22 pantalla · 17 bloque ·
     16 elemento/botón · 14 etiqueta · 15 contenido · 13 pequeño · 12 estados.
   · Al pasar el mouse: celeste nube #eef6ff (lo urgente y eliminar, rosadito); tarjetas de cama suben 1 px.
   · Paso 1 en cuadrícula de 2 columnas dentro de tarjeta blanca; nota de enfermería = hoja cuadriculada azul.
   ===================================================================================================== */
:root{--bg:#f1f9f6;--side:#ffffff;--card:#ffffff;--ink:#1b2a27;--mute:#647772;--line:#e1eee9;--pri:#1f8063;--pri-ink:#ffffff;--soft:#e2f2ec;--on:#1a6a4e;--peri:#4f9fca;--cta:#1f8063;--cta-ink:#ffffff;--resalta:#1a6a4e;--nota:#155447;--nota-2:#238470;--fondo-azul:#cde7f6;--fondo-claro:#ecf7f5;--fondo-menta:#cdeedf;--sombra:0 6px 24px rgb(22 79 64 / .07);--head:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--r:20px;}
body{background:linear-gradient(125deg,var(--fondo-azul) 0%,var(--fondo-claro) 45%,var(--fondo-menta) 100%) fixed}
.top{background:linear-gradient(125deg,var(--fondo-azul) 0%,var(--fondo-claro) 45%,var(--fondo-menta) 100%) fixed}
@media (min-width:960px){
 .side:not([hidden]){border-right:1px solid var(--line)}
}
.nav button.on{background:var(--soft);color:var(--on)}
.nav button.on .n{background:var(--pri);color:var(--pri-ink)}
.sec,.tabla,.hour,.aviso,.form-card,.pl,.results button{border-color:transparent;box-shadow:var(--sombra)}
.areas button{border-color:transparent;box-shadow:var(--sombra);border-radius:16px}
.inp{border-color:var(--line);background:var(--card)}
.chip{background:var(--card);border-color:var(--line)}
.ghost,.sync{border-color:transparent;box-shadow:var(--sombra)}
.note{background:radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--pri-ink) 10%,transparent) 0 64px,transparent 65px),radial-gradient(circle at 104% 70%,color-mix(in srgb,var(--pri-ink) 7%,transparent) 0 110px,transparent 111px),linear-gradient(140deg,var(--nota) 0%,var(--nota-2) 100%);border-color:transparent;box-shadow:var(--sombra)}
.big.sec2{background:var(--soft);color:var(--on)}
.menu-movil{box-shadow:var(--sombra)}
:root{--boton-a:#d3f1e5;--boton-b:#bfe9d8;--boton-ink:#135c46;--boton-hover:#b2e3cf;--sel:#e3f6ee;--sel-line:#3a9f7f;--sel-ink:#135c46;--line-boton:#cbe0d8;--sombra-boton:0 4px 14px rgb(22 79 64 / .12);}
.big{min-height:48px;border-radius:14px;background:linear-gradient(120deg,var(--boton-a),var(--boton-b));color:var(--boton-ink);font:600 16px var(--head);box-shadow:var(--sombra-boton)}

.big.sec2{background:var(--card);color:var(--boton-ink);box-shadow:inset 0 0 0 1px var(--line-boton)}
.note .big,.note .big.copiar{background:linear-gradient(120deg,var(--boton-a),var(--boton-b));color:var(--boton-ink)}
.note .big.sec2{background:color-mix(in srgb,var(--pri-ink) 14%,transparent);color:var(--pri-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri-ink) 30%,transparent)}
.chip{border-radius:10px;border-color:var(--line-boton);font-size:16px}
.tipos button,.areas button,.sexo button{border-radius:12px;border:1px solid var(--line-boton);box-shadow:none;min-height:48px;font-size:15px}
.chip.on,.tipos button.on,.areas button.on,.sexo button.on,.fb-btns button.on{background:var(--sel);border:1.5px solid var(--sel-line);color:var(--sel-ink);font-weight:600}
.chip.alm.on,.tipos button.alm.on{background:var(--alm-soft);border:1.5px solid var(--alm);color:var(--alm)}
.ghost,.sync{border-radius:12px;min-height:44px}
:root{--tarjeta-a:#5ec2ae;--tarjeta-b:#a9e1e4;--tarjeta-ink:#0f3b33}
.note{--pri-ink:var(--tarjeta-ink);color:var(--tarjeta-ink);background:radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--card) 28%,transparent) 0 64px,transparent 65px),radial-gradient(circle at 104% 70%,color-mix(in srgb,var(--card) 22%,transparent) 0 110px,transparent 111px),linear-gradient(120deg,var(--tarjeta-a) 0%,var(--tarjeta-b) 100%)}
.note .big,.note .big.copiar{background:var(--card);color:var(--boton-ink)}
.note a{color:var(--tarjeta-ink)}
:root{--pri:#1f8157;--cta:#1f8157;--on:#17704b;--soft:#dcf6ea;--peri:#5fbfe8;--resalta:#17704b;--verde-vivo:#229464;--celeste:#70c8f0;--aguamarina:#70d0d0;--line:#d9efe7;--fondo-azul:#c9ecfb;--fondo-claro:#ecfcf8;--fondo-menta:#c6f3df;--boton-a:#c9f6e4;--boton-b:#b2efd7;--boton-ink:#136343;--boton-hover:#a3eacf;--sel:#e0f8ee;--sel-line:var(--verde-vivo);--sel-ink:#136343;--line-boton:#c3e7da;--tarjeta-a:#7acdf2;--tarjeta-m:#93e2e2;--tarjeta-b:#74d3cc;--sombra:0 6px 24px rgb(20 110 80 / .08);}
.note{background:radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--card) 28%,transparent) 0 64px,transparent 65px),radial-gradient(circle at 104% 70%,color-mix(in srgb,var(--card) 22%,transparent) 0 110px,transparent 111px),linear-gradient(120deg,var(--tarjeta-a) 0%,var(--tarjeta-m) 55%,var(--tarjeta-b) 100%)}
:root{--aqua:#c4f1ee}
body,.top{background:linear-gradient(90deg,var(--fondo-menta) 0%,var(--aqua) 50%,var(--fondo-azul) 100%) fixed}
:root{--papel:#fffef9;--papel-crema:#fdfbf3;--renglon:#cfe6f3;--margen:#f0a8a8;--cuadro:#d8efe6;--tapa:#4fb8b0;--renglon-alto:30px}
:root{--tablero:#4fb8b0;--tablero-osc:#1f8157;--pinza-a:#eef3f2;--pinza-b:#b7c4c2;--planilla:#cfe3dd;--hoja-borde:12px;--hoja-top:30px}
:root{--marca-azul:#1f6fa8;--marca-aguamarina:#3fb6aa;--marca-celeste-claro:#d4effc}
.logo i{background:url(marca/n.svg) center/100% no-repeat,linear-gradient(135deg,var(--marca-azul),var(--marca-aguamarina))}
.logo b{color:var(--marca-azul)}
.beta,.top .who span.beta{background:var(--marca-celeste-claro);color:var(--marca-azul)}
.sup-beta{color:var(--marca-azul)}
:root{--alu-1:#eef2f4;--alu-2:#c3ccd1;--alu-3:#e2e8eb;--alu-4:#aab5bb;--azul-alu-1:#d6e8f7;--azul-alu-2:#86afd6;--azul-alu-3:#bcd6ee;--azul-alu-4:#6593be;--grafito-1:#6b767c;--grafito-2:#3e474c;--grafito-3:#5a656b;--grafito-4:#2f373b;--pinza-m1:#fbfcfd;--pinza-m2:#8c989e;--remache:#5d686d;--remache-luz:#e9eef0;--cepillado:rgb(255 255 255 / .10);}
:root{--claro-1:#fdfeff;--claro-2:#e4e9ec;--claro-3:#f4f7f8;--claro-4:#d3dade;--filo-hoja:#cfd7db}
html:not([data-boton="0"]) .big:not(.sec2),html:not([data-boton="0"]) .note .big,html:not([data-boton="0"]) .note .big.copiar{background:linear-gradient(120deg,var(--bt),var(--bt-b));color:var(--bt-ink);border:var(--bt-borde,0);box-shadow:0 6px 16px rgb(20 50 80 / .22)}

html:not([data-boton="0"]) .big.sec2{background:var(--card);color:var(--sel-tx);box-shadow:inset 0 0 0 1.5px var(--sel-ln)}
html:not([data-boton="0"]) :is(.chip,.tipos button,.areas button,.sexo button,.fb-btns button).on:not(.alm){background:var(--sel-bg);border:2px solid var(--sel-ln);color:var(--sel-tx);font-weight:600}
html:not([data-boton="0"]) .paso i{background:var(--num);color:#fff}
html:not([data-boton="0"]) .hecho .bola{background:var(--num);border-color:var(--num);color:#fff}
html:not([data-boton="0"]) .ac.ab .ac-h{color:var(--sel-tx)}
html:not([data-boton="0"]) .note .enlace{color:var(--sel-tx)}
html[data-boton="1b"]{--bt:#1a73c9;--bt-b:#1a73c9;--bt-ink:#fff;--sel-bg:#e2effb;--sel-ln:#1a73c9;--sel-tx:#135a9e;--num:#1a73c9}
html[data-boton^="1"] .av{background:var(--num);color:#fff}
html[data-boton^="1"] .camas i:not(.u):not(.uci):not(.qx){background:var(--num)}
html[data-boton^="1"] .nav button.on .n{background:var(--num);color:#fff}
html[data-boton^="1"] .nav button.on{color:var(--sel-tx)}
html[data-boton^="1"] .nav .n{color:var(--num)}
.pac,.fila{transition:transform .15s ease,box-shadow .15s ease}

@media (prefers-reduced-motion:reduce){
 .pac,.fila{transition:none}
 
}
.lista-pac{display:grid;gap:10px;background:none;border:0;overflow:visible}
.pac{background:var(--card);border-top:0;border-radius:var(--r);box-shadow:var(--sombra)}
:root{--fondo-menta:#dcf8eb;--aqua:#dbf6f4;--fondo-azul:#ddf2fc}
:root{--fm-0:#c6f3df;--fa-0:#c4f1ee;--fc-0:#c9ecfb}
html[data-fondo="3"]{--fondo-menta:color-mix(in srgb,var(--fm-0),#fff 35%);--aqua:color-mix(in srgb,var(--fa-0),#fff 35%);--fondo-azul:color-mix(in srgb,var(--fc-0),#fff 35%)}
html:is([data-sistema="A"],[data-sistema="B"]){--ink:#1b2733;--mute:#5d6a76;--line:#e1e8ef;--line-boton:#d2dde7;--planilla:#d8e1e8;--pri:#1a73c9;--cta:#1a73c9;--on:#135a9e;--soft:#e2effb;--resalta:#135a9e;--sombra:0 6px 24px rgb(20 60 100 / .08);}
html[data-sistema="A"] .hecho .bola{background:var(--ok);border-color:var(--ok);color:#fff}
html:is([data-sistema="A"],[data-sistema="B"]) .nav button.on{background:var(--soft);color:var(--on)}
html:is([data-sistema="A"],[data-sistema="B"]) .chip{border-color:var(--line-boton)}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos{background:var(--card);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button{display:flex;align-items:center;gap:12px;border:0;border-radius:0;background:var(--card);box-shadow:none;text-align:left;color:var(--ink);font:500 16px/1.3 var(--head)}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button::before{content:"";flex:none;box-sizing:border-box;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-boton);background:var(--card)}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button.on.on:not(.alm){background:var(--card);border:0;color:var(--on);font-weight:600}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button.on::before{border-color:var(--pri);background:radial-gradient(circle,var(--pri) 0 5px,var(--card) 6px)}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button.alm{color:var(--alm)}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button.alm::before{border-color:color-mix(in srgb,var(--alm) 45%,var(--card))}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button.alm.on.on{background:var(--card);border:0;color:var(--alm);font-weight:600}
html:is([data-p1="1"],[data-p1="2"]) .tipos.tipos button.alm.on::before{border-color:var(--alm);background:radial-gradient(circle,var(--alm) 0 5px,var(--card) 6px)}
html[data-p1="2"] .tipos.tipos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);padding:0}
html[data-p1="2"] .tipos.tipos button{min-width:0;overflow-wrap:anywhere}
html[data-p1="2"] .tipos.tipos button{min-height:60px;padding:10px 14px;font-size:15px}
html[data-sobrio="1"][data-sistema]{--r:14px;--sombra:0 1px 2px rgb(16 40 70 / .05),0 4px 14px rgb(16 40 70 / .06)}
html[data-sobrio="1"][data-sistema] :focus-visible{outline:2px solid color-mix(in srgb,var(--pri) 55%,transparent);outline-offset:1px}
html[data-sobrio="1"][data-sistema] .note :focus-visible{outline-color:color-mix(in srgb,var(--pri) 55%,transparent)}
html[data-sobrio="1"][data-sistema] :is(.inp,.libre):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 14%,transparent)}
html[data-sobrio="1"][data-sistema] .big{min-height:46px;border-radius:10px;font-weight:500}
html[data-sobrio="1"][data-sistema] .big:not(.sec2),html[data-sobrio="1"][data-sistema] .note .big{box-shadow:0 1px 2px rgb(16 40 70 / .14)}
html[data-sobrio="1"][data-sistema] :is(.ghost,.sync){border-radius:10px;box-shadow:0 1px 2px rgb(16 40 70 / .08);border:1px solid var(--line)}
html[data-sobrio="1"][data-sistema] .chip{border-radius:8px}
html[data-sobrio="1"][data-sistema] :is(.chip,.areas button,.sexo button,.fb-btns button).on:not(.alm){border-width:1px;font-weight:inherit}
html[data-sobrio="1"][data-sistema] .tipos.tipos button.on.on{font-weight:500}
html[data-sobrio="1"][data-sistema] .tipos.tipos button::before{border-width:1.5px}
html[data-sobrio="1"][data-sistema] .paso{font-weight:500}
html[data-sobrio="1"][data-sistema] .paso i{width:26px;height:26px;font-size:13px;background:var(--soft);color:var(--on)}
html[data-sobrio="1"][data-sistema] :is(h1,.top .who b){font-weight:500}
html[data-sobrio="1"][data-sistema] .logo{font-weight:600}
html[data-sobrio="1"][data-sistema] .previa{border:1px solid var(--line-boton)}
html[data-sobrio="1"][data-sistema] .previa mark{color:inherit}
html[data-sobrio="1"][data-sistema] .ac.ab .ac-h{font-weight:500}
html[data-sobrio="1"][data-sistema] .note{border-radius:12px}

html[data-sobrio="1"][data-sistema] .paso i{background:var(--card);border:1px solid color-mix(in srgb,var(--pri) 40%,transparent)}
html[data-pl="1"] .nueva{display:inline-flex;width:auto;min-height:46px;padding:0 18px;border:1px solid var(--line-boton);border-radius:10px;background:var(--card);color:var(--on);font:500 15px var(--head);box-shadow:0 1px 2px rgb(16 40 70 / .08)}

html[data-pl="1"] .card-pl{border:0;border-radius:var(--r);padding:20px 22px;box-shadow:var(--sombra)}
html[data-pl="1"] .card-pl h3{font:500 17px var(--head);margin:0 0 6px}
html[data-pl="1"] .card-pl .fb-l{margin:16px 0 6px;font:500 14px var(--head);color:var(--ink)}
html[data-pl="1"] .card-pl .inp{min-height:46px;font-size:16px;border-radius:10px}
html[data-pl="1"] .card-pl textarea{min-height:110px;margin-top:0;border:1px solid var(--line-boton);border-radius:10px;font-size:16px}
html[data-pl="1"] .card-pl .empty{margin:12px 0 0;font-size:13px;color:var(--mute)}
html[data-pl="1"] .card-pl .row2{justify-content:flex-end;margin-top:18px}
html[data-pl="1"] .card-pl .row2 .big{flex:0 0 auto;width:auto;min-width:130px;padding:0 22px}
html[data-pl="1"] .card-pl .row2 .big.sec2{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-boton)}
html[data-pl="1"] .pl-sub{font:500 16px var(--head);margin:30px 0 10px}
html[data-pl="1"] .pl-sub .pill,html[data-pl="1"] .pl .pill{background:var(--gris);color:var(--gris-ink);font-weight:500}
html[data-pl="1"] .pls{gap:10px}
html[data-pl="1"] .pl{border:0;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sombra)}
html[data-pl="1"] .pl b{font:500 16px/1.35 var(--head)}
html[data-pl="1"] .pl p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--mute)}
html[data-pl="1"] .lead{max-width:40em}
:root{--borde-escribiendo:#b9c6d2}
html[data-sobrio="1"][data-sistema] :is(input:not([type=checkbox]):not([type=radio]),textarea,select):is(:focus,:focus-visible){outline:none;box-shadow:none;border-color:var(--borde-escribiendo)}
html[data-sobrio="1"][data-sistema] :is(.other,.libre):focus{border-style:solid}
html[data-linea="1"][data-sistema] :is(.ghost,.sync){min-height:42px;padding:0 16px;border:1px solid var(--line-boton);border-radius:10px;background:var(--card);color:var(--ink);font:500 15px var(--head);box-shadow:0 1px 2px rgb(16 40 70 / .08)}

html[data-linea="1"] .top{padding-block:14px 10px}
html[data-linea="1"] .top .who b{font-weight:500}
html[data-linea="1"] .top .who span{margin-top:4px}
html[data-linea="1"] .lista-pac{margin-top:10px;gap:10px}
html[data-linea="1"] .pac{padding:16px 18px}
html[data-linea="1"] .pac b{font:500 16px/1.35 var(--head)}
html[data-linea="1"] .pac small{margin-top:4px}
html[data-linea="1"] .est{font-weight:500;font-size:12px;border-radius:6px;padding:2px 8px;margin-top:8px}
html[data-linea="1"][data-sistema] .lista-pac~.big{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-height:46px;margin-top:18px;padding:0 20px}
html[data-linea="1"] :is(.est,.pill){font-family:var(--head);font-weight:500}
html[data-linea="1"] .q{font:500 14px var(--head);margin:20px 0 6px}
html[data-linea="1"][data-sistema] .inp{min-height:46px;font-size:16px;border-radius:10px;border-color:var(--line-boton)}
html[data-linea="1"][data-sistema] :is(.sexo button,.areas button){min-height:46px;border-radius:10px;border:1px solid var(--line-boton);font:500 15px var(--head);box-shadow:none}
html[data-linea="1"][data-sistema] .big{min-height:46px}
html[data-linea="1"] .aviso{border-radius:12px}
html[data-tipo="1"]{--t1:500 22px/1.25 var(--head);--t2:500 17px/1.3 var(--head);--t3:500 16px/1.35 var(--head);--te:500 14px/1.35 var(--head);--tp:500 12px/1.3 var(--head)}
html[data-tipo="1"] .logo,html[data-tipo="1"] .logo b{font-weight:600}
html[data-tipo="1"] :is(.sup-beta,.beta,.pill,.est,.nav .n){font:var(--tp)}
html[data-tipo="1"] :is(.top .who b,h1){font:var(--t1)}
html[data-tipo="1"] :is(.paso,.card-pl h3,.note h2.titulo){font:var(--t2)}
html[data-tipo="1"] .paso i{font:var(--tp);font-size:13px}
html[data-tipo="1"][data-sistema] :is(.pac b,.pl b,.pl-sub,.ac-t,.ac-h,.aviso b,.tipos.tipos button,.areas button,.sexo button){font:var(--t3)}
html[data-tipo="1"][data-sistema] :is(.big,.ghost,.sync,.nueva,.tipos.tipos button.on.on,.areas button.on.on,.sexo button.on.on){font-family:var(--head);font-weight:500}
html[data-tipo="1"][data-sistema] :is(.big,.ghost,.sync,.nueva){font-size:16px}
html[data-tipo="1"][data-sistema] :is(.q,.fb-l,.filtro b,.line b,.note h2,.reg b){font:var(--te)}
html[data-tipo="1"] .filtro b{font-family:var(--head)}
html[data-tipo="1"] .lead{font-size:17px;font-weight:400}
html[data-tipo="1"] :is(.line p,.pl p,.aviso p,.previa p,.previa .vacio){font-size:15px}
html[data-tipo="1"] :is(.top .who span,.pac small,.hour .lbl,.filtro){font-size:14px}
html[data-tipo="1"] :is(.empty,.falta,.foot,.previa small){font-size:13px}
html[data-tipo="1"] :is(.side h3,.menu-movil h3){font:var(--te);color:var(--mute)}
html[data-tipo="1"] .camas button{font-size:15px}
html[data-tipo="1"] :is(.camas small,.yo small){font-size:13px}
html[data-tipo="1"] .yo b{font:var(--t3)}
html[data-tipo="1"] .note .enlace{font:var(--te)}
html[data-tipo="1"] .chip{font-size:15px}
html:not([data-hover="0"]){--big-hv:#1479e0}

html:not([data-hover="0"]) :is(.nav button,.camas button,.ghost,.sync,.nueva,.tipos button,.areas button,.sexo button,.ac-h,.chip,.big){transition:background-color .12s,color .12s,border-color .12s}
@media (prefers-reduced-motion:reduce){
 html:not([data-hover="0"]) :is(.nav button,.camas button,.ghost,.sync,.nueva,.tipos button,.areas button,.sexo button,.ac-h,.chip,.big){transition:none}
}
html[data-hover="6"]{--hv-bg:#eef6ff;--hv-tx:var(--ink);--hv-ln:#d3e7fd}

html[data-sistema] .sec.acc{padding:0;border:0;overflow:hidden}
:root{--cuad-azul:#e2edf9;--cuad-punto:#c6d3e1;--cuad-menta:#d9efe5;--cuad-fina:#eef3f9;--cuad-gruesa:#d4e2f1;--hoja-sombra:0 1px 2px rgb(16 40 70 / .06),0 8px 24px rgb(16 40 70 / .08)}
html[data-nota^="g"] .note{--pri-ink:var(--ink);position:relative;color:var(--ink);border:0;border-radius:8px;padding:20px 22px 22px;box-shadow:var(--hoja-sombra);background-color:var(--card)}
html[data-nota^="g"][data-tipo] .note h2{font:var(--t2);color:var(--ink);margin:0 0 12px;padding:0;background:none;box-shadow:none;display:block}
html[data-nota^="g"] .note .line{border-top:0;padding:7px 0;gap:14px;background:none}
html[data-nota^="g"][data-tipo] .note .line b{color:var(--on);min-width:44px}
html[data-nota^="g"] .note .line-acc{flex-direction:row}
html[data-nota^="g"] .note .line-acc button{min-height:32px;min-width:36px;font-size:15px}
html[data-nota="g1"] .note{background:linear-gradient(var(--cuad-azul) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--cuad-azul) 1px,transparent 1px) 0 0/16px 16px,var(--card)}
html[data-nota^="g"][data-sobrio] .note{border-radius:8px}

:root{--alm-hover:#a3173e}
html[data-sistema] .conf-bts .big.conf-si:not(.neutro){background:var(--alm);color:var(--alm-ink);box-shadow:0 1px 2px rgb(16 40 70 / .14)}

html[data-sistema][data-sobrio] .note :is(textarea,.inp){background:var(--card);border:1px solid var(--line-boton);border-radius:10px;color:var(--ink)}
html[data-sistema][data-sobrio] .big.sec2,html[data-sistema][data-sobrio] .note .big.sec2{background:var(--card);color:var(--ink);border:1px solid var(--line-boton);box-shadow:0 1px 2px rgb(16 40 70 / .08)}

html[data-sistema][data-sobrio] :is(.ev-ed,.card-pl) .big.sec2{color:var(--alm)}

@media (max-width:959px){.entrada-form .form-card{box-shadow:none}} /* en el celular el formulario de entrada va sin tarjeta: sin sombra suelta */
@media (pointer:coarse){html[data-nota^="g"] .note .line-acc button{min-height:44px;min-width:44px}} /* en pantallas táctiles, lápiz y ✕ de 44 px para el dedo */
/* Botón Actualizar (elegido por Paula el 21-oct-2026, opción A): sin caja, ícono y palabra en azul oscuro (contraste 4,5 sobre el fondo menta); hover celeste nube sin cambiar la letra */
html[data-linea][data-sistema] .sync{--hv-tx:var(--sel-tx);border-color:transparent;background:none;box-shadow:none;color:var(--sel-tx);font:500 15px var(--head);padding:0 12px}
html[data-linea][data-sistema] .cabecera .sync{margin-right:-12px}
html[data-linea][data-sistema] .side .sync{margin:0 0 8px}
/* Franja de arriba en el celular (pedido de Paula, 21-oct-2026): blanca de lado a lado para separarla del contenido; la sombra extiende el blanco y la línea de abajo hasta los bordes de la pantalla */
.cabecera{background:var(--card);margin:-12px 0 12px;padding:12px 0 8px;border-bottom:0;box-shadow:0 0 0 100vmax var(--card),0 1px 0 100vmax var(--line);clip-path:inset(0 -100vmax -1px)}
/* Términos y Privacidad: textos largos sobre fondo blanco, sin degradado */
body:has(> .doc){background:var(--card)}
/* Paso 1 (tipo de nota): la tarjeta no recorta, para que el recuadro pueda elevarse con su sombra; las esquinas las llevan los recuadros */
html[data-p1="2"] .tipos.tipos{overflow:visible}
html[data-p1="2"] .tipos.tipos button{position:relative}
html[data-p1="2"] .tipos.tipos button:first-child{border-top-left-radius:var(--r)}
html[data-p1="2"] .tipos.tipos button:nth-child(2){border-top-right-radius:var(--r)}
html[data-p1="2"] .tipos.tipos button:nth-last-child(2):nth-child(odd){border-bottom-left-radius:var(--r)}
html[data-p1="2"] .tipos.tipos button:last-child{border-bottom-right-radius:var(--r)}
/* Pantalla del código (pedido de Paula, 21-oct-2026): el texto baja y queda junto a las cajitas; «Cambiar correo» y «Reenviar código» se reparten el ancho, alineados con «Entrar» */
.entrada-form .form-card>.lead{margin:18px 0 14px}
.entrada-form .row .ghost{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
/* Celular (pedido de Paula, 21-oct-2026): el submenú del perfil (Mi perfil, Términos, Cerrar sesión) se despliega DEBAJO del perfil, no encima */
.menu-movil .yo-menu{order:1;margin-top:0;padding:4px 0 0;border-top:0}
.menu-movil .yo-menu .navsalir{padding-left:20px}
/* Diagnóstico elegido (pedido de Paula, 21-oct-2026): mismo estilo de «elegido» que país, servicio y sexo (fondo azul claro, borde fino, letra azul oscura), Manrope 600 y esquinas de 10 px; la ✕ va en rojo */
html[data-sistema] .tagx{background:var(--sel-bg);border:1px solid var(--sel-ln);border-radius:10px;color:var(--sel-tx);font:500 15px/1.3 var(--head)}
/* Pestañas del paso 2 en tres tipos, «T3» (elegida por Paula el 21-oct-2026, sobre los «bloques de color» del 13-oct):
   lo general en gris, lo de su enfermedad en aguamarina y las alarmas en rojo; la elegida lleva borde fuerte de su color
   y la frase que se marca toma el color de su tipo. El rojo es solo para lo que activa «Vigilar de cerca» */
:root{--t-gen:#5d6a76;--t-gen-soft:#f1f4f7;--t-pat:#167c72;--t-pat-soft:#e3f4f2}
html[data-sistema] .tab{border:2px solid transparent;border-radius:10px}
html[data-sistema] .tab b{font:500 15px/1.25 var(--head)}
html[data-sistema] .tab small{font-size:13px;color:inherit;opacity:.85}
html[data-sistema] .tab.g{background:var(--t-gen-soft);color:var(--t-gen)}
html[data-sistema] .tab.p{background:var(--t-pat-soft);color:var(--t-pat)}
html[data-sistema] .tab.a{background:var(--alm-soft);color:var(--alm)}
html[data-sistema] .tab.g.on{border-color:var(--t-gen)}
html[data-sistema] .tab.p.on{border-color:var(--t-pat)}
html[data-sistema] .tab.a.on{border-color:var(--alm)}
html[data-sistema][data-sobrio][data-boton] .chip.t-g.on:not(.alm){background:var(--t-gen-soft);border:1px solid var(--t-gen);color:var(--ink)}
html[data-sistema][data-sobrio][data-boton] .chip.t-p.on:not(.alm){background:var(--t-pat-soft);border:1px solid var(--t-pat);color:var(--t-pat)}
/* Frases de alarma (activan «Vigilar de cerca»): blancas con letra roja; elegidas, rosadas con borde rojo */
html[data-sistema][data-sobrio] .chip.alm:not(.on){background:var(--card);border:1px solid var(--line-boton);color:var(--alm)}
html[data-sistema][data-sobrio] .chip.alm.on{background:var(--alm-soft);border:1px solid var(--alm);color:var(--alm)}
/* Mejor / Igual / Peor (entrega de turno y otros, elegido por Paula el 21-oct-2026, opción 3 «con significado»):
   tres botones blancos separados; el elegido toma el color de lo que significa: Mejor verde, Igual azul, Peor rojo.
   El orden lo fija TREND en app.js (mejor, igual, peor) */
:root{--ok-tx:#16704f}
html[data-sistema] .seg{background:none;border:0;border-radius:0;padding:0;gap:6px}
html[data-sistema] .seg button{min-width:0;min-height:40px;padding:0 14px;border:1px solid var(--line-boton);border-radius:10px;background:var(--card);color:var(--ink);font:500 14px/1.2 var(--head);box-shadow:none}
html[data-sistema] .seg button:nth-child(1).on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-tx)}
html[data-sistema] .seg button:nth-child(2).on{background:var(--sel-bg);border-color:var(--sel-ln);color:var(--sel-tx)}
html[data-sistema] .seg button:nth-child(3).on{background:var(--alm-soft);border-color:var(--alm);color:var(--alm)}
/* Tarjeta de cama en Mi turno, presentación A (elegida por Paula el 21-oct-2026): número en un cuadro azul claro a la izquierda */
html[data-sistema] .pac{gap:14px;padding:14px 16px}
html[data-sistema] .pac-num{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:58px;height:58px;border-radius:10px;background:var(--sel-bg);color:var(--sel-tx)}
html[data-sistema][data-tipo] .pac .pac-num small{font:500 11px/1 var(--head);color:var(--sel-tx);margin:0}
html[data-sistema][data-tipo] .pac .pac-num b{font:500 22px/1.1 var(--head);color:var(--sel-tx);margin:0}
/* Submenú del perfil (Mi perfil, Términos y privacidad): mismo color oscuro que Mi turno y Mis plantillas; en gris parecían de otro tamaño (Paula, 21-oct-2026) */
html[data-sistema] .navsalir{color:var(--ink)}
/* Ficha de Agregar paciente (elegida por Paula el 21-oct-2026, «D1 + S3»): una sola tarjeta blanca dividida por líneas,
   una fila por dato con su ícono azul y el nombre a la izquierda; los campos sin caja; Sexo como texto que se marca en azul claro.
   Ajuste «F3»: todo lo de la derecha empieza en la misma línea y las filas miden igual */
.ficha{display:grid;gap:1px;background:var(--line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgb(16 40 70 / .08),0 6px 18px rgb(16 40 70 / .06);margin-top:12px}
.ficha-fila{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:center;column-gap:16px;background:var(--card);padding:6px 16px;min-height:52px;min-width:0}
.ficha-fila>:nth-child(n+3){grid-column:2}
html[data-sistema][data-linea] .ficha .q{display:flex;align-items:center;gap:10px;margin:0}
.ficha .q::before{content:"";flex:none;width:18px;height:18px;background:var(--sel-tx);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ficha .opc{display:inline;margin-left:4px;font:400 13px var(--f);color:var(--mute)}
html[data-sistema] .ficha .inp{border:0;box-shadow:none;background:transparent;padding:0;min-height:40px;border-radius:0}
.ficha .edad{gap:6px;align-items:center}
html[data-sistema] .ficha .edad input.inp{flex:none;width:56px;padding:0;text-align:left}
.ficha .results:empty,.ficha .chosen:empty{display:none}
.ficha .chosen{margin-top:8px}
html[data-sistema][data-linea][data-tipo] .ficha .sexo{display:flex;gap:6px;margin:0 0 0 -12px} /* -12px: el texto de Femenino empieza en la misma línea que los demás campos */
html[data-sistema][data-linea][data-tipo] .ficha .sexo button{flex:none;width:auto;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--ink);font:400 16px var(--f)} /* misma letra que lo que se escribe en los otros campos */
html[data-sistema][data-linea][data-tipo] .ficha .sexo button.on.on{background:var(--sel-bg);color:var(--sel-tx);border:0;font:400 16px var(--f)}
.f-cama{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v13M21 19v-6a3 3 0 0 0-3-3h-8v6'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='6.5' cy='11.5' r='2'/%3E%3C/svg%3E")}
.f-sexo{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.f-edad{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.f-dx{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E")}
@media (max-width:560px){.ficha-fila{grid-template-columns:1fr}.ficha-fila>:nth-child(n+3){grid-column:1}html[data-sistema][data-linea] .ficha .q{margin-bottom:2px}}
/* Ficha: misma letra que la nota (pedido de Paula, 21-oct-2026): el nombre de cada fila como las filas de la nota («Tos»),
   Atkinson 17 px; lo que se escribe y los ejemplos en Atkinson; «(opcional)» como los subtítulos de la nota */
html[data-sistema][data-linea][data-tipo] .ficha .q,html[data-sistema][data-linea][data-tipo] .ficha .q label{font:400 17px/1.3 var(--f);color:var(--ink)}
html[data-sistema][data-linea][data-tipo] .ficha .opc{font:400 13px var(--f);color:var(--mute)}
html[data-sistema] .ficha .inp{font:400 16px var(--f)}
html[data-sistema] .ficha .inp::placeholder{color:var(--ejemplo);opacity:1}
html[data-sistema][data-linea][data-tipo] .ficha .sexo button,html[data-sistema][data-linea][data-tipo] .ficha .sexo button.on.on{font:400 16px var(--f)}
/* Unidad de la edad (días, meses, años), pedido de Paula 21-oct-2026: igual que Femenino/Masculino (texto; el elegido con fondo azul claro).
   Opción «U4»: una sola rayita fina entre el número y la unidad; entre las unidades, solo espacio */
.ficha .edad{gap:10px}
.ficha .edad-u{position:relative;display:flex;align-items:center;gap:6px;padding-left:12px}
.ficha .edad-u::before{content:"";position:absolute;left:0;top:25%;height:50%;width:1px;background:var(--line-boton)}
html[data-sistema] .ficha .edad-u button{flex:none;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--ink);font:400 16px var(--f)}
html[data-sistema] .ficha .edad-u button.on{background:var(--sel-bg);color:var(--sel-tx)}
/* Sugerencias del diagnóstico (elegida por Paula el 21-oct-2026, «R1»): lista que flota encima de lo de abajo, como un buscador;
   la ficha no se estira. Una línea por sugerencia con su grupo en gris a la derecha */
.ficha{overflow:visible}
.ficha-fila:first-child{border-radius:14px 14px 0 0}
.ficha-fila:last-child{border-radius:0 0 14px 14px}
.f-dx{position:relative}
.ficha .f-dx .results:not(:empty){position:absolute;z-index:20;left:16px;right:16px;top:calc(100% - 6px);margin:0;display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgb(16 40 70 / .16)}
html[data-sistema] .ficha .results button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--card);padding:11px 14px;font:400 16px var(--f);color:var(--ink);text-align:left}
html[data-sistema] .ficha .results button:first-child{border-top:0}
.ficha .results button small{display:inline;flex:none;font-size:13px;color:var(--mute)}
.ficha .results .empty{margin:0;padding:12px 14px;color:var(--mute);font-size:15px}
@media (hover:hover){html[data-sistema] .ficha .results button:hover{background:var(--toque)}}
/* Datos obligatorios de la ficha (Cama, Sexo, Edad), elegido por Paula el 21-oct-2026 «V1»: al final de la fila, un circulito gris vacío
   que se pone verde con ✓ cuando el dato está lleno (verde = hecho, como en el paso 2) */
.ficha-fila.req{position:relative;padding-right:48px}
.ficha-fila.req::after{content:"";position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--line-boton);background:var(--card)}
.ficha-fila.req.lleno::after{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
/* «‹ Mi turno» encima del título en el computador (B3); en el celular lo hace la flecha de la franja de arriba */
.volver-arriba{display:inline-flex;align-items:center;min-height:36px;margin:0 0 2px -2px;padding:0 4px;border:0;background:none;color:var(--sel-tx);font:500 15px var(--head);cursor:pointer}
@media (max-width:959px){.volver-arriba{display:none}}
/* Login «L1» (elegido por Paula el 21-oct-2026): una tarjeta blanca centrada sobre el degradado, en el celular y en el computador */
.app:has(.entrada){max-width:none;padding:0}
.entrada{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:100vh;min-height:100dvh;padding:24px 16px}
.entrada .entrada-form{display:block;width:100%;max-width:440px;padding:0}
.entrada .entrada-form>*{max-width:none}
html[data-sistema] .entrada .entrada-form .form-card{background:var(--card);border:0;border-radius:18px;padding:28px 28px 24px;margin:0;box-shadow:0 1px 2px rgb(16 40 70 / .08),0 12px 32px rgb(16 40 70 / .10)}
.entrada-cab{margin-bottom:18px}
.entrada-cab .portada{margin:0}
html[data-sistema][data-tipo] .entrada-cab h1{font:500 26px/1.2 var(--head);margin:18px 0 0;color:var(--ink)}
html[data-sistema][data-tipo] .entrada-cab h1 .acento{color:var(--sel-tx)}
.entrada .firma{margin-top:20px}
@media (max-width:480px){html[data-sistema] .entrada .entrada-form .form-card{padding:22px 20px 20px}.entrada-form .row{flex-direction:column}.entrada-form .row .ghost{flex:none;width:100%}} /* en el celular, Cambiar correo y Reenviar código uno debajo del otro para que no se partan */
/* Código correcto «A3» (elegido por Paula el 21-oct-2026): el formulario se desvanece y en el centro de la tarjeta
   crece un círculo verde con ✓ (verde de «hecho» de la app, «G2»); sin movimiento si la persona pidió reducir el movimiento */
.entrada .form-card{position:relative}
.entrada .form-card.exito>:not(.exito-cod){transition:opacity .25s;opacity:0}
.exito-cod{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:color-mix(in srgb,var(--ok) 72%,#000);font:500 18px var(--head);text-align:center} /* texto un tono más oscuro que el círculo para que se lea */
.exito-cod[hidden]{display:none}
.exito-cod i{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--ok);color:var(--card);animation:exito-crece .45s .2s cubic-bezier(.2,1.4,.4,1) both}
.exito-cod span{animation:exito-aparece .3s .5s ease-out both}
.exito-cod small{font:400 14px var(--f);color:var(--mute);animation:exito-aparece .3s .7s ease-out both}
@keyframes exito-crece{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes exito-aparece{from{opacity:0}to{opacity:1}}
/* Barrita que se llena mientras entra (de 0,6 s a 1,7 s; la app entra a los 1,8 s) */
.exito-barra{width:140px;height:4px;border-radius:4px;background:var(--line);overflow:hidden;animation:exito-aparece .3s .5s ease-out both}
.exito-barra span{display:block;width:0;height:100%;border-radius:4px;background:var(--ok);animation:exito-llena 1.1s .6s linear forwards}
@keyframes exito-llena{to{width:100%}}
@media (prefers-reduced-motion:reduce){.exito-cod i,.exito-cod span,.exito-cod small,.exito-barra{animation:none}.exito-barra span{animation:none;width:100%}.entrada .form-card.exito>:not(.exito-cod){transition:none}}
/* Ventana «Tu nota está lista» (elegida por Paula el 21-oct-2026, «N1»): ✓ verde de «hecho» sin puntitos, ✕ en botón blanco,
   la nota sobre la misma hoja cuadriculada de la «Nota de enfermería», y la opinión con botones como Mejor/Igual/Peor
   (Me sirvió en verde, No me sirvió en rojo al elegirlos) */
.cele{color:var(--ok)}
.cele i{display:none}
html[data-sistema] .dlg .dlg-x{width:40px;height:40px;border:1px solid var(--line-boton);background:var(--card);font-size:16px}
html[data-sistema] .dlg-cab h2{font:500 22px/1.25 var(--head)}
html[data-sistema] .dlg .copiar-ico{border:1px solid var(--line-boton);border-radius:10px;background:var(--card)}
html[data-sistema] .dlg .nota-caja textarea{border:0;border-radius:8px;box-shadow:var(--hoja-sombra);background:linear-gradient(var(--cuad-azul) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--cuad-azul) 1px,transparent 1px) 0 0/16px 16px,var(--card);padding:18px 60px 18px 20px;font:400 17px/1.6 var(--f);color:var(--ink)}
html[data-sistema] .fb-q{font:500 16px/1.3 var(--head);color:var(--ink)}
html[data-sistema][data-sobrio] .fb-btns button{min-height:40px;padding:0 14px;border:1px solid var(--line-boton);border-radius:10px;background:var(--card);color:var(--ink);font:500 14px var(--head);box-shadow:none}
html[data-sistema][data-sobrio] .fb-btns button svg{width:18px;height:18px}
html[data-sistema][data-sobrio][data-boton] .fb-btns button.on:not(.abajo):not(.alm){background:var(--ok-soft);border:1px solid var(--ok);color:var(--ok-tx)}
html[data-sistema][data-sobrio][data-boton] .fb-btns button.abajo.on:not(.alm){background:var(--alm-soft);border:1px solid var(--alm);color:var(--alm)}
html[data-sistema] .dlg .fbc{border:1px solid var(--line-boton);border-radius:12px;background:var(--card);box-shadow:none;font:400 16px/1.5 var(--f);color:var(--ink)} /* comentario de la opinión: caja blanca como los demás campos */
/* Tarjeta de cama con acciones (elegida por Paula el 21-oct-2026, «K1»): arriba abre la cama; abajo, Copiar nota · Editar · Eliminar */
html[data-sistema] .pac{display:block;padding:0;gap:0}
.pac-abrir{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:var(--r) var(--r) 0 0}
.pac-acc{display:flex;gap:4px;border-top:1px solid var(--line);padding:6px 10px}
html[data-sistema] .pac-acc button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--sel-tx);font:500 14px var(--head);cursor:pointer}
html[data-sistema] .pac-acc button.rojo{margin-left:auto}
html[data-sistema] .pac-acc button:disabled{color:var(--mute);opacity:.6;cursor:default}
.pac-acc svg{width:16px;height:16px;flex:none}
@media (hover:hover){html[data-sistema] .pac-acc button:not(:disabled):hover{background:var(--toque)}html[data-sistema] .pac-acc button.rojo:hover{background:var(--alm-soft)}}
.dlg-cama .estado-nota{margin:12px 0 0}
.dlg-cama .estado-nota .est{margin:0}
.dlg-cama .row:has(#pulir-cama){margin-top:14px}.dlg-cama #pulir-cama{margin:0}
.hoja-cama{margin:12px 0 0;padding:18px 20px;border-radius:8px;box-shadow:var(--hoja-sombra);background:linear-gradient(var(--cuad-azul) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--cuad-azul) 1px,transparent 1px) 0 0/16px 16px,var(--card);white-space:pre-wrap;font:400 17px/1.6 var(--f);color:var(--ink);max-height:55vh;overflow:auto}
/* Buscador de camas en Mi turno */
.buscar-cama{position:relative;margin-top:12px}
.buscar-cama svg{position:absolute;left:14px;top:50%;margin-top:-9px;color:var(--mute);pointer-events:none}
html[data-sistema] .buscar-cama .inp{min-height:44px;padding:0 14px 0 42px;border:1px solid var(--line-boton);border-radius:12px;background:var(--card);font:400 16px var(--f)}
.lista-pac .pac[hidden]{display:none}
.sin-camas{margin-top:12px}
/* Acceso directo en el celular (pedido de Paula, 21-oct-2026; presentación «G1»: pasos en fila con celulares dibujados).
   Primero «Así va a quedar» (el resultado) y luego los pasos. Los celulares son dibujos hechos con CSS que copian las
   pantallas reales de iOS 26 (Safari) y Chrome para Android; el contorno rojo marca lo que hay que tocar. */
:root{--acc-marco:#1b2733;--acc-pantalla:#e3f6ee;--acc-barra:#f6f7f8;--acc-filete:#e1e8ef;--acc-url:#eceff2;--acc-gris:#5d6a76;--acc-gris-claro:#c9d1d8;--acc-azul:#1a73c9;--acc-ios-azul:#0a7aff;--acc-verde:#34c759;--acc-marca:#eef6ff;--acc-blanco:#ffffff;--acc-sombra:rgb(16 40 70 / .2);--acc-velo:rgb(20 30 40 / .32);--acc-fondo-ios:#2f6e9e;--acc-fondo-and:#2c5f57;
 --acc-a0:#5fbf7a;--acc-a1:#f0b443;--acc-a2:#e3685d;--acc-a3:#4f9fdf;--acc-a4:#9a8ad8}
.acc-os{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line-boton);border-radius:12px;background:var(--card);margin:0 0 6px}
.acc-os button{min-height:44px;padding:0 18px;border:0;border-radius:9px;background:none;font:500 15px var(--head);color:var(--mute);cursor:pointer}
.acc-os button.on{background:var(--sel-bg);color:var(--sel-tx)}
.acc-sub{font:500 18px/1.3 var(--head);margin:26px 0 14px}
.acc-sub span{display:block;font:400 14px var(--f);color:var(--mute);margin-top:2px}
.acc-result{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.acc-result figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;width:170px}
.acc-result figcaption{font:400 15px/1.4 var(--f);text-align:center}
.acc-flecha{color:var(--mute);align-self:flex-start;margin-top:150px}
.acc-flecha .acc-ico{width:28px;height:28px}.acc-flecha svg{width:24px;height:24px}
.acc-ya{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:var(--sombra);margin:0 0 18px}
.acc-ya .big{margin:0;width:auto;padding:0 20px;min-height:44px}
.acc-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:14px;counter-reset:none}
.acc-pasos li{display:flex;align-items:flex-start;gap:16px;background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--sombra)}
.acc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.acc-paso-n{align-self:flex-start;padding:4px 10px;border-radius:8px;background:var(--sel-bg);font:500 14px var(--head);color:var(--sel-tx)}
.acc-pasos p{margin:0;font:400 16px/1.45 var(--f)}
.acc-busca{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 13px var(--f);color:var(--mute)}
.acc-busca>span:first-child{width:100%}
.acc-m{display:inline-flex;align-items:center;text-align:left;line-height:1.25;gap:6px;min-height:36px;padding:0 12px;border-radius:10px;background:var(--acc-barra);border:2px solid var(--alm);color:var(--ink);font:500 14px var(--head)}
.acc-m .acc-ico{width:20px;height:20px}.acc-m .acc-ico svg{width:17px;height:17px}
.acc-m.cir{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;background:var(--acc-blanco)}
.acc-m.azul{background:var(--acc-ios-azul);color:var(--acc-blanco);border-radius:18px}
.acc-m.texto-azul{color:var(--acc-azul);background:var(--acc-blanco)}
.acc-m.tog{padding:0 6px;background:var(--acc-blanco)}
.acc-m.tog i{width:34px;height:20px;border-radius:10px;background:var(--acc-verde);position:relative}
.acc-m.tog i::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--acc-blanco)}
.acc-pasos p b,.acc-result b{font-weight:600}
.acc-nota{font:400 14px/1.45 var(--f);color:var(--mute);margin:22px 0 0;max-width:36em}
.acc-nota b{color:var(--ink)}
/* Celular */
.acc-cel{position:relative;isolation:isolate;width:156px;height:320px;border-radius:26px;background:var(--acc-marco);padding:6px;flex:none;box-shadow:0 6px 18px var(--acc-sombra)}
.acc-pan{position:relative;width:100%;height:100%;border-radius:21px;overflow:hidden;background:var(--acc-pantalla);font:400 7px/1.2 var(--f);color:var(--ink);text-align:left}
.acc-isla{position:absolute;top:5px;left:50%;width:42px;height:12px;margin-left:-21px;border-radius:8px;background:var(--acc-marco);z-index:6}
.acc-est{position:absolute;top:0;left:0;right:0;height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;font:500 7px var(--head);z-index:5}
.acc-cel.and .acc-est{height:18px;padding:0 10px}
.acc-est .der{display:flex;gap:3px;align-items:center}
.acc-est .se{width:9px;height:6px;background:currentColor;clip-path:polygon(0 100%,100% 0,100% 100%)}
.acc-est .ba{width:11px;height:6px;border:1px solid currentColor;border-radius:2px;box-shadow:inset 7px 0 0 currentColor}
.acc-ico{display:grid;place-items:center;width:14px;height:14px;flex:none}
.acc-ico svg{width:11px;height:11px}
.acc-toque{outline:2.5px solid var(--alm);outline-offset:1.5px;border-radius:8px;position:relative;z-index:8}
.acc-bar{display:block;height:5px;width:46px;border-radius:3px;background:var(--acc-gris-claro)}
.acc-bar.corta{width:30px}
/* Página de NotiApp dentro del navegador */
.acc-web{position:absolute;inset:24px 0 48px;padding:8px 10px;overflow:hidden}
.acc-cel.and .acc-web{inset:46px 0 10px}
.acc-web.full{inset:22px 0 0}
.acc-logo{font:600 10px var(--head);color:var(--ink);margin-bottom:8px}
.acc-logo span{color:var(--acc-azul)}
.acc-web b{display:block}
.acc-web .t{height:7px;width:70%;border-radius:3px;background:var(--acc-gris-claro);margin-bottom:8px}
.acc-web .tj{background:var(--acc-blanco);border-radius:8px;padding:8px;margin-bottom:6px}
.acc-web .tj b{height:5px;border-radius:3px;background:var(--acc-filete);margin:3px 0}
.acc-web .tj b.corta{width:55%}
.acc-web .az{height:16px;border-radius:6px;background:var(--acc-azul);margin-top:8px}
.acc-velo{position:absolute;inset:0;background:var(--acc-velo);z-index:3}
.gesto{position:absolute;left:50%;bottom:4px;width:44px;height:3px;margin-left:-22px;border-radius:2px;background:var(--acc-marco);opacity:.55;z-index:5}
/* iPhone · Safari de iOS 26: barra flotante abajo */
.acc-ios-bar{position:absolute;left:6px;right:6px;bottom:12px;height:28px;display:flex;align-items:center;gap:5px;z-index:4}
.acc-ios-bar .cir{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acc-blanco);box-shadow:0 1px 6px var(--acc-sombra);color:var(--ink);flex:none}
.acc-ios-bar .dir{flex:1;min-width:0;height:26px;border-radius:13px;background:var(--acc-blanco);box-shadow:0 1px 6px var(--acc-sombra);font:400 5.8px/26px var(--f);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.acc-ios-bar .cir.acc-toque{border-radius:50%}
.acc-pop{position:absolute;right:6px;bottom:46px;width:106px;background:var(--acc-blanco);border-radius:12px;box-shadow:0 4px 16px var(--acc-sombra);padding:4px;z-index:4}
.acc-pop div{display:flex;align-items:center;gap:5px;min-height:18px;padding:0 5px;font:400 7px var(--f);white-space:nowrap}
.acc-pop div.acc-toque{font-weight:600;border-radius:6px}
.acc-pop hr{border:0;border-top:1px solid var(--acc-filete);margin:3px 4px}
.acc-hoja{position:absolute;left:4px;right:4px;bottom:4px;background:var(--acc-barra);border-radius:16px;padding:8px 7px;z-index:4;box-shadow:0 -2px 12px var(--acc-sombra)}
.acc-hoja .cab{display:flex;gap:6px;align-items:center;padding-bottom:7px;border-bottom:1px solid var(--acc-filete)}
.acc-hoja .ic,.acc-agregar .ic,.acc-dlg .ic{width:22px;height:22px;flex:none;border-radius:6px;background:url(marca/icono-192.png) center/cover}
.acc-hoja small,.acc-agregar small,.acc-dlg small{display:block;color:var(--acc-gris);font-size:6px;margin-top:1px}
.acc-hoja .cab b{font:600 7.5px var(--head)}
.acc-hoja .apps{display:flex;justify-content:space-between;padding:7px 2px;border-bottom:1px solid var(--acc-filete)}
.acc-hoja .apps span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:5.6px}
.acc-hoja .apps i{width:22px;height:22px;border-radius:50%}
.acc-hoja .acc{display:flex;justify-content:space-between;padding-top:7px}
.acc-hoja .acc span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:5.6px;width:30px;white-space:nowrap}
.acc-hoja .acc span .acc-ico,.acc-hoja .acc span i{width:22px;height:22px;border-radius:50%;background:var(--acc-blanco)}
.acc-hoja .acc .acc-bar{width:22px;height:4px}
.acc-hoja .acc span.acc-toque{border-radius:8px;font-weight:600}
.acc-hoja .lista{margin-top:7px;background:var(--acc-blanco);border-radius:10px;padding:2px 0}
.acc-hoja .lista div{display:flex;align-items:center;gap:5px;min-height:19px;padding:0 7px;border-top:1px solid var(--acc-filete);font-size:7px}
.acc-hoja .lista div:first-child{border-top:0}
.acc-hoja .lista div.acc-toque{font-weight:600;background:var(--acc-marca);border-radius:6px;border-top-color:transparent}
.acc-agregar{position:absolute;inset:22px 0 0;background:var(--acc-barra);border-radius:14px 14px 0 0;padding:8px 7px;z-index:4}
.acc-agregar .cab{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:10px}
.acc-agregar .cab b{font:600 6.8px var(--head);white-space:nowrap}
.acc-agregar .cir{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc-blanco)}
.acc-agregar .ok{background:var(--acc-ios-azul);color:var(--acc-blanco);font:600 7px var(--head);padding:6px 7px;border-radius:12px}
.acc-agregar .ok.acc-toque{border-radius:12px}
.acc-agregar .campo{display:flex;align-items:center;gap:6px;background:var(--acc-blanco);border-radius:9px;padding:7px;margin-bottom:8px;font-size:7px}
.acc-agregar .campo b{font:600 8px var(--head)}
.acc-agregar .sw{justify-content:space-between;font-size:7px}
.acc-agregar .tog{width:22px;height:13px;border-radius:7px;background:var(--acc-verde);position:relative}
.acc-agregar .tog::after{content:"";position:absolute;right:1.5px;top:1.5px;width:10px;height:10px;border-radius:50%;background:var(--acc-blanco)}
.acc-agregar .teclado{position:absolute;left:0;right:0;bottom:0;height:96px;background:var(--acc-gris-claro);padding:10px 6px;display:flex;flex-direction:column;gap:6px}
.acc-agregar .teclado p{display:flex;justify-content:center;gap:2px;margin:0}
.acc-agregar .teclado i{width:11px;height:15px;border-radius:3px;background:var(--acc-blanco)}
.acc-agregar .teclado i.es{width:60px}
/* Android · Chrome: barra arriba, menú ⋮ y ventana de instalar */
.acc-and-bar{position:absolute;left:0;right:0;top:18px;height:26px;background:var(--acc-barra);border-bottom:1px solid var(--acc-filete);display:flex;align-items:center;gap:5px;padding:0 5px;color:var(--acc-gris);z-index:2}
.acc-and-bar .dir{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:18px;border-radius:9px;background:var(--acc-url);font:400 6.4px var(--f);padding:0 4px;white-space:nowrap;overflow:hidden;color:var(--ink)}
.acc-and-bar .dir .acc-ico{width:9px;height:9px}.acc-and-bar .dir svg{width:8px;height:8px}
.acc-and-bar .acc-tabs{display:grid;place-items:center;width:12px;height:12px;border:1.5px solid currentColor;border-radius:3px;font:600 6px var(--head)}
.acc-and-bar .acc-toque{border-radius:50%}
.acc-menu{position:absolute;right:3px;top:20px;width:124px;background:var(--acc-blanco);border-radius:8px;box-shadow:0 4px 16px var(--acc-sombra);z-index:4;padding:3px 0}
.acc-menu .acc-iconos{display:flex;justify-content:space-between;padding:3px 6px 5px;border-bottom:1px solid var(--acc-filete);color:var(--acc-gris)}
.acc-menu div:not(.acc-iconos){padding:4.5px 8px;font:400 6.6px var(--f);white-space:nowrap}
.acc-menu div.acc-toque{white-space:normal;line-height:1.3;font-weight:600;background:var(--acc-marca);border-radius:4px}
.acc-dlg{position:absolute;left:12px;right:12px;top:96px;background:var(--acc-blanco);border-radius:14px;box-shadow:0 6px 20px var(--acc-sombra);padding:12px 10px 10px;z-index:4;font:400 7px var(--f)}
.acc-dlg .tit{font:500 10px var(--head);margin-bottom:10px}
.acc-dlg .acc-fila{display:flex;gap:7px;align-items:center;margin-bottom:12px}
.acc-dlg .acc-fila b{font:600 8px var(--head)}
.acc-dlg .acc-bts{display:flex;justify-content:flex-end;align-items:center;gap:12px;color:var(--acc-azul);font:600 7.5px var(--head)}
.acc-dlg .acc-bts .acc-toque{padding:3px 6px}
/* Pantalla de inicio y NotiApp abierta */
.acc-inicio{position:absolute;inset:0;background:var(--acc-fondo-ios);color:var(--acc-blanco)}
.acc-inicio.and{background:var(--acc-fondo-and)}
.acc-inicio .rej{position:absolute;top:34px;left:10px;right:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:11px 4px}
.acc-inicio .rej span{display:flex;flex-direction:column;align-items:center;gap:3px;font:400 5.6px var(--f);white-space:nowrap}
.acc-inicio .rej i{width:25px;height:25px;border-radius:7px}
.acc-inicio.and .rej i{border-radius:50%}
.acc-inicio .rej span.noti{font-weight:600;font-size:6.4px}
.acc-inicio .rej span.noti i{background:url(marca/icono-192.png) center/cover;box-shadow:0 0 0 1.5px var(--acc-blanco)}
.acc-inicio.and .rej span.noti i{border-radius:50%}
.acc-inicio .rej span.noti i.acc-toque{outline-offset:2.5px}
.acc-inicio .dock{position:absolute;left:8px;right:8px;bottom:12px;height:36px;border-radius:14px;background:color-mix(in srgb,var(--acc-blanco) 25%,transparent);display:flex;justify-content:space-around;align-items:center}
.acc-inicio.and .dock{background:none;bottom:14px}
.acc-inicio .dock i{width:25px;height:25px;border-radius:7px}
.acc-inicio.and .dock i{border-radius:50%}
.acc-inicio .gesto{background:var(--acc-blanco)}
.acc-inicio .c0,.acc-hoja .c0{background:var(--acc-a0)}.acc-inicio .c1,.acc-hoja .c1{background:var(--acc-a1)}.acc-inicio .c2{background:var(--acc-a2)}.acc-inicio .c3,.acc-hoja .c3{background:var(--acc-a3)}.acc-inicio .c4,.acc-hoja .c4{background:var(--acc-a4)}
.acc-abierta{position:absolute;inset:0;background:var(--acc-pantalla)}
@media (max-width:480px){
 .acc-pasos{grid-template-columns:1fr}.acc-pasos li{gap:12px;padding:14px 12px}.acc-pasos p{font-size:15px}.acc-m{font-size:13px;padding:0 8px;gap:4px}
 .acc-result{gap:10px;flex-wrap:nowrap;justify-content:space-between}.acc-result figure{width:auto;flex:1}.acc-result figcaption{font-size:14px}.acc-flecha{display:none}}

/* Tu opinión (pedido de Paula, 21-oct-2026): estrellas y/o texto en la misma pantalla. */
:root{--op-estrella:#e9a521}
.op-caja{display:grid;gap:22px;background:var(--card);border-radius:16px;padding:20px;box-shadow:var(--sombra);max-width:560px}
.op-f{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.op-f legend,.op-leyenda{padding:0;font:500 16px var(--head);color:var(--ink)}
.op-estrellas{display:flex;gap:6px;margin-left:-6px}
.op-estrellas button{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:12px;background:none;color:var(--mute);cursor:pointer}
.op-estrellas button svg{width:36px;height:36px}
.op-estrellas button.on{color:var(--op-estrella)}
.op-estrellas button.on svg{fill:currentColor}
.op-nombre{margin:0;font:400 14px var(--f);color:var(--mute)}
.op-f textarea{margin-top:0;min-height:130px;background:var(--card)}
.op-caja .big{margin:0}
.op-caja .big:disabled{opacity:.45;cursor:default}
.op-gracias{background:var(--card);border-radius:16px;padding:20px;box-shadow:var(--sombra);max-width:560px;display:grid;gap:8px;justify-items:start}
.op-gracias b{font:500 18px var(--head)}
.op-gracias p{margin:0;color:var(--mute)}
.op-otra{min-height:44px;padding:0;border:0;background:none;color:var(--bt);font:500 15px var(--head);cursor:pointer}

/* Mi perfil (pedido de Paula, 21-oct-2026): nombre, país fijo y suscripción, cada uno en su caja */
.pf-caja{display:grid;gap:10px;background:var(--card);border-radius:16px;padding:18px;box-shadow:var(--sombra);margin:0 0 14px;max-width:560px}
.pf-caja h2{margin:0;font:500 17px var(--head)}
.pf-caja .fb-l{margin:0}
.pf-caja .inp{margin:0}
.pf-caja .big{margin:4px 0 0;display:flex;align-items:center;justify-content:center;gap:8px}
.pf-caja .empty{margin:0}
.pf-pais{margin:0;font:600 20px var(--head)}
.pf-plan{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.pf-plan dt{color:var(--mute)}
.pf-plan dd{margin:0}
.pf-plan dd:first-of-type{font-weight:600}

/* «Ver nota final» en verde lima (color elegido por Paula, 21-oct-2026, tomado de su captura) */
:root{--lima:#e9f09c;--lima-borde:#d2de74}
html[data-sistema] .note .ia-lista .big.sec2{background:var(--lima);border-color:var(--lima-borde);color:var(--ink)}

/* Cancelar, cerrar, borrar, salir (pedido de Paula, 21-oct-2026): letra roja siempre.
   La clase se repite (.rojo.rojo.rojo) para ganarle a las reglas de cada tipo de botón sin usar !important */
html[data-sistema] .rojo.rojo.rojo{color:var(--alm)}
html[data-sistema] .ib.rojo{background:var(--alm-soft)} /* papelera de las plantillas: círculo rosado claro con el ícono rojo */
/* Botones de cada plantilla (elegido por Paula el 21-oct-2026, «C1»): círculos pequeños de 32 px, centrados en la tarjeta */
.pl .pl-acc{flex:none} /* .pl div{flex:1} los estiraba y la papelera quedaba arriba */
html[data-pl] .pl{align-items:center}
html[data-sistema] .pl .ib{width:32px;height:32px;border-radius:50%}
.pl .ib svg{width:16px;height:16px}

/* ===== RESPUESTA AL MOUSE Y AL DEDO: UNA SOLA REGLA PARA TODA LA APP (elegida por Paula el 21-oct-2026) =====
   Reemplaza los ~60 efectos de :hover que se habían acumulado. No agregar otros :hover sueltos: todo lo tocable usa esto. */
:root{--toque:#eef6ff;--toque-ln:#d3e7fd}
:is(button,a){-webkit-tap-highlight-color:transparent}
:is(#app,#side,#cajon,dialog) :is(button,a.navsalir,.pac,.fila){transition:transform .12s,box-shadow .12s,background-color .12s}
/* Computador, «CASI NADA» (opción 2 de Paula, 29-oct-2026, noche; vista previa Noti App/vista-previa-todo-normal/hover-discreto.html?op=2;
   reemplaza a «Línea», que no le gustó: «ni el que tenemos en ver notas del turno y nota final»): al pasar el mouse NADA se mueve y no hay
   líneas ni rayitas. Lo blanco (botones, filas, menú) toma un fondo gris apenas visible, las opciones grises uno un poco más oscuro y los
   botones de color se oscurecen un poquito. Los botones de solo texto se siguen subrayando y los íconos sueltos no cambian. */
:root{--casi:#f6f8fb;--sup-casi:#eef1f5}
@media (hover:hover){
 /* Botones blancos (no los de color): fondo apenas gris */
 :is(#app,#side,#cajon,dialog) :is(button,a.navsalir):not(.pac):not(.fila):not(.tipos button):not(.ac-h):not(.seg button):not(.ficha .sexo button):not(.ficha .edad-u button):not(.ficha .results button):not(.pac-abrir):not(.pac-acc button):not(.op-estrellas button):not(:is(.casa,.cama-btn,.watch-mas,.sig,.sync,.ayuda,.tagx button,.line-acc button,.volver-arriba,.op-otra,.yo,.enlace,.hoja-cerrar,.cambiar-nota button,.les-pre,.chip)):not(:is(.big:not(.sec2),.pac-nota,.plt-sig,.hb-btn,.plt-normal,.pr-seguir)):hover:not(:disabled):not(.on){background-color:var(--casi)}
 /* Botones de color: un poquito más oscuros */
 :is(#app,#side,#cajon,dialog) :is(.big:not(.sec2),.pac-nota,.plt-sig,.hb-btn,.plt-normal,.pr-seguir):hover:not(:disabled){filter:brightness(.95)}
 /* Opciones grises de la nota: un gris un poco más oscuro */
 :is(#app,#side,#cajon,dialog) .chip:hover:not(:disabled):not(.on){background-color:var(--sup-casi)}
 /* Menú y filas (tipos de nota, Ver notas del turno, Nota final, secciones): fondo apenas gris */
 :is(#side,.menu-movil,.camas,.yo-menu) :is(button,a.navsalir):hover:not(:disabled):not(.on):not(.yo){background-color:var(--casi)}
 :is(#app,#side,#cajon,dialog) :is(.tipos button,.pac-ver,.ac-h,.fila):hover:not(:disabled):not(.on){background-color:var(--casi)}
 /* Botones que son solo texto (Siguiente, Cerrar, Actualizar, nombre de la cama, Quitar las cifras): se subraya el texto; los íconos sueltos no cambian */
 :is(.sig,.ayuda,.cama-btn,.sync,.volver-arriba,.op-otra,.hoja-cerrar):hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
}
/* Menú lateral del computador, «B» (Paula, 29-oct-2026, noche): se sigue abriendo solo al pasar el mouse, pero lo demás ya no se pone borroso */
@media (min-width:960px) and (hover:hover) and (pointer:fine){.shell:has(.side:not([hidden]))::after{display:none}}
/* Celular: sin movimiento; mientras el dedo toca, el fondo se pone del celeste del menú */
@media (hover:none){
 :is(#app,#side,#cajon,dialog) :is(button,a.navsalir,.pac,.fila):active:not(:disabled):not(.on):not(.big:not(.sec2)):not(.op-estrellas button):not(.op-otra):not(.yo):not(.enlace):not(.hb-btn):not(.hoja-cerrar):not(.plt-sig):not(.cambiar-nota button){background-color:var(--toque);border-color:var(--toque-ln)}
 :is(#app,#side,#cajon,dialog) :is(.big:not(.sec2),.hb-btn,.plt-sig):active:not(:disabled){filter:brightness(.92)}
}
@media (prefers-reduced-motion:reduce){:is(#app,#side,#cajon,dialog) :is(button,a.navsalir,.pac,.fila){transition:none}:is(#app,#side,#cajon,dialog) :is(button,a.navsalir,.pac,.fila):hover{transform:none}}

/* ===== PLANTILLAS DE NOTA (pedido de Paula, 23-oct-2026): la nota se llena con la plantilla de cada tipo =====
   Filas como la ficha de «Agregar paciente» (nombre a la izquierda, opciones a la derecha) y opciones con los .chip del paso 2.
   En «Así va a quedar» lo que falta sale en gris entre [corchetes] y lo que acaba de cambiar se resalta un momento. */
:root{--sombra-ficha:0 1px 2px rgb(16 40 70 / .08),0 6px 18px rgb(16 40 70 / .06)}
.plt{container-type:inline-size}
.plt-sec+.plt-sec{margin-top:22px}
.plt-sec h3{margin:0 0 10px;font:var(--t3);color:var(--ink)}
/* «¿Qué procedimiento?» debajo de «Notas de rutina» (23-oct-2026), con el mismo título de las secciones */
.tipos-g{margin:0 0 10px;font:var(--t3);color:var(--ink)}
/* Si quedan opciones impares (Nota de recibo, Traslado, Notas de rutina), la última va a todo el ancho y no queda un hueco gris */
.tipos button:last-child:nth-child(odd){grid-column:1/-1}
/* …y como queda sola en su fila, también lleva redonda la esquina de abajo a la izquierda (antes quedaba recta) */
html[data-p1="2"] .tipos.tipos button:last-child:nth-child(odd){border-bottom-left-radius:var(--r)}
/* En el celular una palabra larga («Taponamiento») se corta con guion y no en cualquier letra */
.tipos .tipo-t{-webkit-hyphens:auto;hyphens:auto}
.plt-ficha{display:grid;gap:1px;background:var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sombra-ficha)}
.plt-fila{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:16px;align-items:center;min-height:56px;padding:10px 16px;background:var(--card)}
.plt-q{font:400 16px/1.3 var(--f);color:var(--ink)}
.plt-fila.sub .plt-q{padding-left:16px;color:var(--mute)}
.plt-fila.off .plt-q{color:var(--mute)}
.plt .opc{font:400 13px var(--f);color:var(--mute)}
.plt .chip:disabled{opacity:.45;cursor:default}
.plt-num{display:flex;align-items:center;gap:8px;min-width:0}
html[data-sistema] .plt .inp{width:100%;min-height:40px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:400 16px var(--f);color:var(--ink)}
html[data-sistema] .plt .inp.corto{flex:none;width:8.5em}
html[data-sistema] .plt .inp::placeholder{color:var(--ejemplo);opacity:1}
.plt-u{color:var(--mute);font-size:15px}
@container (max-width:520px){
 .plt-fila{grid-template-columns:1fr;row-gap:8px;padding:12px 16px}
 .plt-fila.sub .plt-q{padding-left:0}
}
/* Lo variable, resaltado como con marcador (opción 2 de Paula, 23-oct-2026; en el borrador amarillo, lo llenado va en amarillo oscuro:
   ver «BORRADOR EN HOJITA AMARILLA» más abajo): lo que la auxiliar llenó (.plt-v) con fondo azul clarito
   y lo que falta (.plt-falta) con fondo amarillo (en el borrador amarillo va en blanco con borde amarillo oscuro, ver más abajo).
   Al guardar no queda nada de esto: la nota se guarda como texto. */
:root{--var-recien:#c5ddf6}
.previa .plt-v{padding:0 3px;border-radius:4px;background:var(--sel-bg);color:var(--sel-tx);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.plt-falta{padding:0 3px;border-radius:4px;background:var(--amarillo);color:var(--amarillo-ink);box-shadow:inset 0 0 0 1px var(--amarillo-line);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.previa [data-k]{border-radius:4px;transition:background-color .6s}
.previa .plt-recien{background:var(--sel-bg)}
/* Lo que acaba de cambiar se ve un poco más oscuro un momento (el azul clarito ya es el de todo lo llenado) */
.previa .plt-v.plt-recien{background:var(--var-recien)}
@media (prefers-reduced-motion:reduce){.previa [data-k]{transition:none}}
/* Tipos de nota y servicios que todavía no están: se ven, pero no se pueden elegir */
.tipos button .tipo-t{display:block;min-width:0}
.tipos button small,.areas button small{display:block;margin-top:2px;font:400 13px var(--f);color:var(--mute)}
html[data-p1] .tipos.tipos button:disabled,.areas button:disabled{color:var(--mute);cursor:default}
.areas button:disabled{background:var(--t-gen-soft)}
/* Computador: el paso 3 va a la derecha, sobre la nota; la frase tiene su propio scroll */
@media (min-width:1100px),(min-width:1024px) and (hover:hover) and (pointer:fine){
 .turno-nota .paso{margin:0}
 .turno-nota .previa{flex:0 0 auto;max-height:45vh;overflow:auto}
 .turno-nota .falta{margin:0}
}

/* ===== VÍA PERIFÉRICA DIBUJADA (pedido de Paula, 23-oct-2026): «Catéter venoso» con cada número dibujado en su color y «Sitio» sobre el cuerpo =====
   Catéteres de guía (opción 3): uno gris clarito en cada sitio; el elegido toma el color de su número. El catéter mide lo mismo en
   todos los cuerpos (--cat-largo, más abajo). Ver app.js, «Vía periférica dibujada». */
:root{--g14:#f28c28;--g16:#8f969c;--g18:#1f9d55;--g20:#ef8fb6;--g22:#1e6fd0;--g24:#f2c81b;--g26:#8e5bc4;  /* color de cada número (ISO 10555-5) */
 --cat-sin:#9fb3c4;--cat-canula:#d3dae1;--cat-canula-borde:#7d8b98;--cat-tapa:#ffffff;--cat-borde:rgb(16 40 70 / .45);--cat-guia:#c7d1da;--cat-sombra:rgb(16 40 70 / .35)}
.plt-cals{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.plt-cal{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:8px 6px;border:1px solid var(--line-boton);border-radius:8px;background:var(--card);color:var(--ink);font:500 14px var(--head)}
.plt-cal svg{width:56px;height:22px}
.plt-cal small{font:400 12px var(--f);color:var(--mute)}
.plt-cal.on{border-color:var(--sel-ln);background:var(--sel-bg);color:var(--sel-tx)}
.plt-cal.on small{color:var(--sel-tx)}
.plt-fila.plt-dibujo{grid-template-columns:1fr;row-gap:10px}
.plt-figs{display:flex;justify-content:center;gap:16px}
/* Frente y espalda con la misma altura aunque una imagen sea más angosta: cada figura crece según su proporción (--ar = ancho/alto) */
.plt-fig{flex:var(--ar,1) 1 0;min-width:0;max-width:calc(var(--ar,.47) * 420px);margin:0;text-align:center}
.plt-fig figcaption{margin-bottom:4px;font:500 14px var(--head);color:var(--mute)}
/* Niño y bebé más pequeños que el adulto en el computador (opción 3 de Paula, 23-oct-2026): niño al 80 % y bebé al 65 % de los 420 px del adulto */
.plt-figs[data-cuerpo="nino"] .plt-fig{max-width:calc(var(--ar,.44) * 336px)}
.plt-figs[data-cuerpo="bebe"] .plt-fig{max-width:calc(var(--ar,.54) * 273px)}
/* Pantallas táctiles (celular, tablet): sus brazos cortos dejan los sitios muy juntos para el dedo; van de 420 px de alto (entre el codo
   y el antebrazo del bebé quedan unos 20 px, como en el adulto) y, si no caben lado a lado, una debajo de la otra. Con mouse no hace falta.
   (Antes se decidía por el ancho de la columna, y en un computador ancho la columna mide menos de 520 px: salían como en el celular) */
@media (pointer:coarse){
 .plt-figs.grandes .plt-fig{max-width:calc(var(--ar,.5) * 420px)}
 @container (max-width:520px){.plt-figs.grandes{flex-direction:column;align-items:center}.plt-figs.grandes .plt-fig{width:100%}}
}
.plt-lados{display:flex;justify-content:space-between;margin-top:4px;font-size:13px;color:var(--mute)}
.plt-cabezas{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.plt-cabezas h4{margin:0 0 8px;font:500 14px var(--head);color:var(--mute);text-align:center}
.plt-cabezas .plt-fig{max-width:calc(var(--ar,1) * 165px)}
.plt-capa{position:relative}
.plt-lienzo{position:relative;container-type:inline-size;cursor:pointer}
.plt-lienzo img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.plt-punto{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0;border-radius:50%;background:none;pointer-events:none}
.plt-punto:focus-visible{outline:2px solid color-mix(in srgb,var(--sel-ln) 45%,transparent);outline-offset:0}
/* El catéter: la entrada en la piel (y 24 de 72) queda sobre el sitio; alineado con la extremidad, la punta hacia el corazón */
/* Largo del catéter (pedido de Paula, 23-oct-2026): el mismo en todos los cuerpos, no se achica con el dibujo. 28 px, y 22 px cuando la
   columna es tan angosta que el adulto sale más pequeño (celular). Los de guía se ven más (antes .38) */
.plt-cuerpo{--cat-largo:28px}
@container (max-width:420px){.plt-cuerpo{--cat-largo:22px}}
/* En las cabezas del bebé (dibujo ampliado) el catéter va un poco más grande (pedido de Paula, 23-oct-2026) */
.plt-cabezas{--cat-mult:1.35}
.plt-cat{--alto:calc(var(--cat-largo) * var(--cat-mult,1));position:absolute;left:50%;top:50%;width:calc(var(--alto) * .389);height:var(--alto);transform:translate(-50%,-33.3%) rotate(var(--giro,0deg));transform-origin:50% 33.3%;opacity:.7;filter:drop-shadow(0 1px 1px var(--cat-sombra))}
.plt-punto:not([aria-pressed="true"]) .plt-cat{--cat:var(--cat-guia)}
.plt-punto.cerca .plt-cat{opacity:.95}
.plt-punto[aria-pressed="true"] .plt-cat{opacity:1}
.plt-globo{position:absolute;z-index:2;width:max-content;max-width:150px;padding:4px 8px;border-radius:8px;background:var(--sel-ln);color:var(--card);font:500 12px/1.3 var(--head);text-align:center;box-shadow:0 1px 3px var(--cat-sombra);pointer-events:none}
.plt-globo::after{content:"";position:absolute;left:var(--fx,50%);top:100%;border:6px solid transparent;border-top-color:var(--sel-ln);transform:translateX(-50%)}
.plt-globo.abajo::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--sel-ln)}
/* ===== HERIDAS DIBUJADAS EN EL CUERPO (pedido de Paula, 28-oct-2026; vista previa aprobada en Noti App/vista-previa-heridas/herida.html) =====
   Se toca el cuerpo y aparece la herida; la escogida se arrastra, se estira por sus puntas y se quita con la X. Clases her-*, en app.js
   («Heridas dibujadas en el cuerpo»). */
.her-cuerpo{display:grid;gap:10px}
/* BOLITA «?» DE AYUDA (pedido de Paula, 28-oct-2026: «cada vez que hagamos una instrucción», va cerrada detrás de esta bolita).
   <details class="bolita-ayuda"><summary aria-label="¿Cómo usar?"><span aria-hidden="true">?</span></summary> …pasos… </details>
   Se toca en un área de 44 px; se ve un círculo de 20 px (antes 26: Paula lo vio grande), relleno cuando está abierta. */
.bolita-ayuda>summary{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;list-style:none}
.bolita-ayuda>summary::-webkit-details-marker{display:none}
.bolita-ayuda>summary span{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--ayuda);border-radius:50%;background:var(--card);color:var(--ayuda);font:600 12px/1 var(--head)}
.bolita-ayuda[open]>summary span{background:var(--ayuda);color:var(--card)}
.bolita-ayuda>summary:focus-visible{outline:none}
.bolita-ayuda>summary:focus-visible span{outline:3px solid var(--ayuda);outline-offset:2px}
/* En las heridas, la bolita va a la derecha del título de la pregunta y los pasos se abren debajo del título */
.plt-heridas{position:relative}
.plt-heridas>.plt-q{padding-right:52px}
.her-ayuda>summary{position:absolute;top:6px;right:8px}
/* Con la pregunta en amarillo (.plt-ir, «falta») la app pone position:relative a lo que está dentro de la fila: la bolita se correría.
   La caja de la ayuda queda sin posición propia (la bolita se ubica respecto a la fila) y los pasos van por encima del amarillo. */
.plt-fila.plt-heridas>.her-ayuda{position:static}
.her-pasos{position:relative}
.her-pasos{display:grid;gap:4px;margin:0 0 4px;padding-left:22px;color:var(--mute);font-size:15px;line-height:1.4}
.her-pasos li::marker{font:600 14px var(--head);color:var(--her-azul)}
.her-lienzo{position:relative;cursor:crosshair;touch-action:manipulation}
.her-lienzo img,.her-lienzo canvas{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-select:none}
.her-lienzo canvas{position:absolute;inset:0;height:100%}
.her-capa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
/* Franja invisible sobre la herida: ahí se agarra. La escogida, 44 px; las demás, 28 px para poder tocar al lado y poner otra */
.her-tramo{--agarre:28px;position:absolute;z-index:3;height:var(--agarre);transform:translate(-50%,-50%) rotate(var(--giro,0deg));touch-action:none;cursor:move}
.her-tramo.activa{--agarre:44px;z-index:4}
.her-lienzo.arrastrando,.her-lienzo.arrastrando *{cursor:grabbing}
/* X para quitar la herida escogida: pequeña, pegada a la punta de arriba; se toca en un área de 28 px */
.her-cerrar{position:absolute;z-index:5;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;transform:translate(-50%,-50%);cursor:pointer;touch-action:manipulation}
.her-cerrar span{display:grid;place-items:center;width:14px;height:14px;border:1.5px solid var(--her-linea);border-radius:50%;background:var(--card);color:var(--her-linea)}
.her-cerrar svg{width:6px;height:6px}
.her-cerrar:focus-visible{outline:none}
.her-cerrar:focus-visible span{outline:3px solid var(--her-azul);outline-offset:2px}
.her-globo{position:absolute;z-index:6;padding:4px 8px;border-radius:8px;background:var(--ink);color:var(--card);font-size:13px;line-height:1.2;white-space:nowrap;transform:translate(-50%,-140%);pointer-events:none}
.her-lista{min-height:52px;padding:12px 14px;border:1px dashed var(--line);border-radius:14px;color:var(--mute);font-size:16px}
.her-lista.on{border:1px solid var(--her-azul);background:var(--her-azul-claro);color:var(--ink)}
.her-lista b{font-family:var(--head)}
.her-lista ol{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.her-lista li button{width:100%;min-height:44px;padding:6px 10px;border:1px solid transparent;border-radius:10px;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.her-lista li button[aria-pressed="true"]{border-color:var(--her-azul);background:var(--card)}
.her-lista li button:focus-visible{outline:3px solid var(--her-azul);outline-offset:2px}
/* ===== QUEMADURAS PINTADAS EN EL CUERPO (pedido de Paula, 28-oct-2026; vista previa aprobada, opción 2 «Pintar»:
   Noti App/vista-previa-heridas/quemadura.html). Se escoge el grado y se pinta la piel quemada; debajo, el % de superficie corporal quemada.
   Clases qm-*, en app.js («Quemaduras pintadas en el cuerpo»). La bolita «?» y el globo con el nombre son los de las heridas. */
.qm-cuerpo{display:grid;gap:10px}
.qm-grados{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.qm-grado-t{margin-right:2px;font:500 15px var(--head);color:var(--mute)}
.qm-g{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.qm-g[aria-pressed="true"]{border-color:var(--her-azul);background:var(--her-azul-claro);box-shadow:inset 0 0 0 1px var(--her-azul)}
.qm-g:focus-visible{outline:3px solid var(--her-azul);outline-offset:2px}
.qm-g i{width:14px;height:14px;border-radius:4px}
.qm-borrar{color:var(--mute)}
.qm-todo{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--her-linea);font:inherit;font-size:15px;cursor:pointer}
.qm-todo:focus-visible{outline:3px solid var(--her-azul);outline-offset:2px}
.qm-c1{background:var(--qm1)}.qm-c2{background:var(--qm2)}.qm-c3{background:var(--qm3)}.qm-c4{background:var(--qm4)}
/* Con el dedo se pinta: el dibujo no mueve la página (se baja deslizando por fuera del dibujo) */
.qm-lienzo{position:relative;cursor:crosshair;touch-action:none}
.qm-lienzo img,.qm-lienzo canvas{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-select:none}
.qm-lienzo canvas{position:absolute;inset:0;height:100%}
.qm-pincel{position:absolute;z-index:3;border:1.5px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
/* ===== TIPO DE HERIDA PRIMERO, UN SOLO CUERPO (pedido de Paula, 29-oct-2026; vista previa aprobada, opción 2: Noti App/vista-previa-heridas/
   tipo-herida.html). Arriba «¿Qué vas a señalar?»; con «Quemadura» escogida (.les-pinta en la fila) se pinta y los toques no ponen heridas. */
.les-chips{display:flex;flex-wrap:wrap;gap:6px}
.les-chips-t{flex-basis:100%;font:500 14px var(--head);color:var(--mute)}
.les-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.les-chip[aria-pressed="true"]{border-color:var(--her-azul);background:var(--her-azul-claro);box-shadow:inset 0 0 0 1px var(--her-azul)}
.les-chip:focus-visible{outline:3px solid var(--her-azul);outline-offset:2px}
.les-mini{flex:none;width:32px;height:20px}
.her-lista li button{display:flex;align-items:center;gap:8px}
.her-lienzo.qm-lienzo{touch-action:manipulation}
.les-pinta .her-lienzo.qm-lienzo{touch-action:none}
.les-pinta .her-tramo{pointer-events:none}
.les-pinta .her-cerrar{display:none}
.plt-fila:not(.les-pinta) .her-cuerpo .qm-grados{display:none}
.plt-fila:not(.les-pinta) .les-pasos-pinta,.les-pinta .les-pasos-marca{display:none}
.qm-scq{padding:12px 14px;border:1px dashed var(--line);border-radius:14px;color:var(--mute);font-size:16px}
.qm-scq.on{border:1px solid var(--her-azul);background:var(--her-azul-claro);color:var(--ink)}
.qm-scq b{font:600 22px/1.1 var(--head)}
.qm-tabla{display:block;margin-top:2px;font-size:14px;color:var(--mute)}
.qm-lista{display:grid;margin:8px 0 0;padding:0;list-style:none;font-size:15px}
.qm-lista li{display:flex;align-items:center;gap:8px;min-height:32px;padding:2px 0;border-bottom:1px solid var(--line)}
.qm-lista li:last-child{border-bottom:0}
.qm-lista i{flex:none;width:12px;height:12px;border-radius:3px}
.qm-pct{flex:none;margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mute)}

/* ===== ENCABEZADO DE LA CAMA EN FRANJA AZUL (opción 4 de Paula, 23-oct-2026): letra blanca para que la cama se note =====
   Solo en la pantalla de la cama (.top-cama, en vTurno); Mi turno y el menú lateral siguen como estaban. Selectores largos a propósito:
   tienen que ganarle a «.top .who span» (subtítulo gris) y a «.cama-btn svg» (lápiz gris). */
html[data-sistema] .top.top-cama{color:var(--pri-ink);padding:14px 16px 22px}
/* Espaciado «Pegadito» (opción 1 de Paula, 23-oct-2026, noche; vista previa vista-previa-plantillas/franja-espaciado-opciones.html): el
   subtítulo pegado a «Cama X» y el mismo aire arriba y abajo. El botón «Cama X» sigue midiendo 44 px para el dedo, pero con margen negativo
   no empuja el subtítulo hacia abajo. */
html[data-sistema] .top.top-cama .cama-btn{margin:-8px 0}
html[data-sistema] .top.top-cama .who span{margin-top:2px}
/* La franja va en ::before y deja 8 px abajo: así, cuando el encabezado queda fijo arriba al bajar, sus esquinas redondas y ese espacio
   muestran el fondo y no lo que pasa por debajo (con margin-bottom se asomaba una rayita del contenido) */
html[data-sistema] .top.top-cama::before{content:"";position:absolute;inset:0 0 8px;z-index:-1;border-radius:12px;background:var(--pri)}
/* En TODAS las pantallas (celular, tablet y computador) la franja va de LADO A LADO y RECTA, pegada arriba (pedido de Paula, 23-oct-2026,
   noche). Se estira con una sombra sin difuminar (como la barra blanca .cabecera): la sombra no crea desplazamiento de lado, que sí crearía
   100vw con la barra de desplazamiento de Windows. El clip-path la corta arriba y abajo (arriba deja pasar la zona de la barra de estado del
   iPhone si la hay). En el computador el menú lateral queda encima (z-index). */
html[data-sistema] .top.top-cama::before{border-radius:0;box-shadow:0 0 0 100vmax var(--pri);clip-path:inset(calc(-1 * env(safe-area-inset-top,0px)) -100vmax 0)}
html[data-sistema] .top.top-cama{margin-top:-12px} /* pegada arriba: se come el espacio de arriba de la página (.app padding-top) */
@media (min-width:960px){
 html[data-sistema] .top.top-cama{margin-top:-20px}
 .side:not([hidden]){z-index:6} /* el menú lateral fijo de las tablets, encima de la franja (el que se recoge ya tiene 40) */
}
/* Flechita para volver a Mi turno, a la izquierda de «Cama X» (reemplaza «‹ NotiApp» del celular y «‹ Mi turno» del computador) */
html[data-sistema] .top.top-cama .cama-atras{align-self:flex-start;margin:-8px -10px 0 -12px;color:var(--pri-ink)} /* a la altura del texto «Cama X» */
html[data-sistema] .top.top-cama:has(.cama-ed) .cama-atras{margin-top:1px} /* al cambiar el nombre: a la altura de la casilla (46 px) */
/* Caneca para eliminar la cama, al extremo derecho de la franja, a la altura de «Cama X» (pedido de Paula, 24-oct-2026, celular y computador;
   antes «Eliminar esta cama» al final de la página). Blanca como la flechita; es un ícono suelto: no cambia al pasar el mouse (.casa). */
html[data-sistema] .top.top-cama .cama-borrar{align-self:flex-start;margin:-8px -12px 0 auto;color:var(--pri-ink)}
html[data-sistema] .top.top-cama .who :is(b,span),html[data-sistema] .top.top-cama .cama-btn svg{color:var(--pri-ink)}
html[data-sistema] .top.top-cama :focus-visible{outline-color:var(--pri-ink)}
/* Al cambiar el nombre de la cama: la cajita de texto y «Guardar» son blancas, su letra va oscura como en el resto de la app */
html[data-sistema] .top.top-cama .cama-ed :is(.inp,.ghost:not(.rojo)){color:var(--ink)}
html[data-sistema] .top.top-cama .cama-ed :focus-visible{outline-color:var(--pri-ink)}
/* Desde el 25-oct-2026 el número de la cama se cambia en una VENTANITA (opción 3 de Paula; vista previa Noti App/vista-previa-editar-cama,
   ?ed=3): la de «¿Eliminar?» (.dlg-conf, con Cancelar rojo y Guardar azul) con la casilla. Las reglas .cama-ed de arriba ya no se usan. */
.dlg-ec .inp{margin-top:14px;min-height:46px;font-size:16px;border-radius:10px}

/* ===== BORRADOR EN HOJITA AMARILLA Y NOTA DE ENFERMERÍA COMO DOCUMENTO (opción 2 de Paula, 23-oct-2026) =====
   Borrador («Así va a quedar en la nota»): la hojita cuadriculada, pero amarilla, con la etiqueta «Borrador». Sobre el amarillo, lo que
   falta va en blanco con borde amarillo oscuro; lo llenado sigue en azul clarito.
   Guardar va DENTRO del borrador, abajo, en amarillo «mostaza clara» (pedido de Paula, 23-oct-2026, noche: lo único que cambia en la hoja);
   así también se ve en celular y tablet (antes `.guardar{display:none}` lo escondía por debajo de 1100 px). Lo que falta sigue debajo de la hoja.
   Nota de enfermería (.note.nf, notaDocHTML en app.js): hoja blanca con cuadrícula celeste, membrete azul; los registros con hora (en negro), tipo de nota
   (en gris, sin cajita), lápiz y ✕ más suaves, sin líneas entre ellos y sin el título «Registros» (menos ruido, 23-oct-2026, noche); firma con
   el nombre de la cuenta. Vistas previas en Noti App/vista-previa-plantillas/borrador-hoja-final-completa.html y guardar-dentro-opciones.html. */
:root{--borr:#fff8dc;--borr-cuad:#f5eabd;--borr-falta:#d9a400;--borr-tag:#f6d55c;--borr-ink:#5a4200;--nf-linea:#d7dee6;--nf-suave:#f4f7fa;--nf-sombra:0 1px 2px rgb(16 40 70 / .06)}
html[data-sobrio][data-sistema] .previa{border:0;border-radius:8px;box-shadow:var(--hoja-sombra);background:linear-gradient(var(--borr-cuad) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--borr-cuad) 1px,transparent 1px) 0 0/16px 16px,var(--borr)}
.borr-tag{display:inline-block;margin:0 6px 8px 0;padding:2px 10px;border-radius:999px;background:var(--borr-tag);color:var(--borr-ink);font:500 13px/1.4 var(--head)}
html[data-tipo] .previa small{display:inline;color:var(--borr-ink)}
.previa .plt-falta{background:var(--card);box-shadow:inset 0 0 0 1px var(--borr-falta);color:var(--borr-ink)}
/* Lo llenado, en el borrador amarillo, va en amarillo oscuro como la etiqueta «Borrador» (pedido de Paula, antes azul clarito);
   lo que acaba de cambiar, un momento un poco más oscuro */
:root{--borr-recien:#ecc232}
/* Cuadrícula «Suave» (opción 2 de Paula, 23-oct-2026, noche; vista previa vista-previa-plantillas/cuadricula-opciones.html): las líneas al 65 %
   de las de antes. Borrador: --borr-cuad #f5eabd (antes #f0e2ad). Nota de enfermería: --nf-cuad #ecf3fb (antes --cuad-azul #e2edf9, que se
   sigue usando igual en otras hojas de la app). */
:root{--nf-cuad:#ecf3fb}
.previa .plt-v{background:var(--borr-tag);color:var(--borr-ink)}
.previa .plt-v.plt-recien{background:var(--borr-recien)}
/* Guardar dentro del borrador, en amarillo mostaza con letra oscura (en blanco no se lee sobre amarillo); tono 1 de boton-amarillo-opciones.html */
:root{--borr-boton:#ecc232;--borr-boton-ink:var(--borr-ink)}
.previa .guardar{display:block;margin:14px 0 0}
html[data-sistema][data-boton] .previa .big.guardar{background:var(--borr-boton);color:var(--borr-boton-ink)}

/* Con la cuadrícula celeste de la hoja g1 (--cuad-azul cada 16 px; pedido de Paula, 23-oct-2026, noche: antes blanca lisa) */
html[data-nota^="g"][data-sistema] .note.nf{background:linear-gradient(var(--nf-cuad) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--nf-cuad) 1px,transparent 1px) 0 0/16px 16px,var(--card);border:1px solid var(--nf-linea);border-radius:6px;box-shadow:var(--nf-sombra)}
/* Membrete (opción 4 de Paula, 23-oct-2026): franja AZUL arriba (--pri, el azul de la franja de la cama; era verde oscuro --ok-ink hasta
   que Paula pidió «azul también», 23-oct-2026, noche), de lado a lado, con el título en mayúscula a la izquierda,
   la fecha a la derecha y debajo servicio · turno, en blanco. Dentro de .note, --pri-ink es oscuro: por eso la letra va con --card */
html[data-nota^="g"][data-sistema] .note.nf{padding-top:0;overflow:hidden}
html[data-nota^="g"][data-tipo] .note.nf h2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 -22px;padding:14px 22px 4px;background:var(--pri);color:var(--card);text-align:left;text-transform:uppercase}
html[data-nota^="g"][data-tipo] .note.nf h2 small{flex:none;font:500 14px var(--head);text-transform:none}
.nf-sub{margin:0 -22px 14px;padding:0 22px 14px;background:var(--pri);color:var(--card);font-size:14px}
.nf-reg{padding:8px 0}
.nf-reg-cab{display:flex;align-items:center;gap:8px}
.nf-reg-cab b{font:600 15px/1.5 var(--head);font-variant-numeric:tabular-nums;color:var(--ink)}
.nf-reg-cab .line-acc{margin-left:auto;flex-direction:row}
.nf-reg-cab .line-acc button{border:0;border-radius:6px;background:none;color:color-mix(in srgb,var(--mute) 75%,var(--card))}
.nf-reg p{margin:4px 0 0;font-size:15px;line-height:1.5}
/* Tipo de cada registro en una CAPSULITA celeste transparente (opción 1 de Paula, 24-oct-2026; antes gris suelto): se ve de un vistazo
   lo que se ha hecho. Solo en pantalla: al copiar la nota sale el texto de siempre. Radio 12: con un renglón es capsulita; los nombres
   largos (Inserción de sonda nasogástrica) se parten en dos renglones en el celular. Vista previa: Noti App/vista-previa-nota (?cap=1) */
.nf-tipo{padding:2px 10px;border-radius:12px;background:color-mix(in srgb,var(--celeste) 24%,transparent);color:var(--sel-tx);font:400 14px/1.35 var(--f)}
.nf-firma{margin:18px 0 0;padding-top:8px;border-top:1px solid var(--ink);max-width:260px;font-size:13px;color:var(--mute)}
.nf-firma b{display:block;color:var(--ink)}
.note.nf .row{margin-top:16px}
/* En el celular, al guardar la página baja hasta la nota: que el membrete quede debajo de la franja azul de la cama, no tapado */
.note.nf{scroll-margin-top:112px}

/* Deslizar en el computador. 23-oct-2026, noche (pedido de Paula): al bajar, SOLO baja la parte izquierda; la columna de la derecha
   (borrador con Guardar, lo que falta y la nota de enfermería) se QUEDA FIJA debajo de la franja azul (100 px + 8) para seguir viendo las
   notas mientras se llenan las opciones. Si no cabe en la pantalla, la columna entera se desliza por dentro con UN solo deslizar (ni el
   borrador ni la nota tienen el suyo: así era antes y se sentía enredado). Antes de este pedido todo bajaba con la página (prueba 2). */
@media (min-width:1100px),(min-width:1024px) and (hover:hover) and (pointer:fine){
 /* con html[data-sistema]: tiene que ganarle a la regla vieja de la columna fija (top 84 px) */
 /* alto: la pantalla menos 160 px: al abrir la cama la columna empieza a 158 px y no se pasa de la pantalla; fija (108) termina antes de
    los 40 px de abajo de la página, así al final no se sube. Desde el espaciado «Pegadito» la franja mide 86 px: fija a 94 (86 + 8) */
 html[data-sistema] .turno-nota{position:sticky;top:94px;max-height:calc(100vh - 146px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .turno-nota>*{flex-shrink:0} /* que nada se aplaste dentro de la columna: se desliza la columna completa */
 /* «Eliminar esta cama» y el pie están dentro de .turno, a la izquierda; la columna de la derecha ocupa las tres filas para que su zona
    llegue hasta abajo (si no, al final de la página la columna se sube y su parte de arriba queda bajo la franja). Lo que sobre va a la
    última fila, no entre «Eliminar» y el pie. */
 html[data-sistema] .turno{grid-template-rows:auto auto 1fr;row-gap:0} /* html[data-sistema]: le gana al gap:24px de «mitad y mitad», más abajo */
 .turno>.turno-sec{grid-column:1}
 .turno>.turno-nota{grid-column:2;grid-row:1 / span 3}
 .turno-nota .previa{max-height:none;overflow:visible}
 .turno-nota .note{overflow:visible}
}

/* Lo que falta en el borrador se toca y lleva a su fila (pedido de Paula, 23-oct-2026): la mano del mouse y un amarillo un poco más fuerte
   al pasar por encima (ya es una cajita, no se le agrega otra); la fila a la que se llega queda bordeada en amarillo */
.previa .plt-falta{cursor:pointer;transition:background-color .15s}
.previa .plt-falta:hover{background:color-mix(in srgb,var(--borr-tag) 35%,var(--card))}
.previa .plt-falta:focus-visible{outline:2px solid var(--borr-falta);outline-offset:1px}
.plt-fila{transition:background-color .5s}
/* La fila a la que se llega queda en amarillo con borde (como el borrador) hasta que se llena (pedido de Paula: que no se ponga azul).
   El amarillo va en ::before y llega hasta el borde de la fila; si la fila es la primera o la última de su tarjeta, sus esquinas se curvan
   igual que la tarjeta (14 px, ver .plt-ficha) para que el borde no se corte en la curva. En las filas del medio el borde es recto. */
.plt-fila.plt-ir{position:relative}
.plt-fila.plt-ir::before{content:"";position:absolute;inset:0;background:var(--borr);box-shadow:inset 0 0 0 2px var(--borr-falta);pointer-events:none}
.plt-ficha > .plt-fila.plt-ir:first-child::before{border-top-left-radius:14px;border-top-right-radius:14px}
.plt-ficha > .plt-fila.plt-ir:last-child::before{border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.plt-fila.plt-ir > *{position:relative}
@media (prefers-reduced-motion:reduce){.previa .plt-falta,.plt-fila{transition:none}}

/* ===== MENÚ LATERAL QUE SE RECOGE (pedido de Paula, 23-oct-2026) =====
   En el computador con mouse el menú queda cerrado (solo íconos, y en cada cama su número en el cuadrito) y se abre ENCIMA del contenido
   al pasar el mouse o al llegar con el teclado; el contenido no se mueve y aprovecha el ancho. En pantallas táctiles grandes (tablet) no hay
   «pasar el mouse»: el menú se queda abierto como antes. */
:root{--ancho-rail:76px;--side-sombra:0 10px 34px rgb(16 40 70 / .18);--side-velo:rgb(16 40 70 / .08)}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
 .shell:has(.side:not([hidden])){display:block;padding-left:var(--ancho-rail)}
 .shell:has(.side:not([hidden])) .bar{left:var(--ancho-rail)}
 .side:not([hidden]){position:fixed;left:0;top:0;z-index:40;width:var(--ancho-rail);overflow-x:hidden;scrollbar-width:thin;transition:width .18s ease .12s,box-shadow .18s ease .12s}
 .side:not([hidden]):is(:hover,:focus-within){width:var(--ancho-side);box-shadow:var(--side-sombra);transition-delay:0s}
 /* Con el menú abierto, lo de atrás se ve borroso (pedido de Paula): un velo con desenfoque entre el menú y el contenido */
 .shell:has(.side:not([hidden]))::after{content:"";position:fixed;inset:0 0 0 var(--ancho-rail);z-index:39;background:var(--side-velo);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease .12s,visibility 0s linear .3s}
 .shell:has(.side:not([hidden]):is(:hover,:focus-within))::after{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s}
 /* Cerrado: los textos se desvanecen y los íconos quedan EN EL MISMO SITIO abierto o cerrado (pedido de Paula, 29-oct-2026, noche: «cuando
    paso el mouse sobre el menú y se abre es como si se saltaran las frases»). Antes, cerrado, los íconos iban centrados y los textos con
    display:none: al abrir, los íconos se corrían y los textos aparecían de golpe mientras el menú todavía se abría, partidos en dos renglones.
    Ahora los textos van siempre en un renglón y aparecen con un fundido cuando el menú ya se está abriendo. */
 .side:not([hidden]) :is(.logo .nombre,.nav-t,.nav .n,.sync span,.camas span,.yo-t,.yo > svg){white-space:nowrap;transition:opacity .15s ease .1s}
 .side:not(:hover):not(:focus-within) :is(.logo .nombre,.nav-t,.nav .n,.sync span,.camas span,.yo-t,.yo > svg){opacity:0;transition:opacity .08s ease}
 .side:not(:hover):not(:focus-within) .yo-menu{display:none}
 /* El mismo relleno abierto y cerrado: con 76 px de menú los íconos quedan centrados en la columna */
 .side:not([hidden]) .marca{padding-inline:3px}
 .side:not([hidden]) :is(.nav button,.sync){padding-inline:14px 12px}
 .side:not([hidden]) .camas button{padding-inline:8px 12px}
 .side:not([hidden]) :is(.nav button,.camas button,.sync,.yo){min-width:0;overflow:hidden} /* el texto en un renglón no ensancha el botón: se recorta adentro */
 .side:not(:hover):not(:focus-within) h3{color:transparent;white-space:nowrap;overflow:hidden}
 .side:not([hidden]) .yo{padding-inline:2px 8px}
 .side:not(:hover):not(:focus-within) .camas i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;overflow:hidden;color:var(--pri-ink);font:600 13px/1 var(--head)}
 .side:not(:hover):not(:focus-within) .camas i::before{content:attr(data-n);max-width:30px;overflow:hidden;white-space:nowrap}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.side:not([hidden]),.shell::after,.side :is(.logo .nombre,.nav-t,.nav .n,.sync span,.camas span,.yo-t,.yo > svg){transition:none}}

/* Pantalla de la cama en el computador MITAD Y MITAD (pedido de Paula, 23-oct-2026): la mitad izquierda para llenar (pasos 1 y 2) y la
   derecha para el borrador y la nota de enfermería (antes la derecha medía como mucho 400 px). El contenido usa más ancho (antes 1240 px). */
@media (min-width:1100px),(min-width:1024px) and (hover:hover) and (pointer:fine){
 .app:has(.turno){max-width:1480px}
 .turno{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
}

/* ===== CELULAR: BORRADOR Y NOTA FINAL EN HOJAS QUE SUBEN (opción 1 de Paula, 24-oct-2026; vista previa Noti App/vista-previa-movil) =====
   Solo cuando NO es el computador (lo contrario de ANCHO en app.js: desde 1100 px, o desde 1024 con mouse). La pantalla de la cama es
   para elegir; abajo, una barra con «Borrador» (mostaza) y «Nota final» (azul). Al tocarlos, la columna del paso 3 (.turno-nota) sube
   como una hoja con esa parte (html[data-hoja]). En el computador la barra, el velo y la cabecera de la hoja no se ven. */
:root{--hb-sombra:0 -4px 18px rgb(16 40 70 / .10);--hoja-sombra-sube:0 -10px 30px rgb(16 40 70 / .20);--hoja-velo:rgb(16 30 45 / .38)}
.hojas-barra,.hoja-velo,.hoja-cab{display:none}
@media not all and (min-width:1100px){
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
 /* La barra de abajo: dos rectángulos rectos, pegados, de borde a borde (opción 1 de Paula, 24-oct-2026; antes dos botones redondeados en una
    barra blanca; vista previa vista-previa-movil/public/comparar-barra.html). En el iPhone se suma solo la MITAD del espacio de la raya de
    abajo (safe-area): con todo, en el teléfono de Paula quedaban casi del doble de alto y con vacío bajo el texto (24-oct-2026). */
 .hojas-barra{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;box-shadow:var(--hb-sombra)}
 .hb-btn{flex:1;min-width:0;min-height:calc(58px + env(safe-area-inset-bottom,0px) * .5);padding:0 8px calc(env(safe-area-inset-bottom,0px) * .5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;border-radius:0;font:500 16px var(--head);cursor:pointer}
 .hb-btn small{font:400 13px var(--f)}
 .hb-borr{background:var(--borr-boton);color:var(--borr-ink)}
 .hb-nota{background:var(--pri);color:var(--pri-ink)}
 .hb-btn:disabled{background:var(--line);color:var(--mute);cursor:default}
 .hb-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
 .hb-pulso{animation:hb-pulso 1.2s ease}
 /* Espacio para la barra al final de la página, y los avisos por encima de ella */
 .app:has(.hojas-barra){padding-bottom:120px}
 .shell:has(.hojas-barra)~#toast{bottom:calc(70px + env(safe-area-inset-bottom,0px) * .5)}

 /* La columna del paso 3 se vuelve una hoja que sube desde abajo */
 .turno .turno-nota{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:0 16px calc(18px + env(safe-area-inset-bottom,0px));background:var(--fondo-claro);border-radius:16px 16px 0 0;box-shadow:var(--hoja-sombra-sube);
  transform:translateY(105%);visibility:hidden;transition:transform .26s ease,visibility 0s linear .26s}
 html[data-hoja] .turno .turno-nota{transform:none;visibility:visible;transition:transform .26s ease}
 html[data-hoja="borrador"] .turno-nota :is(.note,.nota-aviso){display:none}
 html[data-hoja="nota"] .turno-nota>:not(.note):not(.nota-aviso):not(.hoja-cab){display:none}
 .turno-nota>.paso{display:none}
 .turno-nota .note.nf{margin-top:4px}
 .hoja-cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -16px 8px;padding:18px 16px 8px;background:var(--fondo-claro)}
 .hoja-asa{position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--line-boton)}
 .hoja-titulo{font:500 17px var(--head);color:var(--ink)}
 .hoja-cerrar{min-height:44px;padding:0 6px;border:0;background:none;color:var(--sel-tx);font:500 15px var(--head)}
 /* Velo detrás de la hoja: tocarlo la cierra */
 .hoja-velo{display:block;position:fixed;inset:0;z-index:28;background:var(--hoja-velo);opacity:0;pointer-events:none;transition:opacity .2s}
 html[data-hoja] .hoja-velo{opacity:1;pointer-events:auto}
}}
@keyframes hb-pulso{0%,100%{transform:none}30%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.turno .turno-nota,.hoja-velo{transition:none}.hb-pulso{animation:none}}

/* ===== UNA PREGUNTA A LA VEZ, EN EL CELULAR Y EN EL COMPUTADOR, con las opciones en LISTA CON CIRCULITO =====
   Celular: opción 2 de Paula, 24-oct-2026, forma 1 (vistas previas en Noti App/vista-previa-movil: comparar-paso2.html, comparar-opciones.html).
   Computador: desde el 24-oct-2026 (tarde) igual que el celular (opción 8 de Paula, «como el celular»; vista previa
   Noti App/vista-previa-computador/public/comparar-pasos.html). Antes estas reglas eran solo del celular y en el computador el paso 2 iba
   todo abierto y luego en secciones que se abren con botones «suaves grises» (commit ebee8a8). Ver app.js, unaPregunta. */
/* Solo se ve la pregunta de ahora (y el título de su sección va arriba, en el avance) */
.plt-una .plt-sec:not(.plt-sec-actual),.plt-una .plt-fila:not(.plt-actual),.plt-una .plt-sec h3{display:none}
.plt-una .plt-sec+.plt-sec{margin-top:0}
/* Avance: sección, barrita y cuántos faltan */
.plt-prog{display:block;margin:0 0 12px}
.plt-prog-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:14px;color:var(--mute)}
.plt-prog-t b{font:var(--t3);color:var(--ink)}
.plt-avance{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.plt-avance i{display:block;height:100%;border-radius:inherit;background:var(--pri)}
.plt-prog-n{display:block;margin-top:6px;font-size:13px;color:var(--borr-ink)}
/* «Todo normal» junto al nombre de la sección (opción de Paula, 29-oct-2026; vista previa Noti App/vista-previa-todo-normal; app.js,
   «TODO NORMAL» POR SECCIÓN): verde menta como lo normal; tocado y con todo normal, lleno */
.plt-prog-t:has(.plt-normal){align-items:center}
.plt-prog-t .plt-normal{flex:none;align-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--ok);border-radius:999px;background:var(--ok-soft);color:var(--ok-ink);font:var(--te);cursor:pointer}
.plt-prog-t .plt-normal[aria-pressed="true"]{border-color:var(--ok-ink);background:var(--ok-ink);color:var(--card)}
.plt-prog-t .plt-normal:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
/* La pregunta, más grande */
.plt-una .plt-fila.plt-actual{min-height:180px;align-content:start;padding:18px 16px}
.plt-una .plt-fila.plt-actual .plt-q{font:var(--t2)}
/* Las que dependen de la pregunta van debajo, en la misma tarjeta (pedido de Paula, 28-oct-2026; app.js, gruposPlt): sin el alto mínimo y
   con su nombre un poco más pequeño; la de arriba tampoco deja espacio vacío cuando trae preguntas debajo */
.plt-una .plt-fila.plt-actual.plt-con-dep,.plt-una .plt-fila.plt-actual.plt-dep{min-height:0}
.plt-una .plt-fila.plt-actual.plt-dep{padding:14px 16px}
.plt-una .plt-fila.plt-actual.plt-dep .plt-q{font:var(--t3);color:var(--ink)}
/* Sus opciones van una al lado de la otra (no en lista a todo el ancho): así la intensidad del dolor (0 a 10) cabe en pocos renglones */
.plt-una .plt-actual.plt-dep .chips{flex-direction:row;flex-wrap:wrap}
html[data-sistema] .plt-una .plt-actual.plt-dep .chip{width:auto;min-height:44px;padding:10px 14px;gap:8px;font-size:16px}
.plt-una .plt-actual.plt-dep .chip::before{width:16px;height:16px}
/* UNA SECCIÓN POR PANTALLA (opción 1 de Paula, 29-oct-2026; app.js, POR_SECCION): todas las preguntas de la sección en la misma tarjeta,
   separadas por su línea; el nombre de cada pregunta como el de las que dependen (todas llevan .plt-dep). La primera tampoco deja el espacio
   vacío de la pregunta sola. */
.plt-secc .plt-fila.plt-actual{min-height:0}
/* Opciones en lista con circulito: cada una a todo el ancho; el circulito se llena al elegirla (cuadrito si se pueden marcar varias) */
.plt-una .plt-actual .chips{display:flex;flex-direction:column;gap:8px}
html[data-sistema] .plt-una .plt-actual .chip{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border-radius:12px;font-size:17px}
.plt-una .plt-actual .chip::before{content:"";flex:none;width:20px;height:20px;border:2px solid var(--line-boton);border-radius:50%;background:var(--card)}
.plt-una .plt-actual.plt-multi .chip::before{border-radius:5px}
.plt-una .plt-actual .chip.on::before{border-color:var(--pri);background:var(--pri);box-shadow:inset 0 0 0 4px var(--card)}
.plt-una .plt-actual.plt-multi .chip.on::before{box-shadow:inset 0 0 0 3px var(--card)}
/* Anterior / Siguiente */
.plt-nav{display:flex;gap:10px;margin-top:12px}
.plt-nav button{flex:1;min-height:52px;border-radius:12px;font:500 16px var(--head)}
.plt-ant{border:1px solid var(--line-boton);background:var(--card);color:var(--sel-tx)}
.plt-ant:disabled{color:var(--mute);opacity:.6}
.plt-sig{border:0;background:var(--pri);color:var(--pri-ink)}
/* «Estás haciendo: Nota de recibo · Cambiar» debajo de la barrita, antes de la pregunta (pedido de Paula, 24-oct-2026: franja amarilla suave,
   sin borde, con la hojita de nota en vez de un signo de advertencia, «que no preocupe»; vistas previas https://claude.ai/artifact/4KTgx9uwXMM7qatB8qfzXx
   y Noti App/vista-previa-computador/public/comparar-cambiar.html). Se lee como una frase. «Cambiar» es un botón de solo texto: no se levanta
   ni toma fondo (está en las listas de «RESPUESTA AL MOUSE Y AL DEDO»); su área para el dedo es más grande que lo que se ve. */
.cambiar-nota{margin:0 0 12px;padding:6px 12px;border-radius:10px;background:var(--borr);color:var(--borr-ink);font-size:14px;line-height:1.45}
.cambiar-nota svg{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.cambiar-nota b{color:var(--borr-ink)}
.cambiar-nota span{margin-right:4px}
.cambiar-nota button{position:relative;display:inline;padding:0;border:0;background:none;color:var(--sel-tx);font:500 14px var(--head);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cambiar-nota button::after{content:"";position:absolute;inset:-13px -8px}
.cambiar-nota .cn-sep{margin:0 6px}
/* Desde el 28-oct-2026 la franja va encima de «2 · Toca lo que encuentras» (fuera de las preguntas): solo se ve mientras se hacen las preguntas */
html[data-paso="tipo"] .turno-sec>.cambiar-nota,html[data-paso="proc"] .turno-sec>.cambiar-nota{display:none}
/* ===== HORA DEL REGISTRO EN RUEDAS (pedido de Paula, 28-oct-2026: «como cuando uno configura un cronómetro en iPhone»). La última pregunta de
   cada nota: tres ruedas (hora, minutos, a. m. / p. m.) que se giran con el dedo, la rueda del mouse o las flechas; la del centro es la escogida.
   Clases hora-*, en app.js («HORA DEL REGISTRO»). Cada número mide 44 px (H_ALTO en app.js): si cambia aquí, cambiarlo allá. */
.hora-ruedas{position:relative;display:flex;justify-content:center;gap:6px;width:100%;max-width:280px;margin:6px auto 0}
.hora-ruedas::before{content:"";position:absolute;inset:88px 0 auto;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--sel-bg);pointer-events:none}
.hora-rueda{position:relative;flex:1;height:220px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;border-radius:10px;outline:none}
.hora-rueda::-webkit-scrollbar{display:none}
.hora-rueda:focus-visible{box-shadow:inset 0 0 0 2px var(--sel-ln)}
.hora-pista{padding:88px 0}
.hora-num{display:grid;place-items:center;height:44px;white-space:nowrap;scroll-snap-align:center;font:500 22px/1 var(--head);font-variant-numeric:tabular-nums;color:var(--mute);cursor:pointer;user-select:none;-webkit-user-select:none}
.hora-num.on{color:var(--ink);font-weight:600}
.hora-rueda[data-r="ap"] .hora-num{font-size:18px}
.hora-rueda[data-hr="ap"] .hora-num{font-size:18px} /* horas de la nota en rueda (29-oct-2026): igual que la hora del registro */
.hora-ahora{display:flex;margin:12px auto 0}

/* ===== EL TIPO DE NOTA ES LA PRIMERA PREGUNTA (opción 8 de Paula, 24-oct-2026, tarde; primero en el computador y el mismo día también en el
   celular: «hazlo como en el pc») =====
   <html data-paso>: tipo = solo «Elige el tipo de nota» con «Siguiente» · proc = solo «¿Qué procedimiento?» (notas de rutina) con «Anterior» y
   «Siguiente» · preg = las preguntas, una a la vez. Ver app.js, aplicarPaso. */
html[data-paso="tipo"] .turno-sec>:is(.tipos-g,.tipos-g + .tipos,.tipos-g + .tipos + .tipo-nav,.recup,h2.paso:not(#tipo-q),.plt,.empty),
html[data-paso="proc"] .turno-sec>:is(#tipo-q,#tipo-q + .tipos,#tipo-q + .tipos + .tipo-nav,.recup,h2.paso:not(#tipo-q),.plt,.empty),
html[data-paso="preg"] .turno-sec>:is(#tipo-q,#tipo-q + .tipos,#tipo-q + .tipos + .tipo-nav,.tipos-g,.tipos-g + .tipos,.tipos-g + .tipos + .tipo-nav){display:none}
/* «Si pasó algo en el turno» (opción 2 de Paula, 29-oct-2026; app.js, tiposHTML): solo en el paso del tipo de nota, con el «Siguiente» que va debajo */
html[data-paso="proc"] .turno-sec>:is(.tipos-pasa,.tipos-pasa + .tipo-nav),html[data-paso="preg"] .turno-sec>:is(.tipos-pasa,.tipos-pasa + .tipo-nav){display:none}
/* BUSCADOR DE NOTAS (opción 1 de Paula, 29-oct-2026; app.js, tipoBuscaHTML): encima de la lista, solo en el paso del tipo de nota. Al
   buscar (.buscando) se esconden la lista y «Si pasó algo» y se ven los resultados. La lista ya no va justo después del título, así que
   aquí se esconde ella también en los otros pasos. */
html[data-paso="proc"] .turno-sec>:is(.tipos-busca,.tipos-busca + .tipos,.tipos-busca + .tipos + .tipo-nav),html[data-paso="preg"] .turno-sec>:is(.tipos-busca,.tipos-busca + .tipos,.tipos-busca + .tipos + .tipo-nav){display:none}
html .turno-sec>.tipos-busca.buscando + .tipos,html .turno-sec>.tipos-busca.buscando + .tipos + .tipos-pasa{display:none}
.tipos-busca{margin:0 0 12px}
.tb-caja{position:relative}
.tb-caja svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.tipos-busca .inp{padding:0 44px}
.tipos-busca .inp::placeholder{color:var(--ejemplo);opacity:1}
.tb-borra{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;font-size:22px;color:var(--mute);cursor:pointer}
.tb-borra[hidden]{display:none}
#tipos-res .tipos{margin:12px 0 0}
.tb-grupo{display:block;font:400 13px var(--f);color:var(--mute)}
html[data-p1] #tipos-res .tipos.tipos-tarj.tipos-tarj .tipo-t{display:block} /* el grupo va debajo del nombre */
.tb-nada{margin:12px 0 0;padding:16px;border-radius:14px;background:var(--card);font-size:15px;color:var(--mute)}
.tipos-pasa-t{margin:6px 0 8px;font:var(--te);color:var(--mute)}
.tipo-nav{display:flex;gap:10px;margin-top:12px}
.tipo-nav button{flex:1;min-height:52px;border-radius:12px;font:500 16px var(--head)}
.tipo-nav .plt-sig:disabled{opacity:.45;cursor:default}
/* Computador: la fila de la pregunta pone el nombre arriba y las opciones debajo (la columna es ancha y las ponía a la derecha) */
@media (min-width:1100px),(min-width:1024px) and (hover:hover) and (pointer:fine){
 .plt-una .plt-fila.plt-actual{grid-template-columns:1fr;row-gap:8px}
 .plt-una .plt-fila.plt-actual.sub .plt-q{padding-left:0}
}

/* ===== «AGREGAR PACIENTE» EN EL COMPUTADOR: punto amarillo «Falta» / ✓ verde «Listo» (opción 4 de Paula, 24-oct-2026; antes un circulito gris
   vacío que se ponía verde con ✓, «V1», que sigue en el celular). A la derecha de Cama, Sexo y Edad. (Esta misma marca iba en las secciones
   del paso 2 cuando eran secciones que se abren, commit ebee8a8.) */
:root{
 --marca-falta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23d9a400'/%3E%3C/svg%3E");
 --marca-listo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%2322a074'/%3E%3Cpath d='M4 7.2l2.1 2.1L10.2 5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (min-width:1100px),(min-width:1024px) and (hover:hover) and (pointer:fine){
 .ficha-fila.req{padding-right:96px}
 .ficha-fila.req::after{content:"Falta";width:auto;height:auto;margin-top:0;padding-left:20px;border:0;border-radius:0;background:var(--marca-falta) left center/14px no-repeat;transform:translateY(-50%);font:400 14px/1.3 var(--f);color:var(--borr-ink);white-space:nowrap}
 .ficha-fila.req.lleno::after{content:"Listo";border:0;background:var(--marca-listo) left center/14px no-repeat;color:var(--ok-ink)}
}

/* ===== MENÚ DEL CELULAR EN CAJÓN (opción 1 de Paula, 24-oct-2026; vista previa Noti App/vista-previa-menu) =====
   La app abre en Mi turno; las tres rayitas de la barra blanca abren el menú en un cajón que sale de la izquierda, encima de la
   pantalla, con lo de atrás borroso (como el menú que se recoge del computador). Bordes rectos; la ✕ queda donde estaban las rayitas.
   Solo por debajo de 960 px: desde ahí está la barra lateral y el cajón no se muestra. Responde al mouse y al dedo con la regla general
   (#cajon está en «RESPUESTA AL MOUSE Y AL DEDO»; las rayitas y la ✕ son .casa: no se elevan). */
#cajon{display:none}
@media (max-width:959px){
 #cajon{display:block}
 .cajon-velo{position:fixed;inset:0;z-index:48;background:var(--side-velo);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
 .cajon-panel.menu-movil{position:fixed;top:0;bottom:0;left:0;z-index:49;width:min(84vw,330px);margin:0;border-radius:0;padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--side-sombra);transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
 html[data-cajon],html[data-cajon] body{overflow:hidden}
 html[data-cajon] .cajon-velo{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
 html[data-cajon] .cajon-panel.menu-movil{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
 .cajon-cab{display:flex;align-items:center;gap:8px;min-height:52px;margin:0 0 8px;padding-bottom:4px}
 .cajon-cab .casa{margin-left:-7px;margin-right:-6px}
 .cajon-cab .logo i{display:none}
 .cajon-panel .yo{margin-top:auto}
}
@media (max-width:959px) and (prefers-reduced-motion:reduce){.cajon-velo,.cajon-panel.menu-movil{transition:none}}

/* ===== ABRIR TURNO: SERVICIOS EN TARJETAS CON ÍCONO (opción 1 de Paula, 25-oct-2026) =====
   Pedido: «más llamativo, con algún ícono, diferente al resto de las preguntas; Próximamente en azulito, con candaditos; más interactivo y
   bonito» (antes eran botones grises sueltos, «se ve tan triste»). Vista previa: Noti App/vista-previa-abrir-turno (?ab=1). Cada servicio es
   una tarjeta blanca con su ícono en un círculo azul clarito; el elegido se pinta de azul (borde de 2 px, fondo clarito, círculo azul lleno y
   ✓ arriba a la derecha). Los que vienen después NO van en gris: candado y «Próximamente» en cápsula azulita. 2 × 2 en el celular, 4 en
   fila desde 700 px. El código está en vAbrir/srvBtn (app.js); .areas sigue para Agregar paciente. */
.srv-q{margin-bottom:14px}
.srv-grid{display:grid;gap:12px}
.srv{position:relative;min-width:0;border:1px solid var(--line-boton);border-radius:var(--r);background:var(--card);color:var(--ink);box-shadow:var(--sombra);font:500 16px/1.25 var(--head);transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s,transform .15s}
.srv-ico{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;background:var(--sel-bg);color:var(--pri);transition:background-color .15s,color .15s}
.srv-n{min-width:0;overflow-wrap:anywhere}
.srv.on{border:2px solid var(--pri);background:var(--sel-bg);color:var(--sel-tx)}
.srv.on .srv-ico{background:var(--pri);color:var(--pri-ink)}
/* Circulito para elegir: vacío / azul con ✓ */
.srv-ok{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-boton);background:var(--card);display:grid;place-items:center}
.srv.on .srv-ok{border-color:var(--pri);background:var(--pri)}
.srv.on .srv-ok::after{content:"";width:14px;height:14px;background:var(--pri-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 8'/%3E%3C/svg%3E") center/contain no-repeat}
/* Los que vienen después: tarjeta blanca sin sombra, ícono en azul suave, «Próximamente» en cápsula azulita con candado */
.srv-pronto{box-shadow:none;color:color-mix(in srgb,var(--ink) 72%,var(--card))}
.srv-pronto .srv-ico{background:color-mix(in srgb,var(--sel-bg) 70%,var(--card));color:color-mix(in srgb,var(--pri) 60%,var(--card))}
.srv-prox{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--sel-bg);color:var(--sel-tx);font:500 12px/1.3 var(--head);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.srv,.srv-ico{transition:none}}
.srv-tarjetas{grid-template-columns:1fr 1fr}
.srv-tarjetas .srv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:156px;padding:20px 10px 16px;text-align:center}
.srv-tarjetas .srv-ok{position:absolute;top:10px;right:10px}
@media (min-width:700px){.srv-tarjetas{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== NOTAS CON CANDADO EN EL PASO 1 (lista completa de Paula, 25-oct-2026) =====
   Las notas que todavía no tienen plantilla (Traslado a cirugía o UCI, Ingreso al servicio, Ingreso a aislamiento, Egreso, Remisión y, en
   Notas de rutina, Toma de muestra): en vez de la bolita, un candadito azul suave; el nombre un poco más claro y debajo «Próximamente» en la
   cápsula azulita de «Abrir turno» (.srv-prox). Un solo candado por nota. Sin guiones en sus nombres. Al tocarlas, tipoPronto avisa. */
html[data-p1="2"] .tipos.tipos button.pronto{color:color-mix(in srgb,var(--ink) 72%,var(--card));cursor:pointer}
html[data-p1="2"] .tipos.tipos button.pronto::before{border:0;border-radius:0;background:color-mix(in srgb,var(--pri) 60%,var(--card));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/20px no-repeat}
.tipos .tipo-t .srv-prox{display:flex;width:max-content;max-width:100%;margin-top:6px;padding:3px 10px}
html[data-p1="2"] .tipos.tipos button.pronto .tipo-t{-webkit-hyphens:manual;hyphens:manual}

/* ===== ÍCONOS EN EL TIPO DE NOTA, EN TARJETAS (versión B de Paula, 25-oct-2026) =====
   Solo en el paso 1 (.tipos-ico.tipos-tarj; los procedimientos de Notas de rutina siguen en la lista de siempre). Una tarjeta por nota, como
   los servicios de «Abrir turno»: el ícono en un círculo azul clarito y el nombre debajo, ARRIBA y alineados en todas las tarjetas (pedido de
   Paula); la elegida, borde azul de 2 px, fondo clarito y círculo azul lleno con el ícono blanco; las de candado, sin sombra, con el círculo y
   el nombre más suaves y «🔒 Próximamente» en la cápsula azulita debajo del nombre. Dos por fila en el celular, cuatro donde caben (130 px).
   TAMAÑO «Más pequeñas» (opción 2 de Paula, 25-oct-2026: «que no toque deslizar tanto»): tarjetas de 88 px, ícono de 38, letra de 14 y
   cápsula de 11; en un celular de 375 × 812 el paso 1 cabe entero con «Siguiente» (antes había que deslizar 212 px). */
html[data-p1="2"] .tipos.tipos-ico button.con-ico::before{display:none}
.tipo-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--sel-bg);color:var(--pri);transition:background-color .15s,color .15s}
.tipo-ico svg{width:24px;height:24px}
.tipos button.on .tipo-ico{background:var(--pri);color:var(--pri-ink)}
.tipos button.pronto .tipo-ico{background:color-mix(in srgb,var(--sel-bg) 70%,var(--card));color:color-mix(in srgb,var(--pri) 60%,var(--card))}
.tipos-ico .tipo-t .srv-prox{gap:5px;padding:3px 10px 3px 8px}
@media (prefers-reduced-motion:reduce){.tipo-ico{transition:none}}
html[data-p1="2"] .tipos.tipos-tarj{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;background:none;box-shadow:none;border-radius:0;overflow:visible}
html[data-p1="2"] .tipos.tipos-tarj button:nth-child(n):nth-child(n){flex-direction:column;justify-content:flex-start;gap:5px;min-height:88px;padding:11px 6px 9px;text-align:center;border:1px solid var(--line-boton);border-radius:var(--r);background:var(--card);box-shadow:var(--sombra);overflow:hidden}
html[data-p1="2"] .tipos.tipos-tarj button.pronto:nth-child(n){box-shadow:none}
html[data-p1="2"] .tipos.tipos-tarj button.on.on:not(.alm){border:2px solid var(--pri);background:var(--sel-bg);color:var(--sel-tx)}
.tipos-tarj .tipo-ico{width:38px;height:38px}
.tipos-tarj .tipo-ico svg{width:21px;height:21px}
html[data-p1="2"] .tipos.tipos-tarj .tipo-t{display:block;text-align:center;-webkit-hyphens:manual;hyphens:manual;font-size:14px}
.tipos-tarj .tipo-t .srv-prox{margin:4px auto 0;font-size:11px;padding:2px 8px 2px 6px}
.tipos-tarj .tipo-t .srv-prox svg{flex:none}
/* ===== DIAGNÓSTICO CON BUSCADOR en el Recibo de turno (pedido de Paula, 28-oct-2026; app.js «DIAGNÓSTICO CON BUSCADOR»). Usa las mismas
   piezas de «Agregar paciente» (.results, .chosen, .tagx); aquí solo el botón «Usar … tal como lo escribí». */
.dx-busca .results .empty{margin:4px 0 0}
.dx-busca .dx-tal{border-style:dashed;color:var(--sel-tx);font-weight:500}
/* ===== «SI APLICA» → PRIMERO SÍ O NO (pedido de Paula, 28-oct-2026; app.js «SI APLICA»). Sí y No van uno al lado del otro; con «Sí», la
   fila de siempre va debajo sin repetir su nombre (queda para el lector de pantalla). */
.plt-una .plt-actual .chips.plt-sino{flex-direction:row}
html[data-sistema] .plt-una .plt-actual .plt-sino .chip{flex:1;width:auto}
.plt-ap-desc{margin:0;color:var(--mute);font-size:15px;line-height:1.4}
.plt-ap-op>.plt-q{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== TIPO DE NOTA EN LISTA (opción 1 de Paula, 28-oct-2026: «esos cuadros no me gustan… que sea una lista»; vista previa en
   Noti App/vista-previa-tipos-lista, ?ls=1). Reemplaza a las tarjetas con ícono del paso 1 (bloque «ÍCONOS EN EL TIPO DE NOTA, EN TARJETAS»,
   que sigue arriba pero queda tapado por este): una tarjeta blanca con una nota por renglón y líneas finas entre ellas, la bolita de elegir a
   la izquierda (azul con punto al elegirla) y, en las que faltan, el candado en lugar de la bolita y «Próximamente» a la derecha. Los íconos
   (ICO_TIPO en app.js) siguen en el HTML pero no se ven. Mismas notas y mismo orden. Los procedimientos de «De rutina» no cambian. */
html[data-p1="2"] .tipos.tipos-tarj.tipos-tarj{grid-template-columns:1fr;gap:0;background:var(--card);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden}
html[data-p1="2"] .tipos.tipos-tarj.tipos-tarj button:nth-child(n):nth-child(n){flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:52px;padding:8px 16px;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--card);box-shadow:none;color:var(--ink)}
html[data-p1="2"] .tipos.tipos-tarj.tipos-tarj button:last-child:nth-child(n):nth-child(n):nth-child(n){border-bottom:0}
html[data-p1="2"] .tipos.tipos-tarj.tipos-tarj .tipo-t{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font:var(--t3)}
html[data-p1="2"] .tipos.tipos-tarj .tipo-t .srv-prox{flex:none;margin:0;font-size:12px;padding:3px 10px}
html[data-p1="2"] .tipos.tipos-tarj button.pronto:nth-child(n){color:color-mix(in srgb,var(--ink) 72%,var(--card))}
html[data-p1="2"] .tipos.tipos-tarj .tipo-ico{display:none}
html[data-p1="2"] .tipos.tipos-ico.tipos-tarj button.con-ico::before{display:block}
html[data-p1="2"] .tipos.tipos-tarj .tipo-t .srv-prox svg{display:none}
html[data-p1="2"] .tipos.tipos-tarj.tipos-tarj button.on.on:not(.alm){border:0;border-bottom:1px solid var(--line);background:var(--card);color:var(--on)}
/* ===== NÚMEROS EN RUEDA (pedido de Paula, 28-oct-2026; app.js «NÚMEROS EN RUEDA»). Usa las piezas de la rueda de la hora (.hora-*): una sola
   rueda, angosta. Sin escoger, la franja del centro va gris; escogida, azul. */
.rueda-num{max-width:140px}
.rueda-num:not(.elegida)::before{background:var(--card);border-style:dashed}

/* ===== TEXTOS DE EJEMPLO MUY CLARITO (opción 3 de Paula, 28-oct-2026: «los datos que son de ejemplo, aquí y en toda la plataforma, mucho
   más claritos»; vista previa en Noti App/vista-previa-ejemplos). Todos los textos de ejemplo de los campos («Ej: 304», «Ej: 67», «Escribe:
   EPOC…», buscador de camas, correo del login, plantillas, opinión) en un gris muy clarito; lo que se escribe sigue en el color de siempre. */
html[data-sistema]{--ejemplo:#bcc4cc}
html[data-sistema] :is(input,textarea)::placeholder{color:var(--ejemplo);opacity:1}
/* ===== «IR A GUARDAR» RESALTA EL BORRADOR (computador; pedido de Paula, 28-oct-2026; app.js irAlBorrador): un rectángulo alrededor del
   borrador por un momento. En el celular se abre la hoja del borrador. */
.previa{outline:3px solid transparent;outline-offset:-3px;transition:outline-color .6s} /* por dentro: la columna de la derecha recorta lo que sale del borde */
.previa.resalta{outline-color:var(--sel-ln)}
@media (prefers-reduced-motion:reduce){.previa{transition:none}}

/* ===== AGREGAR PACIENTE «LIMPIA» (opción 1 de Paula, 28-oct-2026: «se ve tan enredadita… muchísimo más simple»; vista previa en
   Noti App/vista-previa-agregar/agregar.html). La misma tarjeta blanca, sin íconos ni circulitos de «Falta/Listo»: el nombre de cada dato
   pequeño y gris ENCIMA de su casilla, Femenino/Masculino en dos botones con borde (el elegido azul clarito con borde azul) y la edad con
   «días · meses · años» al lado, sin la rayita. Igual en el celular y en el computador. Solo CSS: app.js no cambia. */
html[data-sistema] .ficha .ficha-fila,html[data-sistema] .ficha .ficha-fila.req{display:block;min-height:0;padding:12px 16px}
html[data-sistema] .ficha .ficha-fila.req::after{content:none;display:none}
html[data-sistema] .ficha .ficha-fila .q::before{display:none}
html[data-sistema][data-linea][data-tipo] .ficha .ficha-fila .q,html[data-sistema][data-linea][data-tipo] .ficha .ficha-fila .q label{display:block;margin:0 0 4px;font:500 13px/1.3 var(--head);color:var(--mute)}
html[data-sistema] .ficha .ficha-fila .inp{display:block;width:100%;min-height:36px}
html[data-sistema][data-linea][data-tipo] .ficha .ficha-fila .sexo{display:flex;gap:8px;max-width:420px;margin:0}
html[data-sistema][data-linea][data-tipo] .ficha .ficha-fila .sexo button{flex:1;min-height:44px;padding:0 12px;border:1px solid var(--line-boton);border-radius:12px;background:var(--card);color:var(--ink);font:400 16px var(--f)}
html[data-sistema][data-linea][data-tipo] .ficha .ficha-fila .sexo button.on.on{border:2px solid var(--sel-ln);background:var(--sel-bg);color:var(--sel-tx);font:600 16px var(--f)}
html[data-sistema] .ficha .ficha-fila .edad{display:flex;align-items:center;gap:8px}
html[data-sistema] .ficha .ficha-fila .edad input.inp{flex:none;width:70px}
html[data-sistema] .ficha .ficha-fila .edad-u{gap:4px;padding-left:0}
html[data-sistema] .ficha .ficha-fila .edad-u::before{display:none}
html[data-sistema] .ficha .ficha-fila .edad-u button{min-height:44px;padding:0 10px;border-radius:10px}
html[data-sistema] .aviso-corto{margin:14px 2px 0;color:var(--mute);font:400 13px/1.45 var(--f)}

/* ===== «NOTIAPP COMO APP» COMO EN CLINICAL HUB (pedido de Paula, 28-oct-2026; opción A de Clinical Hub, «más concisa»). Arriba el celular
   de quien la abre y abajo el otro; cada uno con su tira de pasos: el celular dibujado (.acc-cel, el mismo de antes) y una línea con su número.
   En el computador se ven en fila; en el celular la tira se desliza hacia el lado y se asoma el siguiente. ===== */
.acc-guia{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.acc-so{min-width:0}
.acc-so-tit{margin:0 0 12px;font:500 19px/1.3 var(--head);color:var(--ink)}
.acc-so-tit small{display:block;margin-top:2px;font:400 14px var(--f);color:var(--mute)}
.acc-guia .acc-ya{margin:0 0 14px}
.acc-tira{display:flex;gap:12px;margin:0;padding:4px 2px 10px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.acc-tira::-webkit-scrollbar{display:none}
.acc-tira li{flex:none;width:160px;display:flex;flex-direction:column;align-items:center;gap:12px;scroll-snap-align:start}
.acc-tira p{display:flex;gap:8px;width:100%;margin:0;font:400 14px/1.45 var(--f);color:var(--mute)}
.acc-tira b{font-weight:600;color:var(--ink)}
.acc-n{display:grid;flex:none;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sel-bg);color:var(--sel-tx);font:500 12px var(--head)}
.acc-guia .acc-nota{margin:0}
@media (max-width:720px){.acc-tira{margin-right:-16px;padding-right:16px}}

/* ===== CUADRITO CON LA HERIDA ARRIBA DE SUS PREGUNTAS (opción 1 de Paula, 29-oct-2026; app.js herMiniHTML) =====
   El cuerpo recortado alrededor de la herida (96 × 110), a la izquierda; a la derecha su nombre y dónde está. Una línea fina lo separa de la pregunta. */
.her-mini{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line)} /* ocupa todo el ancho: la pregunta y su respuesta quedan debajo, en su sitio */
.her-mini-cuerpo{position:relative;flex:none;width:96px;height:110px;overflow:hidden;border-radius:10px;background:color-mix(in srgb,var(--line) 45%,var(--card))}
.her-mini-cuerpo>div{position:absolute}
.her-mini-cuerpo img{display:block;width:100%;height:auto}
.her-mini-cuerpo svg{position:absolute;inset:0;width:100%;height:100%}
.her-mini p{margin:0;min-width:0;font:400 14px/1.4 var(--f);color:var(--mute)}
.her-mini b{display:block;font:500 15px/1.3 var(--head);color:var(--ink)}

/* ===== «BORRAR TODO» PARA TODO Y LA X DE CADA QUEMADURA (pedido de Paula, 29-oct-2026; app.js herBorrarTodo, qmMostrarX) =====
   «Borrar todo» va debajo del cuerpo, a la derecha, en rojo (regla .rojo). La X de una mancha de quemadura es igual a la de las heridas y
   solo se ve mientras se pintan quemaduras. */
.her-todo-fila{display:flex;justify-content:flex-end;margin:8px 0 0}
.her-todo{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:inherit;font-size:15px;cursor:pointer}
.her-todo:focus-visible{outline:3px solid var(--her-azul);outline-offset:2px}
.qm-cerrar{position:absolute;z-index:5;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;transform:translate(-50%,-50%);cursor:pointer;touch-action:manipulation}
.qm-cerrar span{display:grid;place-items:center;width:14px;height:14px;border:1.5px solid var(--her-linea);border-radius:50%;background:var(--card);color:var(--her-linea)}
.qm-cerrar svg{width:6px;height:6px}
.qm-cerrar:focus-visible{outline:none}
.qm-cerrar:focus-visible span{outline:3px solid var(--her-azul);outline-offset:2px}
.plt-fila:not(.les-pinta) .her-lienzo .qm-cerrar{display:none}

/* ===== LUGARES PREMARCADOS (pedido de Paula, 29-oct-2026; app.js lesPreDibujar) =====
   Círculo punteado azul en los lugares más frecuentes del tipo escogido; al pasar el mouse (o con el teclado) dice su nombre. 28 px para
   tocarlo sin tapar el dibujo; no salen mientras se pintan quemaduras. */
.les-pre{position:absolute;z-index:4;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;margin:-14px 0 0 -14px;cursor:pointer;touch-action:manipulation}
.les-pre span{width:14px;height:14px;border:1.5px dashed var(--her-azul);border-radius:50%;background:color-mix(in srgb,var(--her-azul) 14%,transparent)}
.les-pre:hover span,.les-pre:focus-visible span{border-style:solid;background:color-mix(in srgb,var(--her-azul) 32%,transparent)}
.les-pre::after{content:attr(data-n);position:absolute;bottom:calc(100% + 2px);left:50%;z-index:6;padding:3px 8px;border-radius:8px;background:var(--ink);color:var(--card);font:500 12px/1.3 var(--head);white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none}
.les-pre:hover::after,.les-pre:focus-visible::after{opacity:1}
.les-pre:focus-visible{outline:none}
.les-pinta .les-pre{display:none}

/* ===== LETRERO de los lugares premarcados (pedido de Paula, 29-oct-2026; app.js LES_LETRERO) =====
   Memito amarillo de un renglón debajo de los botones de tipo: circulito → «Lugares habituales que puedes seleccionar» | «También puedes
   marcar en otras partes.» Siempre UN renglón con la rayita en el medio (opción 2 de Paula, 29-oct-2026, vista previa
   Noti App/vista-previa-premarcados/public/letrero-anchos.html): el texto se acorta según el ancho del letrero. Con 560 px o más, completo;
   más angosto (computador con la nota al lado), «Lugares habituales | Puedes marcar en otras partes»; menos de 372 px (celular),
   «Lugares habituales | o marca en otra parte» con la letra un poco más pequeña. */
.les-letrero{container-type:inline-size}
.les-letrero[hidden]{display:none}
.les-letrero p{display:flex;align-items:center;margin:0;padding:7px 12px;border:1px solid var(--amarillo-line);border-radius:8px;background:var(--amarillo);color:var(--amarillo-ink);font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden}
.les-letrero b{font-family:var(--head);font-weight:500}
.les-letrero-t{display:flex;align-items:center;gap:6px;flex:none}
.les-letrero-c{flex:none}
.les-letrero-o{flex:none;width:14px;height:14px;border:1.5px dashed var(--her-azul);border-radius:50%;background:color-mix(in srgb,var(--her-azul) 14%,transparent)}
.les-letrero-f{flex:none;width:16px;height:10px}
.les-letrero-l{flex:none;align-self:stretch;width:1px;margin:0 10px;background:color-mix(in srgb,var(--amarillo-ink) 35%,transparent)}
.les-letrero-m,.les-letrero-s{display:none}
@container (max-width:559px){.les-letrero-g{display:none}.les-letrero-m{display:inline}}
@container (max-width:371px){
 .les-letrero p{padding:7px 8px;font-size:11.5px}
 .les-letrero-t{gap:4px}
 .les-letrero-l{margin:0 7px}
 .les-letrero-m{display:none}.les-letrero-s{display:inline}
}

/* ===== ÚLCERAS PINTADAS (pedido de Paula, 29-oct-2026; app.js «ÚLCERAS PINTADAS») =====
   Con úlcera por presión o venosa escogida (.les-pinta-ul en la fila) el dedo pinta sobre la piel; fuera del cuerpo mueve la página. */
.les-pinta-ul .her-lienzo{cursor:crosshair} /* el dedo sobre la piel no mueve la página: lo frena ulEventos (touchstart); fuera del cuerpo sí */
.les-pinta-ul .her-tramo{pointer-events:none}

/* ---------- OPCIONES EN VERDE Y ROJO (pedido de Paula, 29-oct-2026; opción 3 «letra y bolita» de Noti App/vista-previa-colores) ----------
   Al responder: lo normal con letra y bolita verde menta (--ok, elegido por Paula el 13-oct) y lo anormal en rojo (--alm). La elegida, con
   borde y bolita llenos de su color en vez del azul. Qué es normal y qué no: COLOR_OPC en app.js (data-col en cada opción). */
#plt .chip[data-col="ok"]{color:var(--ok-ink)}
#plt .chip[data-col="mal"]{color:var(--alm)}
#plt .chip[data-col="ok"]::before{border-color:var(--ok)}
#plt .chip[data-col="mal"]::before{border-color:var(--alm)}
#plt .chip.on[data-col="ok"]{background:var(--ok-soft);border:2px solid var(--ok);color:var(--ok-ink)}
#plt .chip.on[data-col="mal"]{background:var(--alm-soft);border:2px solid var(--alm);color:var(--alm)}
#plt .chip.on[data-col="ok"]::before{border-color:var(--ok);background:var(--ok);box-shadow:inset 0 0 0 4px var(--card)}
#plt .chip.on[data-col="mal"]::before{border-color:var(--alm);background:var(--alm);box-shadow:inset 0 0 0 4px var(--card)}
#plt .plt-multi .chip.on:is([data-col="ok"],[data-col="mal"])::before{box-shadow:inset 0 0 0 3px var(--card)}

/* ---------- ESCALA DE GLASGOW (opción 3 «tabla compacta», 29-oct-2026; vista previa en Noti App/vista-previa-glasgow) ----------
   Tres columnas tocables; arriba el total. Verde la mejor respuesta de cada columna y rojo las demás, como las opciones (--ok / --alm). */
.glas-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--sel-bg);color:var(--sel-tx);font:600 17px var(--head)}
.glas-total b{font-size:22px}
.glas-total span{font:500 14px var(--head);color:var(--mute)}
.glas-tabla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.glas-col{display:flex;flex-direction:column;gap:6px}
.glas-col h4{margin:0 0 2px;font:600 14px var(--head);text-align:center;color:var(--ink)}
.glas-celda{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:6px;border:1px solid var(--line-boton);border-radius:10px;background:var(--card);font:inherit;font-size:12.5px;line-height:1.2;text-align:left;cursor:pointer;-webkit-hyphens:auto;hyphens:auto} /* palabras largas con guion, en español */
.glas-celda b{font:600 16px var(--head)}
.glas-celda[data-col="ok"]{color:var(--ok-ink)}
.glas-celda[data-col="mal"]{color:var(--alm)}
.glas-celda.on[data-col="ok"]{background:var(--ok-soft);border:2px solid var(--ok)}
.glas-celda.on[data-col="mal"]{background:var(--alm-soft);border:2px solid var(--alm)}
.glas-celda:focus-visible{outline:3px solid var(--sel-ln,var(--pri));outline-offset:2px}

/* ---------- GUÍA DE GRADOS DE LAS HERIDAS (opción 1 «debajo de cada opción», 29-oct-2026; vista previa en Noti App/vista-previa-guia-heridas)
   La descripción va en gris debajo del nombre del grado o del borde; la profundidad trae los pasos para medirla. */
#plt .chip.con-desc::before{align-self:flex-start;margin-top:2px}
.op-tx{display:flex;flex-direction:column;gap:2px;text-align:left}
.op-desc{font:400 14px/1.35 var(--f);color:var(--mute)}
.guia-prof{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:15px;line-height:1.4}
.guia-prof b{display:block;margin-bottom:2px;font:600 15px var(--head)}
.guia-prof ol{margin:0;padding-left:20px}
.qm-desc{margin:4px 0 10px;font-size:14px;line-height:1.35;color:var(--mute)} /* guía del grado de quemadura, debajo de la paleta */
.qm-desc b{color:var(--ink);font-family:var(--head)}
/* Aviso de seguridad en las preguntas (plan de mejoras 29-oct-2026: pH de la sonda, vía aérea, aislamiento, cuerpo extraño en el oído). No sale en la nota. */
.plt-aviso{margin:0;padding:10px 12px;border-radius:12px;background:var(--amarillo);color:var(--amarillo-ink);box-shadow:inset 0 0 0 1px var(--amarillo-line);font-size:15px;line-height:1.4}

/* ===== ESTILO KOS (opción 1 de Paula, 29-oct-2026, noche; vista previa Noti App/vista-previa-todo-normal/kos.html?op=1), CON EL DEGRADADO
   Y EL BORRADOR DE ANTES (opción 2 de vista-previa-todo-normal/kos-degradado.html: «quiero que el fondo en degradé y la estética de la nota
   borrador se mantengan»). El fondo menta → celeste, la hoja de abajo del celular y la hojita amarilla cuadriculada del borrador quedan como
   estaban; lo demás es estilo Kos. =====
   «El estilo de Kos es más elegante, más simple y sutil… algo así, pero con lo que tenemos». Mismos colores de NotiApp; cambia el
   tratamiento: letra DM Sans liviana en toda la app (los pesos 600/700 de antes pasaron a 500/600), el fondo en degradado de siempre,
   tarjetas blancas con línea fina y sombra muy suave, estados con un puntito de color (sin recuadros amarillos), opciones de la nota en gris
   clarito (la elegida azul con ✓; lo normal y lo malo con un puntito verde o rojo), encabezado de la cama sin franja azul, «Todo normal»
   verde con letra blanca, barra de abajo blanca, fondo de un solo tono aguamarina clarito; el borrador sigue en su hojita amarilla y la nota final en su hoja cuadriculada con membrete azul. Todo lo de este bloque va aquí, al final. */
html[data-sistema]{
 --f:"DM Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--head:"DM Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
 --sup-kos:#f4f6f9;--linea-kos:#e3e8ef;--ink-2:#3f4a56;--punto-aviso:#d39b1c;
 --sombra-kos:0 10px 30px rgb(26 115 201 / .06);
 --fondo-app:#e7f8f6; /* fondo de un solo tono, aguamarina clarito (opción 2 de Paula, 29-oct-2026, noche; vista previa vista-previa-todo-normal/fondo.html?f=2) */
}
/* Tarjetas: línea fina (anillo de 1 px) + sombra muy suave, esquinas de 12 */
html[data-sobrio="1"][data-sistema]{--r:12px;--sombra:0 0 0 1px var(--linea-kos),var(--sombra-kos)}
/* Fondo de UN SOLO TONO en todas las pantallas (Paula: «que no sea un degradé, pero sí un tono intermedio»), en vez del degradado
   menta → celeste. Términos y Privacidad siguen en blanco. */
html[data-sistema] body,html[data-sistema] .top{background:var(--fondo-app)}
html[data-sistema] body:has(> .doc){background:var(--card)}
/* La franja de arriba del celular (logo y menú) sobre el fondo, sin banda blanca */
html[data-sistema] .cabecera{background:none;box-shadow:none}

/* --- Encabezado de la cama: sin franja azul, letra oscura sobre el fondo (sigue fijo arriba al bajar: el mismo color, estirado con una
   sombra sin difuminar, tapa lo que pasa por debajo; la sombra no ensancha la página en el celular) --- */
html[data-sistema] .top.top-cama::before{background:var(--fondo-app);box-shadow:0 0 0 100vmax var(--fondo-app)}
html[data-sistema] .top.top-cama{color:var(--ink)}
html[data-sistema] .top.top-cama .who b,html[data-sistema] .top.top-cama .cama-btn{color:var(--ink);font-weight:500}
html[data-sistema] .top.top-cama .who span{color:var(--mute)}
html[data-sistema] .top.top-cama .cama-btn svg,html[data-sistema] .top.top-cama .cama-atras{color:var(--ink-2)}
html[data-sistema] .top.top-cama .cama-borrar{color:var(--alm)}
html[data-sistema] .top.top-cama :focus-visible{outline-color:var(--sel-ln)}
html[data-sistema] .top .who b{font-weight:500}

/* --- «Estás haciendo nota»: una línea de texto, sin recuadro amarillo --- */
html[data-sistema] .cambiar-nota{border:0;background:none;padding:0;color:var(--mute)}
html[data-sistema] .cambiar-nota b{color:var(--ink);font-weight:500}
html[data-sistema] .cambiar-nota svg{display:none}
html[data-sistema] .cambiar-nota button{font-weight:500}

/* --- Pasos: sin el circulito con el número; el nombre del paso en gris --- */
html[data-sistema] .paso i{display:none}
html[data-sistema][data-tipo] .turno-sec .paso,html[data-sistema][data-tipo] .turno-nota .paso{color:var(--mute);font:400 15px/1.35 var(--f)}

/* --- Sección del paso 2: «Todo normal» verde suave, barrita delgada --- */
/* «Todo normal» verde con letra blanca (pedido de Paula, 29-oct-2026, noche: «que todo normal sea verde y el texto blanco») */
html[data-sistema] .plt-prog-t .plt-normal,html[data-sistema] .plt-prog-t .plt-normal[aria-pressed="true"]{min-height:40px;padding:0 12px;border:0;border-radius:8px;background:var(--ok-ink);color:var(--card);font-weight:500}
html[data-sistema] .plt-avance{height:4px}
html[data-sistema] .plt-prog-n{color:var(--mute);font-weight:400}

/* --- Opciones de la nota: gris clarito sin borde; la elegida azul clarito con ✓; lo normal y lo malo con un puntito --- */
html[data-sistema] #plt .chip{border:0;border-radius:8px;background:var(--sup-kos);color:var(--ink);box-shadow:none}
html[data-sistema] .plt-una .plt-actual .chip{min-height:48px;padding:10px 14px;border-radius:8px;font-size:16px;gap:10px}
html[data-sistema] .plt-una .plt-actual.plt-dep .chip{min-height:44px;padding:8px 12px}
html[data-sistema] #plt .plt-actual .chip::before{width:7px;height:7px;border:0;border-radius:50%;background:transparent;box-shadow:none}
html[data-sistema] #plt .chip[data-col="ok"],html[data-sistema] #plt .chip[data-col="mal"]{color:var(--ink)}
html[data-sistema] #plt .chip[data-col="ok"]::before{background:var(--ok)}
html[data-sistema] #plt .chip[data-col="mal"]::before{background:var(--alm)}
html[data-sistema] #plt .chip.on,html[data-sistema] #plt .chip.on:is([data-col="ok"],[data-col="mal"]){border:0;background:var(--sel-bg);color:var(--sel-tx);font-weight:500}
html[data-sistema] #plt .chip.on::after{content:"✓";margin-left:auto;padding-left:8px;color:var(--sel-tx)}
html[data-sistema] #plt .plt-sino .chip.on::after{margin-left:0}

/* --- Botones: esquinas de 8 y letra 500 --- */
html[data-sistema] .big{border-radius:8px;font-weight:500}
html[data-linea="1"][data-sistema] :is(.ghost,.sync){border-radius:8px;border-color:var(--linea-kos);font-weight:500}

/* --- Mi turno: «Cama 304» como texto (sin cuadrito) y el estado con un puntito --- */
html[data-sistema] .pac-num{width:auto;height:auto;flex-direction:row;align-items:baseline;gap:4px;padding:0;background:none}
html[data-sistema][data-tipo] .pac .pac-num small,html[data-sistema][data-tipo] .pac .pac-num b{font:500 17px/1.3 var(--head);color:var(--ink)}
html[data-sistema] .est,html[data-linea="1"] .est{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;border-radius:0;background:none}
html[data-sistema] .est::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
html[data-sistema] .est.falta{color:var(--amarillo-ink)}
html[data-sistema] .est.falta::before{background:var(--punto-aviso)}
html[data-sistema] .est.ok{color:var(--ok-ink)}
html[data-sistema] .est.ok::before{background:var(--ok)}
html[data-sistema] .est.incompleta{color:var(--borr-ink)}
html[data-sistema] .est.incompleta::before{background:var(--punto-aviso)}
html[data-sistema] .est.vacio{color:var(--mute)}
html[data-sistema] .est.vacio::before{background:var(--line-boton)}
html[data-sistema] .pac-ver{color:var(--ink-2);font-weight:500}
html[data-sistema] .pac-abrir{flex-direction:column;align-items:flex-start;gap:2px}
html[data-sistema] .pac-abrir .pac-t{width:100%}
html[data-tipo="1"][data-sistema] .pac .pac-t>b{font-weight:400;color:var(--ink-2)}

/* --- Barra de abajo del celular: blanca con línea arriba; Borrador amarillo (como antes) y Nota final azul --- */
@media not all and (min-width:1100px){
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
 html[data-sistema] .hojas-barra{gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px) * .5);background:var(--card);box-shadow:0 -1px 0 var(--linea-kos)}
 html[data-sistema] .hb-btn{min-height:50px;padding:0 8px;border-radius:8px;font-weight:500}
 /* «Borrador» sigue amarillo como antes (pedido de Paula, 29-oct-2026, noche: «¿por qué la de borrador no sigue amarilla?») */
}}


/* --- Nota final: como antes (hoja con cuadrícula celeste y membrete azul de lado a lado), pero el título sin mayúsculas (opción 2 de Paula,
   29-oct-2026, noche; vista previa Noti App/vista-previa-todo-normal/nota-final.html?op=2: «no puede verse como las tarjetas de preguntas») --- */
html[data-nota^="g"][data-tipo] .note.nf h2{text-transform:none}

/* Hoja que sube (Borrador / Nota final) y barra de abajo, A LA DERECHA DEL MENÚ DE ÍCONOS (pedido de Paula, 29-oct-2026, noche): en un
   computador con la ventana angosta (960 a 1023 px con mouse) el menú lateral de íconos se ve y la hoja y la barra salían desde el borde
   izquierdo, por debajo del menú: se tapaba el comienzo («…dor», «…den médica»). Ahora empiezan donde termina el menú. */
@media not all and (min-width:1100px){
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
@media (min-width:960px) and (hover:hover) and (pointer:fine){ /* solo donde se ve el menú de íconos (en el celular no hay) */
 .shell:has(.side:not([hidden])) .turno .turno-nota,.shell:has(.side:not([hidden])) .hojas-barra{left:var(--ancho-rail)}
}}}