/* Panel de profes y dueño (DISENO.md, F4; F5: organización por lo que hace el profe y listas agrupadas como Neto). Tokens, botones, opciones, segmentados, cajas y estados: comun.css (copia
   igual en formulario_web/). Mismos roles de color que el formulario: acción = amarillo OVA; rojo solo salud y error;
   verde solo "listo"; el foco tiene su azul. Atkinson Hyperlegible en todo; Bebas solo en la marca "OVA GYM". */
html,body{min-height:100%}
body{display:flex;flex-direction:column}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],textarea{width:100%;min-height:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;font-size:16px;line-height:24px}
input[type=number]{max-width:140px;font-family:var(--mono)}
textarea{min-height:96px;resize:vertical}
[aria-invalid="true"]{border-color:var(--alerta)!important}

/* ---------- cabecera (rediseño 08/10): negra y fija como la de la web oficial, con el logo de OVA ----------
   Marca a la izquierda (logo + "OVA" en Bebas amarilla + "PANEL"), 4 destinos (Hoy · Socios · Listas · Cuenta) y el
   chip "Sin señal". En el celular los destinos van abajo, al alcance del pulgar (Neto 114: ícono + texto, el activo con
   una pastilla); desde 760 px van en la cabecera. Con letra grande la cabecera baja de renglón: nada se sale. */
:root{--nav-h:68px;--safe-b:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(var(--cab-h) + 16px)}
@media (max-width:759px){html{scroll-padding-bottom:calc(var(--nav-h) + var(--safe-b) + 16px)}}
.top{position:sticky;top:0;z-index:10;background:var(--cab-fondo);color:var(--cab-texto)}
.top :focus-visible{outline-color:var(--cab-foco)}
.top-in{max-width:1080px;margin:0 auto;padding:6px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:var(--cab-h)}
.marca{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto;text-decoration:none;color:inherit}
.marca img{width:40px;height:40px;flex:none}
.brandname{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:.01em;color:var(--amarillo);white-space:nowrap;padding-top:4px}
.brandname small{font-family:var(--font);font-size:12px;line-height:16px;font-weight:700;color:var(--cab-texto);margin-left:8px;letter-spacing:.12em;text-transform:uppercase;vertical-align:6px}
@media (max-width:380px){.marca img{width:36px;height:36px}.brandname{font-size:28px}}
/* "Sin señal" es neutro: el rojo queda para salud y errores (DISENO 1.9); ícono + texto, nunca solo color */
.chip-senal{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--cab-suave);border-radius:var(--pill);background:transparent;font-size:14px;line-height:20px;font-weight:700;color:var(--cab-texto);white-space:nowrap}
.tabs{display:flex;gap:4px}
.tab{position:relative;display:flex;align-items:center;gap:8px;background:none;border:0;border-radius:var(--pill);padding:0 16px;min-height:48px;font-weight:700;font-size:14px;line-height:20px;cursor:pointer;color:var(--cab-suave);white-space:nowrap}
.tab svg{width:22px;height:22px;flex:none}
.tab:hover{color:var(--cab-texto)}
.tab[aria-current="page"]{color:var(--negro);background:var(--amarillo)}
.insignia{position:absolute;top:2px;left:26px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--pill);background:var(--alerta);color:var(--sobre-alerta);font-family:var(--mono);font-size:12px;line-height:20px;font-weight:700;text-align:center;box-shadow:0 0 0 2px var(--cab-fondo)}
@media (min-width:760px){.tabs{order:2}.chip-senal{order:3}.insignia{position:static;margin-left:-2px;box-shadow:none}}
@media (max-width:759px){
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;justify-content:space-around;gap:0;background:var(--surface);border-top:1px solid var(--line-suave);padding:0 4px var(--safe-b);height:calc(var(--nav-h) + var(--safe-b));box-shadow:0 -6px 20px -14px rgba(0,0,0,.35)}
  .tabs :focus-visible{outline-color:var(--foco);outline-offset:-3px}
  .tab{flex:1 1 0;flex-direction:column;justify-content:center;gap:2px;border-radius:0;padding:4px 2px;min-height:var(--nav-h);font-size:12px;line-height:16px;font-weight:400;color:var(--muted)}
  .tab:hover{color:var(--text)}
  .tab svg{width:56px;height:30px;padding:4px 17px;border-radius:var(--pill);box-sizing:border-box}
  .tab[aria-current="page"]{background:none;font-weight:700;color:var(--text)}
  .tab[aria-current="page"] svg{background:var(--accion);color:var(--sobre-accion)}
  .insignia{top:4px;left:calc(50% + 6px);box-shadow:0 0 0 2px var(--surface)}
  body.con-nav main{padding-bottom:calc(var(--nav-h) + var(--safe-b) + 40px)}
  body.con-nav .avisos{bottom:calc(var(--nav-h) + var(--safe-b) + 12px)}
}
.chico{display:inline-flex;align-items:center;background:none;border:1px solid var(--line);color:var(--text);border-radius:var(--pill);padding:6px 14px;min-height:48px;font-size:14px;line-height:20px;font-weight:700;cursor:pointer;white-space:nowrap;position:relative}
.chico:hover{border-color:var(--text)}
.chico.volver{border-color:transparent;padding-left:4px;margin:0 0 8px -4px;text-decoration:underline;text-underline-offset:3px}
.chico.volver:hover{border-color:transparent;text-decoration-thickness:2px}

