/* ============================================================================
   NutriSim — estilos del simulador de consulta nutricional.
   Separado de nutrisim.html el 16-09-2026: el fichero único pasaba de 3.700 líneas
   y cada cambio competía con el resto de ficheros abiertos sobre el mismo archivo.
   Al tocar este fichero, sube el ?v= del <link> en nutrisim.html (caché inmutable).
   ========================================================================== */
  /* Dirección de arte: SaaS médico sobre paleta slate + degradado sky→indigo.
     Todo pasa por estos tokens: cambiar aquí cambia la app entera. Los datos (barras, radar,
     estados) mantienen color SÓLIDO —un degradado en una barra falsea la lectura del valor—. */
  :root{
    --bg:#f8fafc;               /* slate-50  */
    --panel:#ffffff;
    --ink:#0f172a;              /* slate-900 */
    --muted:#5c6b80;            /* slate-500 oscurecido: el original no llegaba a 4,5:1 sobre los fondos claros (azul, rojo, gris) */
    --soft:#f1f5f9;             /* slate-100 */
    --line:rgba(226,232,240,.8);/* slate-200/80 */
    --line-solid:#e2e8f0;
    --accent:#2563eb;           /* sólido para datos y foco */
    --accent-d:#4338ca;         /* indigo-700 para texto sobre fondo claro */
    --accent-soft:#f0f9ff;      /* sky-50   */
    --accent-line:rgba(186,230,253,.6); /* sky-200/60 */
    --accent-ink:#0369a1;       /* sky-700  */
    --grad:linear-gradient(#4f46e5,#4f46e5);                /* índigo-600 sólido (12-10-2026: sin degradado; sigue siendo «background») */
    --grad-h:linear-gradient(#4338ca,#4338ca);              /* hover: índigo-700 */
    --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
    /* Para TEXTO: --ok y --warn como color de letra se quedaban en 3,3:1 y 3:1 (AA pide 4,5). Fondos y bordes siguen con los de arriba. */
    --ok-ink:#15803d; --warn-ink:#b45309;
    --shadow:0 1px 3px rgba(15,23,42,.03),0 4px 12px rgba(15,23,42,.03);   /* difusa, en dos capas */
    --shadow-md:0 1px 3px rgba(15,23,42,.05),0 8px 20px rgba(15,23,42,.06);
    --radius:16px;              /* rounded-2xl */
    --radius-sm:12px;           /* rounded-xl  */
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
  button{font:inherit;cursor:pointer}
  .btn{background:var(--grad);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 20px;font-weight:500;
    box-shadow:var(--shadow);transition:background-color 150ms ease-in-out,box-shadow 150ms ease-in-out,transform 100ms ease-out}
  .btn:hover{background:var(--grad-h);box-shadow:var(--shadow-md)}
  .btn:active{transform:scale(.98)}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .btn.ghost{background:var(--panel);color:#334155;border:1px solid var(--line-solid);box-shadow:none;padding:9px 16px}
  .btn.ghost:hover{background:var(--soft);box-shadow:none}
  .btn.sm{padding:7px 14px;font-size:14px}
  .btn.block{width:100%}
  input,textarea,select{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line-solid);border-radius:var(--radius-sm);padding:10px 12px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
  input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  select{cursor:pointer;font-size:14px}
  textarea{resize:vertical}
  .tag{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-ink);
    border:1px solid var(--accent-line);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600}
  .muted{color:var(--muted)}

  /* Salto al contenido: invisible hasta que se tabula (teclado y lector de pantalla). */
  /* Distintivo de mensajes sin leer sobre «Amigos y aulas». */
  /* Avatares del chat (sin fotos: inicial + color estable por persona). */

  /* Progreso de la evaluación: una barra que avanza con lo que va tocando (es una
     estimación, la IA no informa de su progreso) y avisa si se está eternizando. */
  .ev-prog{margin-top:12px}
  .ev-prog-pista{height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
  /* Avanza con transform (se repinta cada medio segundo: con width recalculaba la maquetación). */
  .ev-prog-barra{height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--accent),#38bdf8);
    transition:transform .6s cubic-bezier(.23,1,.32,1)}
  .ev-prog-txt{margin-top:7px;font-size:12.5px;color:var(--muted);text-align:center}
  .ev-prog-txt.lento{color:#b45309;font-weight:600}
  @media(prefers-reduced-motion:reduce){.ev-prog-barra{transition:none}}
  /* La etiqueta que enseña el paciente: una tarjeta en el hilo que se abre para leerla.
     Se ve como un producto sobre la mesa, no como un mensaje más. */
  .etq-msg{background:none;padding:0;max-width:none}
  .etq-card{display:block;width:100%;max-width:340px;text-align:left;cursor:pointer;font:inherit;
    background:var(--panel);border:1px solid var(--line-solid);border-radius:14px;padding:12px 13px;
    box-shadow:0 1px 3px rgba(15,23,42,.08);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
  .etq-card:hover{box-shadow:0 10px 24px rgba(15,23,42,.12);border-color:#bae6fd;transform:translateY(-2px)}
  .etq-card:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
  .etq-top{display:flex;gap:10px;align-items:flex-start}
  .etq-ico{font-size:20px;line-height:1}
  .etq-card b{font-size:14px;color:var(--ink);display:block;line-height:1.3}
  .etq-claim{font-size:12px;color:var(--muted);margin-top:2px}
  .etq-mini{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:10px 0 8px;font-size:12px;color:var(--muted)}
  .etq-mini b{display:inline;color:var(--ink);font-size:12.5px}
  .etq-pie{font-size:11.5px;font-weight:700;color:var(--accent-d)}
  .etq-tabla{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
  .etq-tabla th,.etq-tabla td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:right}
  .etq-tabla thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:right}
  .etq-tabla th:first-child,.etq-tabla thead th:first-child{text-align:left;font-weight:600;color:var(--ink)}
  .etq-tabla .etq-sub th{padding-left:16px;font-weight:400;color:var(--muted)}
  .etq-h{margin:18px 0 6px;font-size:14px;color:var(--ink)}
  .etq-ing{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
  .etq-nota{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
  @media(prefers-reduced-motion:reduce){.etq-card{transition:none}.etq-card:hover{transform:none}}
  .ia-sec{padding:0 22px 6px}
  .ia-sec-intro p{font-size:14.5px;line-height:1.6}
  .ia-sec-intro .ia-docente{margin-top:8px;color:var(--muted)}
  .ia-sec-intro .ia-docente b{color:var(--ink)}
  .ia-sec h3{margin:14px 0 6px;font-size:15.5px;color:var(--ink)}
  .ia-sec p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
  .so-av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;color:#fff;
    font-weight:700;font-size:13px;margin-right:8px;flex:0 0 auto;vertical-align:middle}
  .so-av.sm{width:24px;height:24px;font-size:11px;margin:0 6px 0 0}
  .so-av.so-av-simi{background:#f1f5f9;overflow:hidden}
  .so-av.so-av-simi svg{display:block;width:100%;height:100%}
  /* ---- Simi: comprar antes de poner (11-10-2026) ---- */
  .simi-carta .simi-precio{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:12.5px;color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;padding:2px 9px}
  .simi-carta .simi-adq{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:12px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;padding:2px 9px}
  .simi-circulo.estrena svg{animation:simiEstrena .45s cubic-bezier(.23,1,.32,1)}
  @keyframes simiEstrena{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){.simi-circulo.estrena svg{animation:none}}
  /* ---- Grupos de amigos (11-10-2026) ---- */
  .so-grupos-card{padding:18px;margin-top:16px}
  .gr-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .gr-cab .btn:disabled{opacity:.55;cursor:not-allowed}
  .gr-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
  .gr-vacio{font-size:13px;padding:4px 0}
  .gr-card{--gr:#0d9488;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;min-width:0}
  .gr-top{display:flex;align-items:center;gap:10px;min-width:0}
  .gr-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:21px;
    background:color-mix(in srgb,var(--gr) 14%,#fff);border:1px solid color-mix(in srgb,var(--gr) 35%,#fff)}
  .gr-ico.sm{flex-basis:28px;width:28px;height:28px;font-size:15px;border-radius:9px;margin-right:8px;display:inline-grid;vertical-align:middle}
  .gr-info{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
  .gr-info b{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gr-meta{font-size:12.5px;color:var(--muted)}
  .gr-admin{font-size:11px;font-weight:700;color:var(--gr,#0d9488);background:color-mix(in srgb,var(--gr,#0d9488) 12%,#fff);border-radius:999px;padding:2px 8px;flex:0 0 auto}
  .gr-simis{display:flex;align-items:center;padding-left:6px}
  .gr-simis .so-av.gr-av{width:28px;height:28px;font-size:12px;margin:0 0 0 -6px;border:2px solid #fff;box-sizing:content-box}
  .gr-mas{margin-left:4px;font-size:12px;font-weight:700;color:var(--muted)}
  .gr-btns{display:flex;flex-wrap:wrap;gap:6px}
  .gr-btns .btn{flex:1 1 auto}
  .gr-chat-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
  .gr-chat-cab h2,.gr-chat-cab h3{display:flex;align-items:center;min-width:0;flex:1 1 auto}
  .gr-chat-cab .btn{flex:0 0 auto;white-space:nowrap}
  .gr-chat-tit{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  .gr-chat-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gr-chat-n{font-weight:500;font-size:12.5px;color:var(--muted);text-transform:none;letter-spacing:0}
  .gr-iconos[hidden],.gr-colores[hidden],#grIconoL[hidden],#grColorL[hidden]{display:none}
  .gr-autor{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:2px}
  .gr-sis{align-self:center;text-align:center;font-size:12.5px;color:var(--muted);background:var(--soft);border-radius:999px;padding:5px 12px;max-width:92%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
  .modal.gr-modal{max-width:580px}
  @media (max-width:560px){ .gr-acciones .btn{flex:1 1 100%} #grGuardar{order:-1} .gr-hueco{display:none} }
  .gr-modal .gr-nombre{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;box-sizing:border-box}
  .gr-iconos,.gr-colores{display:flex;flex-wrap:wrap;gap:8px}
  .gr-icono{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:21px;cursor:pointer;display:grid;place-items:center}
  .gr-icono[aria-checked="true"]{border:2px solid var(--accent);background:#eff6ff}
  .gr-color{width:36px;height:36px;border-radius:999px;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer}
  .gr-color[aria-checked="true"]{box-shadow:0 0 0 2px var(--c),0 0 0 4px #fff,0 0 0 5px var(--c)}
  .gr-icono:disabled,.gr-color:disabled{cursor:default;opacity:.6}
  .gr-amigos{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:6px}
  .gr-amigo{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:9px;cursor:pointer;font-size:14px;min-height:36px}
  .gr-amigo:hover{background:var(--soft)}
  .gr-amigo.solo{cursor:default}
  .gr-amigo input{width:18px;height:18px;margin:0 8px 0 0;flex:0 0 auto}
  .gr-err{color:#b91c1c;font-size:13px;min-height:18px;margin-top:8px}
  .gr-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
  .gr-hueco{flex:1}
  .gr-peligro{color:#b91c1c}
  @media (pointer:coarse){
    .gr-amigo{min-height:44px}
    .gr-color{width:44px;height:44px}
    .gr-btns .btn,#soGrupoNuevo,#soGrCerrar,#soGrSend,#soGrIn{min-height:44px}
  }
  .so-linea{display:flex;align-items:flex-end;gap:2px;margin-bottom:8px}
  .so-linea.mio{flex-direction:row-reverse}
  .so-linea.mio .so-av{margin:0 0 0 6px}
  .so-linea .so-msg{margin:0;position:relative;padding-bottom:16px}
  /* Confirmación de lectura, como en cualquier mensajería: ✓ enviado · ✓✓ entregado · ✓✓ leído. */
  .so-chk{position:absolute;right:8px;bottom:3px;font-size:10.5px;line-height:1;letter-spacing:-2px;color:#94a3b8}
  .so-msg.mio .so-chk{color:rgba(255,255,255,.65)}
  .so-msg.mio .so-chk.leido{color:#7dd3fc}
  .msg.me .so-chk{position:static;margin-left:8px;letter-spacing:-2px;color:rgba(255,255,255,.7)}
  .msg.me .so-chk.leido{color:#7dd3fc}
  .toast.click{pointer-events:auto;cursor:pointer}
  .toast.click:hover{box-shadow:0 14px 28px -6px rgba(15,23,42,.24),0 2px 6px rgba(15,23,42,.08)}
  /* Invitación a una sala: banner flotante, abajo a la izquierda para no tapar los avisos. */
  .so-invite{position:fixed;left:18px;bottom:18px;z-index:85;background:var(--panel);border:none;
    border-radius:var(--radius-sm);box-shadow:0 10px 24px -6px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.06);
    padding:14px 16px;max-width:340px;animation:toIn .32s cubic-bezier(.2,.8,.2,1)}
  .so-invite .si-txt{display:flex;align-items:center;font-size:13.5px;line-height:1.5;margin-bottom:10px}
  .so-invite .si-btn{display:flex;gap:8px;flex-wrap:wrap}
  @media(max-width:560px){.so-invite{left:12px;right:12px;max-width:none}}
  .nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;
    border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:1}
  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--panel);color:var(--accent-d);
    border:1px solid var(--accent);border-radius:0 0 10px 0;padding:10px 16px;font-weight:600;text-decoration:none}
  .skip:focus{left:0}
  /* Opaca: con cristal (90 % + desenfoque) el contenido se transparentaba bajo la marca al desplazar. */
  .top{background:var(--panel);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .top-in{max-width:1140px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:14px}
  /* La marca es un botón (lleva a la portada), así que hay que devolverle el aspecto de texto. */
  /* Al ser pulsable tiene que poder pulsarse con el dedo: 28 px de alto se quedaban cortos (la QA
     de móvil pide 32), así que se le da algo de aire sin mover la barra de sitio. */
  .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em;
    border:0;background:transparent;padding:4px 6px;margin:0 0 0 -6px;min-height:34px;color:inherit;
    font-family:inherit;cursor:pointer;transition:opacity .15s}
  .brand:hover{opacity:.82}
  .brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
  /* El recuadro de la marca ya no es un degradado con un emoji dentro: es el logo. */
  /* La mascota manda en la marca: la CABEZA recortada, sin caja ni círculo que la enmarque. */
  .brand .dot{width:34px;height:34px;display:grid;place-items:center;background:none;border-radius:0;overflow:visible;
    filter:drop-shadow(0 2px 5px rgba(37,99,235,.28));transition:transform .18s}
  .brand:hover .dot{transform:scale(1.08) rotate(-4deg)}
  .brand .dot img{width:100%;height:100%;display:block}
  .brand b{color:var(--accent)}
  .top .sub{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:14px}
  .top .spacer{flex:1}
  /* Selector de idioma: tres códigos, el activo marcado. */
  .lang-sel{display:flex;gap:2px;border:1px solid var(--line-solid);border-radius:999px;padding:2px;background:var(--panel)}
  .lang-sel button{border:none;background:none;font:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;
    color:var(--muted);padding:5px 9px;min-height:26px;min-width:32px;border-radius:999px;cursor:pointer;line-height:1}
  .lang-sel button:hover{color:var(--accent-d);background:var(--accent-soft)}
  .lang-sel button.on{background:var(--accent);color:#fff}
  @media(max-width:560px){.lang-sel button{padding:5px 7px;font-size:11px}}
  /* Con el dedo, el selector de idioma se quedaba en 30×21: se le da altura de
     botón de verdad sin cambiar el aspecto en el ordenador. */
  @media(pointer:coarse){.lang-sel button{min-height:44px;min-width:44px;padding:8px 12px;font-size:12.5px}
    .lang-sel{padding:3px}}
  .top-in .btn{white-space:nowrap}
  @media(max-width:700px){ .top-in{padding:10px 14px;gap:8px} .top .sub{display:none} }
  @media(max-width:560px){ .nav-lbl{display:none} .top-in .btn.sm{padding:7px 11px;font-size:15px} }
  /* Teléfonos estrechos (360 px, iPhone SE a 320): logo + idiomas a 44 px + cuenta no cabían y la
     página desbordaba de lado. Idiomas algo más estrechos (siguen con 44 de alto) y, a 340 px o
     menos, la marca se queda en el icono (el botón conserva su nombre accesible). */
  @media(max-width:380px){ .top-in{gap:6px;padding-left:10px;padding-right:10px} .lang-sel button{min-width:36px;padding-left:6px;padding-right:6px} }
  @media(max-width:340px){ .brand{font-size:0;gap:0} }

  /* ---- MUESTRA PARA FACULTADES (/demo) -----------------------------------
     Barra de contexto siempre visible: quien prueba el simulador tiene que saber
     en todo momento que está en una muestra y a un clic de pedir el piloto. */
  .demo-bar{background:#0f172a;color:#fff;font-size:13px;position:sticky;top:0;z-index:60;box-shadow:0 2px 10px rgba(15,23,42,.18)}
  /* Sin el botón de la derecha, el texto ya no tiene contra qué estirarse: se centra con la
     etiqueta al lado en vez de quedar pegado a la izquierda con un hueco enorme detrás. */
  .demo-bar-in{max-width:1140px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
  .demo-tag{background:rgba(99,102,241,.22);color:#c7d2fe;border:1px solid rgba(129,140,248,.35);
    padding:2px 8px;border-radius:7px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
  .demo-txt{margin:0;color:#cbd5e1;line-height:1.35;flex:0 1 auto;min-width:0}
  .demo-txt strong{color:#fff}
  /* En estrecho el texto se va a su propia línea, y entonces centrar deja la etiqueta sola en
     medio con el párrafo debajo a la izquierda: dos alineaciones distintas en dos dedos de alto.
     Todo a la izquierda, que es como se lee. */
  /* En el móvil la barra se queda arriba y se va al bajar: fija ocupaba un 11 % de la pantalla
     todo el rato y tapaba la cabecera (y el ✕) de las ventanas. */
  @media(max-width:640px){ .demo-bar{position:static} .demo-bar-in{padding:8px 16px;gap:8px;justify-content:flex-start} .demo-txt{font-size:12.5px;flex-basis:100%} }
  /* Cierre de la muestra: el bloque que aparece al final de la evaluación. */
  .demo-cierre{margin-top:22px;border:1px solid #c7d2fe;background:linear-gradient(160deg,#eef2ff,#f8fafc);
    border-radius:16px;padding:22px;text-align:center}
  .demo-cierre h3{margin:0 0 6px;font-size:19px;color:#312e81}
  .demo-cierre p{margin:0 auto 14px;max-width:520px;color:#475569;font-size:14.6px;line-height:1.5}
  .demo-cierre .btn{background:#4f46e5;border-color:#4f46e5}
  .demo-cierre .btn:hover{background:#4338ca;border-color:#4338ca}
  .demo-cierre .pie{margin-top:10px;font-size:12.4px;color:#64748b}
  /* En modo muestra, lo que no forma parte de la prueba se esconde de verdad (no solo se bloquea). */
  body.modo-demo .demo-oculto{display:none !important}
  .demo-fin-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  /* El cierre de la muestra es EL mensaje de la pantalla, no una etiqueta: el h3 de las tarjetas
     (pequeño y en mayúsculas) lo dejaba como un rótulo encima del texto. */
  .card.demo-gracias h3,.card.demo-carga h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
  /* Botones que son enlaces (cuestionario): sin el subrayado del navegador y con el texto dentro
     del botón aunque parta en dos líneas (en el móvil se salía del fondo). */
  a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;max-width:100%}
  /* Formulario de piloto: cada etiqueta pegada a SU campo y separada del anterior. */
  #demoPilotoForm label{display:block;margin:14px 0 6px;font-size:14px;font-weight:600}
  #demoPilotoForm label:first-of-type{margin-top:4px}
  /* Marcador de consultas totales (terminadas + sin terminar) en la cabecera del panel. */
  .tot-box{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
  .tot-lbl{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .tot-cuenta{font-size:14.5px;font-weight:800;color:var(--tinta);background:#eef2f7;border:1px solid var(--line);
    border-radius:999px;padding:4px 12px;white-space:nowrap}
  .tot-cuenta.tope{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
  .tot-barra{display:block;width:150px;height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden}
  .tot-barra>span{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);transition:width .4s ease}
  .tot-barra.casi>span{background:#d97706}
  .tot-barra.tope>span{background:#dc2626}
  @media(prefers-reduced-motion:reduce){.tot-barra>span{transition:none}}
  @media(max-width:640px){ .tot-box{margin-left:0;align-items:flex-start;text-align:left;width:100%} }
  /* Consulta cooperativa a medias: «Co-op» con la inicial de quien la comparte. */
  .res-coop{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:999px;background:#ede9fe;color:#5b21b6;font-size:11.5px;font-weight:800;letter-spacing:.02em}
  .res-coop .so-av.res-coop-av{width:20px;height:20px;font-size:10.5px;border:2px solid #ede9fe;margin-right:-6px}
  .res-coop .so-av.res-coop-av:last-of-type{margin-right:0}
  .wrap{max-width:1140px;margin:0 auto;padding:26px 20px 70px}
  /* Valores de ARRANQUE de las medidas que luego se toman en vivo (mideFooter/medidasPortada).
     No son decorativos: la portada a pantalla completa se dimensiona con ellos, así que si el
     arranque queda lejos del valor real, al medir cambia la altura del hero y TODO lo de debajo
     salta. Medido el 23-09-2026: el pie real son 114 px en escritorio, 116 en móvil y 133 en iPad,
     y la cabecera 69/63/102 — con 64 px de arranque el salto valía 0,14 de CLS, por encima del
     umbral de Google. Se arranca con la mediana real; la medición en vivo sigue afinándolo. */
  :root{--top-h:68px;--foot-h:116px;--wrap-top:26px}
  /* Portada a pantalla completa: ni relleno inferior ni hueco entre el vídeo y el pie. */
  body.portada-llena .wrap{padding-bottom:0}
  /* Con el pie en el flujo, el vídeo de la portada se queda con la pantalla MENOS el pie: así la
     portada entera sigue cabiendo de una vez y el pie aparece entero debajo, sin tapar el vídeo.
     Solo cuando el pie va superpuesto (opción 2) se le pone la ropa oscura del vídeo. */
  body.portada-llena.pie-fijo .ns-foot{background:rgba(15,23,42,.55);border-top:1px solid rgba(255,255,255,.14);box-shadow:none}
  /* La ropa clara del pie sobre el vídeo SOLO vale cuando va superpuesto (opción 2): en el flujo
     normal el pie se apoya en el fondo de la página y usa sus colores de siempre. */
  @media(max-width:700px){
    body.portada-llena.pie-fijo .ns-foot{background:color-mix(in srgb,var(--panel) 94%,transparent);border-top:1px solid var(--line)}
    body.portada-llena.pie-fijo .ns-foot-links a,body.portada-llena.pie-fijo .ns-foot-btn,body.portada-llena.pie-fijo .ns-foot-credit{color:var(--muted)}
    body.portada-llena.pie-fijo .ns-foot-credit b{color:#475569}
    body.portada-llena.pie-fijo .ns-foot-ia{color:#94a3b8;border-top-color:rgba(148,163,184,.25)}
    body.portada-llena.pie-fijo .ns-foot-mas{color:#64748b}
  }
  body.portada-llena.pie-fijo .ns-foot-links a,body.portada-llena.pie-fijo .ns-foot-btn,body.portada-llena.pie-fijo .ns-foot-credit{color:#e2e8f0}
  body.portada-llena.pie-fijo .ns-foot-links a:hover,body.portada-llena.pie-fijo .ns-foot-btn:hover{color:#fff}
  body.portada-llena.pie-fijo .ns-foot-credit b{color:#fff}
  /* ───────── La mascota, presente sin estorbar ─────────
     El isotipo se usa TAL CUAL (su burbuja azul): el muñeco es blanco y, recortado sobre fondo
     claro, desaparece. Lo que cambia es dónde aparece y cómo se mueve. */
  .mascota{display:block;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 4px 10px rgba(37,99,235,.18))}
  @keyframes mascota-bota{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
  @keyframes mascota-sombra{0%,100%{transform:scaleX(1);opacity:.35}50%{transform:scaleX(.7);opacity:.18}}
  /* Cargando: el muñeco da saltitos con su sombra. Sustituye al círculo que gira. */
  .ns-cargando{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:22px 16px}
  .ns-cargando .mascota{animation:mascota-bota 1.15s ease-in-out infinite}
  .ns-cargando .sombra{width:40px;height:7px;border-radius:50%;background:#94a3b8;filter:blur(3px);animation:mascota-sombra 1.15s ease-in-out infinite;margin-top:-4px}
  .ns-cargando .txt{font-size:13px;font-weight:600;color:var(--muted)}
  @media(prefers-reduced-motion:reduce){.ns-cargando .mascota,.ns-cargando .sombra{animation:none}}
  /* Estado vacío: la mascota espera, en gris suave, con el porqué y qué hacer. */
  .vacio-mascota{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    background:var(--soft);border:1px dashed var(--line);border-radius:16px;padding:26px 20px}
  .vacio-mascota .mascota{opacity:.72;filter:grayscale(.35) drop-shadow(0 4px 10px rgba(37,99,235,.12));transition:opacity .25s,filter .25s}
  .vacio-mascota:hover .mascota{opacity:1;filter:grayscale(0) drop-shadow(0 6px 14px rgba(37,99,235,.2))}
  .vacio-mascota h4{margin:12px 0 4px;font-size:14.5px;letter-spacing:-.01em}
  .vacio-mascota p{margin:0;font-size:13px;color:var(--muted);max-width:420px;line-height:1.6}
  /* Saludo del panel: la mascota recibe al alumno. */
  .dash-hola{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,var(--accent-soft),#fff 70%);
    border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:16px}
  .dash-hola .mascota{animation:mascota-bota 5.5s ease-in-out infinite}
  .dash-hola h2{margin:0;font-size:20px;letter-spacing:-.02em}
  .dash-hola .muted{font-size:14px}
  @media(max-width:560px){.dash-hola{padding:12px 14px;gap:12px}.dash-hola h2{font-size:17px}}
  @media(prefers-reduced-motion:reduce){.dash-hola .mascota{animation:none}}
  /* El tutor que firma la corrección. */
  /* Mientras corrige: la mascota espera contigo, y la barra va debajo. */
  .ev-prog-cab{display:flex;align-items:center;gap:12px;margin-bottom:10px;text-align:left}
  .ev-prog-cab b{font-size:13.5px}
  .ev-prog-mascota{animation:mascota-bota 1.4s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.ev-prog-mascota{animation:none}}
  .tutor-firma{display:flex;align-items:center;gap:10px}
  .tutor-firma .mascota{border-radius:0}
  .tutor-firma b{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-d)}
  /* El consejo de NutriSim: quien firma la nota, con su chapa de IA. */
  .tutor-caja{display:flex;align-items:center;gap:16px;background:linear-gradient(115deg,var(--accent-soft),#eef2ff);
    border:1px solid #dbeafe;border-radius:16px;padding:14px 18px;margin:18px 22px 0}
  .tutor-caja .marco{position:relative;flex:0 0 auto;width:60px;height:60px;background:none;border:0;box-shadow:none;display:grid;place-items:center}
  .tutor-caja .marco .mascota{width:60px;height:60px;filter:drop-shadow(0 4px 8px rgba(37,99,235,.28))}
  .tutor-caja .ia{position:absolute;top:-4px;right:-6px;background:#15803d;color:#fff;font-size:10.5px;font-weight:900;
    letter-spacing:.04em;padding:2px 6px;border-radius:20px;border:2px solid #fff}
  .tutor-caja h4{margin:0;font-size:14.5px;letter-spacing:-.01em}
  .tutor-caja p{margin:3px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
  @media(max-width:560px){.tutor-caja{padding:12px 14px;gap:12px;margin:14px 14px 0}.tutor-caja .marco{width:48px;height:48px}.tutor-caja .marco .mascota{width:36px;height:36px}}
  /* Marca de agua: la mascota, casi invisible, en las tarjetas grandes. Nunca encima del texto. */
  .con-marca{position:relative;overflow:hidden}
  .con-marca>*{position:relative;z-index:1}
  .con-marca::after{content:"";position:absolute;right:-18px;bottom:-22px;width:150px;height:150px;z-index:0;pointer-events:none;
    background:url("/nutrisim-cabeza.svg") no-repeat center/contain;opacity:.08;transform:rotate(-8deg)}
  @media(max-width:700px){.con-marca::after{width:108px;height:108px;right:-14px;bottom:-16px}}
  /* ───────── Logros ─────────
     Rejilla de insignias: conseguidas con su color pastel, borde fino y un brillo suave; las que
     faltan, apagadas y con candado. Cada una lleva su barra de avance («3 de 5») y, al pasar el
     ratón, un bocadillo con qué hay que hacer y cuándo se consiguió. */
  .logros-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;
    padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
  .logros-cab b{color:var(--ink);font-size:13px}
  .logros-cuenta{font-size:11.5px;font-weight:800;background:#fffbeb;color:#b45309;border:1px solid #fde68a;
    border-radius:999px;padding:3px 10px}
  .logros{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
  @media(min-width:620px){.logros{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:980px){.logros{grid-template-columns:repeat(4,1fr)}}
  .logro{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
    background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:16px 12px 14px;
    transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
  .logro:hover{transform:scale(1.05);z-index:3}
  .logro:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px;transform:scale(1.05);z-index:3}
  .logro.on{background:var(--lg-bg);border-color:var(--lg-bor);box-shadow:0 2px 10px var(--lg-glow)}
  .logro.on:hover{box-shadow:0 8px 22px var(--lg-glow)}
  .logro .sello{position:relative;width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto}
  .logro .sello img{width:46px;height:46px;display:block;filter:grayscale(1) opacity(.42)}
  .logro.on .sello img{filter:drop-shadow(0 3px 7px var(--lg-glow))}
  .logro .mini{position:absolute;bottom:-4px;right:-6px;font-size:13px;line-height:1;background:var(--panel);
    border:1px solid var(--line);border-radius:50%;padding:2px 3px}
  .logro.on .mini{border-color:var(--lg-bor)}
  .logro .candado{position:absolute;bottom:-4px;right:-6px;width:19px;height:19px;border-radius:50%;
    background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
  .logro b{font-size:12.5px;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
  .logro:not(.on) b{color:var(--muted)}
  .logro .lg-val{font-size:11px;font-weight:700;color:var(--lg-txt,var(--muted))}
  .logro:not(.on) .lg-val{color:var(--muted)}
  /* Barra de avance: fina, dentro de la propia tarjeta. */
  .logro .lg-barra{width:100%;height:4px;border-radius:999px;background:rgba(148,163,184,.28);overflow:hidden}
  .logro .lg-barra i{display:block;height:100%;border-radius:999px;background:var(--lg-bor);transition:width .4s}
  .logro.on .lg-barra i{background:var(--lg-txt)}
  /* Bocadillo: lo que falta y, si está conseguido, cuándo fue. */
  .logro .lg-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
    width:max-content;max-width:210px;background:#0f172a;color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;
    border-radius:12px;padding:8px 11px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:4;
    box-shadow:0 10px 24px rgba(15,23,42,.24)}
  .logro .lg-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;background:#0f172a;transform:translateX(-50%) rotate(45deg);border-radius:2px}
  .logro:hover .lg-tip,.logro:focus-within .lg-tip{opacity:1;transform:translateX(-50%)}
  .logro .lg-tip b{display:block;color:#fff;font-size:11.5px;margin-bottom:2px}
  @media(prefers-reduced-motion:reduce){.logro,.logro .lg-tip,.logro .lg-barra i{transition:none}.logro:hover{transform:none}}

  /* ───────── Mascota flotante: acompaña, no estorba ─────────
     Abajo a la IZQUIERDA (los avisos salen por la derecha y no se pisan), por debajo de modales,
     banner de cookies y avisos, y fuera de la portada y del móvil estrecho, donde no sobra sitio. */
  /* El bocadillo sale HACIA ARRIBA: abriéndose hacia la derecha se echaba encima de la tarjeta de
     «Caso asignado» y de su botón. Arriba solo pisa el margen. Además no recibe clics, así que lo
     que haya debajo se sigue pudiendo pulsar. */
  .masc-flot{position:fixed;left:18px;bottom:18px;z-index:35;display:none;flex-direction:column-reverse;align-items:flex-start;gap:8px;pointer-events:none}
  body.con-mascota .masc-flot{display:flex}
  /* En la consulta, el compositor ocupa todo el ancho abajo y en tablet el muñeco se le quedaba
     encima, tapando el principio de «Escribe tu pregunta al paciente…» (medido: 215 px de solape
     en iPad vertical). En el ordenador no llega a tocarlo y en el móvil tampoco, así que solo se
     retira en las pantallas donde estorba. El bocadillo ya tenía su propia medida anti-solape;
     esto es el muñeco. Si el navegador no entiende :has(), se queda como estaba. */
  @media(max-width:1100px){ body.con-mascota:has(#s-consulta.on) .masc-flot{display:none} }
  /* La cabeza flota SOLA: ni círculo, ni tarjeta, ni borde. La sombra es de la silueta. */
  .masc-flot .bola{pointer-events:auto;width:60px;height:60px;background:none;border:0;padding:0;cursor:pointer;
    display:grid;place-items:center;animation:masc-flota 3.4s ease-in-out infinite;
    filter:drop-shadow(0 6px 10px rgba(15,23,42,.22));transition:transform .22s,filter .22s}
  .masc-flot .bola img{width:60px;height:60px;display:block}
  .masc-flot .bola:hover,.masc-flot .bola:focus-visible{transform:scale(1.12) rotate(-7deg);filter:drop-shadow(0 10px 16px rgba(37,99,235,.34));outline:none}
  .masc-flot .bola:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:50%}
  @keyframes masc-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes masc-parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
  .masc-flot .globo{pointer-events:none;max-width:232px;margin:0;
    background:#0f172a;color:#fff;font-size:12.5px;font-weight:500;line-height:1.45;border-radius:14px;padding:9px 12px;
    box-shadow:0 10px 26px rgba(15,23,42,.24);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .18s,transform .18s;position:relative}
  .masc-flot .globo::after{content:"";position:absolute;left:20px;bottom:-4px;width:9px;height:9px;background:#0f172a;transform:rotate(45deg);border-radius:2px}
  /* El bocadillo solo se enseña si CABE libre: `mascGlobo()` mide antes y pone `.hueco` si no
     pisa ningún botón, enlace o campo. Si no cabe, el consejo sigue estando en el `title` del
     muñeco, que el navegador enseña al lado del cursor sin taparle nada a nadie. */
  .masc-flot .globo{visibility:hidden}
  .masc-flot.hueco:hover .globo,.masc-flot.hueco .bola:focus-visible+.globo,.masc-flot.hueco.abierto .globo{opacity:1;transform:none;visibility:visible}
  .masc-flot.midiendo .globo{visibility:hidden;opacity:0;transform:none}
  @media(max-width:700px){.masc-flot{display:none!important}}
  @media(prefers-reduced-motion:reduce){.masc-flot .bola,.masc-flot .bola img{animation:none}}

  /* Pantalla de espera a toda página: solo para esperas REALES (cargar un seguimiento, entrar en
     un aula). No se enseña por gusto: si no hay espera, no aparece. */
  .masc-overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
    background:rgba(15,23,42,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:masc-ov-in .18s ease}
  /* Sin tarjeta: la cabeza flota en el centro del velo y el texto va debajo, en blanco. */
  .masc-overlay .caja{background:none;border:0;box-shadow:none;padding:0;max-width:330px;text-align:center;animation:masc-caja-in .26s cubic-bezier(.2,.8,.2,1)}
  .masc-overlay .caja img{width:104px;height:104px;margin:0 auto 16px;display:block;
    animation:masc-trabaja 2s ease-in-out infinite;filter:drop-shadow(0 10px 18px rgba(15,23,42,.35))}
  .masc-overlay h4{margin:0 0 6px;font-size:16.5px;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 10px rgba(15,23,42,.4)}
  .masc-overlay p{margin:0;font-size:13px;color:rgba(255,255,255,.88);line-height:1.55}
  @keyframes masc-ov-in{from{opacity:0}to{opacity:1}}
  @keyframes masc-caja-in{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
  @keyframes masc-trabaja{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.05)}75%{transform:rotate(8deg) scale(1.05)}}
  @media(prefers-reduced-motion:reduce){.masc-overlay,.masc-overlay .caja,.masc-overlay .caja img{animation:none}}

  /* Celebración: la mascota entra de abajo con su cartel cuando la nota acompaña. */
  .tutor-caja.celebra{background:linear-gradient(115deg,#dcfce7,#eef2ff)}
  .tutor-caja.celebra .marco{border-color:#86efac;animation:masc-brinco .9s cubic-bezier(.2,.8,.2,1) 2}
  .tutor-caja.celebra .ia{background:var(--accent)}
  .tutor-caja .cartel{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #86efac;color:#15803d;
    font-weight:800;font-size:12.5px;border-radius:20px;padding:3px 10px;margin-top:6px;animation:masc-pop .35s .25s backwards}
  @keyframes masc-brinco{0%,100%{transform:translateY(0)}35%{transform:translateY(-11px) rotate(-6deg)}70%{transform:translateY(0) rotate(3deg)}}
  @keyframes masc-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
  .tutor-caja.entra{animation:masc-sube .4s cubic-bezier(.2,.8,.2,1)}
  @keyframes masc-sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.tutor-caja.celebra .marco,.tutor-caja .cartel,.tutor-caja.entra{animation:none}}

  /* Chapa de la cabecera del chat: quien simula al paciente. */
  .chat-marca{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);border:1px solid #dbeafe;
    border-radius:20px;padding:3px 9px 3px 4px;font-size:11px;font-weight:700;color:var(--accent-d);margin-left:auto;margin-right:8px;white-space:nowrap}
  .chat-marca img{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 3px rgba(37,99,235,.3))}
  /* Aviso de IA (EU AI Act, art. 50; 13-10-2026): visible en TODOS los anchos; en pantallas justas, corto. */
  .chat-marca .cm-corto{display:none}

  .screen{display:none;transform-origin:50% 0} .screen.on{display:block}   /* la entrada (entraPantalla) escala desde arriba */

  .check{color:var(--ok-ink);font-weight:800}

  /* Superficie (12-10-2026): blanco puro, borde fino de pizarra fría y sombra difusa. */
  .card{background:var(--panel);border:1px solid rgba(226,232,240,.7);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
  .card h3{margin:0 0 4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .cfg{margin-bottom:18px}

  /* Las tarjetas del panel se reparten el ancho que haya: al quitar «Cómo funciona»
     quedaban dos en una rejilla de tres y sobraba una columna vacía a la derecha. */
  /* TRES COLUMNAS EN PARALELO, de ancho fijo e igual (1fr cada una), no «las que quepan». Con
     `auto-fit` el número de columnas cambiaba con el ancho de la ventana: entre 900 y 1000 px
     salían dos y «Consultas terminadas» caía debajo, así que el panel se reorganizaba solo al
     redimensionar. Ahora: tres columnas en escritorio, una debajo de otra por debajo de 1024 px.
     `align-items:start` es lo que mantiene los ejes verticales quietos: cada columna mide lo que
     necesita y ninguna se estira por culpa de la más larga. `min-width:0` evita que un nombre de
     paciente largo o una tabla ensanchen su columna y descuadren las otras dos. */
  .dash{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
  .dash>*{min-width:0}
  @media(max-width:1023px){.dash{grid-template-columns:1fr}}
  /* Columna 1 · el caso asignado manda: es la única con acento de color. */
  .col-caso{border-color:#bfdbfe;background:linear-gradient(180deg,rgba(239,246,255,.65),#fff 62%)}
  .col-chapa{display:inline-block;vertical-align:middle;margin-left:8px;font-size:11.5px;font-weight:800;
    text-transform:uppercase;letter-spacing:.05em;color:#1d4ed8;background:#dbeafe;border-radius:999px;padding:3px 9px}
  .col-chapa.en-curso{color:#9a3412;background:#ffedd5}
  /* Columna 3 · lo terminado es consulta, no acción: se atenúa para que no compita con las otras. */
  .col-terminadas{background:#f8fafc}
  .patient-head>div:not(.avatar){min-width:0}
  .patient-head{display:flex;align-items:center;gap:14px;margin:12px 0}
  /* La foto del paciente NUNCA se deforma: es un cuadrado rígido dentro de un flex. Sin
     `flex:0 0 auto` un nombre largo la aplastaba hasta 21×64 px en un móvil estrecho —el círculo
     salía elipse y de la cara quedaba una rodaja—. */
  .avatar{width:52px;height:52px;flex:0 0 auto;aspect-ratio:1;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:26px;border:1px solid #dbeafe}
  .avatar.lg{width:64px;height:64px;font-size:32px}
  /* Con la foto dentro, el círculo es solo un marco: la imagen lo llena entera y el
     aro fino la separa del fondo de la tarjeta. */
  .avatar.con-retrato{overflow:hidden;padding:0;background:#e2e8f0;border:2px solid #f1f5f9;box-shadow:0 1px 3px rgba(15,23,42,.12)}
  .avatar .ns-foto{width:100%;height:100%;object-fit:cover;display:block}
  /* Si la foto no llegara, la inicial sobre el círculo: nunca un icono roto. */
  .avatar.sin-retrato{background:var(--soft);color:var(--muted);font:700 22px/1 system-ui;border:1px solid var(--line-solid)}
  .avatar.lg.sin-retrato{font-size:26px}
  .p-name{font-size:19px;font-weight:800;letter-spacing:-.01em}
  .p-meta{font-size:13px;color:var(--muted)}
  /* Consultas terminadas: cada una con su nota y su botón al informe de la IA. */
  /* Las consultas terminadas se agrupan POR PACIENTE: una cabecera con quién es y cuántas visitas
     lleva, y debajo una línea por visita con su nota y su informe. */
  /* Barras de filtros de las dos listas: discretas, pequeñas y que envuelven en móvil. */
  .filtros{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
  /* min-width pequeño: con tres desplegables y una columna de 390 px, 120 px cada uno se salía. */
  .filtros select{flex:1 1 96px;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:8px;padding:5px 7px;
    font-family:inherit;font-size:11.5px;color:var(--muted);background:var(--panel);cursor:pointer}
  .filtros select:focus{outline:2px solid var(--accent);outline-offset:1px}
  .fin-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .fin-top .muted{font-size:11.5px;white-space:nowrap}
  /* Con muchas consultas hechas, la tarjeta no puede crecer sin fin: rueda como la de pendientes. */
  #history{max-height:min(60vh,520px);overflow-y:auto;padding-right:2px}
  .fin-grupo{padding:8px 0;border-bottom:1px solid var(--soft)}
  .fin-grupo:last-child{border:none}
  .fin-cab{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
  .fin-cab b{font-size:14.5px}
  .fin-cab .muted{font-size:12px}
  .fin-fila{display:flex;align-items:center;gap:6px;margin-top:5px}
  /* La línea entera es el botón que abre la evaluación: cabe en una sola línea y el área es grande. */
  .fin-visita{flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:6px 9px;text-align:left;
    background:var(--soft);border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:12.5px;
    color:inherit;cursor:pointer;transition:border-color .15s,background .15s}
  .fin-visita:hover{border-color:var(--accent);background:var(--accent-soft)}
  .fin-visita:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .fin-ver{margin-left:auto;font-size:13px;opacity:.65;flex:0 0 auto}
  .fin-visita:hover .fin-ver{opacity:1}
  .fin-num{font-weight:700;font-size:11px;background:var(--panel);border:1px solid var(--line);
    border-radius:6px;padding:2px 6px;white-space:nowrap;flex:0 0 auto}
  /* Vista «ordenada por nota»: sin agrupar, una línea por consulta con el paciente delante. */
  .fin-quien{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;max-width:45%}
  /* El caso terminado es registro: se dice con un sello, no con un botón menos. */
  .fin-cerrado{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
    background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:2px 7px;align-self:flex-start;margin-bottom:3px}
  .cmp-detalle{display:flex;flex-direction:column;gap:6px;margin:12px 0}
  .cmp-fila{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;font-size:13.5px;
    background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 11px}
  .fin-visita .fin-fecha{font-size:11.5px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
  .fin-visita .score-pill{font-size:11px;padding:2px 7px;flex:0 0 auto}
  .fin-fila .btn.ghost.sm{padding:5px 8px;font-size:12px;flex:0 0 auto}
  .hist-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--soft);font-size:14px;gap:8px}
  .hist-row:last-child{border:none}
  .hist-row .hn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .score-pill{font-weight:800;border-radius:8px;padding:3px 10px;font-size:13px;flex:0 0 auto}
  /* La nota, en contexto: sin esto un 43 se lee como un suspenso de toda la vida. */
  .ev-ref{margin:10px auto 0;max-width:520px;font-size:12.5px;line-height:1.5;color:var(--muted);
    background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-align:left;font-weight:400}
  .ev-ref b{color:var(--text,inherit)}
  /* Acciones que no tienen vuelta atrás: en rojo, y solo cuando se buscan. */
  .btn-salir.peligro{color:#b91c1c;border-color:rgba(220,38,38,.35)}   /* var(--bad) no llegaba a 4,5:1 sobre el fondo rosado */
  .btn-salir.peligro:hover{background:rgba(220,38,38,.08);border-color:var(--bad)}
  .btn.peligro{background:var(--bad);border-color:var(--bad);color:#fff}
  .btn.peligro:hover{filter:brightness(1.07)}
  .prog-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
  .pstat{flex:1;min-width:78px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center}
  .pstat b{display:block;font-size:22px;font-weight:800;line-height:1.1}
  .pstat span{font-size:11px;color:var(--muted);font-weight:600}
  /* Tope de ancho: en el perfil la tarjeta es mucho más ancha que la del panel, y sin esto las
     barras se estiran hasta parecer un gráfico de bloques en vez de una evolución. */
  .spark{display:flex;align-items:flex-end;gap:4px;height:40px;padding-top:4px;max-width:440px}
  .spark i{flex:1;min-width:6px;border-radius:3px 3px 0 0;background:var(--muted);opacity:.85}
  .spark i.s-good{background:var(--ok)} .spark i.s-mid{background:var(--warn)} .spark i.s-low{background:var(--bad)}
  .s-good{background:#dcfce7;color:#15803d}.s-mid{background:#fef9c3;color:#a16207}.s-low{background:#fee2e2;color:#b91c1c}
  .empty{color:var(--muted);font-size:14px;padding:14px 0;text-align:center}

  /* Recordatorio de que esto es una revisión: una línea, con el enlace al resumen entero. */
  .prev-linea{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13.5px}
  .prev-linea .btn{margin-left:auto}
  @media(max-width:700px){.prev-linea .btn{margin-left:0;width:100%}}

  /* Sin columna derecha: el chat ocupa todo el ancho (las anotaciones están en la barra de pestañas). */
  .consulta{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;transition:grid-template-columns .4s cubic-bezier(.22,1,.36,1)}
  .consulta.carril-oculto{grid-template-columns:34px minmax(0,1fr)}
  /* En el ordenador el chat llega hasta abajo de la pantalla (lo mide ajustaAltoChat desde donde empieza)
     y el carril de MEDIR se estira a su misma altura: antes iban con medidas distintas y no coincidían. */
  @media(min-width:901px){
    #pane-consulta .chat-card{height:var(--chat-alto,calc(100dvh - var(--foot-h,104px) - 215px))}
    .consulta>.ar-tab,.consulta>.ar-rail{height:auto;min-height:0;align-self:stretch}
  }
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  /* Pestañas y anotaciones en la misma barra. */
  .tabs-bar{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);margin-bottom:16px}
  .tabs-bar>.tabs{border-bottom:none;margin-bottom:0;flex:1 1 auto;min-width:0}
  /* Bloc de notas rápido (11-10-2026): UN marco crema (amber-50/70, borde amber-200/80, rounded-xl) con el 📝 a la
     izquierda y el campo transparente dentro, sin marco, sin anillo y sin fondo propio (anula el estilo general de input). */
  .notas-barra{display:flex;align-items:center;gap:6px;flex:0 1 380px;min-width:300px;padding:4px 0}
  .notas-campo{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 12px;min-height:40px;box-sizing:border-box;
    background:rgba(255,251,235,.7);border:1px solid rgba(253,230,138,.8);border-radius:12px;transition:border-color .15s,box-shadow .15s}
  .notas-campo:hover{border-color:#fcd34d}
  .notas-campo:focus-within{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.16)}
  /* Área de pulsación (matriz de dispositivos, 11-10-2026): 28 px con ratón (mínimo 24) y 44 en táctil, con márgenes
     negativos para que el marco no crezca. El campo ocupa todo el alto del marco: se toca donde se ve. */
  .notas-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:0;background:none;padding:0 3px;margin:-4px 0 -4px -6px;min-width:28px;min-height:28px;font-size:16px;line-height:1;cursor:pointer;border-radius:8px}
  .notas-ico:hover{background:rgba(245,158,11,.12)}
  .notas-ico .notas-n{position:static;min-width:17px;height:17px;line-height:17px;font-size:10.5px;padding:0 5px}
  .notas-ico:focus-visible{outline:2px solid #f59e0b;outline-offset:3px}
  .notas-barra .notas-campo input,.notas-barra .notas-campo input:focus{flex:1 1 auto;width:100%;min-width:0;margin:0;padding:2px 0;border:0;border-radius:0;
    background:transparent;box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;font:inherit;font-size:14px;color:#451a03}
  .notas-barra .notas-campo input::placeholder{color:rgba(180,83,9,.6);opacity:1}
  .notas-barra .notas-campo input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fffbeb inset}
  @media(prefers-reduced-motion:reduce){.notas-campo{transition:none}}
  .notas-n{position:absolute;top:-9px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;
    font-size:11px;font-weight:700;line-height:18px;text-align:center}
  .notas-n[hidden]{display:none}
  .notas-quien{font-size:12px;color:var(--muted);white-space:nowrap}
  .notas-quien:empty{display:none}
  #mNotasSesion .notelist{max-height:min(52vh,420px);min-height:0;flex:0 1 auto}
  /* Por debajo de 1100 px las pestañas y las notas no caben juntas (se tapaba «Historial clínico»): las
     notas bajan a su propia fila, a todo el ancho. */
  @media(max-width:1100px){.tabs-bar{flex-wrap:wrap;gap:0}.tabs-bar>.tabs{flex-basis:100%}.notas-barra{flex:1 1 100%;min-width:0;padding:8px 0}}
  @media(pointer:coarse){.notas-campo{min-height:44px;padding-top:0;padding-bottom:0}.notas-ico{min-width:44px;min-height:44px;margin:-1px 0 -1px -12px}.notas-barra .notas-campo input,.notas-barra .notas-campo input:focus{align-self:stretch;min-height:44px;margin:-1px 0;padding:0}}
  /* minmax(0,…): con «1fr» la columna no encogía por debajo del ancho mínimo de su contenido y, a 320 px,
     la actitud larga («Dudoso · Aún no sabe si esto le servirá») ensanchaba la consulta 17 px (11-10-2026). */
  @media(max-width:900px){.consulta,.consulta.carril-oculto{grid-template-columns:minmax(0,1fr)}.consulta>*{min-width:0}}
  /* El hilo manda: la tarjeta de chat estira hasta justo encima del pie fijo. Lo que antes le
     robaba altura (el aviso de IA arriba) ahora va al pie del compositor, en una línea. */
  .chat-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;height:calc(100vh - var(--foot-h,104px) - 215px);height:calc(100dvh - var(--foot-h,104px) - 215px);min-height:480px}
  .chat-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .chat-head>div:not(.avatar){min-width:0}
  .chat-head b{overflow-wrap:anywhere}
  /* El aviso de IA dentro de la consulta: bajo el compositor, centrado y tenue — presente sin
     estorbar al hilo (art. 50 del Reglamento (UE) 2024/1689). */
  .chat-ia{margin:0;padding:6px 18px;border-top:1px solid var(--line);text-align:center;
    font-size:12px;line-height:1.5;color:var(--muted);background:var(--bg);border-radius:0 0 15px 15px}
  .msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
  .msgs:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* Pista del tutor: ámbar, discreta, y una vez gastada se queda apagada y bien visible que ya no hay más. */
  .pista-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
    background:#fffbeb;color:#b45309;border:1px solid #fcd34d;border-radius:999px;padding:7px 13px;
    font-weight:600;font-size:13px;line-height:1;font-family:inherit;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}
  .pista-btn:hover:not(:disabled){background:#fef3c7;box-shadow:0 4px 12px rgba(180,83,9,.16);transform:translateY(-1px)}
  .pista-btn:focus-visible{outline:3px solid #fcd34d;outline-offset:2px}
  .pista-btn:disabled{background:var(--soft);color:var(--muted);border-color:var(--line);cursor:default;transform:none;box-shadow:none}
  .pista-btn svg{flex-shrink:0}
  @media(max-width:520px){.pista-btn span{display:none}.pista-btn{padding:8px 10px}}
  @media(prefers-reduced-motion:reduce){.pista-btn{transition:none}.pista-btn:hover:not(:disabled){transform:none}}
  /* La pista, en el hilo: ni paciente ni alumno, se ve de otro color para que no se confunda con la consulta. */
  .msg.tutor{align-self:stretch;max-width:100%;background:#fffbeb;border:1px solid #fde68a;color:#78350f;border-radius:14px;font-size:14px}
  .msg.tutor b{display:block;margin-bottom:4px;color:#b45309;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase}

  .msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:14.5px;white-space:pre-wrap}
  .msg.pat{background:var(--soft);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
  .msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
  .msg.sys{align-self:center;max-width:92%;text-align:center;background:var(--accent-soft);border:1px dashed #bfdbfe;color:var(--accent-d);font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:10px}

  /* ---- Carril de instrumentos de exploración antropométrica ---- */
  .ar-rail.locked{opacity:.6}
  .ar-rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);height:70vh;min-height:460px;box-sizing:border-box;overflow-y:auto;position:relative;
    animation:carrilEntra .4s cubic-bezier(.22,1,.36,1) both}
  /* Entrada: la barra se desliza desde la izquierda y las cinco bolas caen en cascada. */
  @keyframes carrilEntra{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
  @keyframes bolaEntra{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes carrilPulso{0%,100%{box-shadow:var(--shadow)}35%{box-shadow:0 0 0 4px rgba(37,99,235,.25),0 0 22px rgba(37,99,235,.45)}}
  .ar-rail.entra .ar-item{animation:bolaEntra .3s ease-out both}
  .ar-rail.entra .ar-item:nth-child(2){animation-delay:.05s}
  .ar-rail.entra .ar-item:nth-child(3){animation-delay:.10s}
  .ar-rail.entra .ar-item:nth-child(4){animation-delay:.15s}
  .ar-rail.entra .ar-item:nth-child(5){animation-delay:.20s}
  .ar-rail.entra .ar-item:nth-child(6){animation-delay:.25s}
  .ar-rail.destello{animation:carrilEntra .4s cubic-bezier(.22,1,.36,1) both,carrilPulso 1.1s ease-in-out .35s 2}
  @media(prefers-reduced-motion:reduce){
    .ar-rail,.ar-rail.destello,.ar-rail.entra .ar-item{animation:none}
  }
  /* Botón de plegar y pestaña de abrir a mano. */
  .ar-cerrar{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;background:none;color:var(--muted);
    font-size:15px;line-height:1;cursor:pointer;border-radius:6px}
  .ar-cerrar:hover{background:var(--soft);color:var(--ink)}
  .ar-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:34px;height:70vh;min-height:460px;
    background:var(--panel);border:1px solid var(--line);border-right:none;border-radius:16px 0 0 16px;box-shadow:var(--shadow);
    cursor:pointer;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;padding:0;box-sizing:border-box}
  .ar-tab:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
  .ar-tab span{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase}
  @media(max-width:900px){
    .ar-tab{width:100%;height:auto;min-height:0;flex-direction:row;border-radius:14px;border-right:1px solid var(--line);padding:10px}
    .ar-tab span{writing-mode:horizontal-tb;transform:none}
  }
  .ar-rail .ar-title{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.25;padding:0 6px;margin-bottom:2px}
  .ar-btn{position:relative;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--accent-d);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.08);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;flex:0 0 auto}
  .ar-btn:hover:not(:disabled):not(.girando){transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 16px rgba(37,99,235,.18)}
  .ar-btn:active:not(:disabled){transform:scale(.94)}
  .ar-btn svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ar-btn:disabled{cursor:default}
  .ar-item{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
  .ar-lbl{font-size:11px;font-weight:700;color:var(--muted);text-align:center;letter-spacing:.01em}
  /* Giro completo en 3D sobre su eje vertical (como una moneda), 0,9 s suaves con halo azul.
     La perspectiva va en el contenedor para que el icono tenga volumen al darse la vuelta. */
  .ar-item{perspective:1000px}
  @keyframes arGiro{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
  @keyframes arHalo{0%{box-shadow:0 0 0 0 rgba(37,99,235,0)}35%{box-shadow:0 0 0 5px rgba(37,99,235,.35),0 0 18px rgba(37,99,235,.55)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
  .ar-btn.girando{animation:arGiro .9s ease-in-out,arHalo .9s ease-in-out;border-color:var(--accent);transform-style:preserve-3d;backface-visibility:visible}
  .ar-btn.girando svg{animation:none}
  .ar-btn.girando::before{display:none}   /* el aro giratorio sobra si el botón ya da la vuelta */
  @media(prefers-reduced-motion:reduce){.ar-btn.girando{animation:arHalo .9s ease-in-out}}
  /* Medido: azul cobalto con su ✓ (el verde se confundía con «correcto»). */
  .ar-btn.done{background:var(--accent);border-color:var(--accent);color:#fff}
  .ar-btn.done svg{stroke:#fff}
  .ar-btn.done::after{content:"✓";position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;border-radius:50%;background:#0f172a;color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--panel)}
  .ar-btn.done .ar-lbl{color:var(--accent-d)}
  .ar-item.done .ar-lbl{color:var(--accent-d);font-weight:800}
  .ar-btn.busy{border-color:var(--accent);background:var(--accent-soft)}
  .ar-btn.busy::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);border-top-color:transparent;animation:arSpin .8s linear infinite}
  /* Micro-animación específica de cada instrumento mientras mide */
  .ar-btn.busy[data-inst="weight"] svg{animation:arWeigh .5s ease-in-out infinite}
  .ar-btn.busy[data-inst="height"] svg{animation:arHeight .5s ease-in-out infinite}
  .ar-btn.busy[data-inst="waist"] svg{animation:arTape .6s ease-in-out infinite}
  .ar-btn.busy[data-inst="skinfolds"] svg{animation:arPinch .35s ease-in-out infinite}
  .ar-btn.busy[data-inst="bia"] svg{animation:arZap .45s ease-in-out infinite}
  .ar-btn.busy[data-inst="bia"]::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,99,235,.45);animation:arPing 1s cubic-bezier(0,0,.2,1) infinite}
  @keyframes arSpin{to{transform:rotate(360deg)}}
  @keyframes arWeigh{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(1px)}}
  @keyframes arHeight{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
  @keyframes arTape{0%,100%{transform:scaleX(.82)}50%{transform:scaleX(1.12)}}
  @keyframes arPinch{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.6)}}
  @keyframes arZap{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.35;transform:scale(1.14)}}
  @keyframes arPing{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}100%{box-shadow:0 0 0 16px rgba(37,99,235,0)}}
  @media(max-width:900px){
    .ar-rail{flex-direction:row;height:auto;min-height:0;justify-content:space-around;flex-wrap:wrap;gap:6px;padding:12px 8px;overflow:visible}
    .ar-rail .ar-title{width:100%;margin-bottom:4px}
    .ar-rail .ar-item{width:auto;flex:0 0 auto}
  }

  /* ---- Avisos flotantes (resultado de cada medición) ---- */
  .toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
  /* Los avisos los da la mascota: su cara a la izquierda y el texto al lado. */
  .toast{background:var(--panel);border:none;border-radius:12px;box-shadow:0 10px 24px -6px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.06);padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--ink);max-width:340px;animation:toIn .32s cubic-bezier(.2,.8,.2,1);
    display:flex;align-items:center;gap:11px}
  .toast .to-av{display:grid;place-items:center;flex:0 0 auto}
  .toast .to-av img{width:34px;height:34px;display:block;filter:drop-shadow(0 2px 4px rgba(37,99,235,.25))}
  .toast .to-txt{min-width:0}
  .toast small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
  .toast.out{animation:toOut .3s ease forwards}
  @keyframes toIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes toOut{to{opacity:0;transform:translateX(16px)}}
  @media(prefers-reduced-motion:reduce){.ar-btn.busy::before,.ar-btn.busy svg,.ar-btn.busy::after,.toast{animation:none!important}}

  /* Tarjeta antropométrica aún sin medir */
  .an-pend{opacity:.85}
  .an-pend>h4{color:var(--muted)}
  .an-pend .an-body{padding:16px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
  .an-pend .an-body b{font-weight:700;color:var(--ink)}
  .composer{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}
  /* La columna NO se capa a mano: la rejilla ya la estira a la altura de la fila (la del chat).
     Si se le pone un techo, las tarjetas se encogen por debajo de su contenido y este se sale
     por el borde de abajo — que es justo lo que pasaba con el aviso de las anotaciones. */
  .side{display:flex;flex-direction:column;gap:16px;min-width:0}
  /* Ficha del paciente: lo justo para identificarlo de un vistazo; el detalle está en las pestañas. */
  .ficha-compacta{padding:13px 14px;flex:0 0 auto}
  .ficha-compacta h3{font-size:12px}
  .ficha-compacta .patient-head{gap:10px;margin:9px 0 8px}
  .ficha-compacta .avatar{width:40px;height:40px;font-size:16px;flex:0 0 auto}
  .ficha-compacta .p-name{font-size:15px}
  .ficha-compacta .p-meta{font-size:12px}
  .ficha-compacta .tag{font-size:11px;padding:3px 8px}
  /* Las anotaciones suben y se quedan con el espacio que deja el historial (ya vive en su pestaña):
     estiran si sobra sitio, pero NUNCA por debajo de lo que miden sus cosas (sin `min-height:0`),
     así que el borde blanco siempre envuelve la lista, el botón y el aviso de la bombilla. */
  .notas-card{padding:16px;display:flex;flex-direction:column;flex:1 1 auto}
  .notes{flex:1;min-height:150px;font-size:14px;line-height:1.5}
  .hint{font-size:12px;color:var(--muted);margin-top:8px}
  /* La lista es la única que da y toma altura: se queda con lo que sobra (base 0) y, cuando hay
     muchas notas, hace su propio scroll en vez de estirar la tarjeta. */
  .notelist{margin-top:10px;display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-height:90px;overflow-y:auto}
  /* Apilado en móvil no hay columna que ajustar: cada tarjeta ocupa lo suyo. */
  @media(max-width:900px){.notas-card{flex:0 0 auto}.notelist{flex:0 0 auto;max-height:220px}
    /* dvh: en Safari de iPhone, 100vh mide como si no hubiera barra del navegador y el campo de escribir quedaba debajo. */
    .chat-card{height:calc(100vh - var(--foot-h,104px) - 150px);height:calc(100dvh - var(--foot-h,104px) - 150px);min-height:420px}
    #pane-consulta .chat-card{height:var(--chat-alto,calc(100dvh - var(--foot-h,104px) - 150px))}}
  .noteitem{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
  .noteitem .nc{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent-d);background:var(--accent-soft);border:1px solid #dbeafe;border-radius:6px;padding:1px 6px;white-space:nowrap;flex:0 0 auto;margin-top:1px}
  .noteitem .nt{flex:1;min-width:0}
  .noteitem .nx{cursor:pointer;color:var(--muted);border:none;background:none;font-size:16px;line-height:1;padding:0 2px}
  .noteitem .nx:hover{color:var(--bad)}
  .noteitem.new{animation:hin .6s ease}
  /* Notas estructuradas: salida del módulo de clasificación en 6 áreas clínicas */
  .ncls{display:flex;flex-direction:column;gap:11px}
  .nsec{border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--soft)}
  .nsec.void{opacity:.6}
  .nsec h5{margin:0 0 7px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
  .nsec h5 .nn{background:var(--accent-soft);color:var(--accent-d);border-radius:20px;padding:1px 8px;font-size:11px}
  .nsec ul{margin:0;padding-left:17px;font-size:13.5px;line-height:1.55}
  .nsec li{margin-bottom:4px}
  .nsec .nvoid{font-size:12.5px;color:var(--muted);font-style:italic}
  .nbadge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 10px;background:var(--accent-soft);color:var(--accent-d);border:1px solid #dbeafe}
  .nbadge.local{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
  .nhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .nraw{margin-top:12px;font-size:12.5px;color:var(--muted)}
  .nraw summary{cursor:pointer;font-weight:600}
  .nraw ul{margin:8px 0 0;padding-left:18px;line-height:1.5}
  .hcount{background:var(--accent-soft);color:var(--accent-d);border-radius:20px;padding:1px 8px;font-size:11px;margin-left:6px;vertical-align:middle}
  .chist{max-height:240px;overflow-y:auto;margin-top:8px}
  .chist .he{padding:8px 2px;border-bottom:1px solid var(--soft);font-size:13.5px}
  .chist .he:last-child{border-bottom:none}
  .chist .he .hl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:block;margin-bottom:2px}
  .chist .hbad{color:var(--bad);font-weight:700}
  .chist .he.new{animation:hin .6s ease}
  @keyframes hin{from{background:var(--accent-soft)}to{background:transparent}}
  .hbad{color:var(--bad);font-weight:700}
  /* Panel de analítica de sangre (dashboard médico) */
  .bt-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--muted)}
  .bt-head b{color:var(--ink)}
  .bt-legend{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap}
  .bt-legend span{display:inline-flex;align-items:center;gap:5px}
  .bt-cat{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;background:#fff}
  .bt-cat>summary{list-style:none;cursor:pointer;padding:12px 16px;background:var(--soft);font-size:13.5px;font-weight:700;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;user-select:none}
  .bt-cat>summary::-webkit-details-marker{display:none}
  .bt-cat>summary::before{content:"▸";color:var(--muted);font-size:12px;transition:transform .15s}
  .bt-cat[open]>summary::before{transform:rotate(90deg)}
  .bt-cat:not([open])>summary{border-bottom:none}
  .bt-sctag{margin-left:auto;font-weight:600;font-size:11.5px;color:var(--muted)}
  .bt-row{display:grid;grid-template-columns:1fr auto auto 104px;gap:12px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--soft);font-size:14px}
  .bt-row:last-child{border-bottom:none}
  .bt-name{color:var(--ink);cursor:help;border-bottom:1px dotted transparent}
  .bt-name:hover{border-bottom-color:var(--line)}
  .bt-val{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;min-width:78px}
  .bt-ref{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:70px;text-align:right}
  .bt-row.st-high{background:rgba(217,119,6,.05)} .bt-row.st-high .bt-val{color:var(--warn-ink)}
  .bt-row.st-low{background:rgba(220,38,38,.05)} .bt-row.st-low .bt-val{color:var(--bad)}
  .bt-row.st-normal_high .bt-val{color:var(--warn-ink)}
  .bt-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;justify-self:end}
  .bg-ok{background:rgba(22,163,74,.12);color:#15803d}
  .bg-high{background:rgba(217,119,6,.14);color:#b45309}
  .bg-low{background:rgba(220,38,38,.12);color:#b91c1c}
  .bg-lim{background:rgba(202,138,4,.14);color:#a16207}
  .bt-concl{border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft);padding:14px 18px;margin-top:6px}
  .bt-concl h4{margin:0 0 8px;font-size:14px}
  .bt-concl ul{margin:0;padding-left:18px} .bt-concl li{margin:4px 0;font-size:13.5px;line-height:1.5}
  /* Tarjeta antropométrica */
  .an-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;background:#fff}
  .an-card>h4{margin:0;padding:11px 16px;background:var(--soft);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line)}
  .an-body{padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 26px}
  .an-item{font-size:14px}
  .an-item .an-l{color:var(--muted);font-size:12px;display:block;margin-bottom:1px}
  .an-item b{font-size:15.5px;font-variant-numeric:tabular-nums}
  .an-tag{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);margin-left:2px}
  .an-flag{font-size:12px;font-weight:700;margin-left:6px}
  .an-flag.f-high{color:var(--bad)} .an-flag.f-lim{color:var(--warn-ink)} .an-flag.f-ok{color:var(--ok-ink)}
  /* Amigos y aulas colaborativas */
  .so-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
  .so-code{font-size:30px;font-weight:800;letter-spacing:.22em;color:var(--accent-d);background:var(--accent-soft);border-radius:12px;padding:12px;text-align:center;margin:12px 0}
  .so-list .so-h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
  .so-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--soft);font-size:14px}
  .so-row:last-child{border-bottom:0}
  /* Fila de «Tus amigos»: su Simi (40 px) a la izquierda del nombre y el estado; el chat, a la derecha. */
  .so-quien{display:flex;align-items:center;gap:10px;min-width:0}
  .so-simi{flex:0 0 40px;width:40px;height:40px;border-radius:999px;background:#f1f5f9;display:grid;place-items:center;overflow:hidden}
  .so-simi svg,.so-simi img{width:40px;height:40px;display:block}
  .so-simi.serie img{width:32px;height:32px}
  .so-quien-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  .so-quien-txt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .so-estado{font-size:12px;color:var(--muted);display:flex;align-items:center}
  .so-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#cbd5e1;margin-right:7px}
  .so-dot.on{background:#16a34a}.so-dot.busy{background:#f59e0b}.so-dot.off{background:#cbd5e1}
  .so-dm{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px}
  .so-msg{align-self:flex-start;background:var(--soft);border-radius:12px;padding:8px 12px;font-size:13.5px;max-width:75%}
  .so-msg.mio{align-self:flex-end;background:var(--accent);color:#fff}
  .so-modes{display:grid;gap:8px;margin-top:12px}
  .so-mode{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;cursor:pointer}
  .so-mode.on{border-color:var(--accent);background:var(--accent-soft)}
  .so-mode small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;font-weight:400}
  .so-room{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;color:var(--accent-d)}
  .so-members{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .so-member{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;background:var(--panel)}
  .nby{display:inline-block;font-size:11px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
  .co-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--accent-d);background:var(--accent-soft);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle}
  .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:700px){.vs-grid{grid-template-columns:1fr}}
  .vs-col{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--panel)}
  .vs-name{font-weight:800;margin-bottom:6px}
  .vs-blk{margin-top:12px;font-size:13px}
  .vs-blk b{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .vs-blk p{margin:4px 0 0;line-height:1.6}
  .vs-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
  /* Pie legal + consentimiento de cookies */
  /* PIE PEGADO AL FINAL (patrón sticky footer, no `position:fixed`): el `body` es una columna
     flex de al menos una pantalla de alto, el contenido estira (`flex:1`) y el pie se va al fondo
     con `margin-top:auto`. Con poco contenido queda abajo del todo sin flotar por encima de nada;
     con mucho, se queda al final del scroll, en su sitio, donde toca.
     Alternativa: `document.body.classList.add("pie-fijo")` lo devuelve a pie SUPERPUESTO, siempre
     a la vista, por debajo de los modales (z-50) y del banner de cookies (z-60). */
  .ns-foot{margin-top:auto;border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 -6px 20px rgba(15,23,42,.06)}
  body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
  /* width:100%: en la columna flex del body, «margin:0 auto» quita el estirado y el ancho salía del
     contenido; con el vídeo a sangre (100vw) de la portada eran 2 px de más en el iPad. */
  body>.wrap{flex:1 0 auto;width:100%}
  /* Opción 2 · pie superpuesto siempre a la vista: el contenido deja un hueco igual de alto que el
     pie (--foot-h, medido en vivo por `mideFooter()`) para que no quede nada escondido detrás. */
  body.pie-fijo{padding-bottom:var(--foot-h,104px)}
  body.pie-fijo .ns-foot{position:fixed;left:0;right:0;bottom:0;z-index:40;margin-top:0}
  .ns-foot-in{max-width:1140px;margin:0 auto;padding:2px 20px 8px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
  .ns-foot-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px}
  /* Al fijar el pie, sus botones pasaron a estar SIEMPRE en pantalla… y medían 20 px de alto:
     imposibles de acertar con el dedo. Ahora todos llegan a 32. */
  .ns-foot-links a,.ns-foot-btn{color:var(--muted);text-decoration:none;background:none;border:none;font:inherit;font-size:13px;cursor:pointer;
    padding:6px 0;min-height:32px;display:inline-flex;align-items:center}
  .ns-foot-links a:hover,.ns-foot-btn:hover{color:var(--accent-d);text-decoration:underline}
  /* Los nombres iban en <b>, pero la conjunción quedaba dentro y nunca cambiaba de idioma: ahora
     la línea es una sola frase traducible y el peso se lo da el CSS. */
  .ns-foot-credit{font-size:11.5px;color:var(--muted);font-weight:600}
  /* La declaración de IA: 11 px, gris tenue y sin caja. Ocupa su propia línea, separada por
     un filete finísimo; presente siempre, pero sin gritar. */
  .ns-foot-ia{flex-basis:100%;order:3;margin:0;padding-top:10px;border-top:1px solid rgba(148,163,184,.25);
    font-size:12px;line-height:1.65;color:var(--muted)}
  @media(max-width:700px){
    /* Con tres o cuatro líneas de aviso, un pie fijo se come un cuarto del teléfono (y tapa el
       campo de escribir del chat). Aquí se recorta a dos líneas y el texto entero sigue a un toque
       en «Aviso completo»; además, dentro de la consulta hay su propia línea de transparencia. */
    .ns-foot-in{padding:8px 14px;gap:6px}
    /* En el teléfono, el aviso va en su versión CORTA (una línea con lo esencial) y el texto
       entero queda a un toque en «Aviso completo»: un pie fijo con cuatro líneas de legal se
       comería una quinta parte de la pantalla, y dentro de la consulta ya hay su propia línea
       de transparencia siempre visible. */
    .ns-foot-ia{margin-top:0}
    .ns-foot-credit{display:none}
  }
  .ns-foot-ia-corto{display:none}
  /* En el teléfono manda la versión corta del aviso (una línea con lo esencial) y el texto entero
     queda a un toque en «Aviso completo». Va aquí, después de la regla de arriba, porque si no la
     pisaba por orden de aparición. */
  @media(max-width:700px){
    .ns-foot-ia-txt{display:none}
    .ns-foot-ia-corto{display:inline}
  }
  .ns-foot-mas{background:none;border:none;padding:7px 2px;min-height:32px;margin-left:2px;font:inherit;color:#64748b;
    cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .ns-foot-mas:hover{color:var(--accent-d)}
  .ns-foot-mas:focus-visible{outline:2px solid #93c5fd;outline-offset:2px;border-radius:3px}
  body.portada-llena.pie-fijo .ns-foot-ia{color:#cbd5e1;border-top-color:rgba(255,255,255,.14)}
  body.portada-llena.pie-fijo .ns-foot-mas{color:#e2e8f0}
  /* Por encima de las ventanas (65): el consentimiento no puede quedar bloqueado detrás de una. Al abrir su configuración, el aviso se oculta. */
  /* Tarjeta flotante y discreta, abajo a la izquierda (13-10-2026): no tapa la portada entera. */
  .ck-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:66;background:var(--panel);border:1px solid #e2e8f0;
    border-radius:16px;box-shadow:0 20px 25px -5px rgba(15,23,42,.1),0 8px 10px -6px rgba(15,23,42,.1);padding:16px;display:flex;flex-direction:column;gap:14px;max-width:448px}
  .ck-banner[hidden]{display:none}
  .ck-txt{min-width:0}
  .ck-pol{display:inline-block;margin-top:6px;font-size:13px;font-weight:600}
  .ck-txt>b{display:block;margin-bottom:4px}   /* solo el título: la negrita del párrafo partía la frase */
  .ck-txt p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
  .ck-txt a{color:var(--accent-d)}
  .ck-acts{display:flex;gap:8px;flex-wrap:wrap}
  .ck-acts .btn{flex:1 1 auto;padding:9px 14px;font-size:14px}
  .ck-cat{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:12px}
  .ck-cat-h{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
  .ck-cat p{margin:6px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted)}
  .ck-cat code{background:var(--soft);border-radius:5px;padding:1px 5px;font-size:11.5px}
  .ck-lock{font-size:11px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:3px 9px}
  .ck-sw input{position:absolute;opacity:0;width:0;height:0}
  .ck-sw span{display:block;width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;cursor:pointer}
  .ck-sw span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
  .ck-sw input:checked+span{background:var(--accent)}
  .ck-sw input:checked+span::after{transform:translateX(18px)}
  .ck-sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
  @media(max-width:620px){.ck-acts .btn{flex:1 1 100%}}
  /* Lo que está a medias vive en el panel, en la columna que ocupaba «Tu progreso». Va en ámbar
     —no en el azul de la marca— porque no es información: es algo pendiente de hacer. */
  .resume{display:flex;flex-direction:column;align-items:flex-start;gap:8px;align-self:start;
    border:1px solid rgba(217,119,6,.32);background:rgba(217,119,6,.07)}
  .resume>*{width:100%}
  .res-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding-bottom:10px;border-bottom:1px solid rgba(217,119,6,.22)}
  .res-cab b{font-size:15.5px;line-height:1.3}
  /* El contador: ámbar mientras quede sitio, rojo cuando ya no. */
  .res-cuenta{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap;
    color:var(--warn-ink);background:rgba(217,119,6,.12);border:1px solid rgba(217,119,6,.34)}
  .res-cuenta.tope{color:var(--bad);background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.34)}
  .res-aviso{display:flex;gap:8px;font-size:12.5px;line-height:1.45;color:var(--bad);
    background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.28);border-radius:10px;padding:10px 12px}
  .res-aviso::before{content:"⚠️";flex:0 0 auto}
  /* La lista crece hasta cierto punto y luego rueda: con 30 casos, la tarjeta no puede ser infinita. */
  .res-lista{display:flex;flex-direction:column;gap:8px;max-height:min(46vh,320px);overflow-y:auto;padding-right:2px}
  .res-item{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
  .res-item-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .res-quien{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .res-item-txt b{font-size:13.5px}
  .res-item-txt .muted{font-size:12px}
  .res-item-txt .res-det{font-size:11.5px;opacity:.85}
  .res-item-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .btn.sm.ambar{padding:6px 11px;font-size:12.5px}
  .btn.ambar{background:var(--warn-ink);border-color:var(--warn-ink);color:#fff}
  .btn.ambar:hover{filter:brightness(1.07)}
  .an-folds{display:flex;flex-wrap:wrap;gap:8px}
  .an-delta{font-size:11px;font-weight:800;border-radius:999px;padding:2px 7px;margin-left:6px;white-space:nowrap}
  .an-delta.down{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
  .an-delta.up{background:#fff7ed;color:#b45309;border:1px solid #fed7aa}
  .an-delta.eq{background:#f1f5f9;color:#64748b;border:1px solid var(--line)}
  .an-fold{background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:13px;font-variant-numeric:tabular-nums}
  .an-fold span{color:var(--muted);font-size:11px;display:block}
  .an-bar{height:22px;border-radius:8px;background:var(--soft);overflow:hidden;position:relative;margin:6px 0 4px;border:1px solid var(--line)}
  .an-bar>i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#f59e0b,#dc2626);border-radius:8px 0 0 8px}
  .an-comp{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px}
  /* Estado bloqueado + revelado de la antropometría */
  .an-locked{text-align:center;padding:44px 20px;border:1.5px dashed var(--line);border-radius:16px;background:var(--soft)}
  .an-lock-ico{font-size:40px;margin-bottom:8px;filter:grayscale(.3)}
  .an-locked h3{margin:6px 0 4px;font-size:17px}
  .an-locked p{max-width:420px;margin:0 auto 14px;font-size:13.5px}
  .an-hints{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
  .an-hints span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--accent);font-weight:600}
  .an-reveal{animation:anIn .5s cubic-bezier(.2,.7,.2,1)}
  .an-reveal .an-card{animation:anUp .55s cubic-bezier(.2,.7,.2,1) both}
  .an-reveal .an-card:nth-child(2){animation-delay:.06s}
  .an-reveal .an-card:nth-child(3){animation-delay:.12s}
  .an-reveal .an-card:nth-child(4){animation-delay:.18s}
  .an-reveal .an-card:nth-child(5){animation-delay:.24s}
  .an-reveal .an-bar>i{animation:anBar .9s .3s cubic-bezier(.3,.8,.3,1) both}
  @keyframes anIn{from{opacity:0}to{opacity:1}}
  @keyframes anUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes anBar{from{width:0!important}}
  .tab-new{position:relative}
  /* (El punto de 8 px que había aquí pasaba desapercibido: ahora es .tab-aviso, al final del fichero.) */
  /* Pantalla de entrega (split-view) */
  /* `dvh` (con respaldo `vh`) para que la barra dinámica del navegador móvil no corte el final del panel */
  .eval-sheet{background:var(--card,#fff);border:1px solid var(--line);border-radius:var(--radius);width:min(1120px,96vw);max-height:92vh;max-height:92dvh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
  /* Esperando la corrección que lanzó el compañero (aula cooperativa): tapa la entrega, ya enviada. */
  .eval-sheet{position:relative}
  /* Aulas · ¿qué caso se juega? Tres opciones en tarjeta; «Escoger enfermedad» despliega la lista. */
  .so-casos-op{display:flex;flex-direction:column;gap:10px}
  .so-caso-op{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:13px 14px;border:1px solid var(--line);
    border-radius:12px;background:var(--panel);color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s}
  .so-caso-op:hover{border-color:var(--accent)}
  .so-caso-op[aria-expanded="true"]{border-color:var(--accent);background:var(--soft)}
  .so-caso-op b{display:block;font-size:15px}
  .so-caso-op small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.45}
  .sco-ico{font-size:20px;line-height:1.2}
  .so-patos{margin:-2px 0 2px;padding:4px 0 2px 46px}
  .so-patos-tit{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:8px}
  .so-patos-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .so-pato{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;font:inherit;font-size:14px;
    text-align:left;cursor:pointer;min-height:44px}
  .so-pato:hover{border-color:var(--accent);background:var(--soft)}
  @media(max-width:520px){.so-patos{padding-left:0}}
  /* Aula cooperativa: aviso del compañero encima del chat (pide finalizar, ha salido). */
  .coop-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;padding:10px 12px;border:1px solid var(--accent);
    border-radius:10px;background:var(--soft);font-size:14px}
  .coop-banner[hidden]{display:none}
  .coop-banner .cb-txt{flex:1 1 220px}
  .coop-banner .cb-acc{display:flex;gap:8px;flex-wrap:wrap}
  .coop-espera{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:24px;
    background:color-mix(in srgb,var(--card,#fff) 98%,transparent)}
  .ce-caja{max-width:420px;text-align:center}
  .ce-titulo{font-size:17px;font-weight:700;color:var(--ink,#0f172a)}
  .ce-sub{margin-top:4px;color:var(--muted)}
  .ce-pista{margin:16px auto 0;width:220px;height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
  .ce-pista i{display:block;height:100%;width:40%;border-radius:inherit;background:var(--accent);animation:ceVa 1.4s ease-in-out infinite}
  .ce-nota{margin-top:12px;font-size:12.5px;color:var(--muted)}
  @keyframes ceVa{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
  @media(prefers-reduced-motion:reduce){.ce-pista i{animation:none;width:100%;opacity:.5}}
  .es-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .es-head h2{margin:0;font-size:19px}
  .es-eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent)}
  #evalForm,#evalResult{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
  #evalResult{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:28px}
  .es-split{display:grid;grid-template-columns:47% 53%;gap:0;overflow:hidden;flex:1;min-height:0}
  .es-ref{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--bg,#faf7f0)}
  .es-reftabs{display:flex;gap:2px;padding:10px 12px 0;flex-wrap:wrap;flex:0 0 auto}
  .es-rt{background:none;border:none;padding:8px 11px;font-weight:600;font-size:13px;color:var(--muted);border-radius:8px 8px 0 0;cursor:pointer}
  .es-rt.on{color:var(--accent);background:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
  .es-refbody{flex:1 1 0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 40px;min-height:0}
  .es-work{display:flex;flex-direction:column;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 22px 56px;min-height:0;box-sizing:border-box}
  .es-work #doEval{flex:0 0 auto;margin-top:4px}
  .es-block{margin-bottom:16px}
  .es-block h3{margin:0 0 10px;font-size:14.5px;padding-bottom:6px;border-bottom:1px solid var(--soft)}
  .es-l{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:10px 0 4px}
  .es-work input,.es-work textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px;resize:vertical;box-sizing:border-box}
  .es-work input:focus,.es-work textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  /* Scrollbar fina y visible: en macOS/iOS las barras se ocultan y parece que el panel no se desplaza */
  .es-refbody,.es-work,#evalResult,.modal{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
  .es-refbody::-webkit-scrollbar,.es-work::-webkit-scrollbar,#evalResult::-webkit-scrollbar,.modal::-webkit-scrollbar{width:10px}
  .es-refbody::-webkit-scrollbar-thumb,.es-work::-webkit-scrollbar-thumb,#evalResult::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{background:#cbd5e1;border:3px solid transparent;background-clip:content-box;border-radius:8px}
  .es-refbody::-webkit-scrollbar-thumb:hover,.es-work::-webkit-scrollbar-thumb:hover,#evalResult::-webkit-scrollbar-thumb:hover,.modal::-webkit-scrollbar-thumb:hover{background:#94a3b8;border:3px solid transparent;background-clip:content-box}
  /* Sombra de desplazamiento: con barras superpuestas (macOS/iOS/Chrome) no se ve que hay más contenido.
     La capa `local` viaja con el contenido y tapa la sombra `scroll` al llegar al final → solo se ve
     mientras queda algo por leer. El color de la capa que tapa debe ser el fondo REAL de cada panel. */
  .es-refbody{background:
    linear-gradient(to top,var(--bg) 40%,rgba(248,250,252,0)) bottom/100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 100%,rgba(15,23,42,.13),rgba(15,23,42,0)) bottom/100% 11px no-repeat scroll}
  .es-work,#evalResult{background:
    linear-gradient(to top,var(--panel) 40%,rgba(255,255,255,0)) bottom/100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 100%,rgba(15,23,42,.13),rgba(15,23,42,0)) bottom/100% 11px no-repeat scroll}
  .es-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:30px 16px}
  .es-notes{list-style:none;margin:0;padding:0}
  .es-notes li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:8px;font-size:13.5px}
  .es-notes .es-ncat{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin-bottom:2px}
  @media(max-width:820px){
    .es-split{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .es-ref{border-right:none;border-bottom:1px solid var(--line)}
    .es-refbody{flex:none;max-height:50vh;max-height:50dvh;overflow-y:auto;padding-bottom:24px}
    .es-work{height:auto;overflow:visible;padding-bottom:40px}
  }
  /* Pestañas dentro del caso */
  /* `contain:inline-size` no es decorativo: sin él, en un móvil de 390 px las pestañas (574 px de
     contenido) hacían que Chrome maquetara la consulta a 506 px y encogiera TODA la página, con el
     texto un 23% más pequeño de lo debido. La barra sigue deslizándose con el dedo; lo que deja de
     hacer es mandar sobre el ancho de la página. */
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;contain:inline-size}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;background:none;border:none;padding:11px 16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;font-size:14.5px;display:flex;align-items:center;gap:7px}
  .tab.on{color:var(--accent-d);border-bottom-color:var(--accent)}
  .tab:hover{color:var(--ink)}
  @media(max-width:560px){.tab{padding:11px 12px;font-size:14px}}
  /* `.tab` lleva display:flex, que gana al [hidden] del navegador: una pestaña oculta se veía igual
     («Personalizar avatar» le salía a todo el alumnado, aunque no hiciera nada). */
  .tab[hidden]{display:none}
  .pane{display:none} .pane.on{display:block}
  /* Flujo por ETAPAS de la consulta: ficha previa → entrevista en directo → evaluación. */
  .cons-top{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
  .stage-chip{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent-d);background:var(--accent-soft);border:1px solid #dbe4ff;border-radius:999px;padding:4px 11px}
  .stage-fade{animation:stageIn .34s cubic-bezier(.22,.61,.36,1) both}
  @keyframes stageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.stage-fade{animation:none}}
  .brief-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
  .brief-ro{font-size:11.5px;font-weight:700;color:var(--muted);background:#f1f5f9;border:1px solid var(--line);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle}
  .brief-kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
  .brief-kv:last-child{border-bottom:0}
  .brief-lock{text-align:center;color:var(--muted);padding:18px 10px;font-size:13.5px}
  .brief-acc{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .brief-cta{position:sticky;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:var(--panel);border:none;border-radius:14px;
    box-shadow:0 10px 24px -6px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.06);padding:14px 18px;margin-top:18px}
  .chat-closed{text-align:center;font-size:13px;font-weight:600;color:var(--muted);background:#f1f5f9;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin:10px 0 2px}
  .chat-closed.exit{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}
  /* Abandono de consulta: cabecera de alerta + secciones aireadas con los ejemplos citables. */
  .exit-head{background:linear-gradient(to right,#fef2f2,#fffbeb);border:1px solid #fecaca;border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:18px}
  .exit-head h2{margin:0 0 4px;font-size:20px;letter-spacing:-.02em;color:#b91c1c}
  .exit-sec{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:14px}
  .exit-sec h3{margin:0 0 8px;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
  .exit-sec p{margin:0;font-size:14.5px;line-height:1.75;color:#334155}
  .exit-quote{margin-top:12px;border-left:3px solid #f87171;background:#fff;border-radius:0 10px 10px 0;padding:10px 14px;font-size:14px;line-height:1.7;color:#7f1d1d;font-style:italic}
  .exit-ex{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;padding:12px 14px;margin-top:10px;font-size:14.5px;line-height:1.7;color:#0f172a}
  .guia-sec{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
  .guia-sec:first-child{border-top:none;padding-top:0;margin-top:0}
  .guia-sec h3{margin:0 0 6px;font-size:15px;letter-spacing:-.01em}
  .guia-sec p,.guia-sec li{font-size:14px;line-height:1.75;color:#334155;margin:0 0 6px}
  .guia-sec ul{margin:6px 0 0;padding-left:18px}
  .guia-no{color:#b91c1c}.guia-si{color:#15803d}
  /* Acceso con cuenta */
  .li-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px}
  .li-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 8px;
    font:inherit;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer}
  .li-tab.on{color:var(--accent-d);border-bottom-color:var(--accent)}
  .li-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:12px}
  .li-consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#334155;line-height:1.55;margin-top:4px}
  .li-consent input{width:auto;margin-top:2px;flex:0 0 auto}
  .li-anon{text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
  .sess-chip{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;border-radius:999px;padding:5px 12px;
    background:#fffbeb;border:1px solid #fde68a;color:#92400e}
  .sess-chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
  .li-link{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--accent-d);cursor:pointer;text-decoration:underline}
  .exit-acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  .exit-load{color:var(--muted);font-style:italic;animation:exitPulse 1.6s ease-in-out infinite}
  @keyframes exitPulse{0%,100%{opacity:1}50%{opacity:.45}}
  @media(prefers-reduced-motion:reduce){.exit-load{animation:none}}
  @media(max-width:560px){
    #mExit .modal{padding:18px}
    .exit-acts{position:sticky;bottom:-18px;margin:14px -18px -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
      background:rgba(255,255,255,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line)}
    .exit-acts .btn{flex:1 1 100%;text-align:center}
  }
  /* Historia clínica completa (pestaña) */
  .hg-head{font-size:15px;font-weight:700;margin-bottom:14px}
  .hg{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 20px;margin-bottom:14px}
  .hg h4{margin:0 0 6px;font-size:14px}
  .hg-row{display:grid;grid-template-columns:190px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--soft);font-size:14px}
  .hg-row:last-child{border-bottom:none}
  @media(max-width:640px){.hg-row{grid-template-columns:1fr;gap:2px}}
  .hg-l{font-weight:700;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;padding-top:2px}
  .hg-row.pend .pend-t,.he .pend-t,.hg-v .pend-t{color:var(--muted);font-style:italic}

  body.modal-open{overflow:hidden}
  /* Por encima de la barra «Demo docente» (60): con 50 la barra tapaba el título y el ✕ de cada ventana. */
  .overlay{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:65;padding:18px;overscroll-behavior:contain}
  .overlay.on{display:flex}
  .modal{background:var(--panel);
    border:none;border-radius:var(--radius);box-shadow:0 24px 48px -12px rgba(15,23,42,.28),0 2px 8px rgba(15,23,42,.08);width:100%;max-width:520px;max-height:90vh;max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:26px;position:relative}
  .modal h2{margin:0 0 4px;font-size:21px;letter-spacing:-.02em}
  .modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
  .close{background:none;border:none;font-size:22px;color:var(--muted);line-height:1;padding:2px 6px}
  .fld{margin:14px 0}
  .fld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
  .fld .h{font-size:12px;color:var(--muted);margin-bottom:6px}

  .pes-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
  .pes-cmp>div{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  .pes-cmp h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .pes-cmp p{margin:0;font-size:13px;line-height:1.45}
  .pes-cmp .pc-ideal{background:#eff6ff;border-color:#bfdbfe} .pes-cmp .pc-ideal h4{color:#1e40af}
  @media(max-width:560px){.pes-cmp{grid-template-columns:1fr}}
  .score-big{text-align:center;padding:8px 0 4px}
  .score-num{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1}
  .score-num small{font-size:20px;color:var(--muted)}
  .comp-row{margin:10px 0}
  .comp-row .cl{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;margin-bottom:5px}
  .bar{height:9px;background:var(--soft);border-radius:6px;overflow:hidden}
  .bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
  .missed{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:14px 16px;margin-top:14px}
  .missed h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--warn-ink)}
  .missed ul{margin:0;padding-left:18px;font-size:14px}.missed li{margin:5px 0}
  .ok-note{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:12px 16px;margin-top:12px;font-size:14px;color:#15803d}
  /* Resultado de la evaluación: aire alrededor, ritmo vertical uniforme y feedback en tarjetas. */
  /* Cabecera pegajosa: el título y la ✕ siguen a la vista mientras se lee la corrección completa */
  #evalResult > .modal-head{padding:22px 26px 14px;margin-bottom:0;position:sticky;top:0;z-index:3;
    background:var(--panel);border-bottom:1px solid var(--line)}   /* opaca: con cristal se leía el texto de debajo al desplazar */
  .ev-body{display:flex;flex-direction:column;gap:16px;padding:16px 26px 6px;flex:0 0 auto}
  .ev-body > .missed,.ev-body > .ok-note,.ev-body > .pes-cmp{margin-top:0}
  .ev-body > .comp{display:flex;flex-direction:column;gap:12px}
  .ev-body > .comp .comp-row{margin:0}
  .ev-fb{background:var(--bg,#f8fafc);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .ev-fb b{display:block;margin-bottom:6px;font-size:13px;color:var(--ink)}
  .ev-txt{font-size:13.5px;line-height:1.75;color:#374151}
  .ev-foot{font-size:13px;line-height:1.7;color:var(--muted)}
  @media(max-width:560px){#evalResult > .modal-head{padding:18px 16px 12px}.ev-body{padding:14px 16px 6px}}
  /* ---------- Mi perfil y refuerzo personalizado ---------- */
  .pf-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
  .pf-ava{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;font-size:26px;flex:0 0 auto}
  .pf-id{flex:1;min-width:220px}
  .pf-id h2{margin:0 0 2px;font-size:20px;letter-spacing:-.02em}
  /* Ajustes del perfil: rótulo pequeño en versales, datos en fichas de solo lectura y la sesión
     en su propia tarjeta. Todo en blanco con bordes suaves: se lee, no grita. */
  /* Las dos notas de un caso compartido, para verlas de un vistazo. */
  /* Cabecera de tarjeta con una acción discreta a la derecha (compartir el caso). */
  .card-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .icono-accion{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;padding:0;
    border:0;border-radius:11px;background:none;color:var(--muted);cursor:pointer;
    transition:background .15s,color .15s,transform .1s}
  .icono-accion:hover{background:var(--bg);color:var(--accent-d)}
  .icono-accion:active{transform:scale(.95)}
  .icono-accion:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
  @media(prefers-reduced-motion:reduce){.icono-accion{transition:none}.icono-accion:active{transform:none}}
  .cmp-notas{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
  .cmp-nota{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);
    border-radius:999px;padding:3px 9px}
  .cmp-nota.gana{background:var(--green-soft);border-color:rgba(186,230,253,.7);color:var(--green-dark)}
  .pf-engranaje{margin-left:auto;display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
    border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);cursor:pointer;
    transition:background .15s,color .15s,transform .1s}
  .pf-engranaje:hover{background:var(--bg);color:var(--ink)}
  .pf-engranaje:active{transform:scale(.95)}
  .pf-engranaje:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
  /* Ajustes en UN desplegable: tres tarjetas seguidas ocupaban media pantalla para algo que se
     toca una vez al año. `<details>` nativo, así que funciona con teclado y sin JavaScript. */
  .pf-acordeon{padding:0;margin:16px 0 24px;overflow:hidden}
  .pf-acordeon-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 22px;cursor:pointer;list-style:none;transition:background .15s}
  .pf-acordeon-cab::-webkit-details-marker{display:none}
  .pf-acordeon-cab:hover{background:var(--bg)}
  .pf-acordeon-cab:focus-visible{outline:3px solid #bfdbfe;outline-offset:-3px}
  .pf-chevron{color:var(--muted);flex:0 0 auto;transition:transform .2s}
  .pf-acordeon[open] .pf-chevron{transform:rotate(180deg)}
  .pf-acordeon[open] .pf-acordeon-cab{border-bottom:1px solid var(--line)}
  .pf-acordeon-cuerpo{padding:4px 22px 22px;animation:pf-abre .16s ease}
  .pf-bloque{padding:18px 0}
  .pf-bloque+.pf-bloque{border-top:1px solid var(--line)}
  .pf-bloque .btn-suave{margin-top:14px}
  .pf-peligro .pf-rotulo span{color:#b91c1c}
  @keyframes pf-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.pf-acordeon-cuerpo{animation:none}.pf-chevron{transition:none}}
  @media(max-width:560px){.pf-acordeon-cab{padding:15px 16px}.pf-acordeon-cuerpo{padding:4px 16px 18px}}
  .pf-rotulo{display:flex;align-items:center;gap:7px;margin:0 0 14px;font-size:11.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .pf-rotulo svg{width:15px;height:15px;flex:0 0 auto}
  .pf-datos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:700px){.pf-datos{grid-template-columns:1fr}}
  .pf-dato{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
  .pf-dato.ancho{grid-column:1/-1}
  .pf-dato span{display:block;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.01em}
  .pf-dato b{display:block;font-weight:700;font-size:14px;color:var(--ink);margin-top:3px;word-break:break-word}
  .pf-dato b.vacio{color:var(--muted);font-weight:400;font-style:italic}
  .btn-suave{margin-top:16px;display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:12px;
    background:var(--panel);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:12.5px;line-height:1;font-family:inherit;
    cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:background .15s,transform .1s}
  .btn-suave:hover{background:var(--bg)}
  .btn-suave:active{transform:scale(.97)}
  .btn-suave:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
  .pf-sesion{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .card.pf-sesion{padding:22px}
  .btn-salir{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;cursor:pointer;
    font-weight:600;font-size:13px;line-height:1;font-family:inherit;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;   /* #dc2626 daba 4,4:1 (axe, 11-10-2026) */
    
    transition:background .15s,transform .1s}
  .btn-salir:hover{background:#fee2e2}
  .btn-salir:active{transform:scale(.97)}
  .btn-salir:focus-visible{outline:3px solid #fecaca;outline-offset:2px}
  @media(prefers-reduced-motion:reduce){.btn-salir{transition:none}.btn-salir:active{transform:none}}
  .pf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
  .pf-kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
  .pf-kpi b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
  .pf-kpi span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
  .pf-grid{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:18px;align-items:start}
  @media(max-width:860px){.pf-grid{grid-template-columns:1fr}}
  .pf-axis{margin:0 0 14px}
  .pf-axis:last-child{margin-bottom:0}
  .pf-axis .al{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600;margin-bottom:5px}
  .pf-axis .ah{font-size:12px;color:var(--muted);font-weight:400;margin-top:4px}
  .pf-tags{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
  @media(max-width:700px){.pf-tags{grid-template-columns:1fr}}
  .pf-good,.pf-bad{border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.6}
  .pf-good{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
  .pf-bad{background:#fff7ed;border:1px solid #fed7aa;color:#b45309}
  .pf-good h4,.pf-bad h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
  .pf-good ul,.pf-bad ul{margin:0;padding-left:18px}
  .pf-pats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin:12px 0 4px}
  .pf-pat{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;cursor:pointer;background:var(--panel)}
  .pf-pat.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-d);font-weight:600}
  .pf-pat input{accent-color:var(--accent);width:16px;height:16px;flex:0 0 auto}
  /* Cabecera del bloque de preferencias: el título a la izquierda y el «borrar» discreto a la
     derecha, que es una acción destructiva y no debe competir con nada. */
  .pf-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
  .pf-limpiar{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);
    font-family:inherit;font-size:12.5px;font-weight:500;line-height:1;padding:6px 9px;border-radius:9px;cursor:pointer;
    transition:color .15s,background .15s}
  .pf-limpiar:hover:not(:disabled){color:var(--bad,#dc2626);background:rgba(220,38,38,.08)}
  .pf-limpiar:disabled{opacity:.45;cursor:default}
  .pf-packs{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .pf-pack{border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:13.5px;cursor:pointer;background:var(--panel);text-align:left}
  .pf-pack.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-d);font-weight:600}
  .pf-pack small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:2px}
  .pf-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .pf-filters input,.pf-filters select{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;font-size:13.5px;background:var(--panel)}
  .pf-filters input{flex:1;min-width:180px}
  .pf-table{width:100%;border-collapse:collapse;font-size:13.5px}
  .pf-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
  .pf-table td{padding:10px;border-bottom:1px solid var(--soft);vertical-align:middle}
  .pf-table tr:last-child td{border-bottom:0}
  .pf-table .pf-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
  .pf-wrap{overflow-x:auto}
  .pf-focus{background:var(--accent-soft);border:1px solid #dbe4ff;border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.7}
  .pf-drill{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;background:var(--panel)}
  .pf-drill .dq{font-size:15px;font-weight:600;margin:10px 0 12px}
  .pf-opt{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;font:inherit;font-size:13.5px;line-height:1.55;background:var(--panel);cursor:pointer}
  .pf-opt:hover{border-color:var(--accent)}
  .pf-opt.sel{border-color:var(--accent);background:var(--accent-soft)}
  .pf-opt.ok{border-color:#16a34a;background:#f0fdf4}
  .pf-opt.ko{border-color:#dc2626;background:#fef2f2}
  .pf-opt[disabled]{cursor:default}
  .pf-sol{margin-top:12px;border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.75}
  .pf-sol.ok{background:#f0fdf4;border:1px solid #bbf7d0}
  .pf-sol.ko{background:#fff7ed;border:1px solid #fed7aa}
  .pf-sol h4{margin:0 0 8px;font-size:13.5px}
  .pf-sol p{margin:0 0 8px}
  .pf-sol p:last-child{margin-bottom:0}
  .pf-src{font-size:12px;color:var(--muted);margin-top:8px}
  .radar{display:block;margin:0 auto}
  .radar .rgrid{fill:none;stroke:var(--line);stroke-width:1}
  .radar .rax{stroke:var(--line);stroke-width:1}
  .radar .rarea{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
  .radar .rdot{fill:var(--accent);stroke:var(--panel);stroke-width:2}
  .radar .rlab{font-size:11px;fill:var(--muted);font-weight:600}

  /* Aviso discreto mientras la IA traduce por primera vez lo que no está en el
     diccionario (después sale de la caché del navegador y ya no aparece). */
  .ns-tr-aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
    background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;
    padding:7px 14px;border-radius:999px;box-shadow:0 6px 20px rgba(15,23,42,.22);opacity:.92;
    pointer-events:none;animation:nsTrIn .18s ease-out}
  @keyframes nsTrIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:.92;transform:translate(-50%,0)}}
  @media (prefers-reduced-motion:reduce){.ns-tr-aviso{animation:none}}

/* ---- Recordatorio de 24 h (r24h.js): editor con búsqueda en BEDCA ---- */
.r24{font-size:14px}
.r24-dia{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--accent-soft,#f0f9ff);border:1px solid var(--line-solid,#e2e8f0);border-radius:12px;padding:10px 14px;margin:0 0 12px}
.r24-dia-t{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#64748b)}
.r24-macs{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.r24-mac{font-size:13px;color:var(--muted,#64748b);white-space:nowrap}
.r24-mac b{color:var(--ink,#0f172a);font-size:14px}
.r24-mac.big b{font-size:19px}
.r24-vacio{font-size:12.5px;color:var(--muted,#94a3b8);font-style:italic}
.r24-toma{border:1px solid var(--line-solid,#e2e8f0);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.r24-toma-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.r24-tabla{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 8px}
.r24-tabla th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,#64748b);padding:4px 6px;border-bottom:1px solid var(--line-solid,#e2e8f0)}
.r24-tabla td{padding:5px 6px;border-bottom:1px solid var(--soft,#f1f5f9);vertical-align:top}
.r24-tabla .n{text-align:right;white-space:nowrap}
.r24-cant{width:66px;padding:4px 6px;border:1px solid var(--line-solid,#e2e8f0);border-radius:7px;font:inherit}
.r24-med{padding:4px 6px;border:1px solid var(--line-solid,#e2e8f0);border-radius:7px;font:inherit;max-width:190px}
.r24-eq{font-size:11.5px;color:var(--muted,#94a3b8);margin-top:2px}
.r24-quita{border:0;background:none;cursor:pointer;color:var(--muted,#94a3b8);font-size:15px;line-height:1;padding:2px 4px}
.r24-quita:hover{color:#dc2626}
.r24-add{position:relative}
.r24-q{width:100%;padding:8px 10px;border:1px solid var(--line-solid,#e2e8f0);border-radius:9px;font:inherit}
.r24-sug{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line-solid,#e2e8f0);
  border-radius:11px;box-shadow:0 12px 28px rgba(15,23,42,.14);max-height:280px;overflow:auto}
.r24-op{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:8px 11px;font:inherit;border-bottom:1px solid var(--soft,#f1f5f9)}
.r24-op:last-child{border-bottom:0}
.r24-op:hover,.r24-op:focus{background:var(--accent-soft,#f0f9ff)}
.r24-op b{display:block;font-size:13.5px}
.r24-op-n{display:block;font-size:12px;color:var(--muted,#64748b)}
.r24-op-c{display:block;font-size:11.5px;color:var(--muted,#94a3b8)}
.r24-pie{font-size:12px;color:var(--muted,#64748b);margin-top:8px}
@media(max-width:640px){
  .r24-tabla th:nth-child(6),.r24-tabla td:nth-child(6),.r24-tabla th:nth-child(7),.r24-tabla td:nth-child(7){display:none}
  .r24-med{max-width:140px}
}

/* El aviso de preferencias del configurador: reserva su línea. Se rellena cuando llegan las
   preferencias del alumno, y si naciera vacío el panel entero bajaría 20 px al aparecer. */
  .pclave ul{margin:6px 0 0;padding-left:0;list-style:none}
  .pclave li{margin:5px 0;line-height:1.45}
  .pclave .pc-cita{display:block;margin:2px 0 0 22px;font-size:12.5px;color:#64748b;font-style:italic}
  .pclave .pc-no{color:#9f1239}
/* Reportar incidencia: discreto en la cabecera de la consulta; en móvil, solo el icono. */
.rep-btn{color:#64748b}
@media(max-width:640px){ .rep-btn .rep-txt{display:none} }

/* Con el dedo, todo control a 44 px como mínimo (la auditoría dejaba enlaces del pie, «×» de las
   ventanas, pestañas de la entrega y botones pequeños entre 26 y 42 px). Solo en pantallas táctiles:
   con ratón no cambia nada. */
@media(pointer:coarse){
  .btn.sm,.es-rt,#pistaBtn,#repIncid,#navProfile,#navAuth,button.close,.ns-foot-btn,#brandHome,#anthroTab,#iaMas{min-height:44px}
  button.close,#pistaBtn,#repIncid,#navProfile,#navAuth,#navSocial{min-width:44px}
  .ns-foot-links a{display:inline-flex;align-items:center;min-height:44px}
  select,#compartirCaso,.fin-visita{min-height:44px}
  #compartirCaso{min-width:44px}
  /* Enlaces dentro de una frase: zona de pulsación más alta sin mover el texto (relleno + margen negativo). */
  #chipIn,#prefGo,.ck-banner a{display:inline-block;padding:13px 4px;margin:-13px -4px}
  #anthroTab{min-width:44px}
}
/* Con ratón, los mismos enlaces llegan a 24 px de alto sin mover el texto. */
@media(pointer:fine){ #chipIn,#prefGo,.ck-banner a{display:inline-block;padding:4px 2px;margin:-4px -2px} }
/* Safari de iPhone amplía la página al tocar un campo con letra de menos de 16 px (el formulario de
   la entrega iba a 13,5): cada campo era un zoom que luego había que deshacer con los dedos. */
@media(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px !important}
}
/* El texto de ayuda de cada toma del R24H ocupa tres líneas en la columna estrecha (y a 16 px en el
   móvil): con «rows=2» salía cortado, también en el ordenador. */
/* Alto FIJO y sin tirador: lo que no cabe se lee con scroll dentro del campo. Si el campo crecía
   (o se estiraba a mano), la fila entera cambiaba de alto y las de debajo bailaban. */
#r24hTomas textarea[data-r24]{min-height:calc(4.8em + 22px);height:calc(4.8em + 22px);resize:none;overflow-y:auto}
/* La píldora del compañero («✏️ Marc») FLOTA sobre la esquina del campo que edita: no ocupa sitio.
   Se metía como un elemento más antes del campo, y en la tabla del R24H se quedaba con una columna
   entera y empujaba el campo a la fila de abajo (encajonado en la columna de la toma, 118 px). En
   el resto del formulario bajaba todo una línea cada vez que el compañero entraba en un campo. */
.co-ancla{position:relative}
.co-ancla > .co-badge{position:absolute;top:-10px;right:8px;margin:0;z-index:2;pointer-events:none;
  max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid var(--line,#e2e8f0);box-shadow:0 1px 3px rgba(15,23,42,.12)}

/* ── Corrección con IA, reordenada (crítica de diseño 05-10-2026) ─────────────────────────────
   Nota una vez → «Lo que más subiría tu nota» → aciertos → cada parte de la rúbrica con su
   comentario debajo (detalles largos plegados) → una lista de lo que se escapó. */
.ev-subir{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:14px 16px}
.ev-subir h3{margin:0 0 10px;font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
.ev-subir ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.ev-subir li{font-size:14px;line-height:1.55;color:var(--ink)}
.ev-subir-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-bottom:2px}
.ev-pts{font-size:12px;font-weight:700;color:var(--accent-d);background:var(--panel);border:1px solid var(--accent-line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.ev-body > .comp{gap:0}
.ev-body > .comp .comp-row{padding:14px 0;border-bottom:1px solid var(--line)}
.ev-body > .comp .comp-row:first-child{padding-top:4px}
.ev-body > .comp .comp-row:last-child{border-bottom:0}
.comp-fb{margin-top:10px;font-size:14px;line-height:1.6;color:var(--ink);max-width:75ch}
.comp-falta{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--warn-ink)}
.comp-ok{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ok-ink)}
/* Barras con el color de cómo ha ido cada parte (la cifra sigue al lado: el color no es la única señal). */
.comp-row.nivel-alto .bar i{background:var(--ok)}
.comp-row.nivel-medio .bar i{background:var(--accent)}
.comp-row.nivel-bajo .bar i{background:var(--warn)}
.ev-det{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.ev-det summary{cursor:pointer;padding:10px 12px;min-height:24px;font-size:13.5px;font-weight:600;color:var(--accent-d)}
.ev-det summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.ev-det[open] summary{border-bottom:1px solid var(--line)}
.ev-det-in{padding:10px 12px}
.ev-det-in .pes-cmp{margin:0}
ul.pclave{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
ul.pclave li{line-height:1.45;font-size:13.5px}
ul.pclave .pc-cita{display:block;margin:2px 0 0 22px;font-size:12.5px;color:var(--muted);font-style:italic}
ul.pclave .pc-no{color:#9f1239}
.ev-plan{margin:0;font-size:13.5px;line-height:1.6;color:#1e40af}
.ev-sinfuente{margin-top:8px;font-size:12.5px;color:#92400e}
@media(pointer:coarse){ .ev-det summary{min-height:44px;display:flex;align-items:center} }
/* Flecha propia en los plegables: la del navegador desaparecía con display:flex (táctil). */
.ev-det summary{list-style:none}
.ev-det summary::-webkit-details-marker{display:none}
.ev-det summary::before{content:"";flex:none;width:7px;height:7px;margin-right:9px;display:inline-block;vertical-align:middle;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .18s cubic-bezier(.23,1,.32,1)}
.ev-det[open] summary::before{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.ev-det summary::before{transition:none}}
/* En el teléfono, la corrección empieza por la nota: cabecera compacta y sin la caja del tutor
   (solo repetía «Revisión clínica completada»). */
@media(max-width:560px){
  #evalResult > .modal-head .tutor-firma > div > b:first-child{display:none}
  #evalResult > .modal-head h2{font-size:21px;line-height:1.2}
  #evalResult > .modal-head{padding:14px 16px 10px}
  #evalResult .tutor-caja{display:none}
}

/* ── La consulta en el móvil (crítica de diseño 05-10-2026): antes del chat había ~1.400 px de cromo
   (cabecera fija, «Volver», título largo, etapa, un «Finalizar» a todo el ancho que invitaba a
   entregar antes de tiempo, pestañas cortadas sin pista). Barra compacta y el chat cuanto antes. */
@media(max-width:700px){
  /* La cabecera del sitio no se queda fija mientras se pasa consulta: tapaba el principio del chat. */
  body:has(#s-consulta.on) .top{position:static}
  #s-consulta .cons-top{gap:8px 10px;margin-bottom:10px}
  /* «←» solo (el texto sigue siendo su nombre accesible). */
  #backDash{font-size:0;min-width:44px;padding:0 12px}
  #backDash::before{content:"←";font-size:18px;line-height:1}
  #s-consulta .cons-top > div:has(#consTitle){flex:1 1 0;min-width:0;line-height:1.25}   /* en dos líneas antes que cortar el nombre del paciente */
  #consTitle{font-size:15px !important}
  #consSub{display:none}
  #repIncid{margin-left:0 !important}
  #s-consulta .stage-chip{order:5}
  #finishTop{order:6;margin-left:auto;padding:8px 14px;font-size:14.5px}
  /* Pestañas que siguen: el borde derecho se desvanece para decir «hay más». */
  #s-consulta .tabs{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:24px}
  /* Los avisos arriba: abajo tapaban el último mensaje y el campo de escribir. */
  .toasts{top:12px;bottom:auto;left:12px;right:12px;align-items:stretch}
}

/* ── Perfil (crítica de diseño 05-10-2026): títulos que son títulos, lo accionable arriba, nada repetido ── */
#s-profile .card h3{font-size:17px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:0 0 14px}
#s-profile .card h3 .muted{display:block;margin-top:3px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted)}
#s-profile .pf-kpi b{font-variant-numeric:tabular-nums}
/* Evolución: la nota encima de cada barra y la línea del aprobado. */
.evo{margin-top:4px}
.evo-plot{padding-top:22px;border-bottom:1px solid var(--line)}
.evo-area{position:relative;display:flex;align-items:flex-end;gap:8px;height:128px}
.evo-col{position:relative;flex:1 1 0;max-width:44px;height:100%;display:flex;align-items:flex-end}
.evo-col b{position:absolute;left:0;right:0;text-align:center;font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.evo-col i{display:block;width:100%;border-radius:6px 6px 0 0;background:var(--accent)}
.evo-col i.s-good{background:var(--ok)} .evo-col i.s-mid{background:var(--accent)} .evo-col i.s-low{background:var(--warn)}
.evo-apr{position:absolute;left:0;right:0;border-top:1.5px dashed var(--muted);pointer-events:none}
/* La etiqueta del aprobado va en una leyenda debajo: encima de la línea tapaba barras en el móvil. */
.evo-ley{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--muted)}
.evo-ley-linea{width:18px;border-top:1.5px dashed var(--muted)}
/* Competencias: la etiqueta y el color en la propia barra. */
.pf-sello{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 8px;vertical-align:1px}
.pf-sello.ok{background:#f0fdf4;color:var(--ok-ink);border:1px solid #bbf7d0}
.pf-sello.mejora{background:#fff7ed;color:var(--warn-ink);border:1px solid #fed7aa}
.pf-axis.nivel-alto .bar i{background:var(--ok)} .pf-axis.nivel-medio .bar i{background:var(--accent)} .pf-axis.nivel-bajo .bar i{background:var(--warn)}
#pfTags:empty{display:none}
/* El radar se ve también en tableta y móvil (10-10-2026): escala con su viewBox y las etiquetas crecen en unidades del dibujo para seguir legibles. */
/* Historial: filtros en una fila (la regla general ponía cada select a todo el ancho). */
.pf-filters input{flex:2 1 220px}
.pf-filters select{width:auto;flex:1 1 160px;min-width:0;max-width:100%}   /* la patología más larga ensanchaba el perfil 95 px a 320 */
/* En el móvil, cada consulta es una tarjeta: la tabla de seis columnas se cortaba (la nota, a medias). */
@media(max-width:900px){
  .pf-table thead{display:none}
  .pf-table,.pf-table tbody,.pf-table tr,.pf-table td{display:block;width:100%}
  .pf-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
  .pf-table tr:last-child{border-bottom:0}
  .pf-table td{padding:0;border:0}
  .pf-table .pf-c-pac{grid-column:1}
  .pf-table .pf-c-nota{grid-column:2;grid-row:1 / span 2;align-self:center}
  .pf-table .pf-c-pat,.pf-table .pf-c-fecha{grid-column:1;font-size:13px;color:var(--muted)}
  .pf-table .pf-c-estado{grid-column:1 / -1;margin-top:4px}
  .pf-table .pf-c-acts{grid-column:1 / -1;margin-top:8px}
  .pf-table .pf-acts{justify-content:flex-start}
  .pf-table .es-empty{grid-column:1 / -1}
}
/* Logros, compactos en el perfil: seis tarjetas grandes pesaban más que la propia evolución.
   Fila: sello · nombre · avance, y la barra debajo. */
#progressCard .logros{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:10px}
#progressCard .logro{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;gap:6px 10px;padding:10px 12px;border-radius:14px}
#progressCard .logro .sello,#progressCard .logro .sello img{width:32px;height:32px}
#progressCard .logro .sello{order:0}
#progressCard .logro b{order:1;flex:1 1 0;min-width:0}
#progressCard .logro .lg-val{order:2}
#progressCard .logro .lg-barra{order:3;flex-basis:100%}
#progressCard .logro:hover,#progressCard .logro:focus-visible{transform:translateY(-1px)}
.pf-solo-movil{display:none}
@media(max-width:900px){
  .pf-solo-movil{display:inline}
  .pf-table .pf-c-fecha,.pf-table .pf-c-estado.normal{display:none}
  .pf-table .pf-acts .btn{font-size:14px}
  #progressCard .logros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-kpi{padding:12px 14px}
  .pf-kpi b{font-size:23px}
}
/* Barra superior del perfil en una fila en el móvil, como la de la consulta. */
@media(max-width:700px){
  #s-profile > .cons-top{flex-wrap:nowrap;gap:10px}
  #pfBack{font-size:0;min-width:44px;padding:0 12px}
  #pfBack::before{content:"←";font-size:18px;line-height:1}
  #s-profile > .cons-top > div{flex:1 1 0;min-width:0}
  #s-profile > .cons-top > div .muted{display:none}
}
/* A dos columnas en el móvil, cada logro apilado (en fila, el nombre y el avance se pisaban). */
@media(max-width:640px){
  #progressCard .logro{flex-direction:column;align-items:flex-start;gap:5px}
  #progressCard .logro b{flex:none}
  #progressCard .logro .lg-barra{flex-basis:auto;width:100%}
}
#s-profile [role=tabpanel] > .card:first-child,#s-profile [role=tabpanel] > .card:first-of-type{margin-top:16px}

/* ── Logros (08-10-2026): pestaña propia, series con niveles y celebración ──────────────────── */
#pfLogros .logros{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:12px}
.lg-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.lg-total{white-space:nowrap;color:var(--muted);font-size:14px}
.lg-total b{font-size:26px;color:var(--ink);letter-spacing:-.02em}
.lg-total-barra{height:8px;border-radius:999px;background:rgba(148,163,184,.22);overflow:hidden;margin-top:12px}
.lg-total-barra i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent,#2563eb),#7c3aed);transition:width .5s}
.lg-cerca-t{margin-top:16px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.lg-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.logro .lg-falta{font-size:11.5px;font-weight:700;color:var(--accent-d,#1d4ed8)}
.logro.on .lg-falta{color:var(--lg-txt)}
.logro .lg-sig{font-size:11px;color:var(--muted);line-height:1.3}
.logro .lg-sig b{font-size:11px;color:var(--ink);font-weight:700}
.logro .lg-pips{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;max-width:100%}
.logro .lg-pips i{width:7px;height:7px;border-radius:50%;background:rgba(148,163,184,.35)}
.logro .lg-pips i.on{background:var(--lg-txt)}
.lg-resumen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin-top:16px;padding:11px 14px;border-radius:12px;
  border:1px solid #fde68a;background:#fffbeb;color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.lg-resumen:hover{border-color:#f59e0b}
.lg-resumen:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
.lg-resumen-cerca{color:var(--muted);flex:1;min-width:0}
.lg-resumen-cerca b{color:var(--ink)}
.lg-resumen-ir{font-size:20px;line-height:1;color:#b45309;margin-left:auto}
/* La celebración: una tarjeta abajo al centro, por encima de todo (también de la corrección). */
.lg-celebra{position:fixed;left:50%;bottom:22px;z-index:9000;display:flex;align-items:center;gap:14px;
  width:min(420px,calc(100vw - 32px));padding:14px 40px 14px 16px;border-radius:16px;background:var(--panel,#fff);
  border:1px solid var(--lg-bor);box-shadow:0 18px 48px rgba(15,23,42,.18),0 0 0 4px var(--lg-glow);
  opacity:0;transform:translate(-50%,16px) scale(.97);transition:opacity .26s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.lg-celebra.in{opacity:1;transform:translate(-50%,0) scale(1)}
.lg-celebra.out{opacity:0;transform:translate(-50%,10px) scale(.98)}
.lgc-sello{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--lg-bg);display:grid;place-items:center}
.lgc-sello img{width:44px;height:44px;filter:drop-shadow(0 3px 7px var(--lg-glow))}
.lg-celebra.in .lgc-sello img{animation:lgc-pop .6s cubic-bezier(.2,.9,.3,1.4) .08s both}
.lgc-sello .mini{position:absolute;bottom:-5px;right:-6px;font-size:15px;line-height:1;background:var(--panel,#fff);border:1px solid var(--lg-bor);border-radius:999px;padding:2px 3px}
.lgc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lgc-tit{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--lg-txt)}
.lgc-txt b{font-size:16px;color:var(--ink);letter-spacing:-.01em}
.lgc-msg{font-size:13px;color:var(--muted)}
.lgc-mas{font-size:12px;font-weight:700;color:var(--lg-txt)}
.lgc-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 6px;border-radius:8px}
.lgc-x:hover{background:rgba(148,163,184,.15)}
@keyframes lgc-pop{0%{transform:scale(.6) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.lg-celebra,.lg-celebra.in,.lg-celebra.out{transition:opacity .2s;transform:translate(-50%,0)}.lg-celebra.in .lgc-sello img{animation:none}.lg-total-barra i{transition:none}}
@media(max-width:520px){#pfLogros .logros{grid-template-columns:repeat(2,minmax(0,1fr))}.lg-total b{font-size:22px}}
.logro .lg-tip .lg-tip-sig{display:block;margin-top:4px;opacity:.8}
.lgc-demo{font-size:12px;color:var(--muted);margin-top:4px;padding-top:6px;border-top:1px solid var(--line,#e2e8f0)}
/* ── Logros y puntos (08-10-2026, v2): tarjetas por logro, categorías plegables ─────────────────── */
#pfLogros .lg-cab{display:flex;align-items:center;gap:12px}
#pfLogros .lg-cab .mascota{width:44px;height:44px;flex:0 0 auto}
.lg-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.lg-kpi{border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:10px 14px;background:var(--panel,#fff);display:flex;flex-direction:column;gap:2px}
.lg-kpi-v{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.lg-kpi-v small{font-size:14px;font-weight:600;color:var(--muted)}
.lg-kpi-l{font-size:12.5px;color:var(--muted)}
.lg-nota{font-size:12.5px;color:var(--muted);margin-top:8px}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.lg-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--line,#e2e8f0);
  background:var(--panel,#fff);transition:border-color .2s,box-shadow .2s}
.lg-card.on{background:var(--lg-bg);border-color:var(--lg-bor);box-shadow:0 2px 10px var(--lg-glow)}
.lg-ico{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--lg-txt);background:var(--lg-bg);border:1px solid var(--lg-bor)}
.lg-card.on .lg-ico{background:var(--panel,#fff)}
.lg-card:not(.on) .lg-ico{opacity:.62}
.lg-candado{position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel,#fff);border:1px solid var(--line,#e2e8f0);color:var(--muted)}
.lg-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.lg-info>b{font-size:14px;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.lg-desc{font-size:12.5px;color:var(--muted);line-height:1.4}
.lg-prog{display:block;height:6px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden;margin-top:2px}
.lg-prog i{display:block;height:100%;border-radius:999px;background:var(--lg-txt);opacity:.75;transition:width .4s}
.lg-val{font-size:12px;font-weight:700;color:var(--lg-txt)}
.lg-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:2px}
.lg-pts{font-size:12px;font-weight:800;color:var(--lg-txt);background:var(--lg-bg);border:1px solid var(--lg-bor);border-radius:999px;padding:2px 9px}
.lg-card.on .lg-pts{background:var(--panel,#fff)}
.lg-estado{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.lg-estado.ok{color:var(--lg-txt)}
details.lg-cat{padding:0;margin-top:16px;overflow:hidden}
details.lg-cat>summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none}
details.lg-cat>summary::-webkit-details-marker{display:none}
details.lg-cat>summary:focus-visible{outline:3px solid #bfdbfe;outline-offset:-3px}
details.lg-cat>.lg-grid{padding:0 18px 18px;margin-top:0}
.lg-cat-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--lg-txt);background:var(--lg-bg);border:1px solid var(--lg-bor);flex:0 0 auto}
.lg-cat-t{display:flex;flex-direction:column;min-width:0;flex:1}
.lg-cat-t b{font-size:15.5px;color:var(--ink)}
.lg-cat-t .muted{font-size:12.5px}
.lg-cat-chev{font-size:20px;color:var(--muted);transition:transform .2s;line-height:1}
details.lg-cat[open] .lg-cat-chev{transform:rotate(90deg)}
.lgc-nombres{display:flex;flex-direction:column;gap:1px}
.lgc-nombres b{font-size:15px;color:var(--ink)}
.lgc-pts{font-size:13px;font-weight:800;color:var(--lg-txt)}
.lgc-sello .mini svg{display:block}
@media(max-width:600px){
  .lg-grid{grid-template-columns:1fr;gap:8px}
  .lg-card{flex-direction:row;align-items:flex-start;gap:12px;padding:12px}
  .lg-kpi-v{font-size:19px}
  details.lg-cat>summary{padding:12px 14px}
  details.lg-cat>.lg-grid{padding:0 12px 12px}
}
@media(prefers-reduced-motion:reduce){.lg-card,.lg-prog i,.lg-cat-chev{transition:none}}
#pfLogros .lg-cab{justify-content:flex-start}   /* v2: Simi y el título juntos (la v1 los separaba a los extremos) */
.lg-ico{flex:0 0 auto}   /* en la fila del móvil, un texto largo encogía el icono y descuadraba la tarjeta */
.lg-info{flex:1 1 auto}   /* en la fila del móvil, la barra y el pie ocupan todo el ancho (no lo que mida el texto) */

/* ── Aviso de datos NUEVOS en las pestañas de la consulta (08-10-2026) ─────────────────────────
   Un punto rojo de 12 px con borde blanco, resplandor y un anillo que late; con varios datos, una
   píldora con el número. Va EN LÍNEA tras el nombre (no en una esquina) para que no lo corte la
   barra de pestañas cuando se desplaza en el móvil. Sin pulso si el sistema pide menos movimiento. */
.tab-aviso{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:0 0 auto;
  width:12px;height:12px;margin-left:2px;border-radius:999px;background:#ef4444;
  box-shadow:0 0 0 2px #fff,0 0 8px rgba(239,68,68,.7)}
.tab-aviso::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#ef4444;
  animation:tab-aviso-pulso 1.6s cubic-bezier(0,0,.2,1) infinite}
.tab-aviso.num{width:auto;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:800;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:0}
@keyframes tab-aviso-pulso{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.tab-aviso::before{animation:none;opacity:0}}
/* El ✕ de la celebración medía 28 px: poco para un dedo (mínimo 44). Se ve igual; se toca mejor. */
.lg-celebra{padding-right:50px}
.lgc-x{top:1px;right:1px;width:46px;height:46px;padding:0;display:grid;place-items:center;border-radius:12px}
/* Los botones del desplegable de ajustes del perfil, con dedo: 44 px de alto como mínimo (medían 33-37). */
@media(pointer:coarse){#pfAjustesBtn{min-width:44px;min-height:44px}#pfEdit2,#pfLogout,#pfBorrar{min-height:44px}}
/* ── Personalizar a Simi (09-10-2026; solo administración por ahora) ──────────────────────────────
   Dos paneles: a la izquierda Simi (círculo), su nombre y «aleatorio»; a la derecha las categorías,
   las prendas y la paleta. En pantallas anchas la izquierda acompaña al desplazarse (lo que se prueba
   se ve siempre). */
.simi-lay{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.simi-izq{padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
@media(min-width:901px){.simi-izq{position:sticky;top:84px}}
.simi-circulo{width:240px;height:240px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#ffffff 0%,#eef4ff 55%,#dce8fb 100%);
  box-shadow:inset 0 -10px 24px rgba(37,99,235,.10),inset 0 2px 0 #fff,0 10px 26px -14px rgba(15,23,42,.35);border:1px solid #dbe5f5}
.simi-fig{display:block;overflow:visible}
.simi-nombre{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.simi-nombre-v{display:flex;align-items:center;gap:6px}
.simi-nombre-v b{font-size:20px;font-weight:800;color:var(--ink);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simi-prueba{width:100%;padding:10px 12px;border-radius:12px;background:#eff6ff;border:1px solid #bfdbfe;font-size:13.5px;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.simi-prueba-b{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.simi-prueba-b .btn{padding:7px 12px;font-size:13px;min-height:38px}
.simi-azar{width:100%;justify-content:center}
.simi-saldo-mini{margin:0;font-size:13px;color:var(--ink)}
.simi-saldo-mini b{font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}
.simi-saldo-mini .muted{display:block;font-size:12px;margin-top:2px}
.simi-der{padding:20px 22px 22px;min-width:0}
.simi-titulo{margin:0 0 12px;font-size:17px}
.simi-subtabs{display:flex;gap:4px;padding:4px;background:var(--soft);border-radius:12px;overflow-x:auto;scrollbar-width:none}
.simi-subtabs::-webkit-scrollbar{display:none}
.simi-subtabs [role=tab]{flex:1 0 auto;padding:8px 14px;border:0;border-radius:9px;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.simi-subtabs [role=tab]:hover{color:var(--ink)}
.simi-subtabs [role=tab][aria-selected=true]{background:var(--panel);color:var(--accent);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.simi-panel{padding-top:4px}
.simi-grupo{margin:16px 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.simi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.simi-carta{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 10px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--panel);font:inherit;color:var(--ink);cursor:pointer;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.simi-carta:hover{border-color:#93c5fd;transform:translateY(-1px)}
.simi-carta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.simi-mini{width:72px;height:72px;border-radius:50%;background:var(--soft);display:grid;place-items:center;overflow:hidden}
.simi-carta-n{font-size:13px;font-weight:600;line-height:1.25}
.simi-estado{font-size:11.5px;color:var(--muted)}
.simi-precio{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.simi-carta.bloq .simi-mini{opacity:.72}
.simi-carta.puesto{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.simi-carta.probando{border-color:#93c5fd;border-style:dashed}
.simi-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
.simi-ayuda{margin:14px 0 0;font-size:12.5px}
.simi-colores{margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
.simi-paleta{display:flex;flex-wrap:wrap;gap:12px}
.simi-color{width:36px;height:36px;border-radius:50%;border:3px solid var(--panel);cursor:pointer;padding:0;
  background:linear-gradient(135deg,var(--c1),var(--c2) 50%,var(--c3));box-shadow:0 0 0 1.5px #cbd5e1;transition:box-shadow .15s,transform .15s}
.simi-color:hover{transform:scale(1.06)}
.simi-color.on{box-shadow:0 0 0 2.5px var(--accent)}
.simi-color:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(pointer:coarse){.simi-color{width:44px;height:44px}.simi-subtabs [role=tab]{min-height:44px}
  .simi-prueba-b .btn,.simi-azar{min-height:44px}}
@media(prefers-reduced-motion:reduce){.simi-carta,.simi-color{transition:none}.simi-carta:hover,.simi-color:hover{transform:none}}
@media(max-width:900px){.simi-lay{grid-template-columns:1fr}.simi-izq{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;text-align:left;column-gap:18px}
  .simi-circulo{grid-row:1/span 6;width:180px;height:180px}.simi-circulo .simi-fig{width:156px;height:156px}
  .simi-nombre{align-items:flex-start}.simi-prueba-b{justify-content:flex-start}}
@media(max-width:560px){.simi-izq{display:flex;text-align:center}.simi-nombre{align-items:center}.simi-prueba-b{justify-content:center}
  .simi-circulo{width:200px;height:200px}.simi-circulo .simi-fig{width:176px;height:176px}
  .simi-der{padding:16px 14px 18px}.simi-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.simi-subtabs{gap:2px}.simi-subtabs [role=tab]{flex:1 1 auto;padding:8px 6px;font-size:13px}}
/* ── «Mi perfil», nueva distribución (09-10-2026) ────────────────────────────────────────────────
   Arriba, dos tarjetas: Simi con sus logros | los datos personales. Debajo las cifras, las pestañas,
   el historial y una fila con las preferencias y la sesión. */
.pf-top{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:16px;align-items:stretch}
.pf-simi-card{padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pf-simi-fig{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px;border:0;background:none;font:inherit;color:inherit;border-radius:18px}
.pf-simi-fig.editable{cursor:pointer}
.pf-simi-fig.editable:hover .pf-simi-circulo{box-shadow:0 0 0 3px #bfdbfe,inset 0 -8px 20px rgba(37,99,235,.10)}
.pf-simi-fig:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
.pf-simi-circulo{width:156px;height:156px;border-radius:50%;display:grid;place-items:center;transition:box-shadow .15s;
  background:radial-gradient(circle at 50% 38%,#fff 0%,#eef4ff 55%,#dce8fb 100%);border:1px solid #dbe5f5;box-shadow:inset 0 -8px 20px rgba(37,99,235,.10)}
.pf-simi-circulo img,.pf-simi-circulo svg{display:block;width:132px;height:132px}
.pf-simi-nombre{font-size:17px;font-weight:800;color:var(--ink)}
.pf-simi-editar{font-size:12.5px;font-weight:700;color:var(--accent);background:#eff6ff;border-radius:999px;padding:4px 10px}
.pf-logros-widget{width:100%;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg);font:inherit;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.pf-logros-widget:hover{border-color:#93c5fd;background:#f8fbff}
.pf-logros-widget:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
.pf-lw-cab{font-size:14px}
.pf-lw-cab b{font-variant-numeric:tabular-nums}
.pf-lw-barra{display:block;height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.pf-lw-barra i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);transition:width .4s ease}
.pf-lw-pie{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.pf-lw-ver{color:var(--accent);font-weight:700}
.pf-datos-card{padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-datos-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pf-datos-cab .pf-rotulo{margin:0}
.pf-datos-cab .btn-suave{margin-top:0}
.pf-datos-card .pf-head{align-items:center}
.pf-datos-card .pf-head h2{margin:0;font-size:20px}
.pf-kpis-card{padding:14px;margin-top:16px}
.pf-kpis-card .pf-kpis{margin-top:0}
.pf-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:16px;align-items:start;margin:16px 0 24px;scroll-margin-top:84px}
.pf-bottom.sin-sesion{grid-template-columns:1fr}
.pf-sesion-col{padding:4px 20px}
.pf-sesion-col .pf-sesion{flex-direction:column;align-items:flex-start}
.pf-sesion-col .btn-salir{width:100%;justify-content:center}
.pf-logros-modal{max-width:920px;width:min(920px,calc(100vw - 24px))}
.pf-logros-cuerpo{padding:0 18px 18px;max-height:calc(100vh - 140px);overflow-y:auto}
.pf-logros-cuerpo .lg-cab-card:first-child{margin-top:0!important}
@media(prefers-reduced-motion:reduce){.pf-lw-barra i,.pf-simi-circulo,.pf-logros-widget{transition:none}}
@media(max-width:820px){.pf-bottom{grid-template-columns:1fr}.pf-sesion-col .btn-salir{width:auto}}
@media(max-width:700px){.pf-top{grid-template-columns:1fr}}
@media(max-width:560px){.pf-logros-cuerpo{padding:0 10px 12px}.pf-datos-card{padding:16px}}
/* ── Perfil clínico y evolución, en fila (09-10-2026) ─────────────────────────────────────────── */
.pf-graficos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;align-items:stretch}
.pf-g-card{padding:18px;min-width:0}
.pf-g-card #pfAxes{margin-top:8px}
.radar .rval{font-weight:800;fill:var(--ink)}
.evo-linea{display:block}
.evo-linea .evo-g{stroke:var(--line);stroke-width:1}
.evo-linea .evo-t{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.evo-linea .evo-apr-l{stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:5 4}
.evo-linea .evo-notas{fill:none;stroke:#93c5fd;stroke-width:1.5;stroke-linejoin:round}
.evo-linea .evo-media{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.evo-linea .evo-p{stroke:var(--panel);stroke-width:2}
.evo-linea .evo-p.s-low{fill:#dc2626}.evo-linea .evo-p.s-mid{fill:#d97706}.evo-linea .evo-p.s-good{fill:#16a34a}
.pf-g-card .evo-ley{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.pf-g-card .evo-ley>span{display:inline-flex;align-items:center;gap:6px}
.evo-ley-c{display:inline-block;width:16px;height:3px;border-radius:2px;background:#93c5fd}
.evo-ley-c.media{height:4px;background:var(--accent)}
.pf-explica-card{padding:18px;margin-top:16px}
.pf-explica{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pf-explica li{position:relative;padding:9px 12px 9px 34px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:14px;line-height:1.5}
.pf-explica li::before{content:"•";position:absolute;left:14px;top:7px;font-size:18px;color:var(--muted)}
.pf-explica li.ok{background:#f0fdf4;border-color:#bbf7d0}.pf-explica li.ok::before{content:"✓";color:#16a34a;font-size:14px;top:10px;font-weight:800}
.pf-explica li.mejora{background:#fffbeb;border-color:#fde68a}.pf-explica li.mejora::before{content:"!";color:#b45309;font-size:14px;top:10px;font-weight:800;left:16px}
@media(max-width:860px){.pf-graficos{grid-template-columns:1fr}}
/* ── Puntos a la vista (09-10-2026): píldora con moneda en el panel y en el perfil ───────────────── */
.pts-pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font:inherit;font-size:14px;white-space:nowrap;
  color:#92400e;background:linear-gradient(180deg,#fffbeb,#fef3c7);border:1px solid #fcd34d;box-shadow:0 1px 2px rgba(146,64,14,.12)}
.pts-pill b{font-size:15px;font-weight:800;color:#78350f;font-variant-numeric:tabular-nums}
.pts-pill .pts-ico{font-size:16px;line-height:1}
button.pts-pill{cursor:pointer;transition:box-shadow .15s,transform .15s}
button.pts-pill:hover{box-shadow:0 0 0 3px #fde68a}
button.pts-pill:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}
.pts-pill[hidden]{display:none}
#dashPuntos{margin-left:auto;align-self:center}
#dashPuntos+.tot-box{margin-left:16px}
.pts-tip{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:240px;padding:8px 11px;border-radius:10px;background:#0f172a;color:#fff;
  font-size:12.5px;font-weight:500;line-height:1.45;white-space:normal;text-align:left;box-shadow:0 8px 24px rgba(15,23,42,.25);
  opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.pts-pill:hover .pts-tip,.pts-pill:focus-visible .pts-tip{opacity:1;visibility:visible;transform:none}
.pts-pill.grande{padding:8px 16px;font-size:15px}
.pts-pill.grande b{font-size:18px}
.pf-puntos-nota{font-size:12px;margin-top:-6px}
.pf-puntos-nota[hidden]{display:none}
@media(prefers-reduced-motion:reduce){button.pts-pill,.pts-tip{transition:none}}
@media(max-width:640px){#dashPuntos{margin-left:0}#dashPuntos+.tot-box{margin-left:0}.pts-tip{right:auto;left:0}}
/* Exclusivo (09-10-2026): solo llega a quien lo tiene; se distingue con un borde dorado y su chapa. */
.simi-carta.exclusivo{border-color:#fcd34d;background:linear-gradient(180deg,#fffbeb,var(--panel) 60%)}
.simi-carta.exclusivo.puesto{border-color:var(--accent)}
.simi-excl{position:absolute;top:6px;left:6px;font-size:10.5px;font-weight:800;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:999px;padding:1px 7px}
/* ── Cabecera del perfil, compacta (09-10-2026): menos alto, más denso y alineado ────────────────── */
.pf-top{align-items:stretch}
.pf-simi-card{padding:16px;gap:12px;align-items:stretch;text-align:left;justify-content:center}
.pf-simi-fig{flex-direction:row;align-items:center;gap:14px;padding:2px;text-align:left;width:100%}
.pf-simi-circulo{width:88px;height:88px;flex:0 0 auto}
.pf-simi-circulo img,.pf-simi-circulo svg{width:76px;height:76px}
.pf-simi-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf-simi-nombre{font-size:17px;line-height:1.2}
.pf-simi-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pf-simi-editar{font-size:12px;padding:3px 9px}
.pts-pill.mini{padding:3px 10px;font-size:12.5px;gap:4px;box-shadow:none}
.pts-pill.mini b{font-size:13px}
.pts-pill.mini .pts-ico{font-size:13px}
.pf-logros-widget{flex-direction:row;align-items:center;gap:10px;padding:7px 10px;font-size:12.5px;border-radius:10px}
.pf-lw-cab{font-size:12.5px;white-space:nowrap}
.pf-lw-barra{flex:1 1 auto;min-width:40px;height:5px}
.pf-lw-ver{white-space:nowrap;font-size:12.5px}
.pf-datos-card{padding:16px 18px;gap:12px;justify-content:center}
.pf-datos-cab{flex-wrap:wrap;gap:8px 14px}
.pf-datos-cab .pf-rotulo{flex:0 0 auto}
.pf-datos-cab .pf-head{flex:1 1 auto;gap:10px;flex-wrap:nowrap;min-width:0}
.pf-datos-card .pf-ava{width:36px;height:36px;border-radius:11px;font-size:16px}
.pf-datos-card .pf-head h2{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-datos-card .pf-id{min-width:0}
.pf-datos-card #pfMeta{font-size:12.5px}
.pf-datos-card .btn-suave{padding:6px 12px;font-size:13px;margin-left:auto}
.pf-datos-card .pf-datos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.pf-datos-card .pf-dato{background:none;border:0;border-radius:0;padding:0;min-width:0}
.pf-datos-card .pf-dato.ancho{grid-column:auto}
.pf-datos-card .pf-dato span{font-size:12px;color:#64748b;font-weight:500}
.pf-datos-card .pf-dato b{font-size:14px;font-weight:600;color:#1e293b;margin-top:1px}
@media(pointer:coarse){.pf-logros-widget{min-height:44px}.pf-datos-card .btn-suave{min-height:40px}}
@media(max-width:700px){.pf-simi-card{padding:14px}}
@media(max-width:430px){.pf-datos-card .pf-datos{grid-template-columns:1fr}.pf-lw-cab span:last-child{display:none}}
/* ── Abajo del perfil (09-10-2026): preferencias a todo lo ancho y la sesión en una franja final ──── */
.pf-bottom{grid-template-columns:1fr}
.pf-prefs-card .pf-pats{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pf-prefs-card .pf-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pf-franja{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 0}
.pf-franja .pf-bloque{padding:16px 20px;align-self:stretch}
.pf-franja .pf-bloque+.pf-bloque{border-top:0;border-left:1px solid var(--line)}
.pf-franja .pf-sesion{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap}
.pf-franja .pf-sesion>div{min-width:0}
.pf-franja .btn-salir{width:auto;flex:0 0 auto}
.pf-franja .pf-peligro{background:linear-gradient(90deg,rgba(254,226,226,.35),transparent 70%)}
@media(max-width:900px){.pf-franja .pf-sesion{flex-direction:column;align-items:flex-start}}
@media(max-width:640px){.pf-franja{grid-template-columns:1fr}.pf-franja .pf-bloque+.pf-bloque{border-left:0;border-top:1px solid var(--line)}}
.pf-prefs-card .pf-packs{display:flex;flex-wrap:wrap}
.pf-prefs-card .pf-pack{flex:1 1 190px;max-width:320px}
.pf-franja{padding:0;overflow:hidden}
/* La moneda de NutriSims (09-10-2026, public/nutrisim-moneda.png desde la imagen subida): azul, con
   Simi. La píldora pasa al azul de la marca para ir con ella. */
.pts-pill{color:#1e40af;background:linear-gradient(180deg,#f5f9ff,#e6efff);border-color:#bfdbfe;box-shadow:0 1px 2px rgba(30,64,175,.10)}
.pts-pill b{color:#1e3a8a}
img.pts-ico{display:block;width:20px;height:20px;object-fit:contain;flex:0 0 auto;margin-left:-4px}
.pts-pill.mini img.pts-ico{width:17px;height:17px;margin-left:-3px}
button.pts-pill:hover{box-shadow:0 0 0 3px #dbeafe}
button.pts-pill:focus-visible{outline-color:#60a5fa}
img.pts-ico{width:26px;height:26px;margin:-5px -2px -5px -7px}
.pts-pill.mini img.pts-ico{width:21px;height:21px;margin:-4px -1px -4px -5px}
/* ── Perfil clínico en acordeón y evolución interactiva (09-10-2026) ────────────────────────────── */
.pf-g-card #pfRadar{padding-bottom:10px;border-bottom:1px solid #f1f5f9;margin-bottom:6px}
.pf-comp{margin:0;border-bottom:1px solid #f1f5f9}
.pf-comp:last-child{border-bottom:0}
.pf-comp>summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto 64px 16px;align-items:center;gap:8px;padding:9px 4px;cursor:pointer;border-radius:8px;font-size:13.5px}
.pf-comp>summary::-webkit-details-marker{display:none}
.pf-comp>summary:hover{background:var(--bg)}
.pf-comp>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pf-comp-ico{font-size:15px}
.pf-comp-n{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-comp .pf-sello{margin-left:0}
.pf-comp-v{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;min-width:36px}
.pf-comp>summary .bar{height:5px;margin:0}
.pf-comp-chev{color:var(--muted);transition:transform .15s}
.pf-comp[open] .pf-comp-chev{transform:rotate(180deg)}
.pf-comp-cuerpo{padding:2px 6px 12px 30px;font-size:13px;line-height:1.5;color:var(--ink)}
.pf-comp-cuerpo p{margin:4px 0}
.pf-comp-cuerpo .ah{color:var(--muted);font-size:12.5px;margin:0 0 4px}
.pf-comp-prox{background:#eff6ff;border-radius:8px;padding:6px 9px}
@media(prefers-reduced-motion:reduce){.pf-comp-chev{transition:none}}
@media(max-width:430px){.pf-comp>summary{grid-template-columns:auto minmax(0,1fr) auto 16px}.pf-comp>summary .bar,.pf-comp>summary .pf-sello{display:none}}
.evo-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.evo-kpi{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.evo-kpi span{font-size:11.5px;color:var(--muted);font-weight:600}
.evo-kpi b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.evo-kpi b small{font-size:11px;color:var(--muted);font-weight:600}
.evo-tend{display:inline-block;align-self:flex-start;font-size:14px!important;padding:2px 8px;border-radius:999px;background:#f1f5f9}
.evo-tend.sube{background:#dcfce7;color:#15803d!important}.evo-tend.baja{background:#fee2e2;color:#b91c1c!important}
.evo-graf{position:relative}
.evo-linea .evo-notas{fill:none;stroke:#3b82f6;stroke-width:2;stroke-linejoin:round}
.evo-linea .evo-media{fill:none;stroke:#1e3a8a;stroke-width:2.5;stroke-dasharray:1 0;stroke-linecap:round;opacity:.9}
.evo-linea .evo-obj-l{stroke:#16a34a;stroke-width:1.2;stroke-dasharray:2 4}
.evo-linea .evo-lbl{font-size:10.5px;font-weight:700;fill:#64748b}
.evo-linea .evo-lbl.obj{fill:#15803d}
.evo-linea .evo-p{stroke:#fff;stroke-width:2;transition:r .12s}
.evo-linea .evo-p.s-low{fill:#dc2626}.evo-linea .evo-p.s-good{fill:#16a34a}
.evo-linea .evo-hit{fill:transparent;cursor:pointer}
.evo-linea .evo-nodo{outline:none}
.evo-linea .evo-nodo.on .evo-p,.evo-linea .evo-nodo:focus-visible .evo-p{r:7px;stroke:#1e3a8a}
.evo.sin-notas .evo-s-notas,.evo.sin-media .evo-s-media,.evo.sin-objetivo .evo-s-objetivo{display:none}
.evo-tip{position:absolute;z-index:5;max-width:230px;padding:9px 11px;border-radius:12px;background:#0f172a;color:#fff;font-size:12.5px;line-height:1.4;
  box-shadow:0 10px 30px rgba(15,23,42,.3);display:flex;flex-direction:column;gap:3px;pointer-events:none}
.evo-tip[hidden]{display:none}
.evo-tip-t{font-weight:700}
.evo-tip-n{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}.evo-tip-n.ok{color:#86efac}.evo-tip-n.ko{color:#fca5a5}
.evo-tip-f{color:#cbd5e1;font-size:12px}
.evo-tip-d{color:#e2e8f0;font-size:12px;border-top:1px solid rgba(255,255,255,.15);padding-top:4px;margin-top:2px}
.pf-g-card .evo-ley{gap:6px}
.evo-tg{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.evo-tg[aria-pressed=true]{color:var(--ink);border-color:#cbd5e1;background:var(--bg)}
.evo-tg:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.evo-tg-c{width:14px;height:14px;border-radius:4px;border:1.5px solid #cbd5e1;display:grid;place-items:center;font-size:10px;line-height:1}
.evo-tg[aria-pressed=true] .evo-tg-c::after{content:"✓";font-weight:800;color:#fff}
.evo-tg.notas[aria-pressed=true] .evo-tg-c{background:#3b82f6;border-color:#3b82f6}
.evo-tg.media[aria-pressed=true] .evo-tg-c{background:#1e3a8a;border-color:#1e3a8a}
.evo-tg.objetivo[aria-pressed=true] .evo-tg-c{background:#16a34a;border-color:#16a34a}
@media(pointer:coarse){.evo-tg{min-height:40px}}
.evo-linea .evo-lbl{paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
/* ── «Tu siguiente paso» pedagógico y pie del perfil (10-10-2026) ─────────────────────────── */
.pf-paso-card{padding:18px 20px;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.pf-paso-tit{margin:0}
.pf-paso-sub{margin:2px 0 -4px}
.pf-paso-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:2px}
.pf-paso-cta .pf-recomendado{font-weight:700}
@media(max-width:520px){.pf-paso-cta .pf-recomendado{flex:1 1 100%}}
.pf-pie{margin:16px 0 24px}
.pf-bottom{margin-bottom:0}
#pfConResumen[hidden]{display:none}
.pf-focus[hidden]{display:none}
/* ── Tiempo de consulta (10-10-2026) ─────────────────────────────────────────────────────── */
/* ── Consulta: ficha del paciente y actitud (10-10-2026) ─────────────────────────────────── */
.pac-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px;align-self:start;min-width:0}
.pac-foto{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#e2e8f0;display:grid;place-items:center;font-size:44px;font-weight:800;color:#64748b}
.pac-foto .ns-foto{width:100%;height:100%;object-fit:cover;display:block}
.pac-id{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.pac-id b{font-size:16px}.pac-id .muted{font-size:13px}
.pac-rot{margin:4px 0 -2px}
.pac-const{margin:0;display:flex;flex-direction:column;gap:0}
.pac-fila{display:flex;flex-direction:column;gap:1px;padding:8px 0;border-top:1px solid var(--line)}
.pac-fila dt{font-size:11.5px;color:var(--muted);font-weight:600}
.pac-fila dd{margin:0;font-size:14px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.pac-sub{font-size:11.5px;font-weight:700;color:var(--accent-d);background:var(--accent-soft);border-radius:999px;padding:1px 8px}
.pac-pend{font-size:12.5px;color:var(--muted)}
/* Columnas: ficha | carril | chat. */
@media(min-width:1100px){
  .consulta{grid-template-columns:220px 76px minmax(0,1fr)}
  .consulta.carril-oculto{grid-template-columns:220px 34px minmax(0,1fr)}
  .consulta .chat-head .avatar{display:none}            /* la foto ya está, en grande, a la izquierda */
}
/* Mediana y móvil: una franja de lado a lado, sin la foto grande (la del chat ya está). */
@media(max-width:1099px){
  .pac-card{grid-column:1/-1;flex-direction:row;align-items:center;padding:8px 12px;gap:10px 14px;flex-wrap:wrap}
  .pac-foto,.pac-rot,.pac-id{display:none}
  .pac-const{flex-direction:row;flex-wrap:wrap;gap:6px 18px}
  .pac-fila{border-top:0;padding:0;flex-direction:row;align-items:baseline;gap:6px}
  .pac-fila dd{font-size:13px}
}
/* La barra de actitud, fina, encima del hilo. */
.rapport-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 18px;font-size:12.5px;border-bottom:1px solid var(--line);background:#f8fafc;color:#334155}
.rapport-bar:empty{display:none}
.rapport-bar b{font-weight:700}
.rapport-bar .rp-sep{color:var(--muted)}
.rapport-bar .rp-det{color:#475569}
.rp-punto{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#94a3b8;display:inline-block}
.rapport-bar[data-tono="verde"]{background:#f0fdf4}.rapport-bar[data-tono="verde"] .rp-punto,.rp-punto[data-tono="verde"]{background:#16a34a}
.rapport-bar[data-tono="azul"]{background:#eff6ff}.rapport-bar[data-tono="azul"] .rp-punto,.rp-punto[data-tono="azul"]{background:#2563eb}
.rapport-bar[data-tono="ambar"]{background:#fffbeb}.rapport-bar[data-tono="ambar"] .rp-punto,.rp-punto[data-tono="ambar"]{background:#d97706}
.rapport-bar[data-tono="violeta"]{background:#f5f3ff}.rapport-bar[data-tono="violeta"] .rp-punto,.rp-punto[data-tono="violeta"]{background:#7c3aed}
.rapport-bar[data-tono="rojo"]{background:#fef2f2}.rapport-bar[data-tono="rojo"] .rp-punto,.rp-punto[data-tono="rojo"]{background:#dc2626}
.rapport-bar.rp-cambia .rp-punto{animation:rpLatido .6s ease-out}
@keyframes rpLatido{0%{box-shadow:0 0 0 0 currentColor;transform:scale(1.35)}100%{box-shadow:0 0 0 6px transparent;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.rapport-bar.rp-cambia .rp-punto{animation:none}}
/* Estado de instrumentos y analítica: «✓ Realizado» / «+ Solicitar» (10-10-2026). */
.ins-estado{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 14px}
.an-locked .ins-estado{max-width:760px;margin:14px auto}
.ins-estado.ins-uno{grid-template-columns:minmax(0,320px);justify-content:center}
.ins-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:center;min-width:0}
.ins-item.hecho{border-color:#bbf7d0;background:#f7fef9}
.ins-ico{display:grid;place-items:center;width:30px;height:30px;color:var(--accent-d);font-size:20px}
.ins-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ins-nom{font-size:12.5px;font-weight:700;color:#334155}
.ins-badge{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;border:1px solid transparent;white-space:nowrap;line-height:1.3;vertical-align:middle}
.ins-badge.ok{background:#dcfce7;border-color:#bbf7d0;color:#15803d}
.ins-badge.pend{background:#f1f5f9;border-color:var(--line);color:#64748b}
.ins-badge.curso{background:#eff6ff;border-color:#dbeafe;color:#1d4ed8}
button.ins-badge.pedir{background:var(--panel);border-color:var(--accent-line,#c7d2fe);color:var(--accent-d);cursor:pointer;font-family:inherit;transition:background-color .15s,transform .1s}
button.ins-badge.pedir:hover{background:var(--accent-soft)}
button.ins-badge.pedir:active{transform:scale(.96)}
button.ins-badge.pedir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.ins-badge.pedir:disabled{opacity:.6;cursor:default}
.bt-head .ins-badge{margin-left:4px}
@media(max-width:640px){.ins-estado{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:380px){.ins-estado{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1099px){.pac-fila.pac-actitud{display:none}}   /* en la franja ya la dice la barra de encima del chat */
.pf-pie[hidden]{display:none}
/* ── Consulta más compacta (10-10-2026): actitud en la cabecera y carril fino ───────────────── */
.chat-head{flex-wrap:wrap;row-gap:6px;padding:12px 16px}
.rapport-pill{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;font-size:12px;line-height:1.3;color:#334155;background:#f8fafc;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.rapport-pill:empty{display:none}
.rapport-pill b{font-weight:700;white-space:nowrap}
.rapport-pill .rp-sep{color:var(--muted)}
.rapport-pill .rp-det{color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rapport-pill[data-tono="verde"]{background:#f0fdf4;border-color:#bbf7d0}.rapport-pill[data-tono="verde"] .rp-punto{background:#16a34a}
.rapport-pill[data-tono="azul"]{background:#eff6ff;border-color:#dbeafe}.rapport-pill[data-tono="azul"] .rp-punto{background:#2563eb}
.rapport-pill[data-tono="ambar"]{background:#fffbeb;border-color:#fde68a}.rapport-pill[data-tono="ambar"] .rp-punto{background:#d97706}
.rapport-pill[data-tono="violeta"]{background:#f5f3ff;border-color:#ddd6fe}.rapport-pill[data-tono="violeta"] .rp-punto{background:#7c3aed}
.rapport-pill[data-tono="rojo"]{background:#fef2f2;border-color:#fecaca}.rapport-pill[data-tono="rojo"] .rp-punto{background:#dc2626}
.rapport-pill.rp-cambia .rp-punto{animation:rpLatido .6s ease-out}
@media(prefers-reduced-motion:reduce){.rapport-pill.rp-cambia .rp-punto{animation:none}}
/* «Simulado por NutriSims», más pequeña y a la derecha, junto a la pista. */
.chat-head .chat-marca{margin-left:auto;margin-right:0;font-size:10.5px;padding:2px 8px 2px 3px}
.chat-head .chat-marca img{width:18px;height:18px}
.chat-head .pista-btn{margin-left:0}
@media(max-width:1500px){.chat-head .chat-marca .cm-txt{display:none}.chat-head .chat-marca .cm-corto{display:inline}.chat-head .chat-marca{padding:2px 8px 2px 3px}}
@media(min-width:701px){.chat-head{flex-wrap:nowrap}.chat-head>div:not(.avatar){flex:0 0 auto}.rapport-pill{flex:0 1 auto}}
.ar-rail .ar-title{font-size:9.5px;letter-spacing:.04em;padding:0 2px}
/* Carril: con los instrumentos guardados, un divisor fino (28 px) con su botón; menos hueco entre columnas. */
@media(min-width:901px){
  .consulta{gap:10px;grid-template-columns:72px minmax(0,1fr)}
  .consulta.carril-oculto{grid-template-columns:28px minmax(0,1fr)}
  .ar-tab{width:28px;gap:6px;font-size:10px;letter-spacing:.06em}
}
@media(min-width:1100px){
  .consulta{grid-template-columns:220px 72px minmax(0,1fr)}
  .consulta.carril-oculto{grid-template-columns:220px 28px minmax(0,1fr)}
}
/* ── Recompensas: saldo en la cabecera y monedas que vuelan (10-10-2026) ───────────────────── */
.top-pts{padding:5px 12px;font-size:13px}
.top-pts b{font-size:14px}
.top-pts img.pts-ico{width:22px;height:22px;margin:-3px -1px -3px -5px}
.top-pts.late{animation:ptsLate .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes ptsLate{0%{transform:scale(1)}35%{transform:scale(1.15);box-shadow:0 0 0 6px rgba(37,99,235,.15)}100%{transform:scale(1)}}
header.top.pts-encima{position:relative;z-index:70}   /* en el móvil, durante la consulta, la cabecera es static: sin esto el z-index no hace nada */
.moneda-vuela{position:fixed;left:0;top:0;width:22px;height:22px;z-index:10050;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 2px 4px rgba(30,64,175,.35))}
.lgc-pts{display:inline-flex;align-items:center;gap:4px}
.lgc-moneda{width:18px;height:18px}
.ev-monedas{display:flex;align-items:center;gap:12px;margin:10px 0 4px;padding:12px 16px;border-radius:14px;background:linear-gradient(180deg,#f5f9ff,#e6efff);border:1px solid #bfdbfe;color:#1e3a8a;font-size:14px;animation:evMonedasEntra .45s cubic-bezier(.2,.9,.3,1.2)}
.ev-monedas b{font-size:15.5px}
.ev-monedas img{flex:0 0 auto}
.ev-monedas>span{display:flex;flex-direction:column;gap:2px}
.ev-monedas.sin{background:#f8fafc;border-color:var(--line);animation:none}
.ev-monedas[hidden]{display:none}
@keyframes evMonedasEntra{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.top-pts.late,.ev-monedas{animation:none}}
@media(max-width:560px){.top-pts{padding:4px 8px;gap:3px}.top-pts b{font-size:13px}.top-pts img.pts-ico{width:18px;height:18px;margin:-2px 0 -2px -3px}}
@media(max-width:420px){.top-in{gap:6px}.top-pts{padding:3px 7px}}
@media(max-width:560px){.top-pts{min-height:34px;min-width:34px;justify-content:center}}

@media(max-width:700px){.chat-head .pista-btn{margin-left:auto}}   /* sin la chapa «Simulado» (oculta aquí), la pista vuelve a la derecha */
.ev-monedas.demo{background:linear-gradient(180deg,#fffbeb,#fef3c7);border-color:#fde68a;color:#78350f}
.demo-fijate{margin-top:6px;font-size:13.5px}
/* ── El Simi propio en todas partes (10-10-2026): el dibujo ocupa el sitio del logotipo ────────── */
.simi-propio{display:inline-block;flex:0 0 auto;line-height:0;vertical-align:middle}
.simi-propio>svg.simi-fig{width:100%;height:100%;display:block}
.brand .dot .simi-propio,.masc-flot .bola .simi-propio{width:100%!important;height:100%!important;display:block}
.masc-flot .bola .simi-propio{width:60px!important;height:60px!important}
.masc-overlay .caja .simi-propio{width:104px!important;height:104px!important;margin:0 auto 16px;display:block}
.toast .to-av .simi-propio{width:34px!important;height:34px!important;display:block}
.lgc-sello .simi-propio{width:44px!important;height:44px!important;filter:drop-shadow(0 3px 7px var(--lg-glow))}
.lg-celebra.in .lgc-sello .simi-propio{animation:lgc-pop .6s cubic-bezier(.2,.9,.3,1.4) .08s both}
@media(prefers-reduced-motion:reduce){.lg-celebra.in .lgc-sello .simi-propio{animation:none}}
/* ── Perfil: Simi como botón, radar con aire y acordeón alineado (10-10-2026) ───────────────── */
/* Simi: el círculo es el botón (sin «Personalizar avatar» aparte). */
button.pf-simi-circulo{border:0;padding:0;font:inherit;cursor:pointer;transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s}
button.pf-simi-circulo:hover{transform:scale(1.05);box-shadow:0 0 0 3px #bfdbfe,0 8px 22px rgba(37,99,235,.22)}
button.pf-simi-circulo:active{transform:scale(.98)}
button.pf-simi-circulo:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pf-simi-fig.editable{cursor:default}
.pf-simi-fig.editable:hover .pf-simi-circulo:not(:hover){box-shadow:none}
@media(prefers-reduced-motion:reduce){button.pf-simi-circulo{transition:none}button.pf-simi-circulo:hover{transform:none}}
/* Radar: malla gris muy suave, área azul de marca al 20 % y vértices marcados. */
.radar .rgrid{stroke:#e2e8f0}
.radar .rax{stroke:#e2e8f0}
.radar .rarea{fill:#2563eb;fill-opacity:.2;stroke:#2563eb;stroke-width:2}
.radar .rdot{fill:#2563eb;stroke:#fff;stroke-width:2.2}
.radar .rlab{font-size:12px}
.pf-g-card .radar{max-width:440px}
/* Acordeón: 4 columnas fijas por fila — nombre · sello · cifra y barra · flecha. */
.pf-comp>summary{grid-template-columns:minmax(0,1fr) 96px 112px 24px;gap:10px}
.pf-comp-tit{display:flex;align-items:center;gap:8px;min-width:0}
.pf-comp-tit .pf-comp-n{white-space:normal;overflow:visible;line-height:1.3}
.pf-comp-sello{display:flex;justify-content:flex-start}
.pf-comp-prog{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px}
.pf-comp-prog .pf-comp-v{min-width:0;text-align:right}
.pf-comp-prog .bar{height:5px;margin:0;width:100%}
.pf-comp-chev{justify-self:end}
@media(max-width:430px){
  .pf-comp>summary{grid-template-columns:minmax(0,1fr) 44px 24px}
  .pf-comp-sello,.pf-comp-prog .bar{display:none}
  .pf-comp-prog{grid-template-columns:44px}
}

/* Barra superior alineada (10-10-2026): idiomas, saldo, «Amigos y aulas» y la cuenta, a la MISMA
   altura y centrados. El <nav> era inline: sus botones se alineaban por la línea base y el saldo
   quedaba 5 px más arriba. Con el dedo, 46 px (los idiomas conservan sus 44 de toque). */
.top-in{--nav-h:38px}
header.top nav{display:flex;align-items:center;gap:8px}
header.top nav>*{margin:0}
.top-in .lang-sel{height:var(--nav-h);box-sizing:border-box;align-items:center}
.top-in .lang-sel button{height:100%;min-height:0}
.top-in .top-pts:not([hidden]),.top-in nav .btn.sm{height:var(--nav-h);min-height:var(--nav-h);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.top-in nav .btn.sm{gap:6px}
@media(pointer:coarse){.top-in{--nav-h:46px}.top-in .lang-sel{padding-top:0;padding-bottom:0}}
@media(max-width:420px){header.top nav{gap:6px}}

/* Tarjeta de Simi con el ALUMNO de título (10-10-2026): nombre y saldo en una fila, y debajo la
   píldora de su Simi. La tarjeta de datos pierde la inicial: título + minutos a la izquierda, editar a la derecha. */
.pf-simi-fila{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.pf-simi-fila .pf-simi-nombre{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-simi-mascota{display:flex}
.pf-simi-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:#f1f5f9;border:1px solid #e2e8f0;font-size:12px;font-weight:500;color:#64748b}
.pf-simi-chip b{font-weight:700;color:#334155}
.pf-datos-tit{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
.pf-datos-tit .pf-rotulo{margin:0}
.pf-meta{font-size:12px;line-height:1.3;color:#64748b;font-weight:500}
.pf-meta:empty{display:none}
.pf-datos-cab{flex-wrap:nowrap;align-items:center}
.pf-datos-card .btn-suave{flex:0 0 auto}
.pf-datos-cab{flex-wrap:wrap}
.pf-datos-tit{flex:1 1 auto}
.pf-datos-tit .pf-rotulo{white-space:nowrap}
.pf-datos-card .btn-suave{margin-left:auto}
/* Móvil: con la altura unificada, saldo + dos botones + idiomas no cabían junto a la marca (en
   producción los botones acababan apilados en columna). Botones cuadrados, idiomas más estrechos
   (siguen con 44 de alto) y, por debajo de 420 px, la marca solo con el icono. */
@media(max-width:560px){
  .top-in{gap:6px}
  .top-in nav .btn.sm{padding-left:0;padding-right:0;min-width:42px}
  .top-in .top-pts:not([hidden]){padding-left:7px;padding-right:8px}
  .top-in .lang-sel button{min-width:34px;padding-left:5px;padding-right:5px}
}
@media(max-width:420px){ .brand{font-size:0;gap:0} }
/* Tableta: con «Simulador de consulta…» y las etiquetas, la barra no cabía y en producción partía en
   dos líneas. Sin el subtítulo por debajo de 1000 px y solo iconos por debajo de 820 px. */
@media(max-width:1000px){ .top .sub{display:none} }
@media(max-width:820px){ .top-in .nav-lbl{display:none} .top-in nav .btn.sm{padding-left:0;padding-right:0;min-width:42px;font-size:15px} }
@media(max-width:360px){ .top-in .lang-sel button{min-width:30px;padding-left:3px;padding-right:3px} .top-in{padding-left:8px;padding-right:8px} }
.pf-datos-tit{flex:1 1 160px;min-width:0}
@media(max-width:430px){ .pf-datos-tit{flex-basis:100%} .pf-datos-card .btn-suave{margin-left:0} }
/* Nombre y saldo en UNA fila: la columna de Simi se queda algo más ancha (antes, 240–300 px y la píldora saltaba debajo). */
@media(min-width:1000px){ .pf-top{grid-template-columns:minmax(300px,360px) minmax(0,1fr)} }

/* Radar responsive (10-10-2026): ancho del contenedor y alto proporcional; en pantallas estrechas,
   etiquetas más grandes en unidades del dibujo (a 320 px de ancho, 12 unidades eran 8 px reales). */
.pf-g-card .radar{width:100%;height:auto;aspect-ratio:460/336}
@media(max-width:560px){ .radar .rlab{font-size:15px} }
.pf-g-card .radar{overflow:visible}
/* Tableta (701–800 px): las dos tarjetas de cabecera, apiladas; lado a lado, la de datos partía nombre, correo y centro en dos líneas. */
@media(max-width:800px){ .pf-top{grid-template-columns:1fr} }
/* 1fr = minmax(auto,1fr): el nombre sin cortes y el correo largo ensanchaban la pista más allá de la
   pantalla (a 320 px, recortados por la derecha). minmax(0,…) y los textos largos se parten. */
@media(max-width:800px){ .pf-top{grid-template-columns:minmax(0,1fr)} }
.pf-top>.card{min-width:0}
.pf-simi-fig,.pf-simi-info{min-width:0}
.pf-datos-card .pf-dato b{overflow-wrap:anywhere}

/* Marca de una pieza (10-10-2026): «Nutri» y <b>Sims</b> eran dos hijos del flex y el gap de 9 px los
   separaba («Nutri Sims»). Ahora van juntos en un span. */
.brand-txt{display:inline}
.brand-txt b{color:var(--accent)}

/* Botón de la cuenta con el Simi del alumno en miniatura (28 px, redondo) y su nombre al lado. */
#navAuth .nav-simi{width:28px!important;height:28px!important;border-radius:50%;background:#eff6ff;box-shadow:0 0 0 1px #dbeafe;flex:0 0 auto;object-fit:contain;display:inline-block;overflow:hidden}
#navAuth .nav-simi svg{width:100%;height:100%;display:block}
.top-in nav #navAuth.btn.sm{padding-left:6px}
@media(max-width:820px){ .top-in nav #navAuth.btn.sm{padding-left:0} }

/* Historial con una sola acción («🔍 Ver resolución»), a la derecha y en la columna más estrecha posible:
   el ancho sobrante va al paciente y a la patología. */
.pf-table td.pf-c-acts{width:1%;white-space:nowrap;text-align:right}
.pf-table .pf-acts{justify-content:flex-end;flex-wrap:nowrap}
@media(max-width:900px){
  .pf-table tr{grid-template-columns:minmax(0,1fr) auto}
  .pf-table td.pf-c-acts{grid-column:1 / -1;margin-top:6px;width:auto}
  .pf-table .pf-acts{justify-content:flex-end}
}

/* Catálogo ampliado de Simi (10-10-2026): rarezas, colores base en su pestaña y legendarios que brillan. */
.simi-rareza{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:1px 8px;line-height:1.6}
.simi-rareza.r-comun{background:#f1f5f9;color:#475569}
.simi-rareza.r-raro{background:#dbeafe;color:#1d4ed8}
.simi-rareza.r-epico{background:#ede9fe;color:#6d28d9}
.simi-rareza.r-legendario{background:linear-gradient(90deg,#fef3c7,#fde68a);color:#92400e;box-shadow:0 0 0 1px #f59e0b inset}
.simi-carta.r-raro:not(.puesto){border-color:#bfdbfe}
.simi-carta.r-epico:not(.puesto){border-color:#ddd6fe}
.simi-carta.r-legendario:not(.puesto){border-color:#fcd34d;box-shadow:0 0 0 3px rgba(251,191,36,.18)}
.simi-carta.r-legendario .simi-mini{background:radial-gradient(circle,#fef9c3 30%,#fde68a 100%)}
.simi-prueba .simi-rareza{margin:4px 0 2px}
.simi-grid-colores{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.simi-muestra{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2) 50%,var(--c3));box-shadow:0 0 0 1.5px #cbd5e1,inset 0 -6px 14px rgba(15,23,42,.12)}
.simi-carta-color.bloq .simi-muestra{opacity:.8}
.simi-carta-color[data-simi-color="holografico"] .simi-muestra{background:conic-gradient(from 30deg,#a5f3fc,#f0abfc,#a78bfa,#bef264,#a5f3fc)}
.simi-carta-color.r-legendario .simi-muestra,.simi-circulo.legendario{animation:simiDestello 2.4s ease-in-out infinite}
@keyframes simiDestello{0%,100%{box-shadow:0 0 0 1.5px #fcd34d,0 0 0 0 rgba(251,191,36,.0)}50%{box-shadow:0 0 0 1.5px #fcd34d,0 0 18px 4px rgba(251,191,36,.45)}}
@media(prefers-reduced-motion:reduce){.simi-carta-color.r-legendario .simi-muestra,.simi-circulo.legendario{animation:none}}
@media(max-width:560px){.simi-muestra{width:56px;height:56px}.simi-subtabs{overflow-x:auto}.simi-subtabs [role=tab]{flex:0 0 auto;padding:8px 10px}}

/* ── Consulta: pestañas fijas, analítica con referencia y baremo (11-10-2026) ───────────── */
/* Las pestañas (y el bloc de notas) se quedan arriba al bajar por la analítica o el historial:
   se cambia de sección sin volver a subir. Justo debajo de la cabecera del sitio, que en escritorio
   también es fija (su alto lo pone `--cab-h` desde nutrisim.js); en el móvil la cabecera no es fija
   durante la consulta, así que van arriba del todo. */
#s-consulta .tabs-bar{position:sticky;top:var(--cab-h,69px);z-index:15;background:var(--bg);box-shadow:0 1px 0 var(--line)}
@media(max-width:700px){#s-consulta .tabs-bar{top:0}}
.bt-fl{display:inline-block;font-weight:800;margin-right:3px}
.bt-fl.up{color:var(--warn-ink)}
.bt-fl.down{color:var(--bad)}
.bt-ref-l{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.an-sin p{margin:6px auto 0;max-width:520px}
.bt-baremo{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bt-baremo>summary{cursor:pointer;padding:12px 16px;font-weight:700;font-size:14px;list-style-position:inside}
.bt-baremo>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:14px}
.bt-baremo-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 22px;padding:0 16px 8px}
.bt-bg h5{margin:10px 0 4px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.bt-bg dl{margin:0}
.bt-bg dl>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--soft);font-size:13px}
.bt-bg dt{color:var(--ink)}
.bt-bg dd{margin:0;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.bt-baremo-pie{margin:0;padding:6px 16px 12px;font-size:12px}
@media(max-width:560px){.bt-row{grid-template-columns:minmax(0,1fr) auto;row-gap:3px;column-gap:10px}.bt-row .bt-name{grid-column:1;grid-row:1}.bt-row .bt-val{grid-column:2;grid-row:1;min-width:0}.bt-row .bt-ref{grid-column:1;grid-row:2;text-align:left;min-width:0}.bt-row .bt-badge{grid-column:2;grid-row:2}}

/* ── Desglose y balance de puntos (11-10-2026) ────────────────────────────────────────────── */
.top-pts{cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
@media(hover:hover){.top-pts:hover{transform:scale(1.05);box-shadow:0 4px 12px -6px rgba(37,99,235,.45)}}
.top-pts:active{transform:scale(.98)}
.pts-modal{max-width:560px;display:flex;flex-direction:column;max-height:min(86vh,720px)}
.pts-saldo{display:flex;align-items:center;gap:14px;padding:4px 0 14px;border-bottom:1px solid var(--line)}
.pts-saldo-ico{width:44px;height:44px;flex:0 0 auto}
.pts-saldo-n{font-size:32px;line-height:1.1;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.pts-saldo-n span{font-size:16px;font-weight:700;color:var(--muted)}
.pts-saldo-res{font-size:13px;margin-top:2px}
.pts-filtros{display:flex;gap:6px;padding:12px 0 10px}
.pts-filtros button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pts-filtros button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.pts-filtros button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pts-lista-caja{overflow-y:auto;min-height:120px;margin:0 -4px;padding:0 4px;overscroll-behavior:contain}
.pts-lista{list-style:none;margin:0;padding:0}
.pts-mov{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--soft)}
.pts-mov:last-child{border-bottom:none}
.pts-mov-ico{font-size:20px;text-align:center}
.pts-mov-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pts-mov-que{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.pts-mov-cuando{font-size:12px}
.pts-mov-n{font-weight:800;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pts-mov.gana .pts-mov-n{color:#15803d}
.pts-mov.gasta .pts-mov-n{color:var(--bad)}
.pts-vacio{text-align:center;padding:28px 12px;color:var(--muted)}
.pts-vacio p{margin:0 0 10px}
@media(prefers-reduced-motion:reduce){.top-pts{transition:none}.top-pts:hover{transform:none}}

/* ── Idioma en el móvil (11-10-2026): un botón con el idioma actual que despliega las tres opciones ──
   La matriz de dispositivos medía los tres botones a 30-34 px de ancho (mínimo táctil, 44): a 44 no
   caben junto a la marca, el saldo y los dos botones. En pantallas anchas, todo como antes. */
.lang-toggle{display:none}
.lang-opts{display:contents}
@media(max-width:560px){
  .top-in .lang-sel{position:relative;border:none;padding:0;background:none;gap:0;flex:0 0 auto}
  .top-in .lang-sel .lang-toggle{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:52px;min-height:44px;height:var(--nav-h);box-sizing:border-box;flex:0 0 auto;
    padding:0 10px;border:1px solid var(--line-solid);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.03em;cursor:pointer}
  .lang-toggle svg{color:var(--muted);transition:transform .15s}
  .lang-sel.abierto .lang-toggle{border-color:var(--accent);color:var(--accent-d)}
  .lang-sel.abierto .lang-toggle svg{transform:rotate(180deg)}
  .lang-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .lang-opts{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:90;flex-direction:column;gap:2px;
    padding:4px;background:var(--panel);border:1px solid var(--line-solid);border-radius:14px;box-shadow:0 12px 28px -12px rgba(15,23,42,.35)}
  .lang-sel.abierto .lang-opts{display:flex}
  .top-in .lang-opts button{min-width:64px;min-height:44px;height:44px;padding:0 14px;border-radius:10px;font-size:13px}
}
@media(max-width:560px) and (prefers-reduced-motion:reduce){.lang-toggle svg{transition:none}}
/* Táctil: lo que la matriz medía por debajo de 44 px de alto (11-10-2026). */
@media(pointer:coarse){#dashPuntos{min-height:44px}#pfQ{min-height:44px;box-sizing:border-box}#pfClear{min-height:44px}}

/* ==========================================================================
   AMIGOS Y AULAS — pulido visual (11-10-2026)
   Mismo mundo que el resto (cobalto, blanco, slate), con más jerarquía: título de página de verdad,
   pestañas segmentadas con iconos dibujados, títulos de tarjeta en frase (no etiquetas en mayúsculas),
   dos columnas en Amigos (lista | chats y grupos, donde se abren) y el aula viva arriba en Aulas.
   Movimiento: solo la burbuja que llega y la pulsación de los botones; nada en lo que se repite.
   ========================================================================== */
#s-social{--so-ease:cubic-bezier(.23,1,.32,1);--so-r:14px}
#s-social .so-i{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#s-social .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background-color .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease,transform .12s var(--so-ease)}
#s-social .btn:active{transform:scale(.97)}
#s-social .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
#s-social ::selection{background:#dbeafe;color:var(--ink)}
/* Cabecera */
#s-social .so-top{align-items:center;gap:12px 16px;margin-bottom:18px}
#s-social .so-cab{flex:1 1 260px;min-width:0}
#s-social .so-tit{margin:0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
#s-social .so-sub{margin:2px 0 0;font-size:14px;color:var(--muted)}
#s-social .so-chip{font-variant-numeric:tabular-nums}
/* Pestañas segmentadas */
#s-social .so-tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 20px;background:#eef2f7;border:0;border-radius:12px;max-width:100%}
#s-social .so-tabs .tab{border:0;margin:0;border-radius:9px;padding:8px 16px;font-size:14px;color:#475569;gap:8px;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
#s-social .so-tabs .tab:hover{color:var(--ink)}
#s-social .so-tabs .tab.on{background:var(--panel);color:var(--accent-d);box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 1px rgba(15,23,42,.04)}
#s-social .so-tabs .tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Rejilla de dos columnas */
#s-social .so-lay{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:20px;align-items:start}
#s-social .so-lay-aulas{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
#s-social .so-col{display:flex;flex-direction:column;gap:20px;min-width:0}
@media(max-width:900px){#s-social .so-lay,#s-social .so-lay-aulas{grid-template-columns:minmax(0,1fr)}}
/* Tarjetas: títulos en frase, notas, mensajes */
#s-social .so-card{padding:20px;border-radius:var(--so-r);margin:0}
#s-social .so-card h2,#s-social .so-card h3{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);display:flex;align-items:center;gap:8px}
#s-social .so-nota{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--muted)}
#s-social .so-msg-l{font-size:13px;color:var(--muted);margin-top:8px;min-height:0}
#s-social .so-msg-l:empty{margin:0}
#s-social .so-n{font-size:12px;font-weight:700;color:#475569;background:var(--soft);border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
#s-social .so-n[hidden]{display:none}
/* Tu código */
#s-social .so-codigo{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;margin-bottom:16px}
#s-social .so-code{flex:1;min-width:0;font-size:24px;font-weight:800;letter-spacing:.18em;color:var(--accent-d);background:none;padding:0;text-align:left;font-variant-numeric:tabular-nums}
#s-social .so-copia{background:var(--panel)}
#s-social .so-copia.copiado{color:var(--ok-ink);border-color:#bbf7d0;background:#f0fdf4}
#s-social .so-campo{display:flex;gap:8px}
#s-social .so-campo input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em}
#s-social .so-campo input::placeholder{text-transform:none;letter-spacing:0}
#s-social .so-campo .btn{flex:0 0 auto}
/* Lista de amigos */
#s-social .so-list .so-h{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted);margin:16px 0 4px}
#s-social .so-list .so-h:first-child{margin-top:8px}
#s-social .so-row{padding:10px 8px;margin:0 -8px;border-radius:10px;border-bottom:0;transition:background-color .15s ease}
#s-social .so-row + .so-row{box-shadow:0 -1px 0 var(--soft)}
@media(hover:hover) and (pointer:fine){#s-social .so-row:hover{background:#f8fafc}}
#s-social .so-acc{display:flex;gap:6px;flex:0 0 auto}
#s-social .so-av.so-av-l{width:40px;height:40px;font-size:15px;margin:0}
#s-social .so-pend{background:#f8fafc;box-shadow:none}
#s-social .so-dm-btn.on{color:var(--accent-d);border-color:#c7d2fe;background:#eef2ff}
#s-social .so-dot{width:8px;height:8px;margin-right:6px;box-shadow:0 0 0 2px #fff}
#s-social .so-dot.on{background:#16a34a}
/* Chats (directo y de grupo) */
#s-social .so-chat{padding:0;overflow:hidden}
#s-social .so-chat-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-solid);margin:0}
#s-social .so-chat-cab h2,#s-social .so-chat-cab h3{margin:0;min-width:0;flex:1 1 auto;gap:10px;font-size:15px}
#s-social .so-chat-tit{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#s-social .so-chat-nom,#s-social .gr-chat-nom{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-social .so-chat-est,#s-social .gr-chat-n{display:flex;align-items:center;font-size:12.5px;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
#s-social .so-dm{max-height:360px;min-height:180px;padding:16px;gap:8px;background:#f8fafc;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
#s-social .so-linea{margin:0;align-items:flex-end;gap:8px}
#s-social .so-linea .so-av{margin:0}
#s-social .so-linea.mio .so-av{margin:0}
#s-social .so-msg{background:var(--panel);border:1px solid var(--line-solid);border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:14px;line-height:1.45;max-width:min(75%,460px);box-shadow:0 1px 1px rgba(15,23,42,.03)}
#s-social .so-msg.mio{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:16px 16px 4px 16px}
#s-social .so-linea .so-msg{padding-bottom:8px}
#s-social #soDm .so-linea .so-msg.mio{padding-right:34px}
#s-social .gr-autor{color:var(--accent-d);font-size:12px}
#s-social .gr-sis{background:#eef2f7;color:#475569;font-size:12.5px}
#s-social .so-linea.nuevo{animation:soLlega .22s var(--so-ease)}
@keyframes soLlega{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#s-social .so-redacta{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-solid);background:var(--panel)}
#s-social .so-redacta input{flex:1;min-width:0;border-radius:999px;padding:10px 16px;background:#f8fafc}
#s-social .so-redacta input:focus{background:var(--panel)}
#s-social .so-envia{border-radius:999px;padding-left:16px;padding-right:18px}
#s-social .so-dm .gr-vacio,#s-social .so-dm > .muted{margin:auto;text-align:center}
/* Grupos */
#s-social .gr-cab{margin-bottom:14px}
#s-social .gr-cab .so-nota{margin:0}
#s-social .gr-lista{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
#s-social .gr-card{border:1px solid var(--line-solid);border-radius:12px;padding:14px;gap:12px;transition:border-color .15s ease,box-shadow .2s ease,transform .2s var(--so-ease)}
@media(hover:hover) and (pointer:fine){#s-social .gr-card:hover{border-color:color-mix(in srgb,var(--gr) 40%,#e2e8f0);box-shadow:0 6px 16px -8px rgba(15,23,42,.18);transform:translateY(-1px)}}
#s-social .gr-top{align-items:flex-start}
#s-social .gr-info b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
#s-social .gr-ico{flex-basis:42px;width:42px;height:42px;border-radius:12px;font-size:20px}
#s-social .gr-simis{padding-left:6px}
#s-social .gr-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px}
#s-social .gr-btns .btn{padding-left:10px;padding-right:10px;font-size:13.5px;white-space:nowrap;min-width:0}
#s-social .gr-btns .btn > span:not(.nav-badge){overflow:hidden;text-overflow:ellipsis}
#s-social .gr-chat-btn.on{background:#eef2ff;color:var(--accent-d);box-shadow:none}
#s-social .gr-ajustes{width:36px;padding:0}
#s-social .gr-btns .nav-badge{position:static;margin-left:2px}
#s-social .gr-vacio{padding:18px;text-align:center;border:1px dashed var(--line-solid);border-radius:12px;background:#f8fafc}
/* Aulas */
#s-social .so-modes{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:0 0 16px}
#s-social .so-mode{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line-solid);border-radius:12px;background:var(--panel);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
#s-social .so-mode b{font-size:14.5px}
#s-social .so-mode small{margin:0;line-height:1.45}
#s-social .so-mode-i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--soft);color:#475569;margin-bottom:6px}
#s-social .so-mode-i .so-i{width:18px;height:18px}
#s-social .so-mode.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
#s-social .so-mode.on .so-mode-i{background:var(--accent);color:#fff}
#s-social .so-mode.on::after{content:"";position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:999px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
@media(hover:hover) and (pointer:fine){#s-social .so-mode:not(.on):hover{border-color:#c7d2fe}}
#s-social .so-mode:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#s-social .so-lobby{border:1px solid #c7d2fe;box-shadow:0 0 0 4px rgba(37,99,235,.06),var(--shadow)}
#s-social .so-lobby-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
#s-social .so-lobby-id{min-width:0}
#s-social .so-lobby-id h2{margin-bottom:6px}
#s-social .so-sala-cod{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#s-social .so-room{font-family:inherit;font-size:26px;font-weight:800;letter-spacing:.16em;color:var(--accent-d);font-variant-numeric:tabular-nums}
#s-social .so-lobby-id .so-nota{margin:0}
#s-social .so-lobby-acc{display:flex;gap:8px;flex-wrap:wrap}
#s-social .so-members{gap:8px;margin-top:16px}
#s-social .so-member{display:inline-flex;align-items:center;gap:2px;padding:4px 12px 4px 4px;border:1px solid var(--line-solid);background:#f8fafc}
#s-social .so-member .so-av{margin-right:6px}
#s-social .so-member .tag{margin-left:6px}
@media(max-width:560px){
  #s-social .so-tit{font-size:21px}
  #s-social .so-tabs{display:flex}
  #s-social .so-tabs .tab{flex:1 1 0;justify-content:center}
  #s-social .so-card{padding:16px}
  #s-social .so-chat{padding:0}
  #s-social .so-campo{flex-wrap:wrap}
  #s-social .so-campo input{flex:1 1 160px}
  #s-social .so-pend{flex-wrap:wrap}
  #s-social .so-pend .so-acc{width:100%}
  #s-social .so-pend .so-acc .btn{flex:1}
  #s-social .so-lobby-acc{width:100%}
  #s-social .so-lobby-acc .btn{flex:1}
  #s-social .gr-cab .btn{width:100%}
}
@media(pointer:coarse){
  #s-social .so-tabs .tab,#s-social .so-campo .btn,#s-social .so-campo input,#s-social .so-copia,#s-social .so-acc .btn,#s-social .so-dm-btn,#s-social .so-redacta input,#s-social .so-envia{min-height:44px}
  #s-social .gr-ajustes{width:44px}
}
@media(prefers-reduced-motion:reduce){
  #s-social .so-linea.nuevo{animation:soLlegaSuave .2s ease}
  #s-social .gr-card,#s-social .btn{transition-property:background-color,border-color,color,box-shadow}
  #s-social .btn:active,#s-social .gr-card:hover{transform:none}
  @keyframes soLlegaSuave{from{opacity:0}to{opacity:1}}
}
/* Ajustes tras la primera ronda de capturas */
#s-social .so-tabs{contain:none;overflow:visible}
#s-social .gr-lista{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
#s-social .so-pend{flex-wrap:wrap}
#s-social .so-pend .so-acc{width:100%;padding-left:50px}
#s-social .so-pend .so-acc .btn{flex:1}
@media(max-width:560px){
  #s-social .so-pend .so-acc{padding-left:0}
  #s-social .so-campo .btn{flex:1 1 auto}
  #s-social .gr-btns{grid-template-columns:minmax(0,1fr) auto}
  #s-social .gr-btns .gr-chat-btn{grid-column:1;grid-row:1}
  #s-social .gr-btns .gr-ajustes{grid-column:2;grid-row:1}
  #s-social .gr-btns [data-grcaso],#s-social .gr-btns [data-grinvita]{grid-column:1 / -1;grid-row:2}
}
/* ---- Amigos: barra con «Añadir amigo» y un solo chat a la vez (11-10-2026) ---- */
#s-social .so-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#s-social .so-barra{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 20px}
#s-social .so-barra .so-tabs{margin:0}
#s-social .so-add{position:relative;display:flex;gap:8px;align-items:center}
#s-social .so-add[hidden]{display:none}
#s-social .so-add input{width:170px;text-transform:uppercase;letter-spacing:.06em;padding:8px 12px}
#s-social .so-add input::placeholder{text-transform:none;letter-spacing:0}
#s-social .so-add-msg{position:absolute;right:0;top:calc(100% + 4px);font-size:12.5px;color:var(--muted);white-space:nowrap}
/* Columna de listas (izquierda) y panel de chat fijo (derecha) */
#s-social .so-lay{grid-template-columns:minmax(320px,400px) minmax(0,1fr)}
#s-social .so-col-chat{position:sticky;top:calc(var(--top-h,68px) + 16px)}
#s-social .so-chat{display:flex;flex-direction:column;max-height:min(560px,calc(100vh - var(--top-h,68px) - 40px))}
#s-social .so-chat .so-dm{flex:1 1 auto;max-height:none;min-height:200px}
#s-social .so-chat-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:320px;border:1px dashed var(--line-solid);background:#fbfcfe;box-shadow:none}
#s-social .so-chat-vacio[hidden]{display:none}
#s-social .so-chat-vacio .so-i{width:28px;height:28px;color:#94a3b8;margin-bottom:4px}
#s-social .so-chat-vacio b{font-size:15px}
#s-social .so-chat-vacio p{margin:0;max-width:30ch;font-size:13.5px;color:var(--muted)}
/* Tu código: tarjeta compacta */
#s-social .so-codigo-card .so-codigo{margin-bottom:0}
/* Grupos en la columna estrecha: chat y ajustes arriba, «Caso en equipo» debajo */
#s-social .so-col .gr-lista{grid-template-columns:minmax(0,1fr)}
#s-social .gr-btns{grid-template-columns:minmax(0,1fr) auto}
#s-social .gr-btns .gr-chat-btn{grid-column:1;grid-row:1}
#s-social .gr-btns .gr-ajustes{grid-column:2;grid-row:1}
#s-social .gr-btns [data-grcaso],#s-social .gr-btns [data-grinvita]{grid-column:1 / -1;grid-row:2}
#s-social .gr-cab{flex-direction:column;align-items:stretch}
#s-social .gr-cab .btn{align-self:flex-start}
/* Una columna (tableta y móvil): el chat justo debajo de la lista de amigos; sin el aviso vacío */
@media(max-width:900px){
  #s-social .so-lay:not(.so-lay-aulas){display:flex;flex-direction:column;gap:20px}
  #s-social .so-lay:not(.so-lay-aulas) > .so-col{display:contents}
  #s-social .so-codigo-card{order:1}
  #s-social .so-amigos-card{order:2}
  #s-social .so-chat{order:3;max-height:min(560px,80vh)}
  #s-social .so-grupos-card{order:4}
  #s-social #soCasosCard{order:5}
  #s-social .so-chat-vacio{display:none}
  #s-social .so-col-chat{position:static}
}
@media(max-width:560px){
  #s-social .so-barra{flex-direction:column;align-items:stretch}
  #s-social .so-add{width:100%}
  #s-social .so-add input{flex:1;width:auto;min-width:0}
  #s-social .so-add-msg{position:static;white-space:normal}
  #s-social .so-add{flex-wrap:wrap}
  #s-social .gr-cab .btn{width:100%}
}
@media(pointer:coarse){#s-social .so-add input,#s-social .so-add .btn,#s-social #soDmCerrar,#s-social #soGrCerrar{min-height:44px}}
@media(min-width:901px){#s-social .so-chat{min-height:min(460px,calc(100vh - var(--top-h,68px) - 40px))}}
/* ---- Tres pestañas y píldora que copia (11-10-2026) ---- */
#s-social .so-lay[hidden]{display:none}
#s-social .so-col-lista > .pane.on{display:flex;flex-direction:column;gap:20px}
#s-social .so-chip{cursor:pointer;font:inherit;font-size:12px;font-weight:700;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s var(--so-ease)}
@media(hover:hover) and (pointer:fine){#s-social .so-chip:hover{background:#e0e7ff;border-color:#c7d2fe}}
#s-social .so-chip:active{transform:scale(.97)}
#s-social .so-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#s-social .so-chip.copiado{background:#f0fdf4;border-color:#bbf7d0;color:var(--ok-ink)}
#s-social .so-tab-n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
#s-social .so-tab-n[hidden]{display:none}
@media(max-width:900px){
  #s-social .so-col-lista > .pane.on{display:contents}
  #s-social .so-amigos-card,#s-social .so-grupos-card{order:1}
  #s-social .so-chat{order:2}
  #s-social #soCasosCard{order:3}
}
@media(max-width:560px){#s-social .so-tabs .tab{padding:8px 10px;gap:6px}}
@media(pointer:coarse){#s-social .so-chip{min-height:44px;padding-left:14px;padding-right:14px}}
#s-social .so-lay.so-lay-aulas{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
@media(max-width:900px){#s-social .so-lay.so-lay-aulas{grid-template-columns:minmax(0,1fr)}}
/* En una columna, nada puede imponer su ancho mínimo (el nombre largo de un grupo en la cabecera del chat desbordaba). */
#s-social .so-lay > *,#s-social .so-card,#s-social .so-chat,#s-social .so-col-lista > .pane{min-width:0;max-width:100%}

/* ---------- Cuenta atrás de entrada a un caso (12-10-2026, ver cuentaAtras) ----------
   Velo oscuro y desenfocado; no captura el ratón (la consulta ya está debajo, lista). Cada número entra
   grande y se posa (ease-out fuerte), aguanta y se va; «¡A consulta!» entra y se queda, con monedas. */
.ca-velo{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;pointer-events:none;
  background:rgba(2,6,23,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  animation:caVeloIn 180ms cubic-bezier(.23,1,.32,1) both}
.ca-velo.sale{animation:caVeloOut 240ms cubic-bezier(.23,1,.32,1) both}
.ca-caja{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px;text-align:center;color:#fff}
.ca-simi{animation:caSalto 650ms cubic-bezier(.33,0,.2,1) infinite}
.ca-simi .mascota{display:block}
.ca-txt{margin:4px 0 0;font-size:15px;font-weight:600;letter-spacing:.02em;color:rgba(226,232,240,.9)}
.ca-num{height:136px;display:grid;place-items:center;font-size:120px;line-height:1;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#fff}
.ca-num.ca-cifra{animation:caCifra 650ms cubic-bezier(.23,1,.32,1) both}
.ca-num.ca-fin{font-size:clamp(40px,9vw,64px);letter-spacing:-.02em;
  color:#e0e7ff;animation:caFin 420ms cubic-bezier(.23,1,.32,1) both}
.ca-chispas{position:absolute;left:50%;top:calc(100% - 68px);width:0;height:0}
.ca-chispas img{position:absolute;left:-11px;top:-11px;width:22px;height:22px;opacity:0;
  animation:caMoneda 700ms cubic-bezier(.23,1,.32,1) both}
@keyframes caVeloIn{from{opacity:0}to{opacity:1}}
@keyframes caVeloOut{to{opacity:0}}
@keyframes caSalto{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px)}}
@keyframes caCifra{0%{opacity:0;transform:scale(1.7)}30%{opacity:1;transform:scale(1)}78%{opacity:1;transform:scale(.97)}100%{opacity:0;transform:scale(.88)}}
@keyframes caFin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes caMoneda{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(200deg)}}
@media (max-width:600px){ .ca-num{font-size:96px;height:110px} }
@media (prefers-reduced-motion:reduce){ .ca-velo{display:none} }

/* ---------- «¿En qué se basa tu evolución?» y el historial plegable (12-10-2026) ---------- */
.evo-info{margin-top:14px}
.evo-info>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  padding:10px 16px;border-radius:12px;background:#f8fafc;border:1px solid rgba(226,232,240,.6);color:#334155;
  font-size:14px;font-weight:500;transition:background-color 160ms ease}
.evo-info>summary::-webkit-details-marker{display:none}
.evo-info>summary:hover{background:#f1f5f9}
.evo-info>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.evo-info>summary svg{flex:none;color:#64748b;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.evo-info[open]>summary svg{transform:rotate(180deg)}
.evo-info-l{list-style:none;margin:10px 0 0;padding:0 4px;display:grid;gap:12px}
.evo-info-l li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.evo-info-ico{font-size:16px;line-height:1.35}
.evo-info-l b{font-size:13.5px;color:var(--ink)}
.evo-info-c{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.evo-info-l p{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}

.pf-hist .pf-hist-cab{margin:0}
.pf-hist-tg{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;border-radius:10px}
.pf-hist-tg:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pf-hist-tit{font-size:inherit;font-weight:700;color:var(--ink);min-width:0}
.pf-hist-n{font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.pf-hist-acc{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-d);
  padding:6px 10px;border-radius:999px;transition:background-color 160ms ease}
.pf-hist-tg:hover .pf-hist-acc{background:var(--accent-soft)}
.pf-hist-acc svg{transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.pf-hist-tg[aria-expanded="true"] .pf-hist-acc svg{transform:rotate(180deg)}
.pf-hist-previa{margin:8px 0 2px;font-size:13px}
#pfHistCuerpo{margin-top:12px}
.pf-hist.plegado .pf-filters{display:none}
.pf-hist-mas{margin-top:12px}
@media (max-width:600px){ .pf-hist-acc-t{display:none} .pf-hist-n{display:block;margin-top:2px} }
@media (prefers-reduced-motion:reduce){ .evo-info>summary svg,.pf-hist-acc svg{transition:none} }

/* ---------- Perfil: pestañas segmentadas bajo el título y vistas solas (12-10-2026, ver pfPestana) ---------- */
.pf-seg{display:inline-flex;align-items:center;gap:6px;padding:4px;margin:0 0 16px;border-radius:16px;background:rgba(241,245,249,.8);max-width:100%}
.pf-seg-t{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:0;border-radius:12px;background:transparent;
  cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:#475569;white-space:nowrap;
  transition:background-color 200ms cubic-bezier(.23,1,.32,1),color 160ms ease,box-shadow 200ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
.pf-seg-t[hidden]{display:none}
.pf-seg-t:hover{color:#0f172a}
.pf-seg-t:active{transform:scale(.97)}
.pf-seg-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pf-seg-t.on{background:#fff;color:#0f172a;font-weight:600;box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.06)}
/* En una vista sola, ni la ficha ni las cifras encima: la vista empieza bajo las pestañas. */
#s-profile.pf-en-vista .pf-top,#s-profile.pf-en-vista .pf-kpis-card{display:none}
#s-profile .pf-vista > .card:first-child{margin-top:0}
#pfPanResumen > :first-child{margin-top:16px}
@media(max-width:600px){
  .pf-seg{display:flex;width:100%}
  .pf-seg-t{flex:1 1 0;min-width:0;padding:8px 6px;font-size:13px;line-height:1.2;white-space:normal;text-align:center;flex-direction:column;gap:2px}
}
@media(pointer:coarse){ .pf-seg-t{min-height:44px} }
@media(prefers-reduced-motion:reduce){ .pf-seg-t{transition:none} .pf-seg-t:active{transform:none} }

/* ---------- Amigos y aulas: acentos sobrios (12-10-2026) ----------
   Blanco y pizarra; el color solo identifica (icono de la pestaña activa, insignias, estado de cada amigo). */
#s-social .so-tabs .tab.on{color:#4338ca;font-weight:600;border-radius:10px;box-shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04)}
/* Amigos: el estado, en un aro fino (sin resplandor) */
#s-social .so-simi.st-on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #22c55e}
#s-social .so-simi.st-busy{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #f59e0b}
#s-social .so-simi.st-off{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #e2e8f0;filter:saturate(.75)}
/* Chat vacío: Simi con su bocadillo */
#s-social .so-chat-vacio{background:#fbfcfe}
#s-social .so-vacio-simi{position:relative;display:block;width:96px;height:96px;margin:0 auto 6px}
#s-social .so-vacio-simi img,#s-social .so-vacio-simi .mascota,#s-social .so-vacio-simi .simi-propio{width:96px!important;height:96px!important;display:block}
#s-social .so-vacio-simi .simi-propio svg{width:100%;height:100%;display:block}
#s-social .so-vacio-bocadillo{position:absolute;top:2px;right:-30px;display:flex;gap:4px;align-items:center;padding:7px 10px;border-radius:14px 14px 14px 4px;
  background:#fff;border:1px solid #e2e8f0;box-shadow:var(--shadow)}
#s-social .so-vacio-bocadillo i{width:6px;height:6px;border-radius:999px;background:#94a3b8;animation:soPuntos 1.2s ease-in-out infinite}
#s-social .so-vacio-bocadillo i:nth-child(2){animation-delay:.15s}
#s-social .so-vacio-bocadillo i:nth-child(3){animation-delay:.3s}
@keyframes soPuntos{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* Aulas: los dos modos, con su color en el icono y la insignia; el elegido, fondo suave y borde */
#s-social .so-mode-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:2px;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:500;line-height:1.6;border:1px solid}
#s-social .so-mode-badge.coop{background:#eef2ff;color:#4338ca;border-color:#e0e7ff}
#s-social .so-mode-badge.versus{background:#fffbeb;color:#b45309;border-color:#fde68a}
#s-social .so-mode[data-mode="coop"] .so-mode-i{background:#eef2ff;color:#4f46e5;border:1px solid #e0e7ff}
#s-social .so-mode[data-mode="versus"] .so-mode-i{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
#s-social .so-mode[data-mode="coop"].on{background:#f8f9ff;border-color:#a5b4fc;box-shadow:none}
#s-social .so-mode[data-mode="versus"].on{background:#fffdf5;border-color:#fcd34d;box-shadow:none}
#s-social .so-mode.on .so-mode-i{color:inherit}
#s-social .so-mode[data-mode="coop"].on .so-mode-i{color:#4f46e5;background:#eef2ff}
#s-social .so-mode[data-mode="versus"].on .so-mode-i{color:#d97706;background:#fffbeb}
#s-social .so-mode[data-mode="coop"].on::after{background-color:#4f46e5}
#s-social .so-mode[data-mode="versus"].on::after{background-color:#d97706}
@media(hover:hover) and (pointer:fine){#s-social .so-mode[data-mode="versus"]:not(.on):hover{border-color:#fde68a}}
#s-social .so-lobby{border-color:#c7d2fe;box-shadow:var(--shadow)}
/* Grupos: el emblema del grupo sobre un fondo suave con su color */
#s-social .gr-ico{background:color-mix(in srgb,var(--gr,#f59e0b) 10%,#fff);border:1px solid color-mix(in srgb,var(--gr,#f59e0b) 22%,#fff);box-shadow:none;color:inherit}
#s-social .gr-admin{background:#fffbeb;color:#b45309;border:1px solid #fde68a;border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:500}
#s-social .gr-simis .so-av.gr-av{border:0;box-shadow:0 0 0 2px #fff,0 1px 2px rgba(15,23,42,.08)}
@media(prefers-reduced-motion:reduce){ #s-social .so-vacio-bocadillo i{animation:none;opacity:.7} }
/* ---------- Simi: el probador (12-10-2026, ver renderSimi / simiCompra) ----------
   Lo que no es tuyo se prueba en el Simi de la izquierda: el círculo se marca, sale «✨ Probando en Simi»
   y, justo debajo, el nombre, la rareza y «🛒 Comprar por N Pts» (o «Saldo insuficiente»). */
.simi-circulo{position:relative}
.simi-circulo.probando{outline:2px solid #a5b4fc;outline-offset:4px}   /* outline: el destello legendario anima el box-shadow */
.simi-probando-tag{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:4px 12px;border-radius:999px;background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe;font-size:12.5px;font-weight:600;
  box-shadow:var(--shadow);animation:simiTagIn 220ms cubic-bezier(.23,1,.32,1) both}
@keyframes simiTagIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.simi-prueba{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px;padding:12px;border-radius:14px;
  background:#fff;border:1px solid #e2e8f0;animation:simiPruebaIn 220ms cubic-bezier(.23,1,.32,1) both}
@keyframes simiPruebaIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.simi-prueba-info{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.simi-prueba-n{font-size:15px;color:var(--ink)}
.simi-comprar{width:100%;justify-content:center;gap:6px;font-weight:600}
.simi-comprar:disabled{opacity:.55;cursor:not-allowed}
.simi-prueba-falta{margin:0;font-size:13px;color:#991b1b}
.simi-prueba-x{all:unset;cursor:pointer;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:4px 6px;border-radius:6px}
.simi-prueba-x:hover{color:var(--ink)}
.simi-prueba-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.simi-carta.probando{border-color:#a5b4fc;border-style:solid;box-shadow:none;background:#f8f9ff}
@media(max-width:900px) and (min-width:561px){.simi-prueba{align-items:flex-start}.simi-prueba-info{justify-content:flex-start}}
@media(pointer:coarse){.simi-comprar{min-height:44px}.simi-prueba-x{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){.simi-probando-tag,.simi-prueba{animation:none}}

/* El icono de la pestaña activa, en el color de su sección (12-10-2026; #s-social[data-pest]). */
#s-social[data-pest="amigos"] .so-tabs .tab.on .so-i{color:#4f46e5}
#s-social[data-pest="aulas"] .so-tabs .tab.on .so-i{color:#059669}
#s-social[data-pest="grupos"] .so-tabs .tab.on .so-i{color:#d97706}

/* ---------- «Configura tu caso» como lanzador (12-10-2026, ver cfgPinta) ----------
   Etiqueta índigo arriba con las preferencias en píldora; fila clínica (dificultad en semáforo,
   enfermedad, actitud) y fila de demografía (sexo y edad en píldoras); acciones a la derecha. */
.cfg-cab{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:16px}
.card h3.cfg-eyebrow{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4f46e5}
.cfg-eyebrow-i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;letter-spacing:0;color:#4f46e5;background:#eef2ff;border:1px solid #e0e7ff}
.cfg-eyebrow-i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfg-pref{display:inline-block;line-height:1.45;max-width:100%;min-height:30px;padding:5px 12px;border-radius:14px;font-size:13px;color:#334155;
  background:#fff;border:1px solid var(--line-solid)}
.cfg-pref a{font-weight:600;color:var(--accent-d)}
.cfg-fila{display:grid;gap:14px 18px;align-items:start}
.cfg-fila-clin{grid-template-columns:auto minmax(180px,1fr) auto}
/* Orden visual: dificultad, enfermedad, actitud; con poco ancho, dificultad y actitud arriba y la enfermedad debajo. */
.cfg-fila-demo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 0;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-solid)}
.cfg-sep{align-self:flex-start;width:1px;height:26px;margin:30px 16px 0;background:var(--line-solid)}   /* a la altura de las píldoras, aunque salga el aviso debajo de una */
/* Sin sitio para las tres en una fila, se apilan sin separadores (no quedan colgando al final de una línea). */
@media(max-width:1180px){.cfg-fila-demo{gap:14px 24px}.cfg-sep{display:none}}
.cfg-campo{min-width:0}
.cfg-l{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.cfg-fuente{display:none}
.cfg-seg{display:inline-flex;gap:3px;padding:4px;border-radius:12px;background:#f1f5f9;max-width:100%;flex-wrap:nowrap}
.cfg-seg button,.cfg-pills button{font:inherit;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background-color 150ms ease-in-out,color 150ms ease-in-out,box-shadow 150ms ease-in-out,border-color 150ms ease-in-out,transform 100ms ease-out}
.cfg-seg button{padding:8px 11px;border-radius:9px;background:transparent;color:#475569;font-size:14px;font-weight:500}
.cfg-seg button:hover{color:var(--ink)}
.cfg-seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.06)}
.cfg-seg button.on{box-shadow:0 0 0 1px rgba(99,102,241,.4),0 1px 3px rgba(15,23,42,.06)}   /* acento por defecto (actitud, «Aleatoria») */
.cfg-dot{width:9px;height:9px;border-radius:999px;flex:none}
.cfg-dot.d-b{background:#22c55e}.cfg-dot.d-i{background:#eab308}.cfg-dot.d-a{background:#ef4444}
.cfg-dif button.on[data-v="basica"]{box-shadow:0 0 0 1px rgba(34,197,94,.45),0 1px 3px rgba(15,23,42,.06)}
.cfg-dif button.on[data-v="intermedia"]{box-shadow:0 0 0 1px rgba(234,179,8,.5),0 1px 3px rgba(15,23,42,.06)}
.cfg-dif button.on[data-v="avanzada"]{box-shadow:0 0 0 1px rgba(239,68,68,.45),0 1px 3px rgba(15,23,42,.06)}
.cfg-pills{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;border-radius:16px;background:rgba(241,245,249,.7);border:1px solid rgba(226,232,240,.5)}
.cfg-pills button{padding:6px 10px;border-radius:12px;background:transparent;color:#475569;font-size:13.5px;font-weight:500;border:1px solid transparent}
.cfg-pills button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.cfg-pills button.on{background:#fff;border-color:#c7d2fe;color:#3730a3;font-weight:600;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.cfg-pills button.bloq{color:#94a3b8;cursor:not-allowed}
.cfg-pills button.bloq:hover{background:transparent;color:#94a3b8}
.cfg-tipo-aviso{margin:6px 2px 0;max-width:340px;font-size:12.5px;line-height:1.4;color:#92400e}
.cfg-seg button:active,.cfg-pills button:active{transform:scale(.97)}
.cfg-seg button:focus-visible,.cfg-pills button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.cfg-select{width:100%;transition:border-color 160ms ease,box-shadow 160ms ease}
.cfg-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.cfg-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px}
.cfg-sorpresa{background:#fff;border:1px solid var(--line-solid);color:#334155;font-weight:500}
.cfg-sorpresa:hover{background:#f8fafc}
.cfg-generar{font-weight:600;color:#fff;border:0;background:#4f46e5;box-shadow:var(--shadow);transition:background-color 150ms ease-in-out,transform 100ms ease-out}
.cfg-generar:hover{background:#4338ca}
.cfg-generar:active{transform:scale(.97)}
@media(max-width:1180px){ .cfg-fila-clin{grid-template-columns:auto auto;justify-content:start;column-gap:24px} .cfg-fila-clin .cfg-campo:nth-child(2){grid-column:1/-1;grid-row:2} }
@media(max-width:880px){ .cfg-fila-clin{grid-template-columns:1fr} .cfg-fila-clin .cfg-campo:nth-child(2){grid-row:auto} }
@media(max-width:640px){
  .cfg-fila-clin{grid-template-columns:1fr} .cfg-fila-demo{flex-direction:column;align-items:stretch;gap:14px} .cfg-sep{display:none}
  .cfg-pills{display:flex}
  .cfg-seg{display:grid;grid-template-columns:1fr 1fr} .cfg-seg button{min-width:0;justify-content:center;gap:6px;padding:9px 6px;font-size:13.5px;white-space:normal;line-height:1.15;text-align:center}
  .cfg-actions .btn{flex:1 1 100%}
  .cfg-actions .cfg-generar{order:-1}
}
@media(pointer:coarse){ .cfg-seg button,.cfg-pills button{min-height:44px} }
@media(prefers-reduced-motion:reduce){ .cfg-seg button,.cfg-pills button,.cfg-generar{transition:none} .cfg-seg button:active,.cfg-pills button:active,.cfg-generar:active{transform:none} }

/* ---------- Dirección visual sobria (12-10-2026) ----------
   Software clínico/educativo: blanco y pizarra fría, índigo como único color de marca, estados en tonos
   suaves con borde fino, sombras difusas, sin resplandores ni degradados de color. Iconos de trazo (SVG). */
/* Iconos de sección: trazo de una sola familia, en un cuadrado suave con borde fino */
.h-ico{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:10px;border-radius:9px;vertical-align:middle;flex:none;
  letter-spacing:0;text-transform:none;color:#4f46e5;background:#eef2ff;border:1px solid #e0e7ff}
.h-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h-ico.ok{color:#047857;background:#ecfdf5;border-color:#d1fae5}
.h-ico.ambar{color:#b45309;background:#fffbeb;border-color:#fef3c7}
.h-ico.vio{color:#6d28d9;background:#f5f3ff;border-color:#ede9fe}
.h-ico.gris{color:#475569;background:#f8fafc;border-color:#e2e8f0}
.res-cab b,.fin-top h3,#caseCard .card-cab h3{display:inline-flex;align-items:center;white-space:nowrap}
/* Insignias: limpias, legibles */
.tag{background:#eef2ff;color:#4338ca;border:1px solid rgba(199,210,254,.8);font-weight:500;font-size:12px;letter-spacing:-.005em;padding:2px 10px}
/* Notas: verde, ámbar y rojo refinados, con borde fino */
.score-pill{font-weight:600;border-radius:8px}
.score-pill.s-good{background:#ecfdf5;color:#047857;box-shadow:inset 0 0 0 1px rgba(167,243,208,.8)}
.score-pill.s-mid{background:#fffbeb;color:#b45309;box-shadow:inset 0 0 0 1px rgba(253,230,138,.8)}
.score-pill.s-low{background:#fef2f2;color:#b91c1c;box-shadow:inset 0 0 0 1px rgba(254,202,202,.9)}
/* Puntos: ámbar suave, sin sombra de color */
.pts-pill{color:#92400e;background:#fffbeb;border-color:#fde68a;box-shadow:none}
.pts-pill b{color:#78350f}
/* Lo que se toca: el borde se oscurece un poco al pasar (sin elevar ni teñir) */
.res-item,.fin-grupo,.pf-logros-widget,#s-social .gr-card,.simi-carta{transition:border-color 150ms ease-in-out,box-shadow 150ms ease-in-out}
@media(hover:hover) and (pointer:fine){
  .res-item:hover,.fin-grupo:hover,.pf-logros-widget:hover,#s-social .gr-card:hover,.simi-carta:hover{border-color:#cbd5e1;box-shadow:var(--shadow-md);transform:none}
}
/* Sin elevaciones al pasar por la app (la portada, que vende, se queda como está) */
#progressCard .logro:hover,#progressCard .logro:focus-visible,.pista-btn:hover:not(:disabled),.ar-btn:hover:not(:disabled):not(.girando){transform:none}
.pista-btn:hover:not(:disabled),.ar-btn:hover:not(:disabled):not(.girando){box-shadow:var(--shadow-md)}
/* La cabecera del panel, blanca como las demás tarjetas */
.dash-hola{background:var(--panel);border-color:rgba(226,232,240,.7)}
/* Pendientes: blanca como las demás; el ámbar queda en su icono y su contador. «Reanudar», en el color de marca. */
.resume{background:var(--panel);border-color:rgba(226,232,240,.7)}
.res-cab{border-bottom-color:#eef2f7}
.btn.ambar{background:#4f46e5;border-color:#4f46e5}
.btn.ambar:hover{background:#4338ca;filter:none}
.fin-top{flex-wrap:wrap;row-gap:4px}
.pf-seg-t svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Simi del perfil, más grande (12-10-2026): 128 px (antes 88) con 22 px hasta el nombre; fondo pizarra suave.
   La columna crece hasta 380 px en pantallas anchas para que nombre y puntos sigan en una fila. */
@media(min-width:1200px){ .pf-top{grid-template-columns:minmax(320px,380px) minmax(0,1fr)} }
.pf-simi-fig{gap:22px}
.pf-simi-circulo{width:128px;height:128px;background:radial-gradient(circle at 50% 38%,#fff 0%,#f8fafc 55%,#eef2f7 100%);border:1px solid #e2e8f0;
  box-shadow:inset 0 -6px 16px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.04)}
.pf-simi-circulo img,.pf-simi-circulo svg{width:112px;height:112px}
button.pf-simi-circulo{transition:transform 150ms ease-out,box-shadow 150ms ease-in-out}
button.pf-simi-circulo:hover{transform:scale(1.02);box-shadow:0 0 0 3px #e0e7ff,0 1px 3px rgba(15,23,42,.04)}
.pf-simi-fig.editable:hover .pf-simi-circulo{box-shadow:0 0 0 3px #e0e7ff}
@media(max-width:560px){ .pf-simi-fig{gap:16px} .pf-simi-circulo{width:112px;height:112px} .pf-simi-circulo img,.pf-simi-circulo svg{width:98px;height:98px} }
/* Pestañas del perfil con su emoji y su acento (12-10-2026): la activa, blanca y en oscuro, con el emoji en un
   círculo teñido de su color (índigo, esmeralda, violeta); las inactivas, gris legible y el emoji a todo color. */
.pf-seg-t{color:#475569}
.pf-seg-t:hover{color:#0f172a;background:rgba(241,245,249,.5)}
.pf-seg-t.on{color:#020617;font-weight:600;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05)}
.pf-seg-e{display:inline-grid;place-items:center;width:24px;height:24px;margin:-2px -2px -2px -4px;border-radius:999px;font-size:14px;line-height:1;
  transition:background-color 150ms ease-in-out}
.pf-seg-t.on[data-pftab="resumen"] .pf-seg-e{background:#eef2ff}
.pf-seg-t.on[data-pftab="paso"] .pf-seg-e{background:#ecfdf5}
.pf-seg-t.on[data-pftab="avatar"] .pf-seg-e{background:#f5f3ff}
@media(max-width:600px){ .pf-seg-e{margin:0} }
@media(prefers-reduced-motion:reduce){ .pf-seg-e{transition:none} }

  /* ============================================================================
     PORTADA (13-10-2026): presentación comercial y educativa, en el mismo mundo que la app
     (slate-50 de fondo, tarjetas blancas con borde fino, índigo de acento). Esmeralda para lo
     que es progreso y ámbar para lo que es juego. Capturas reales en marcos de navegador y de
     portátil. Un solo momento de movimiento: el portátil y la tarjeta del radar al entrar.
     ========================================================================== */
  .lp{--lp-ind:#4f46e5;--lp-ind-d:#4338ca;--lp-ind-50:#eef2ff;--lp-esm:#059669;--lp-esm-50:#ecfdf5;--lp-amb:#b45309;--lp-amb-50:#fffbeb;
    --lp-sombra-xl:0 1px 2px rgba(15,23,42,.04),0 12px 24px -10px rgba(15,23,42,.10),0 40px 80px -28px rgba(30,41,59,.28);
    --lp-ease:cubic-bezier(.23,1,.32,1)}
  .lp ::selection{background:#c7d2fe;color:#1e1b4b}
  .lp a:focus-visible,.lp button:focus-visible,.lp summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
  .lp-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* Botones de la portada: los de la app, con icono y algo más de cuerpo. */
  .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;
    font-size:15.5px;font-weight:600;text-decoration:none;border-radius:12px}
  .btn.ghost.lp-btn{padding:11px 19px;color:#1e293b}
  .lp-ctas{display:flex;flex-wrap:wrap;gap:12px}

  /* --- Hero: el texto a la izquierda y el simulador, funcionando, a la derecha. --- */
  .lp-hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:center;
    padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px);text-align:left}
  .lp-hero h1{margin:0;font-size:clamp(34px,3.7vw,50px);line-height:1.06;letter-spacing:-.035em;font-weight:800;color:var(--ink);text-wrap:balance;max-width:15em}
  .lp-sub{margin:20px 0 30px;font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.6;color:#475569;max-width:34em}
  .lp-entrar{margin:14px 0 0;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;column-gap:6px}
  .lp-link{background:none;border:0;padding:0;min-height:44px;font:inherit;font-weight:600;color:var(--lp-ind-d);cursor:pointer;
    text-decoration:underline;text-decoration-color:rgba(67,56,202,.3);text-underline-offset:4px;transition:text-decoration-color .15s ease}
  .lp-link:hover{text-decoration-color:currentColor}
  /* La prueba, debajo: a quién va dirigido y lo que hay dentro, con cifras de verdad. */
  .lp-prueba{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line-solid)}
  .lp-chip{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:6px 13px 6px 10px;border-radius:999px;
    background:var(--panel);border:1px solid var(--line-solid);font-size:13px;font-weight:600;color:#334155;box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .lp-chip .lp-i{width:16px;height:16px;color:var(--lp-esm)}
  .lp-cifras{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;color:var(--muted)}
  .lp-cifras li{display:flex;align-items:baseline;gap:6px}
  .lp-cifras b{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
  .lp-cifra-i{align-self:center;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--lp-esm-50);color:var(--lp-esm)}
  .lp-cifra-i .lp-i{width:13px;height:13px;stroke-width:3}

  /* El portátil: pantalla con el navegador dentro y la base debajo. */
  .lp-hero-vis{position:relative;padding:0 0 26px}
  .lp-portatil .lp-ventana{border:9px solid #0f172a;border-bottom-width:12px;border-radius:20px 20px 6px 6px;
    box-shadow:var(--lp-sombra-xl)}
  .lp-portatil-base{position:relative;height:14px;margin:0 -6%;border-radius:2px 2px 16px 16px;
    background:linear-gradient(180deg,#e2e8f0,#cbd5e1 70%,#94a3b8);box-shadow:0 18px 30px -14px rgba(15,23,42,.35)}
  .lp-portatil-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);
    border-radius:0 0 8px 8px;background:#cbd5e1;box-shadow:inset 0 1px 2px rgba(15,23,42,.18)}
  .lp-flota{position:absolute;left:-40px;bottom:-6px;width:min(236px,38%);margin:0;border-radius:14px;overflow:hidden;
    background:#fff;border:1px solid var(--line-solid);box-shadow:0 2px 4px rgba(15,23,42,.06),0 22px 44px -16px rgba(15,23,42,.30)}
  .lp-flota img{display:block;width:100%;height:auto}
  @keyframes lpSube{from{transform:translateY(22px)}}
  @keyframes lpLlega{from{transform:translate(-14px,18px) scale(.96)}}
  @keyframes lpAparece{from{opacity:0}}
  .lp-portatil{animation:lpSube .9s var(--lp-ease) both,lpAparece .5s ease-out both}
  .lp-flota{animation:lpLlega .9s var(--lp-ease) .28s both,lpAparece .45s ease-out .28s both}

  /* Con vídeo (o imagen) de fondo desde el back office: el hero sale a todo el ancho, el clip
     desenfocado debajo de un velo oscuro (más denso del lado del texto) y la letra en blanco. */
  body:has(#s-landing.on .lp-hero.con-fondo){overflow-x:clip}   /* 100vw incluye la barra de desplazamiento */
  .lp-hero.con-fondo{position:relative;isolation:isolate;width:100vw;margin:calc(-1 * var(--wrap-top)) 0 0 calc(50% - 50vw);
    min-height:calc(100dvh - var(--top-h));padding:clamp(40px,6vw,88px) max(20px,calc(50vw - 550px));background:#0b1a33;overflow:hidden}
  .lp-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
  .lp-fondo-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;
    transform:scale(1.12);filter:blur(10px) brightness(.72) saturate(1.1)}
  .lp-fondo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(11,18,38,.9) 0%,rgba(11,18,38,.74) 48%,rgba(11,18,38,.5) 100%)}
  .lp-hero.con-fondo h1{color:#fff}
  .lp-hero.con-fondo .lp-sub{color:#dbe3ef}
  .lp-hero.con-fondo .lp-entrar{color:#cbd5e1}
  .lp-hero.con-fondo .lp-link{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
  .lp-hero.con-fondo .btn.ghost.lp-btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
  .lp-hero.con-fondo .btn.ghost.lp-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}
  .lp-hero.con-fondo .lp-btn:not(.ghost){box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
  .lp-hero.con-fondo .lp-prueba{border-top-color:rgba(255,255,255,.16)}
  .lp-hero.con-fondo .lp-chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#f1f5f9;box-shadow:none}
  .lp-hero.con-fondo .lp-chip .lp-i{color:#6ee7b7}
  .lp-hero.con-fondo .lp-cifras{color:#cbd5e1}
  .lp-hero.con-fondo .lp-cifras b{color:#fff}
  .lp-hero.con-fondo .lp-cifra-i{background:rgba(110,231,183,.16);color:#6ee7b7}
  .lp-hero.con-fondo .lp-portatil-base{box-shadow:0 22px 40px -12px rgba(0,0,0,.6)}
  .lp-hero.con-fondo .lp-portatil .lp-ventana{border-color:#020617;box-shadow:0 40px 80px -24px rgba(0,0,0,.6)}
  @media(max-width:1000px){ .lp-hero.con-fondo{min-height:0} }
  @media(max-width:700px){ .lp-fondo-media{transform:scale(1.2);filter:blur(8px) brightness(.72) saturate(1.1)} }

  /* Marco de navegador (el de las capturas). */
  .lp-ventana{background:#fff;border:1px solid rgba(226,232,240,.9);border-radius:16px;overflow:hidden;box-shadow:var(--lp-sombra-xl)}
  .lp-ventana-barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f8fafc;border-bottom:1px solid var(--line-solid)}
  .lp-ventana-barra span{width:9px;height:9px;border-radius:50%;background:#e2e8f0}
  .lp-ventana-barra i{flex:0 1 auto;margin:0 auto;padding:2px 14px;border-radius:7px;background:#fff;border:1px solid var(--line-solid);
    font-style:normal;font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-14px)}
  .lp-ventana-pantalla img,.lp-cap{display:block;width:100%;height:auto}

  /* --- Secciones --- */
  .lp-sec{padding:clamp(64px,8vw,104px) 0 0}
  .lp-cab{max-width:700px;margin:0 auto clamp(32px,4vw,48px);text-align:center}
  .lp-cab h2,.lp-uni h2,.lp-cierre h2{margin:0;font-size:clamp(26px,3.1vw,38px);line-height:1.15;letter-spacing:-.03em;font-weight:800;color:var(--ink);text-wrap:balance}
  .lp-cab p{margin:14px auto 0;font-size:17px;line-height:1.6;color:var(--muted);max-width:36em}
  .lp h3{margin:0;font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:700;color:var(--ink)}
  .lp-ico{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px}
  .lp-ico .lp-i{width:20px;height:20px}
  .lp-ico--azul{background:var(--lp-ind-50);color:var(--lp-ind)}
  .lp-ico--verde{background:var(--lp-esm-50);color:var(--lp-esm)}
  .lp-ico--ambar{background:var(--lp-amb-50);color:var(--lp-amb)}

  /* Cómo funciona: tres pasos con su trozo de pantalla real. */
  .lp-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .lp-paso{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;
    padding:12px 12px 24px;box-shadow:var(--shadow)}
  .lp-paso-img{position:relative;height:200px;border-radius:12px;overflow:hidden;background:#f1f5f9;border:1px solid var(--line-solid)}
  /* Cada paso enseña su trozo de pantalla real, recortado a lo que cuenta, apoyado en la esquina. */
  .lp-paso-img picture{position:absolute;left:18px;top:18px;right:-1px;bottom:-1px}
  .lp-paso-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;
    border-radius:10px 0 0 0;border:1px solid var(--line-solid);border-right:0;border-bottom:0;box-shadow:-6px -2px 24px -12px rgba(15,23,42,.22)}
  .lp-paso-img--inf img{object-position:left 12%}
  .lp-paso-n{display:grid;place-items:center;width:30px;height:30px;margin:20px 12px 12px;border-radius:9px;
    background:var(--lp-ind);color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
  .lp-paso h3,.lp-paso p{margin-left:12px;margin-right:12px}
  .lp-paso p{margin-top:8px;margin-bottom:0;font-size:15px;line-height:1.6;color:var(--muted)}

  /* Pilares: foto y texto, en 2 × 2. */
  .lp-pilares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .lp-pilar{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
  .lp-pilar-foto{aspect-ratio:16/8;overflow:hidden;background:#e2e8f0}
  .lp-pilar-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--lp-ease)}
  .lp-pilar:hover .lp-pilar-foto img{transform:scale(1.03)}
  .lp-pilar-txt{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:24px 26px 28px}
  .lp-pilar-txt p{grid-column:1 / -1;margin:14px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}

  /* Muestra del producto: pestañas y la captura en su ventana. */
  .lp-tabs{display:flex;width:max-content;max-width:100%;margin:0 auto 28px;padding:4px;gap:4px;border-radius:13px;background:#eef2f7;border:1px solid var(--line-solid);overflow-x:auto}
  .lp-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;border:0;border-radius:10px;background:none;
    font-size:14.5px;font-weight:600;color:#475569;white-space:nowrap;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
  .lp-tab .lp-i{width:17px;height:17px}
  .lp-tab:hover{color:var(--ink)}
  .lp-tab.on{background:#fff;color:var(--lp-ind-d);box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 6px rgba(15,23,42,.05)}
  .lp-paneles{max-width:1000px;margin:0 auto}
  .lp-panel[hidden]{display:none}
  .lp-panel.entra{animation:lpPanel .32s var(--lp-ease) both}
  @keyframes lpPanel{from{opacity:0;transform:translateY(8px)}}
  .lp-panel-pie{margin:22px auto 0;max-width:40em;text-align:center;font-size:15px;line-height:1.6;color:var(--muted)}

  /* Personalización académica (13-10-2026): la única tarjeta oscura de la página, para que se lea
     como EL argumento para universidades. Dentro, el panel de la facultad en blanco (un ejemplo
     dibujado en HTML, con interruptores que responden) y los tres pilares debajo. */
  .lp-pers{position:relative;overflow:hidden;color:#fff;border-radius:28px;padding:clamp(28px,5vw,56px);
    background:linear-gradient(135deg,#312e81 0%,#0f172a 52%,#1e1b4b 100%);box-shadow:0 30px 60px -30px rgba(30,27,75,.55)}
  .lp-pers::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(55% 60% at 100% 0%,rgba(99,102,241,.28),transparent 65%),radial-gradient(45% 55% at 0% 100%,rgba(79,70,229,.18),transparent 60%)}
  .lp-pers > *{position:relative}
  .lp-pers-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:center}
  .lp-pers-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 13px 6px 10px;border-radius:999px;
    background:rgba(129,140,248,.14);border:1px solid rgba(165,180,252,.3);color:#c7d2fe;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .lp-pers-badge .lp-i{width:16px;height:16px;color:#a5b4fc}
  .lp-pers h2{margin:0;color:#fff;font-size:clamp(26px,3.2vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:800;text-wrap:balance;max-width:16em}
  .lp-pers-sub{margin:16px 0 0;font-size:17.5px;line-height:1.6;color:#cbd5e1;max-width:32em}
  .lp-pers-pilares{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:clamp(28px,3vw,36px) 0 0;border-top:1px solid rgba(148,163,184,.2);
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
  .lp-pers-pilares h3{margin:16px 0 8px;color:#fff;font-size:17.5px}
  .lp-pers-pilares p{margin:0;font-size:15px;line-height:1.65;color:#cbd5e1}
  .lp-pers-ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(99,102,241,.2);border:1px solid rgba(165,180,252,.25);color:#c7d2fe}
  .lp-pers-ico .lp-i{width:21px;height:21px}
  /* El panel de la facultad (ejemplo). */
  .lp-prof{margin:0;background:#fff;color:var(--ink);border-radius:18px;padding:6px 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
  .lp-prof-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 12px;border-bottom:1px solid var(--line-solid)}
  .lp-prof-t{font-size:14px;font-weight:700}
  .lp-prof-ej{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;background:#f1f5f9;border-radius:999px;padding:3px 9px}
  .lp-prof-fila{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 18px;border-bottom:1px solid #f1f5f9}
  .lp-prof-fila:last-child{border-bottom:0}
  .lp-prof-fila--col{flex-direction:column;align-items:stretch}
  .lp-prof-l{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#334155}
  .lp-prof-l .lp-i{width:16px;height:16px;color:var(--lp-ind)}
  .lp-prof-v{font-size:13.5px;font-weight:700;color:var(--lp-ind-d);background:var(--lp-ind-50);border-radius:8px;padding:4px 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .lp-prof-casos{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
  .lp-prof-casos li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--line-solid);border-radius:10px;background:#f8fafc}
  .lp-prof-casos b{display:block;font-size:13.5px;color:var(--ink)}
  .lp-prof-casos i{display:block;font-style:normal;font-size:12px;color:#64748b}
  /* Interruptor y segmentado del ejemplo: 44 px de zona de pulsación aunque se vean pequeños. */
  .lp-sw{flex:none;display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:-10px -6px;padding:0;border:0;background:none;cursor:pointer}
  .lp-sw-pista{position:relative;width:38px;height:22px;border-radius:999px;background:#cbd5e1;transition:background-color .2s ease}
  .lp-sw-bola{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.3);transition:transform .25s var(--lp-ease)}
  .lp-sw[aria-checked=true] .lp-sw-pista{background:var(--lp-esm)}
  .lp-sw[aria-checked=true] .lp-sw-bola{transform:translateX(16px)}
  .lp-seg{display:inline-flex;padding:3px;gap:2px;border-radius:9px;background:#f1f5f9;border:1px solid var(--line-solid)}
  .lp-seg button{min-height:32px;padding:4px 10px;border:0;border-radius:7px;background:none;font-size:12.5px;font-weight:600;color:#64748b;white-space:nowrap;cursor:pointer}
  .lp-seg button[aria-checked=true]{background:#fff;color:var(--lp-ind-d);box-shadow:0 1px 2px rgba(15,23,42,.1)}
  @media(max-width:1000px){ .lp-pers-cab{grid-template-columns:minmax(0,1fr)} .lp-prof{max-width:560px} }
  @media(max-width:760px){ .lp-pers-pilares{grid-template-columns:minmax(0,1fr)} }
  .lp-prof-l{min-width:0}
  @media(max-width:560px){ .lp-pers{border-radius:22px} .lp-prof-fila--seg{flex-wrap:wrap} .lp-prof-cab,.lp-prof-fila{padding-left:14px;padding-right:14px} }
  @media(prefers-reduced-motion:reduce){ .lp-sw-pista,.lp-sw-bola{transition:none} }

  /* Universidades y docentes. */
  .lp-uni{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:clamp(28px,4vw,56px);align-items:stretch;
    padding:clamp(28px,4.5vw,56px);background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-md)}
  .lp-uni h2{max-width:17em}
  .lp-uni .lp-btn{padding-left:17px;padding-right:17px}
  .lp-uni-lista{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:22px}
  .lp-uni-lista li{display:flex;gap:16px;align-items:flex-start}
  .lp-uni-lista h3{font-size:16.5px}
  .lp-uni-lista p{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
  .lp-uni-foto{border-radius:16px;overflow:hidden;min-height:280px;background:#e2e8f0}
  .lp-uni-foto picture,.lp-uni-foto img{display:block;width:100%;height:100%}
  .lp-uni-foto img{object-fit:cover;object-position:60% 50%}

  /* Preguntas frecuentes: acordeón nativo (<details>), accesible con teclado sin JavaScript. */
  .lp-faq{max-width:800px;margin:0 auto;border-top:1px solid var(--line-solid)}
  .lp-faq-it{border-bottom:1px solid var(--line-solid)}
  .lp-faq-it summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:20px 4px;cursor:pointer;
    list-style:none;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
  .lp-faq-it summary::-webkit-details-marker{display:none}
  .lp-faq-it summary:hover{color:var(--lp-ind-d)}
  .lp-faq-chev{width:20px;height:20px;color:#94a3b8;transition:transform .25s var(--lp-ease)}
  .lp-faq-it[open] .lp-faq-chev{transform:rotate(180deg);color:var(--lp-ind)}
  /* La respuesta, a todo el ancho de la fila (13-10-2026): mismo margen que la pregunta a los dos lados. */
  .lp-faq-it p,.lp-faq-it ul{margin:0;padding:0 4px 22px;font-size:15.5px;line-height:1.7;color:#475569;max-width:none}
  .lp-faq-it p:has(+ ul){padding-bottom:10px}
  .lp-faq-it ul{list-style:none;display:grid;gap:8px}
  .lp-faq-it li{position:relative;padding-left:20px}
  .lp-faq-it li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--lp-ind)}

  /* Cierre: la única superficie de color de la página. */
  .lp-sec--cierre{padding-bottom:0}
  .lp-cierre{position:relative;overflow:hidden;text-align:center;padding:clamp(44px,6vw,72px) clamp(22px,4vw,48px);border-radius:24px;
    background:linear-gradient(135deg,#4338ca 0%,#4f46e5 45%,#2563eb 100%);box-shadow:0 24px 48px -24px rgba(67,56,202,.55)}
  .lp-cierre::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 80% at 85% 0%,rgba(255,255,255,.16),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(15,23,42,.18),transparent 60%)}
  .lp-cierre > *{position:relative}
  .lp-cierre h2{color:#fff;max-width:18em;margin:0 auto}
  .lp-cierre p{margin:14px auto 30px;font-size:18px;color:#e0e7ff}
  .lp-cierre .lp-ctas{justify-content:center}
  .btn.lp-btn--claro{background:#fff;color:var(--lp-ind-d);box-shadow:0 8px 20px -8px rgba(15,23,42,.4)}
  .btn.lp-btn--claro:hover{background:#eef2ff}
  .btn.lp-btn--borde{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:none}
  .btn.lp-btn--borde:hover{background:rgba(255,255,255,.1);border-color:#fff}

  @media(max-width:1000px){
    .lp-hero{grid-template-columns:minmax(0,1fr)}
    .lp-hero-vis{max-width:680px;width:100%;margin:0 auto;padding-left:24px}
    .lp-flota{left:0}
    .lp-pasos{grid-template-columns:minmax(0,1fr);max-width:580px;margin:0 auto}
    .lp-paso-img{height:220px}
    .lp-uni{grid-template-columns:minmax(0,1fr)}
    .lp-uni-foto{min-height:0;aspect-ratio:16/9;order:-1}
  }
  @media(max-width:760px){ .lp-pilares{grid-template-columns:minmax(0,1fr)} }
  @media(max-width:560px){
    .lp-hero{padding-top:12px}
    .lp-hero h1{font-size:clamp(30px,8.6vw,36px)}
    .lp-sub{margin:16px 0 24px}
    .lp-hero .lp-ctas .lp-btn{flex:1 1 100%}
    .lp-cierre .lp-btn{flex:1 1 100%;padding-left:14px;padding-right:14px}
    .lp-hero-vis{padding-left:0;padding-bottom:40px}
    .lp-portatil .lp-ventana{border-width:6px;border-bottom-width:8px;border-radius:14px 14px 5px 5px}
    .lp-ventana-barra{height:24px}
    .lp-ventana-barra i{font-size:10px}
    .lp-flota{width:40%;left:-4px;bottom:4px}
    .lp-portatil-base{margin:0 -3%;height:10px}
    .lp-cifras{gap:10px 18px}
    .lp-paso-img{height:180px}
    .lp-pilar-txt{padding:20px 20px 24px}
    /* Las tres pestañas, siempre a la vista: en columnas iguales, con el icono encima. */
    .lp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;overflow:visible}
    .lp-tab{flex-direction:column;justify-content:center;gap:4px;padding:8px 6px;font-size:12.5px;line-height:1.25;white-space:normal;text-align:center}
    .lp-uni .lp-btn{flex:1 1 100%}
    .lp-faq-it summary{font-size:16px;padding:18px 2px}
  }
  @media(prefers-reduced-motion:reduce){
    .lp-portatil,.lp-flota,.lp-panel.entra{animation:none}
    .lp-pilar-foto img,.lp-faq-chev{transition:none}
    .lp-pilar:hover .lp-pilar-foto img{transform:none}
  }

  /* Descargo clínico y educativo al pie de la corrección (EU AI Act, art. 50; 13-10-2026). */
  .ia-descargo{margin:14px 0 12px;padding:10px 12px;border-radius:10px;background:#f8fafc;border:1px solid var(--line-solid);font-size:12.5px;line-height:1.55;color:#475569}
  /* Pie: datos e IA (13-10-2026). */
  .ns-foot-datos{flex-basis:100%;order:4;margin:6px 0 0;font-size:11.5px;line-height:1.6;color:#64748b}
  .ns-foot-datos a{color:var(--accent-d);font-weight:600}
  /* En el móvil el descargo del chat va en una línea (el entero se comía un tercio del chat); el texto
     completo sigue al pie de la corrección y en el pie de página (13-10-2026). */
  .chat-ia-corto{display:none}
  @media(max-width:560px){ .chat-ia{padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-ia .chat-ia-txt{display:none} .chat-ia .chat-ia-corto{display:inline} }
  /* Banner de cookies en el móvil: más bajo (texto más corto de alto y los tres botones en una fila). */
  @media(max-width:620px){
    .ck-banner{left:10px;right:10px;bottom:10px;padding:12px 14px;gap:10px}
    .ck-txt p{font-size:12.5px;line-height:1.5}
    .ck-acts{flex-wrap:nowrap}
    .ck-acts .btn{flex:1 1 0;min-width:0;padding:9px 6px;font-size:13px;white-space:normal;line-height:1.2}
  }
  /* Con un modal abierto, el aviso de cookies pasa por debajo: tapaba «practicar sin cuenta» y la
     mitad del formulario de piloto en el móvil (13-10-2026). */
  body:has(.overlay.on) .ck-banner{z-index:60}