main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:16px 16px 64px;overflow-x:clip}   /* la zona de toque ampliada de los links no corre la pantalla */
main[data-ancho="lectura"] > *{max-width:760px}   /* listas y pantallas de lectura: 760 px de texto, alineadas con la marca; la ficha usa todo el ancho */
.eyebrow{font-size:14px;line-height:20px;font-weight:700;color:var(--muted);margin:0}
h1{margin:4px 0 16px}
/* el foco que pone el programa en el título no se dibuja (Neto 131); el de teclado, sí (comun.css) */
main h1[tabindex="-1"]:focus,main h1[tabindex="-1"]:focus-visible{outline:none}
.sub{margin:0 0 16px;max-width:65ch}
.hint{font-size:14px;line-height:20px;color:var(--muted)}
.okmsg{color:var(--listo);font-size:14px;line-height:20px;font-weight:700;margin:8px 0 0}
.okmsg:empty{display:none}
.fuerte{font-weight:700;color:var(--text)}
.sec-t{font-size:16px;line-height:24px;font-weight:800;margin:24px 0 8px}
.sec-t.urg{color:var(--alerta)}
.pie-hoy{margin:24px 0 12px}

/* formularios chicos (ingreso, contraseña, alta de profe) */
.card{background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r-hoja);padding:24px 16px;box-shadow:var(--sombra)}
@media (min-width:520px){.card{padding:32px 28px}}
.narrow{max-width:440px;margin:24px auto 0}
.narrow.sin-arriba{margin-top:0}
.card-marca{display:flex;align-items:center;gap:8px;margin:0 0 24px}
.card h1{margin-top:0}
.field{display:grid;gap:8px;margin-bottom:16px}
.field label,.field > span{font-size:16px;font-weight:700}
.field > .hint{font-size:14px;font-weight:400}
.con-boton{display:flex;gap:8px;align-items:stretch}
.con-boton input{flex:1;min-width:0}
.con-boton .btn{flex:none;min-width:88px}
.check{display:flex;gap:12px;align-items:flex-start;margin:4px 0 16px;cursor:pointer;min-height:48px}
.check .hint{display:block;margin-top:2px}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accion-borde)}
.links{display:flex;justify-content:space-between;gap:16px;margin-top:24px;flex-wrap:wrap}
.pie-card{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line-suave)}
.err .detalle{display:block;font-weight:400;margin-top:4px}
.btn.chico-ancho{width:100%}
.btn.prim[disabled]{background:var(--surface2);color:var(--muted);border-color:var(--line-suave);opacity:1}

/* herramientas de lista: cuántos hay + Actualizar, en un renglón */
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 8px}
.cuenta{font-size:14px;line-height:20px;color:var(--muted);margin:4px 0 8px}
.tools .cuenta{flex:1 1 auto;color:var(--text);margin:0;font-size:16px;line-height:24px}
.cuenta-n{font-size:16px;line-height:24px;margin:0 0 8px}
.buscar{margin-bottom:4px}
/* socio nuevo (sin formulario ni rutina): el asistente paso a paso, a la vista en Hoy y en Socios */
.nuevo-socio{width:100%;justify-content:flex-start;text-align:left;gap:12px;margin:0 0 16px;border-color:var(--text);background:var(--surface);border-radius:var(--r-hoja)}
.nuevo-socio .mas{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--accion);color:var(--sobre-accion);font-size:22px;line-height:1;font-weight:800}
.buscar + .nuevo-socio{margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* una sola fila de chips: si no entran se corren de costado adentro (la pantalla no) */
.fila-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:4px 16px;scroll-padding:0 16px}
.fila-chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;min-height:48px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 14px;font-weight:700;font-size:14px;line-height:20px;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--accion);color:var(--sobre-accion);border-color:var(--accion-borde)}
.chip .n{font-weight:400;margin-left:6px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.vacio{padding:24px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--r)}
.vacio b{color:var(--text)}
.vacio.grande{display:grid;gap:8px;justify-items:center;padding:32px 16px}
.vacio.grande b{font-size:20px;line-height:24px}
.vacio.grande .btn{margin-top:8px}
.cargando-sk{display:grid;gap:1px;border:1px solid var(--line-suave);border-radius:var(--r);overflow:hidden}
.cargando-sk span{display:block;height:56px;background:var(--line-suave);opacity:.6}
.cargando-sk span:nth-child(2n){opacity:.4}

/* etiquetas de estado: verde = listo, rojo = salud/error; el resto, neutro (la atención va con borde, sin otro color) */
.tag{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;line-height:16px;font-weight:700;white-space:nowrap;border:1px solid transparent;vertical-align:1px}
.t-listo{background:var(--listo-suave);color:var(--listo);border-color:var(--listo)}
.t-alerta{background:var(--alerta-suave);color:var(--alerta);border-color:var(--alerta)}
.t-neutral{background:var(--surface2);color:var(--muted)}
.t-atencion{background:var(--surface);color:var(--text);border-color:var(--text)}
.sub2{display:block;font-size:14px;line-height:20px;color:var(--muted)}
.urg{color:var(--alerta);font-weight:800}
.rojo{color:var(--alerta);font-weight:700}

/* Listas agrupadas (Neto, "Cuenta"): una tarjeta, filas de 56 px separadas por una línea. Cada fila: nombre o título,
   el motivo en una línea (dos como mucho) y a la derecha el estado y ›. Lo urgente lleva la barra roja a la izquierda. */
.lista{display:block;margin:0;padding:0;list-style:none;background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r-hoja);overflow:hidden;box-shadow:var(--sombra)}
.lista > li + li,.lista > .profe-fila + .profe-fila{border-top:1px solid var(--line-suave)}
.lista-urg{border-color:var(--alerta);box-shadow:0 0 0 1px var(--alerta),var(--sombra)}
.fila,.v2-fila,.alerta-fila,.ph-fila,.accion{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nom lado" "motivo lado";gap:0 12px;align-items:center;
  width:100%;min-height:56px;text-align:left;background:transparent;border:0;border-radius:0;padding:8px 12px 8px 16px;font-size:16px;line-height:24px;cursor:pointer;color:var(--text)}
.fila:hover,.v2-fila:hover,.alerta-fila:hover,.ph-fila:hover,.accion:hover{background:var(--surface2)}
.fila .nom,.v2-fila .nom{grid-area:nom}
.nom .tag{margin-left:4px;font-family:var(--font)}
.fila .motivo,.v2-fila .motivo{grid-area:motivo;font-size:14px;line-height:20px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.fila .motivo .tag,.v2-fila .motivo .tag{margin-right:2px}
.fila .lado,.v2-fila .lado{grid-area:lado;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;font-size:14px;line-height:20px;color:var(--muted);text-align:right}
.lado .flecha{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.fila,.v2-fila,.alerta-fila,.ph-fila,.accion{position:relative;padding-right:36px}
.urgente,.riesgo.alerta-fila,.riesgo.ph-fila{box-shadow:inset 4px 0 0 var(--alerta)}
.nom{font-weight:700;font-size:16px;line-height:24px;overflow-wrap:anywhere;display:block}
.dni{font-family:var(--mono);font-size:14px;line-height:20px;color:var(--muted);display:block}
.flecha{font-size:22px;line-height:1;color:var(--muted)}
.cuenta-fila{font-size:20px;line-height:24px;color:var(--text)}
/* Hoy: el número primero (Neto 160: "un número primero"), el título y el motivo en una línea */
.accion{grid-template-columns:auto minmax(0,1fr);grid-template-areas:none;gap:0 16px;min-height:64px}
.accion .n{font-family:var(--display);font-weight:400;font-size:36px;line-height:40px;min-width:2ch;text-align:right;color:var(--text);font-variant-numeric:tabular-nums;padding-top:4px}
.accion.urgente .n,.accion.urgente b{color:var(--alerta)}
.accion .t b{display:block}
.accion .t span{display:block;font-size:14px;line-height:20px;color:var(--muted)}
.accion .flecha{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.quien-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r);padding:12px 16px;margin:0 0 16px}
.quien-card b{display:block;font-size:20px;line-height:24px}
.avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;background:var(--negro);color:var(--amarillo);font-family:var(--display);font-size:28px;padding-top:3px;flex:none}
.rol{display:inline-block;font-size:12px;line-height:16px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--muted);margin-top:4px}
.tema-fila{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}

/* ficha (datos de la cuenta), tablas, rutina e informe */
/* datos de una ficha o rutina: lista agrupada clave → valor (Neto 162: "lista agrupada con el valor de cada ajuste") */
.datos{display:grid;grid-template-columns:1fr;margin:8px 0 16px;background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r);overflow:hidden}
@media (min-width:900px){.datos{grid-template-columns:1fr 1fr}.datos .dato:nth-child(2n){border-left:1px solid var(--line-suave)}}
.dato{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:0 12px;align-items:baseline;padding:8px 16px;min-height:56px;border-bottom:1px solid var(--line-suave);margin-bottom:-1px}
.dato .k{font-size:14px;line-height:20px;font-weight:700;color:var(--muted)}
.dato .v{font-weight:700;overflow-wrap:anywhere}
.dato .hint{grid-column:2}
.tabla-wrap{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r);overflow:hidden;font-size:14px;line-height:20px}
.tabla th,.tabla td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-suave);height:56px}
.tabla th{height:auto;font-size:12px;line-height:16px;font-weight:700;color:var(--muted);background:var(--surface2)}
.tabla tr:last-child td{border-bottom:0}
.tabla .num{font-family:var(--mono);color:var(--muted)}
.tabla tr.marcada td{background:var(--accion-suave)}
@media (max-width:520px){.tabla .angosto-no{display:none}.tabla th,.tabla td{padding:8px}}
.revision{background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r);padding:12px 16px}
.revision{counter-reset:paso}
.revision .paso{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px;padding-left:40px;position:relative}
.revision .paso::before{counter-increment:paso;content:counter(paso);position:absolute;left:0;top:10px;width:28px;height:28px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:14px;line-height:20px;font-weight:700;color:var(--muted)}
.dia h3{font-weight:800;font-size:20px;line-height:24px;margin:16px 0 8px}
.ejercicios{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ej{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:start;background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r);padding:8px 12px;font-size:14px;line-height:20px;min-height:56px}
.ej-etapa{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--muted);width:5.5em;padding-top:2px;overflow-wrap:anywhere}
.ej-nom{overflow-wrap:anywhere}
.ej-dosis{white-space:nowrap;font-weight:700}
@media (max-width:640px){.ej{grid-template-columns:auto minmax(0,1fr)}.ej-dosis{grid-column:2;white-space:normal}}
.informe{background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r);padding:8px 16px 12px;font-size:14px;line-height:20px;overflow-wrap:anywhere}
.informe h3{font-size:20px;line-height:24px;margin:16px 0 8px}
.informe h4{font-size:16px;line-height:24px;margin:16px 0 8px}
.informe h5,.informe h6{font-size:14px;margin:12px 0 4px}
.informe ul{margin:4px 0 8px;padding-left:20px}
.informe li{margin:2px 0}
.informe blockquote{margin:12px 0;padding:8px 12px;border-left:4px solid var(--alerta);background:var(--alerta-suave);border-radius:6px}
.informe code{font-family:var(--mono);font-size:12px;background:var(--surface2);padding:0 4px;border-radius:4px}
.informe p{margin:8px 0}

/* profes */
.profe-fila{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--surface);padding:8px 12px 8px 16px;min-height:56px}
#f-alta + .hint{margin:8px 0 0}
.profe-fila .mail{font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}
.profe-fila .acc{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){.profe-fila .acc{margin-left:0;width:100%}}
.clave-fila{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0}
.clave{font-family:var(--mono);font-size:20px;line-height:24px;letter-spacing:.06em;background:var(--surface2);padding:8px 12px;border-radius:8px;user-select:all;overflow-wrap:anywhere}
.alta{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.alta .field{margin:0}
@media (max-width:640px){.alta{grid-template-columns:1fr}}

/* bandeja para leer y protocolo */
.protocolo{border:1px solid var(--alerta);background:var(--alerta-suave);border-radius:var(--r);padding:12px 16px;margin:0 0 16px;font-size:14px;line-height:20px}
.protocolo ol{margin:8px 0;padding-left:20px}
.protocolo li{margin:4px 0}
.protocolo li b{white-space:nowrap}
.protocolo li > b:first-child{white-space:normal}
/* plegado (Para leer sin textos de riesgo sin leer): una fila como las de las listas, con › que gira al abrir */
.protocolo-plegado{margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.protocolo-plegado > summary{list-style:none;justify-content:space-between;gap:12px;min-height:56px;padding:8px 12px 8px 16px}
.protocolo-plegado > summary::-webkit-details-marker{display:none}
.protocolo-plegado > summary:hover{background:var(--surface2)}
.protocolo-plegado > summary:focus-visible{outline-offset:-3px}
.protocolo-plegado .chev{display:inline-block;font-size:22px;line-height:1;color:var(--muted);transform:rotate(90deg);transition:transform var(--m2) ease-out}
.protocolo-plegado[open] .chev{transform:rotate(-90deg)}
.protocolo-plegado .protocolo{margin:0;border-width:1px 0 0;border-radius:0}
.texto{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:0 0 12px}
.texto.riesgo{border:2px solid var(--alerta);box-shadow:inset 4px 0 0 var(--alerta)}
.texto.leido{border-color:var(--line-suave)}
/* costuras D1 B: el protocolo abierto va pegado debajo de la tarjeta del texto de riesgo */
.texto.riesgo + .protocolo-pegado{margin:-12px 0 12px}
.protocolo-pegado .protocolo{border-top-width:0;border-radius:0 0 var(--r) var(--r);margin:0}
.texto.riesgo:has(+ .protocolo-pegado){border-radius:var(--r) var(--r) 0 0}
.texto-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.texto-fecha{font-size:14px;line-height:20px;color:var(--muted);margin-left:auto}
.texto-quien{margin-top:8px}
.texto-quien .dni{display:inline}
.alarmas{font-size:14px;line-height:20px;color:var(--alerta);margin-top:4px}
.texto-libre,.texto-pedido{margin:8px 0;padding:12px;background:var(--surface2);border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.texto-pie{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.texto-pie .okmsg{margin:0}

/* confirmar en el lugar: [Cancelar] [Confirmar], con el foco en Cancelar */
.confirmar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface2);width:100%}
.confirmar p{flex:1 1 100%;margin:0 0 4px}
.confirmar .field{flex:1 1 100%;margin:0 0 4px}
.linea-fija{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-left:4px solid var(--accion-borde);background:var(--surface);border-radius:8px;padding:8px 14px;margin:0 0 12px;min-height:56px}
.linea-fija > span{flex:1 1 240px}
.linea-fija.salud{border-left-color:var(--alerta);background:var(--alerta-suave)}
.linea-fija.corta{min-height:48px;padding:8px 14px}
.linea-fija.corta > span{flex:1 1 160px}
.seg:empty{display:none}
.linea-fija.neutra{border-left-color:var(--text);border-top:1px solid var(--line-suave);border-right:1px solid var(--line-suave);border-bottom:1px solid var(--line-suave)}

/* para completar, pedidos y guía de charla (la ficha tiene sus estilos en ficha.css; .guia, .hist-a, .escala y .escala-pie
   quedan porque la ficha las usa también como marcadores para las pruebas) */
.v2-sec{margin:32px 0 0}
.v2-sec > h2{margin-top:0}
.reemplazos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* un pedido (pedido.js, F6): reemplazos por ejercicio y los toques de "me aburrí"; igual en la pantalla y en la ficha */
.pp-mini{margin:0 0 8px;font-size:14px;line-height:20px;color:var(--muted)}
.pp-mini b{color:var(--text)}
.pp-reemp{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.pp-r{display:grid;min-width:0}
.pp-r b{overflow-wrap:anywhere}
.pp-r span{font-size:14px;line-height:20px;color:var(--muted);font-weight:400}
.pp-grupo{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line-suave)}
.pp-grupo:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.pp-g-t{font-size:16px;line-height:24px;font-weight:400;margin:0 0 8px;overflow-wrap:anywhere}
.pp-n{display:block;font-size:12px;line-height:16px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.pp-eleg{display:grid;gap:4px;justify-items:start;margin:8px 0 0}
.pp-eleg .err{margin:0}
.pp-abur{display:grid;gap:8px;justify-items:start;margin:0 0 8px}
.pp-hecho{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;min-height:48px;padding:8px 14px;border-left:4px solid var(--listo);background:var(--surface);border-radius:8px}
.pp-hecho > span{flex:1 1 220px}
.pp-ejs,.pp-elegidos{margin:0;padding-left:20px}
.pp-elegidos{margin:-4px 0 12px}
.pp-conf{margin:4px 0 8px;padding-left:20px;overflow-wrap:anywhere}
.pp-conf li{margin:4px 0}
.reemplazos .opcion span span{display:block;font-size:14px;line-height:20px;color:var(--muted);font-weight:400}
.reemplazos .opcion b{color:var(--text)}
.guia{background:var(--surface);border:1px solid var(--line-suave);border-radius:var(--r-hoja);padding:4px 16px 12px;font-size:16px;line-height:24px}
.guia h3{font-size:20px;line-height:24px;margin:16px 0 8px}
.guia h4{font-size:16px;margin:16px 0 8px}
.guia ul{margin:4px 0 8px;padding-left:20px}
.guia li{margin:8px 0}
.guia p{margin:8px 0}
.hist-a{list-style:none;margin:0;padding:0;display:grid;font-size:14px;line-height:20px}
.hist-a li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;min-height:48px;border-bottom:1px solid var(--line-suave)}
.hist-a .q{color:var(--muted)}
.hist-a .link{margin-left:auto}
details > summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:700}

/* hojas (paneles que suben): una sola; el foco va al título y vuelve al botón */
dialog.hoja{border:0;padding:0;margin:auto auto 0;width:min(560px,100%);max-height:88vh;max-height:88dvh;border-radius:var(--r-hoja) var(--r-hoja) 0 0;background:var(--bg);color:var(--text);box-shadow:0 -8px 30px rgba(0,0,0,.25)}
@media (min-width:640px){dialog.hoja{margin:auto;border-radius:var(--r-hoja)}}
dialog.hoja::backdrop{background:rgba(0,0,0,.45)}
/* en oscuro el fondo de la hoja es igual al de la página: un borde la separa */
dialog.hoja{border:1px solid var(--line-suave);border-bottom:0}
@media (min-width:640px){dialog.hoja{border-bottom:1px solid var(--line-suave)}}
:root[data-theme="dark"] dialog.hoja::backdrop{background:rgba(0,0,0,.7)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) dialog.hoja::backdrop{background:rgba(0,0,0,.7)}}
/* la guía en una hoja: sin otra tarjeta adentro de la hoja */
#hoja .guia{border:0;background:none;padding:0}
.hoja-in{padding:16px 16px 24px;overflow:auto;max-height:88vh;max-height:88dvh}
.hoja-manija{display:none}
@media (max-width:639px){.hoja-manija{display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:-8px auto 12px}}
.hoja-cab{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px}
.hoja-cab h2{margin:10px 0 0;flex:1}
.hoja-x{flex:none;display:grid;place-items:center;width:48px;height:48px;margin:0 -8px 0 0;padding:0;background:none;border:0;border-radius:999px;color:var(--text);cursor:pointer}
.hoja-x:hover{background:var(--surface2)}
.hoja-x:active{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))}
.escala{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.escala button{min-height:48px;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-family:var(--mono);font-weight:700;font-size:18px;cursor:pointer}
.escala button[aria-checked="true"]{background:var(--accion);color:var(--sobre-accion);border-color:var(--accion-borde)}
.escala-pie{display:flex;justify-content:space-between;font-size:14px;line-height:20px;color:var(--muted)}
/* el pie de la hoja ("Listo", "Guardar…") queda pegado abajo mientras se scrollea el contenido (Neto) */
.hoja-pie,#hoja .fx-hoja-pie{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;position:sticky;bottom:-24px;padding:12px 0 24px;margin-bottom:-24px;background:var(--bg);border-top:1px solid var(--line-suave)}
.hoja-pie .btn{flex:1 1 160px}

/* avisos (toasts): una línea, abajo; se anuncian por la región viva */
.avisos{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;width:min(560px,calc(100% - 32px));display:grid;gap:8px;pointer-events:none}
.aviso{pointer-events:auto;display:flex;align-items:center;gap:12px;min-height:48px;background:var(--aviso-fondo);color:var(--aviso-texto);border-radius:var(--r);padding:4px 8px 4px 16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.aviso span{flex:1}
.aviso button{min-height:48px;background:none;border:0;color:var(--aviso-accion);font-weight:800;cursor:pointer;padding:0 12px;text-decoration:underline;text-underline-offset:3px}

.chip:active,.seg button:active,.v2-fila:active,.accion:active,.fila:active,.alerta-fila:active,.ph-fila:active,.tab:active,.escala button:active{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))}
.chip:active,.seg button:active,.escala button:active{transform:scale(.98)}
@media (prefers-reduced-motion: reduce){.chip:active,.seg button:active,.escala button:active{transform:none}}
@media (forced-colors: active){
  .lista,.chip,.texto,.card,.datos,.quien-card{border:1px solid CanvasText}
  .tabs{border-top:1px solid CanvasText}
  .chip[aria-pressed="true"],.chip[aria-checked="true"],.escala button[aria-checked="true"],.tab[aria-current="page"],.tab[aria-current="page"] svg{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .tab[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
  .urgente,.riesgo.alerta-fila,.riesgo.ph-fila{border-left:6px solid CanvasText}
  .texto.riesgo{border-width:3px}
  .protocolo-plegado,.linea-fija.neutra,.chip-senal{border:1px solid CanvasText}
  .hoja-manija{background:CanvasText}
  .insignia{border:1px solid CanvasText}
}

/* ---------- rediseño 08/10: piezas nuevas ---------- */
/* ingreso: la marca arriba de la tarjeta, una sola acción (Entrar), ayuda abajo */
.ingreso{max-width:440px;margin:24px auto 0}
.ingreso .card{margin:0}
.ingreso-marca{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.ingreso-marca img{width:56px;height:56px}
.ingreso-marca b{display:block;font-family:var(--display);font-weight:400;font-size:36px;line-height:36px;padding-top:4px}
.ingreso-marca span{display:block;font-size:14px;line-height:20px;color:var(--muted)}
.ingreso-pie{margin:16px 4px 0;font-size:14px;line-height:20px;color:var(--muted)}
/* el código del segundo factor: un solo campo grande, números con letra de números (INV-U01) */
.codigo{font-family:var(--mono);font-size:26px!important;line-height:32px!important;letter-spacing:.2em;text-align:center}

/* Hoy: saludo + fecha, el estado del día en una línea, después lo urgente, lo demás y "Empezar algo nuevo" */
.hoy-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 16px}
.hoy-cab h1{margin:0}
.hoy-cab .eyebrow{margin:0}
.hoy-resumen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.hoy-resumen li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line-suave);font-size:14px;line-height:20px}
.hoy-resumen li b{font-family:var(--mono)}
.hoy-resumen li.urg-r{border-color:var(--alerta);color:var(--alerta);font-weight:700}
.hoy-resumen li.ok-r{border-color:var(--listo);color:var(--listo);font-weight:700}
.empezar{margin:32px 0 0}
.empezar .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--pill);background:var(--accion);color:var(--sobre-accion)}
.empezar .ico svg{width:22px;height:22px}
.hoy-pie{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:24px 0 12px}
.hoy-pie .hint{flex:1 1 240px;margin:0}
.ultima{font-size:14px;line-height:20px;color:var(--muted);margin:0}

/* Cuenta: ajustes de pantalla (colores, animaciones, letra) */
.ajuste{display:grid;gap:8px;margin:0 0 16px}
.ajuste .hint{margin:0}
.ajuste > .seg{justify-self:start}

/* letra más grande (ajuste en Cuenta): todo crece igual, sin romper la grilla de 4 px */
html[data-letra="grande"] body{zoom:1.125}

/* animaciones: "completas" solo agrega la entrada suave de cada pantalla y de los avisos; "livianas", nada.
   Siempre manda "reducir movimiento" del sistema (LENGUAJE_VISUAL §4, INV-U14). */
@media (prefers-reduced-motion: no-preference){
  html[data-anim="cool"] main.entra > *{animation:panel-entra var(--m2) var(--curva-entra) both}
  html[data-anim="cool"] .aviso{animation:panel-aviso var(--m2) var(--curva-entra) both}
  html[data-anim="cool"] .tab svg,html[data-anim="cool"] .tab{transition:background-color var(--m1) var(--curva),color var(--m1) var(--curva)}
}
@keyframes panel-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes panel-aviso{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (forced-colors: active){
  .top{border-bottom:1px solid CanvasText}
  .hoy-resumen li{border:1px solid CanvasText}
  .empezar .ico{border:1px solid CanvasText}
}

/* oscuro: la cabecera negra se separa de la página con una línea; el avatar se ve sobre la tarjeta */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .top{box-shadow:0 1px 0 var(--line-suave)}
  :root:not([data-theme="light"]) .avatar{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line)}}
:root[data-theme="dark"] .top{box-shadow:0 1px 0 var(--line-suave)}
:root[data-theme="dark"] .avatar{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- segunda vuelta 08/10: herramientas del profe ---------- */
/* Buscar desde cualquier pantalla (cabecera; tecla /) */
.buscar-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;min-width:48px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--cab-suave);background:transparent;color:var(--cab-texto);font-weight:700;font-size:14px;line-height:20px;cursor:pointer}
.buscar-btn:hover{border-color:var(--cab-texto)}
@media (min-width:760px){.buscar-btn{order:4}}
@media (max-width:420px){.buscar-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.buscar-btn{padding:0;justify-content:center}}
/* formularios abiertos: siempre a la vista debajo de la cabecera */
.abiertos{position:sticky;top:var(--cab-h);z-index:9;background:var(--accion-suave);border-bottom:1px solid var(--line-suave)}
.abiertos-in{max-width:1080px;margin:0 auto;padding:6px 16px;display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none}
.abiertos-in::-webkit-scrollbar{display:none}
.abiertos-t{flex:none;font-size:14px;line-height:20px;font-weight:700}
.abiertos .chip{background:var(--surface)}
.abiertos-ojo{flex:none;font-size:14px;line-height:20px;font-weight:700;padding:0 4px;border-left:4px solid var(--text)}
/* Hoy: "Lo primero ahora", una persona y una acción */
.primero{background:var(--surface);border:2px solid var(--text);border-radius:var(--r-hoja);padding:16px;margin:0 0 24px;box-shadow:var(--sombra)}
.primero .eyebrow{margin:0 0 4px}
.primero-nom{font-size:20px;line-height:24px;font-weight:800;margin:0 0 4px;overflow-wrap:anywhere}
.primero-por{color:var(--muted);margin:0 0 12px}
.primero-por b{color:var(--text)}
.primero-acc{display:grid;gap:8px}
@media (min-width:520px){.primero-acc{grid-template-columns:1fr auto}}
/* modo tanda: barra arriba de cada paso y, al final, la siguiente persona */
.tanda-barra{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 12px;margin:0 0 12px;border-radius:var(--r);background:var(--accion-suave);border:1px solid var(--accion-borde)}
.tanda-barra > span{flex:1 1 160px}
.tanda-fin{display:grid;gap:8px;width:100%}
@media (forced-colors: active){.primero,.tanda-barra,.abiertos{border:1px solid CanvasText}}