:root{
  /* tokens semanticos (Commit 1 - migracion de tema) */
  --bg:#F7F7F8; --surface:#fff; --surface-2:#F1F2F4;
  --text:#14181F; --text-muted:#5B6472; --line:#E5E7EB;
  --brand-red:#C62828; --brand-red-dark:#8E1B1B; --brand-red-tx:var(--brand-red); --brand-red-light:#DE675E; --brand-red-mid:#FCD7D5;
  --brand-red-rgb:198,40,40;
  --hero-bg:linear-gradient(135deg,var(--navy),var(--navy-light));
  --hero-text:#fff;
  /* alias de compatibilidad: nombres viejos usados en estilos inline de JS/index.html (fuera del alcance de main.css en Commit 1) */
  --red:var(--brand-red);--red-dark:var(--brand-red-dark);--red-light:var(--brand-red-light);--red-mid:var(--brand-red-mid);
  --cream:var(--bg);--light:var(--surface-2);--border:var(--line);
  /* colores base y de estado (sin rol de tema; se conservan por nombre) */
  --navy:#0F1F3D;--navy-light:#1a3160;--navy-mid:#2D4A7A;
  --gray:#5B6472;--gray-light:#9CA3AF;
  --green:#15803D;--green-light:#F0FDF4;--green-mid:#BBF7D0;
  --gold:#B45309;--gold-light:#FFFBEB;--gold-mid:#FDE68A;--gold-rgb:180,83,9;
  --blue:#1D4ED8;--blue-light:#EFF6FF;--blue-mid:#BFDBFE;
  --purple:#7C3AED;--purple-light:#F5F3FF;
  --shadow:0 4px 24px rgba(0,0,0,.09);
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --radius:16px;--radius-sm:10px;--radius-xs:8px;
  --page:#E9EAED;
  /* movimiento y foco (rediseño Home 2026-09-30) */
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);--focus:#2563EB;
}
:root[data-theme="dark"]{
  --page:#050506;
  /* paleta oscura (Commit 3 - migracion de tema), contraste verificado WCAG */
  --bg:#0B0B0D; --surface:#151518; --surface-2:#1F1F23;
  --text:#F2F2F4; --text-muted:#A1A7B3; --line:rgba(255,255,255,.10);
  --hero-bg:#1F1F23; --hero-text:#F2F2F4;
  /* colores base — override para contraste en oscuro */
  --navy:#1A3057; --navy-light:#2A4575; --navy-mid:#3E609A;
  --gray:#A1A7B3; --gray-light:#7A8190;
  --gold:#D9B25F; --gold-light:#2A2010; --gold-rgb:217,178,95;
  --green:#4ADE80; --green-light:#0A2A15;
  --blue:#5B9DFF; --blue-light:#0F2247; --blue-mid:#1E3A6B;
  --purple-light:#241A3D;
  --brand-red-light:#2A0F0D;
  --brand-red-tx:#FF6B5E; /* el escarlata sobre fondo oscuro da 3.2:1; el texto rojo pequeño se aclara, los rellenos no */
  --shadow:0 4px 24px rgba(0,0,0,.35);
  --shadow-sm:0 2px 10px rgba(0,0,0,.25);
  --focus:#7AB0FF;
}
/* Login, verificación y hub usan sus propios tokens --lg-* (ver «Inicio de sesión…» al final del archivo). */
:root[data-theme="dark"] .drawer-item.active .dt{color:var(--text);}
:root[data-theme="dark"] .drawer-item.active{border-left-color:var(--text);}
/* Corrección en vivo de Abel: NO negro puro — "se pueden seguir usando los
   colores de RAFA... de noche letras blancas y fondo azul marino, de día
   fondo blanco y letras azules, invertir colores, y el rojo de la marca
   para los detalles". Eso es exactamente lo que --bg/--text YA hacen en
   toda la app (body{background:var(--bg);color:var(--text)}, línea 61) —
   oscuro: --bg navy #0B1730 + --text casi blanco #F2F5FB; claro: --bg
   crema #FAF8F5 + --text navy #0F1F3D. El área de mensajes no necesita
   ningún fondo propio — se quitó el negro puro que se había puesto aquí
   por error, ahora simplemente hereda el fondo normal de la app. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px;}
/* Abel 2026-10-23 (Poco X7 Pro, modo noche): sin color-scheme, Chrome trataba la página como
   clara y pintaba blanca la barra de botones de Android (con íconos blancos encima). */
:root{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}
html{height:100%;height:-webkit-fill-available;background:var(--bg);}
body{font-family:'Hanken Grotesk',sans-serif;background:var(--bg);color:var(--text);max-width:430px;margin:0 auto;position:relative;height:100%;height:-webkit-fill-available;overflow:hidden;}

/* ── SCREENS ── */
.screen{display:none;height:100vh;height:100dvh;flex-direction:column;animation:fadeIn .2s ease;overflow:hidden;}
.screen.active{display:flex;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ── TOPBAR ── */
.topbar{background:var(--surface);padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);flex-shrink:0;z-index:50;position:relative;}
.topbar-brand{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--brand-red-tx);letter-spacing:1px;}
/* Switch día/noche (Home): píldora de 2 opciones de 44px con indicador deslizante */
.theme-switch{position:relative;display:flex;flex-shrink:0;height:44px;border-radius:999px;background:var(--surface-2);}
.theme-switch::before{content:"";position:absolute;top:2px;left:2px;width:40px;height:40px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform 220ms var(--ease-out);}
.theme-switch[data-active="dark"]::before{transform:translateX(44px);}
:root[data-theme="dark"] .theme-switch::before{background:#33333A;}
.ts-btn{position:relative;z-index:1;width:44px;height:44px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--text-muted);cursor:pointer;transition:color 150ms ease,transform 160ms var(--ease-out);}
.ts-btn svg{width:18px;height:18px;}
.ts-btn[aria-pressed="true"]{color:var(--text);}
.ts-btn:active{transform:scale(.95);}
@media (prefers-reduced-motion:reduce){.theme-switch::before{transition:none;}}
.topbar-title{font-size:15px;font-weight:700;color:var(--text);flex:1;text-align:center;}
.topbar-sub{font-size:10px;color:var(--text-muted);margin-top:1px;text-align:center;}
/* Título+subtítulo centrados de verdad en TODO el ancho del topbar, sin
   importar que haya 2 botones a la izquierda (regresar+inicio) y solo 1 a
   la derecha (···) — con flex:1 normal el bloque de texto solo se centra
   en el espacio que le queda ENTRE los botones, que no es el centro real
   de la pantalla cuando los 2 lados tienen distinto número de botones
   (bug real reportado en vivo por Abel en Chat con RAFA/grupal). Se saca
   del flujo flex y se centra por posición absoluta sobre todo el topbar;
   pointer-events:none para que no tape el clic de los botones si algún
   texto largo llegara a superponerse. */
.topbar-title-block{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;padding:0 100px;box-sizing:border-box;}
/* Red de seguridad: al estar centrado por posición absoluta, este bloque
   ya no se acorta solo por estar "entre botones" (como pasaba con flex:1)
   — un texto dinámico largo (ej. group-count-label) podía terminar
   dibujándose visualmente detrás de los botones de Inicio/Buscar/···.
   Se trunca con "..." en vez de desbordarse. */
.topbar-title-block .topbar-title,.topbar-title-block .topbar-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ib{width:44px;height:44px;border-radius:var(--radius-xs);border:none;background:var(--surface-2);cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;color:var(--text);}
.ib:active{background:var(--line);}
.ib.red{background:var(--brand-red);color:#fff;}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-red);position:absolute;top:5px;right:5px;border:2px solid #fff;}

/* ── BOTTOM NAV ── */
.bnav{background:var(--surface);border-top:1px solid var(--line);display:flex;padding:6px 4px 0;padding-bottom:max(8px,env(safe-area-inset-bottom));flex-shrink:0;position:relative;z-index:50;}
.bn{flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:2px 2px;cursor:pointer;border:none;background:none;color:var(--text-muted);font:inherit;transition:color 180ms var(--ease-out),transform 160ms var(--ease-out);-webkit-tap-highlight-color:transparent;}
.bn:active{transform:scale(.96);}
.bn .ni{display:grid;place-items:center;width:56px;height:30px;border-radius:15px;background:transparent;transition:background-color 200ms var(--ease-out);}
.bn .ni svg{width:22px;height:22px;stroke-width:2;}
.bn.active{color:var(--text);}
.bn.active .ni{background:var(--surface-2);}
.bn .ni-circle{position:relative;width:auto;height:auto;background:transparent;}
.bn .nl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.bn.active .nl{font-weight:700;}
.bn-primary{margin-top:-6px;}
.bn-primary .ni,.bn-primary.active .ni{width:auto;height:auto;border-radius:50%;background:transparent;}
.bn-primary .ni-circle{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border-radius:50%;padding:4px;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:box-shadow 200ms var(--ease-out);}
.bn-primary .ni-circle svg{width:32px;height:32px;}
.bn-primary.active .ni-circle{box-shadow:0 0 0 2px var(--text),0 2px 6px rgba(0,0,0,.15);}
.bn-primary .nl{font-weight:700;}
.bn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:12px;}
@media (prefers-reduced-motion:reduce){.bn,.bn .ni,.bn-primary .ni-circle{transition:none;}}

/* ── DRAWER MENU ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:none;}
.drawer-overlay.active{display:block;}
.drawer{position:fixed;left:0;top:0;bottom:0;width:280px;background:var(--surface);z-index:301;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y;}
.drawer.active{transform:translateX(0);}
/* <body> ya tiene overflow:hidden permanente (el scroll real ocurre en el
   .scroll de cada pantalla) — bloquear ESE contenedor mientras el drawer
   está abierto, para que el fondo no se pueda scrollear detrás del panel. */
body.drawer-open .scroll{overflow:hidden!important;}
.drawer-header{background:var(--hero-bg);padding:48px 20px 24px;}
.drawer-brand{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:var(--hero-text);letter-spacing:1px;}
.drawer-sub{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;color:rgba(255,255,255,.7);margin-top:4px;}
.drawer-user{margin-top:16px;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.drawer-user:focus-visible{outline:2px solid var(--hero-text);outline-offset:4px;border-radius:12px;}
.drawer-avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--hero-text);}
.drawer-name{font-size:14px;font-weight:600;color:var(--hero-text);}
.drawer-role{font-size:11px;color:rgba(255,255,255,.72);}
.drawer-body{flex:1;overflow-y:auto;padding:12px 0;}
.drawer-item{display:flex;align-items:center;gap:12px;padding:13px 20px;cursor:pointer;transition:background .15s;border:none;border-left:3px solid transparent;background:none;width:100%;text-align:left;color:inherit;font:inherit;}
.drawer-item:active{background:var(--surface-2);}
/* Antes: fondo rojo teñido + texto rojo — el texto se perdía por bajo
   contraste (color de texto casi igual al del fondo). Ahora: fondo neutro
   + borde navy a la izquierda (mismo patrón que las tarjetas de médicos y
   alertas) + texto navy en negritas — señal clara sin depender de un tinte
   de color que compita consigo mismo. */
.drawer-item.active{background:var(--surface-2);border-left-color:var(--navy);}
.drawer-item .di{font-size:20px;width:28px;text-align:center;}
.drawer-item .dt{font-size:14px;font-weight:500;color:var(--text);}
.drawer-item.active .dt{color:var(--navy);font-weight:700;font-size:15px;}
.drawer-item .dbadge{margin-left:auto;background:var(--brand-red);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;}
.drawer-divider{height:1px;background:var(--line);margin:8px 0;}
.drawer-item.danger .dt{color:var(--danger-tx);}

/* ── PROFILE HUB — Netflix style ── */
/* overflow-y:auto + justify-content:safe center: con 3+ perfiles (grid + ficha
   "Agregar") el contenido puede superar el alto de pantalla — sin esto el botón
   "Entrar" queda inalcanzable (.screen fuerza overflow:hidden por defecto). La
   barra de scroll se oculta visualmente (scrollbar-width/::-webkit-scrollbar)
   para no ensuciar la pantalla, pero el gesto de deslizar sigue funcionando. */
#s-profile-hub{background:var(--hero-bg);flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;padding:32px 20px;min-height:100vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
#s-profile-hub::-webkit-scrollbar{display:none;}
/* «Cargando expediente…» al entrar desde el hub: sigue el tema (blanco de día, negro de noche, o el del
   sistema en automático) en vez del azul marino anterior (pedido de Abel, 2026-10-02). */
#profile-loading-overlay{display:none;position:fixed;inset:0;background:rgba(247,247,248,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:9000;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
:root[data-theme="dark"] #profile-loading-overlay{background:rgba(11,11,13,.92);}
#profile-loading-name{color:var(--text);font-size:15px;font-weight:600;}
#profile-loading-overlay .spinner{width:44px;height:44px;border-width:4px;}
.reg-photo-area{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px;}
.reg-photo-circle{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;overflow:hidden;transition:background-color .2s;}
.reg-photo-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.reg-photo-label{font-size:12px;color:rgba(255,255,255,.4);}
/* ── LOGIN ── */
/* FIX: justify-content:center puro, con overflow-y:auto, deja inalcanzable por
   scroll la parte de ARRIBA del formulario cuando es más alto que la pantalla
   (bug real: el mensaje de error de registro quedaba invisible sin forma de
   llegar a él). "safe center" centra cuando cabe, y cae a alineación normal
   (todo visible/alcanzable por scroll) cuando el contenido desborda. */
#s-login,#s-verify{background:var(--hero-bg);align-items:center;justify-content:flex-start;padding:32px 24px;overflow-y:auto;}
#s-login .login-logo{margin-top:auto;}
#s-login .login-card{margin-bottom:auto;}
.login-logo{text-align:center;margin-bottom:32px;}
.login-rafa{font-family:'Playfair Display',serif;font-size:56px;font-weight:700;color:var(--hero-text);letter-spacing:2px;}
.login-hebrew{font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:rgba(255,255,255,.3);margin-top:4px;}
.login-verse{font-size:11px;color:rgba(255,255,255,.25);letter-spacing:1px;margin-top:8px;}
.login-card{background:rgba(255,255,255,.07);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;width:100%;}
.tabs{display:flex;background:rgba(255,255,255,.08);border-radius:12px;padding:3px;margin-bottom:20px;}
.tabs button{flex:1;padding:10px;border:none;background:none;color:rgba(255,255,255,.45);font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;border-radius:10px;cursor:pointer;transition:background-color .2s,color .2s;}
.tabs button.active{background:var(--brand-red);color:#fff;}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;}
.role-card{border:2px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;background:rgba(255,255,255,.04);}
.role-card.sel{border-color:var(--brand-red);background:rgba(var(--brand-red-rgb),.18);}
.role-card .ri{font-size:26px;margin-bottom:5px;}
.role-card .rn{font-size:12px;font-weight:700;color:var(--hero-text);}
.role-card .rd{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px;}

/* ── INPUTS ── */
.fg{margin-bottom:13px;}
.fg label{display:block;font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);background:rgba(255,255,255,.07);color:var(--hero-text);font-family:'Hanken Grotesk',sans-serif;font-size:14px;outline:none;transition:border-color .2s;}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.25);}
.fg input:focus,.fg select:focus{border-color:var(--brand-red);}
.fg.light label{color:var(--text-muted);}
.fg.light input,.fg.light select,.fg.light textarea{border:1.5px solid var(--line);background:var(--surface);color:var(--text);}
.fg.light input::placeholder{color:#9CA3AF;}
.fg.light input:focus,.fg.light select:focus,.fg.light textarea:focus{border-color:var(--brand-red);}

/* Mostrar/ocultar contraseña — el glifo del emoji mide ~18-20px, muy por
   debajo del hit-target de 44px. right ajustado (-2px) para compensar el
   padding y que el glifo quede visualmente en el mismo lugar de siempre. */
.pwd-eye-btn{position:absolute;right:-2px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:12px;display:flex;align-items:center;justify-content:center;transition:transform 120ms ease-out;}
.pwd-eye-btn:active{transform:translateY(-50%) scale(.93);}

/* Botones de acción de Alertas (marcar seguimiento, ver detalle, eliminar,
   enviar comentario) — usan style= inline sin .btn/.ib, así que no tenían
   NINGÚN feedback de presión en acciones que cambian el estado clínico de
   una alerta. */
.alert-action-btn{transition:transform 120ms ease-out;}
.alert-action-btn:active{transform:scale(.96);}

/* ── BUTTONS ── */
.btn{width:100%;padding:14px;border:none;border-radius:14px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-red{background:var(--brand-red);color:#fff;box-shadow:0 8px 22px rgba(var(--brand-red-rgb),.38);transition:transform .08s ease,background .14s ease,box-shadow .14s ease;}
.btn-red:active{transform:scale(.97);background:var(--brand-red-dark);box-shadow:0 2px 8px rgba(var(--brand-red-rgb),.25);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-pulse{animation:medPulse 2.2s ease-out infinite;}
@keyframes medPulse{0%{box-shadow:0 8px 22px rgba(var(--brand-red-rgb),.38),0 0 0 0 rgba(var(--brand-red-rgb),.45)}70%,100%{box-shadow:0 8px 22px rgba(var(--brand-red-rgb),.38),0 0 0 14px rgba(var(--brand-red-rgb),0)}}
@media (prefers-reduced-motion:reduce){.btn-pulse{animation:none}}
.btn-light{background:transparent;color:var(--text-muted);border:1px solid var(--line);transition:transform .08s ease,background .14s ease,box-shadow .14s ease;}
.btn-light:active{transform:scale(.98);}
.med-chev{width:100%;border:none;background:transparent;cursor:pointer;padding:3px 0 6px;display:flex;align-items:center;justify-content:center;color:var(--gray);opacity:.55;transition:opacity .15s ease;}
.med-chev:hover,.med-chev:active{opacity:1;}
.med-chev svg{width:16px;height:16px;}
.med-acciones{max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease;}
.med-acciones.open{max-height:120px;opacity:1;}
.med-acciones-row{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--line);}
.med-accion{flex:1 1 calc(50% - 6px);padding:10px;font-size:12px;}
.med-accion-danger{color:var(--brand-red-tx);border-color:var(--brand-red);}
.dir-mode-btn{flex:1;}
.dir-mode-btn.active{background:var(--navy);color:#fff;}
.dir-city-pill{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 8px 7px 12px;}
.dir-city-pill-label{flex:1;text-align:left;}
.dir-city-pill .dir-fav-star{flex-shrink:0;}
.dir-fav-star{background:none;border:none;cursor:pointer;font-size:15px;padding:6px;min-width:32px;min-height:32px;transition:transform 120ms ease-out;}
.dir-fav-star:active{transform:scale(.85);}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);}
.btn-green{background:var(--green);color:#fff;}
.btn-sm{padding:9px 16px;font-size:12px;width:auto;border-radius:10px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.mt8{margin-top:8px;}
.mt12{margin-top:12px;}
.mt16{margin-top:16px;}

/* ── CARDS ── */
.card{background:var(--surface);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.card-sm{background:var(--surface);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);transition:transform 120ms ease-out;}
.card-sm:active{transform:scale(.97);}
.slabel{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;margin-top:20px;}

/* ── HOME HERO ── */
.hero{background:var(--hero-bg);padding:20px 16px 28px;flex-shrink:0;}
.hero-greeting{color:rgba(255,255,255,.5);font-size:12px;}
.hero-name{color:var(--hero-text);font-size:20px;font-weight:700;margin-bottom:6px;}
.hero-role{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;color:rgba(255,255,255,.8);}

/* ── PATIENT CARD (rediseño 2026-10: tarjeta neutra, chips con íconos, selector de paciente) ── */
/* Badge detail modal */
.badge-detail-item{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);}
.badge-detail-item:last-child{border-bottom:none;}
.badge-detail-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0;}
.badge-detail-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
.badge-detail-value{font-size:14px;color:var(--text);font-weight:500;line-height:1.5;}

/* ── ALERT CARDS ── */
.alert-card{border-radius:14px;padding:12px 14px;display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;cursor:pointer;}
.ac-red{background:var(--brand-red-light);border:1px solid var(--brand-red-mid);}
.ac-gold{background:var(--gold-light);border:1px solid var(--gold-mid);}
.ac-blue{background:var(--blue-light);border:1px solid var(--blue-mid);}
.ac-green{background:var(--green-light);border:1px solid var(--green-mid);}
.alert-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.alert-title{font-size:13px;font-weight:700;}
.alert-desc{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.5;}

/* ── QUICK GRID ── */
/* Acciones rápidas: ver «Acciones rápidas (rediseño 2026-10)» al final del archivo */

/* ── SEMÁFORO DE SALUD (Home) ── */
/* minmax(0,1fr) + min-width:0: sin ellos el min-content de las fichas puede
   desbordar el grid en pantallas angostas (reportado en móvil real). */

/* ── UPLOAD AREA ── */
.upload-area{border:2px dashed var(--line);border-radius:18px;padding:28px 18px;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;background:var(--surface);}
.upload-area:active,.upload-area.drag{border-color:var(--brand-red);background:var(--brand-red-light);}
.upload-icon{font-size:40px;margin-bottom:10px;}
.upload-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;}
.upload-sub{font-size:12px;color:var(--text-muted);}

/* ── DOCUMENTOS — rediseño Fase 1 (2026-08-30), lista/buscador/filtro ──
   Ver plans/design-migracion-documentos-rediseno.md. Portado del prototipo
   de Claude Design — usa los mismos tokens de :root que ya tiene main.css
   (el mockup se construyó calcando este mismo archivo), por eso no hace
   falta traducir colores. Todo con prefijo doc- para no chocar con clases
   de otras pantallas. */
.doc-tagline{font-family:'Hanken Grotesk',sans-serif;font-style:normal;font-weight:700;font-size:12px;color:var(--navy);margin:0 0 16px;}
/* Pedido en vivo por Abel: no quería el azul vívido (--blue, "azul
   rey") — pidió el mismo azul de la ficha "Paciente activo" de Home
   (var(--navy), el fondo del .pcard) con la tipografía de esa misma
   ficha (Hanken Grotesk, no la itálica Playfair Display de antes) en
   un tamaño un poco mayor a la etiqueta "Paciente activo" (.pcard-label,
   9px). El font-weight:700 (en vez del peso normal de antes) es
   deliberado: los intentos anteriores con este mismo azul (var(--navy),
   var(--navy-mid)) se veían grisáceos en itálica delgada — un trazo más
   grueso satura mejor el color percibido al mismo tono. En modo oscuro
   sigue forzado blanco puro. */
:root[data-theme="dark"] .doc-tagline{color:#fff;}
.doc-cta{position:relative;overflow:hidden;cursor:pointer;border-radius:20px;background:linear-gradient(135deg,var(--brand-red),var(--brand-red-dark));color:#fff;padding:20px;display:flex;align-items:center;gap:14px;box-shadow:0 10px 24px rgba(var(--brand-red-rgb),.32);}
.doc-cta-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;}
.doc-cta-body{flex:1;min-width:0;}
.doc-cta-title{font-size:15px;font-weight:800;margin-bottom:2px;}
.doc-cta-sub{font-size:11.5px;opacity:.85;line-height:1.4;}

.doc-search-row{position:relative;margin-bottom:8px;}
.doc-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);width:15px;height:15px;pointer-events:none;}
.doc-search{width:100%;padding:11px 12px 11px 36px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:500;}
.doc-search:focus{outline:none;border-color:var(--brand-red);}
.doc-filter-row{display:flex;gap:7px;overflow-x:auto;margin-bottom:4px;-ms-overflow-style:none;scrollbar-width:none;}
.doc-filter-row::-webkit-scrollbar{display:none;}
.doc-filter-chip{flex-shrink:0;padding:6px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--text-muted);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
.doc-filter-chip.active{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}
.doc-val-filter{display:flex;gap:7px;margin:2px 0 12px;}
.doc-val-filter-chip{padding:6px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--text-muted);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
.doc-val-filter-chip.active{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}
.doc-section-head{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;}
.doc-section-head .slabel{margin:0;}
.doc-count{font-size:11px;font-weight:700;color:var(--danger-tx);background:var(--danger-bg);padding:2px 8px;border-radius:999px;}
.doc-sort-select{margin-left:auto;padding:6px 8px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;color:var(--text-muted);}

.doc-grid{display:grid;grid-template-columns:1fr;gap:9px;}
.doc-card{position:relative;background:var(--surface);border-radius:14px;padding:13px 15px 13px 17px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;cursor:pointer;border-left:4px solid var(--accent,var(--brand-red));transition:transform .12s ease,box-shadow .12s ease;max-width:100%;overflow:hidden;}
.doc-card:active{transform:scale(.99);}
.doc-card-icon{width:38px;height:38px;border-radius:50%;background:var(--accent-soft,var(--surface-2));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.doc-card-body{flex:1;min-width:0;}
.doc-card-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-card-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.doc-card-summary{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-card-chevron{color:var(--line);flex-shrink:0;}
.doc-empty-msg{text-align:center;padding:32px 18px;color:var(--text-muted);font-size:12.5px;line-height:1.5;}
.doc-empty-state{text-align:center;padding:38px 22px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-sm);}
.doc-empty-icon{font-size:32px;margin-bottom:10px;}
.doc-empty-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:5px;}
.doc-empty-sub{font-size:12px;color:var(--text-muted);line-height:1.5;max-width:300px;margin:0 auto;}
@media (min-width:760px){.doc-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}}

/* ── DOCUMENTOS — hub de detalle (Fase 1, punto 6) ── */
.det-back-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.det-back-title{font-size:15px;font-weight:800;color:var(--text);}
.doc-header{display:flex;gap:13px;align-items:center;background:var(--surface);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm);margin-bottom:16px;border-left:4px solid var(--accent,var(--brand-red));}
.doc-header-icon{width:44px;height:44px;border-radius:50%;background:var(--accent-soft,var(--surface-2));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.doc-header-name{font-size:14px;font-weight:800;color:var(--text);line-height:1.3;}
.doc-header-meta{font-size:11px;color:var(--text-muted);margin-top:3px;}
.det-hint{font-size:12px;color:var(--text-muted);margin-bottom:14px;line-height:1.5;}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.det-tile{background:var(--surface);border-radius:16px;padding:16px 12px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:flex-start;gap:7px;cursor:pointer;transition:transform .12s ease;}
.det-tile:active{transform:scale(.97);}
.det-tile-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--tint);}
.det-tile-label{font-size:12.5px;font-weight:800;color:var(--text);}
.det-tile-count{font-size:10.5px;font-weight:700;color:var(--tint-tx);}
.delete-doc-btn{width:100%;padding:13px;border:1.5px solid var(--danger-bd);border-radius:12px;background:transparent;color:var(--danger-tx);font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;cursor:pointer;}
.doc-type-hint{font-size:11px;color:var(--text-muted);font-style:italic;margin-top:5px;line-height:1.4;}
.doc-patient-mismatch-warn{background:var(--warn-bg);border:1.5px solid var(--warn-bd);color:var(--warn-tx);border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600;line-height:1.4;margin-bottom:12px;}
.doc-meta-table{background:var(--surface-2);border-radius:14px;padding:4px 14px;margin-bottom:14px;}
.doc-meta-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
.doc-meta-row:last-child{border-bottom:none;}
.doc-meta-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;}
.doc-meta-val{font-size:12.5px;font-weight:600;color:var(--text);text-align:right;}
.doc-meta-val.doc-meta-empty{font-weight:500;font-style:italic;color:var(--text-muted);}
.doc-lab-list{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.doc-lab-group-header{font-size:10px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.6px;margin-top:10px;padding-left:2px;}
.doc-lab-group-header:first-child{margin-top:0;}
.doc-lab-row{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;}
.doc-lab-body{flex:1;min-width:0;}
.doc-lab-title{font-size:13px;font-weight:700;color:var(--text);}
.doc-lab-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
.doc-lab-trend{font-size:11px;font-weight:700;margin-top:4px;}
.doc-lab-check{width:20px;height:20px;border-radius:6px;flex-shrink:0;margin-top:1px;cursor:pointer;accent-color:var(--brand-red);}
.doc-lab-truncated{font-size:11px;color:var(--gold);background:var(--gold-light);border-radius:10px;padding:8px 12px;margin-top:8px;line-height:1.4;}
.doc-gen-more{width:100%;padding:12px;border-radius:12px;border:1.5px dashed var(--line);background:transparent;color:var(--brand-red-tx);font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;cursor:pointer;margin-top:4px;}

/* ── ANALYSIS TABS ── */
.atabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;}
.atab{padding:7px 14px;border-radius:20px;border:2px solid var(--line);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;background:var(--surface);color:var(--text-muted);transition:border-color .2s,background-color .2s,color .2s;flex-shrink:0;}
.atab.active{border-color:var(--brand-red);background:var(--brand-red);color:#fff;}

/* ── SPECIALIST BADGE ── */
.spec-badge{background:linear-gradient(135deg,var(--navy),var(--navy-light));border-radius:12px;padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.spec-icon{font-size:22px;}
.spec-title{font-size:12px;font-weight:700;color:#fff;}
.spec-sub{font-size:10px;color:rgba(255,255,255,.5);}
.tech-section{background:var(--navy);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.tech-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.tech-text{font-size:13px;color:#E2E8F0;line-height:1.7;white-space:pre-wrap;}
.simple-section{background:var(--blue-light);border:1px solid var(--blue-mid);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.simple-label{font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.simple-text{font-size:13px;color:var(--text);line-height:1.7;white-space:pre-wrap;}

/* ── ALERT DETECTION MODAL CONTENT ── */
.detect-item{background:var(--surface);border-radius:12px;padding:12px;margin-bottom:8px;border-left:4px solid var(--gold);}
.detect-item.new{border-color:var(--green);}
.detect-item.changed{border-color:var(--brand-red);}
.detect-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.detect-label.new{color:var(--green);}
.detect-label.changed{color:var(--brand-red-tx);}
.detect-text{font-size:13px;color:var(--text);}

/* ── TABLE WITH COLORS ── */
.lab-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;}
.lab-table th{background:var(--navy);color:#fff;padding:8px 10px;text-align:left;font-size:11px;font-weight:600;}
.lab-table td{padding:8px 10px;border-bottom:1px solid var(--line);}
.lab-table tr:last-child td{border-bottom:none;}
.val-normal{background:var(--green-light);color:var(--green);font-weight:700;}
/* Dentro del rango de referencia pero cerca del borde — amarillo, distinto
   de "fuera de rango" (rojo). Antes val-high usaba este mismo tono para
   "alto" — ahora alto/bajo son ambos rojo (pedido en vivo por Abel: solo
   rojo si de verdad está fuera de rango) y el amarillo queda libre para
   este caso nuevo. */
.val-limite{background:var(--gold-light);color:var(--gold);font-weight:700;}
/* Mismos 3 tonos que las fichas de "valores más importantes fuera de
   rango" (renderSnapshot() en 08-docs-extract.js, tokens --danger-*) —
   antes usaba --brand-red-light/-dark, un rojo distinto al del resto de
   la pantalla de Valores, pedido en vivo por Abel. */
.val-low{background:var(--danger-bg);color:var(--danger-tx);border:1px solid var(--danger-bd);font-weight:700;}
.val-high{background:var(--danger-bg);color:var(--danger-tx);border:1px solid var(--danger-bd);font-weight:700;}
.val-critical{background:var(--brand-red-dark);color:#fff;font-weight:700;}

/* ── CHART CONTROLS ── */
.chart-controls{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px;}
.chart-btn{padding:5px 12px;border-radius:20px;border:1.5px solid var(--line);font-size:11px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--text-muted);white-space:nowrap;transition:border-color .2s,border-width .2s,background-color .2s,color .2s;}
.chart-btn.active{border-color:var(--brand-red);background:var(--brand-red);color:#fff;}
/* Chips de filtro de Alertas por estatus — mismos tokens que .chip.danger/.warn/.ok,
   siempre con su color real (activo o no), para poder escanear cuántas hay de cada uno
   con solo ver la barra de filtros. El .lvl-dot ya hereda currentColor, no necesita tocarse. */
.chart-btn.status-pendiente{background:var(--surface-2);border-color:var(--line);color:var(--text-muted);}
.chart-btn.active.status-pendiente{background:var(--gray);border-color:var(--gray);color:#fff;border-width:2px;font-weight:800;}
.chart-btn.status-activa{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger-tx);}
.chart-btn.status-seguimiento{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-tx);}
.chart-btn.status-resuelta{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx);}
/* Seleccionado: mismo color pero de relleno sólido + texto blanco, en vez del
   tinte claro de arriba — mucho más visible que el simple engrosado de borde
   que tenía antes. --gold/--green en oscuro son tonos claros pensados para
   texto sobre fondo oscuro, no sirven como relleno con blanco encima, así que
   aquí se fijan a sus valores sólidos oscuros sin importar el tema — mismo
   motivo por el que EVENTO_COLORS en JS usa hex fijo en vez de var(). */
.chart-btn.active.status-activa{background:var(--brand-red);border-color:var(--brand-red);color:#fff;border-width:2px;font-weight:800;}
.chart-btn.active.status-seguimiento{background:#B45309;border-color:#B45309;color:#fff;border-width:2px;font-weight:800;}
.chart-btn.active.status-resuelta{background:#15803D;border-color:#15803D;color:#fff;border-width:2px;font-weight:800;}
.chart-wrap{background:var(--surface);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.chart-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.chart-meta{font-size:11px;color:var(--text-muted);margin-bottom:10px;}

/* ── CHAT ── */
.chat-wrap{flex:1;overflow-y:auto;padding:14px 14px 18px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch;}
.msg-user{background:var(--brand-red);color:#fff;align-self:flex-end;max-width:82%;padding:11px 14px;border-radius:18px 18px 4px 18px;font-size:13px;line-height:1.6;}
/* Sin globo (pedido en vivo por Abel, "como el chat de Claude") — solo los
   mensajes del USUARIO llevan contorno/color propio; la respuesta de RAFA
   va directo sobre el fondo normal de la pantalla (--bg/--text, sin fondo
   propio) — Abel corrigió en vivo que NO fuera negro puro: "se pueden
   seguir usando los colores de RAFA, de noche letras blancas y fondo azul
   marino, de día invertido, y el rojo de la marca para los detalles" — es
   exactamente el mismo --bg/--text que ya usa toda la app en los 2 temas. */
.msg-rafa{background:none;color:var(--text);align-self:flex-start;max-width:92%;padding:4px 2px;font-size:13px;line-height:1.6;}
.msg-other{background:var(--navy);color:#fff;align-self:flex-start;max-width:82%;padding:11px 14px;border-radius:18px 18px 18px 4px;font-size:13px;line-height:1.6;}
.msg-system{background:var(--blue-light);color:var(--blue);align-self:center;font-size:11px;padding:5px 12px;border-radius:20px;}
/* Botón "Revisar ahora" dentro de un mensaje de RAFA (m.action==='review',
   13-chat-rafa.js) — acento de marca (--gold), NUNCA rojo (ya es el color
   de "enviar/destructivo" en este chat) ni navy (ya es --msg-other). Fuera
   del div de texto, en su propia línea (display:block + margin-top). */
.rafa-review-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;width:auto;min-height:44px;margin-top:10px;padding:0 16px 0 12px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:700;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);cursor:pointer;transition:transform 120ms ease-out,background-color 150ms ease;}
.rafa-review-btn:active{transform:scale(.97);}
.rafa-review-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.rafa-review-btn:hover{background:var(--surface);}}
/* Campana roja que «suena» (balanceo corto y pausa) mientras la alerta no se ha revisado (pedido de Abel, 2026-10-02). */
.rr-bell{width:20px;height:20px;color:var(--brand-red-tx);transform-origin:50% 10%;}
.rafa-review-btn.pulsing .rr-bell{animation:rrRing 1.6s ease-in-out infinite;}
@keyframes rrRing{0%,62%,100%{transform:rotate(0) scale(1)}6%{transform:rotate(24deg) scale(1.12)}14%{transform:rotate(-22deg) scale(1.12)}22%{transform:rotate(18deg) scale(1.08)}30%{transform:rotate(-14deg) scale(1.05)}38%{transform:rotate(9deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(2deg)}}
@media (prefers-reduced-motion: reduce){.rafa-review-btn.pulsing .rr-bell{animation:none;}}
.msg-sender{font-size:10px;font-weight:700;color:var(--text-muted);margin-bottom:3px;}
.msg-typing{display:flex;gap:4px;align-items:center;padding:8px 14px;}
.msg-typing span{width:7px;height:7px;border-radius:50%;background:var(--gray);animation:bounce .8s infinite;}
.msg-typing span:nth-child(2){animation-delay:.15s;}
.msg-typing span:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,80%,100%{transform:none}40%{transform:translateY(-6px)}}
/* Fila de acciones bajo cada respuesta de RAFA — copiar, reproducir,
   me gusta/no me gusta y (solo en la última) regenerar (pedido en vivo
   por Abel, benchmarking contra ChatGPT/Claude.ai, ver
   _renderMsgActions()/13-chat-rafa.js) — mismo criterio discreto: íconos
   chicos y apagados bajo el mensaje, no botones llamativos. */
.msg-actions{display:flex;align-items:center;gap:2px;margin:2px 0 8px;}
.msg-action-btn{display:flex;align-items:center;justify-content:center;padding:6px;border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:6px;transition:background 150ms ease-out,color 150ms ease-out;}
.msg-action-btn:hover{background:var(--surface-2);color:var(--text);}
.msg-action-btn svg{width:13px;height:13px;}
.msg-action-btn.activo{color:var(--brand-red-tx);}
/* Composer de 2 renglones (pedido en vivo por Abel: "me gusta más el
   diseño del chat de Claude" — renglón 1 solo el texto, renglón 2 los
   botones, todo dentro de UNA sola tarjeta apilada verticalmente, ya no
   una píldora + círculo flotando aparte como en el intento anterior de
   hoy). .chat-composer solo trae el margen/safe-area exterior. */
.chat-composer{margin:0 10px max(10px,env(safe-area-inset-bottom));flex-shrink:0;}
/* Botón flotante "ir al final" (pedido en vivo por Abel, replicando el
   comportamiento real de la app de Claude): al mandar un mensaje, la
   vista se fija arriba del mensaje del usuario en vez de perseguir el
   scroll mientras la respuesta crece — este botón aparece SOLO cuando el
   texto generado ya se salió del área visible, para saltar al final a
   propósito (_jumpToBottomRafa(), 13-chat-rafa.js). #s-chat-rafa necesita
   position:relative para que el botón se ancle a la pantalla del chat,
   no a un ancestro más arriba. */
#s-chat-rafa{position:relative;}
.rafa-jump-bottom-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:135px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.18);cursor:pointer;z-index:60;transition:transform 120ms ease-out;}
.rafa-jump-bottom-btn:active{transform:translateX(-50%) scale(.92);}
.rafa-jump-bottom-btn svg{width:16px;height:16px;}
/* Sin fondo propio (pedido en vivo por Abel: "que se vea como que el
   recuadro está flotando", igual que el chat de Claude) — se queda solo
   con un contorno delgado para que se note dónde tocar. */
.chat-input-bar{background:none;border:1.5px solid var(--line);border-radius:22px;padding:10px 12px 8px;display:flex;flex-direction:column;gap:6px;transition:border-color 150ms ease-out;position:relative;z-index:50;}
.chat-input-bar:focus-within{border-color:var(--brand-red);}
.chat-input-row1{display:flex;}
/* Crece con el contenido vía JS (_autosizeInput(), 13-chat-rafa.js) —
   max-height sube de 100px (cuando vivía en una sola fila angosta) a un
   techo generoso en vh para "que todo el texto sea visible", pedido en
   vivo por Abel, sin dejar que un dictado larguísimo tape toda la pantalla. */
.chat-input{width:100%;border:none;background:transparent;padding:4px 2px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;outline:none;resize:none;max-height:35vh;overflow-y:auto;color:var(--text);-webkit-appearance:none;}
/* Estado de grabación — pedido en vivo por Abel: "se debe eliminar el
   renglón superior del texto y solo debe quedar un recuadro ovalado con
   los botones a los extremos y ondas de sonido que se mueven según se
   detecta el audio... si no hablo se queda una línea plana". Mientras se
   graba, la barra entera (row1 + row2) se reemplaza por un solo renglón
   en forma de píldora con ✕/⏸/✓ en los extremos y la onda en medio — ya
   no son 2 renglones apilados, es un solo óvalo (.is-recording cambia el
   propio .chat-input-bar de columna a fila). */
.chat-input-bar.is-recording{flex-direction:row;align-items:center;padding:6px 10px;border-radius:999px;border-color:var(--brand-red);}
.chat-recording-row{display:none;align-items:center;gap:8px;width:100%;}
.chat-input-bar.is-recording .chat-recording-row{display:flex;}
/* Onda dibujada en vivo por _drawWaveform() (13-chat-rafa.js) leyendo el
   nivel real del micrófono vía AnalyserNode — línea plana en silencio,
   ondas cuando detecta sonido. */
.chat-waveform{flex:1;height:32px;display:block;min-width:0;}
.chat-input-row2{display:flex;align-items:center;gap:6px;}
.chat-row2-zone{display:flex;align-items:center;gap:6px;}
.chat-row2-zone:last-child{margin-left:auto;}
/* Placeholder de la Fase E (badge de especialidad dinámica) — vacío por
   ahora, solo empuja los 2 grupos de botones a los extremos cuando tenga
   contenido; sin texto no ocupa espacio. */
.chat-specialty-badge:not(:empty){font-size:10px;font-weight:700;color:var(--brand-red-tx);background:var(--brand-red-light);padding:3px 10px;border-radius:20px;}
.chat-plus{width:34px;height:34px;border-radius:50%;border:none;background:var(--surface-2);color:var(--text);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 150ms ease-out,transform 120ms ease-out;}
.chat-plus:active{background:var(--line);transform:scale(.93);}
/* Botón circular principal del renglón 2 (mic/enviar/✓) — más grande que
   los .chat-plus vecinos para que resalte como la acción principal. */
.chat-send{width:38px;height:38px;border-radius:50%;background:var(--brand-red);color:#fff;border:none;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 120ms ease-out,background 150ms ease-out;box-shadow:0 3px 10px rgba(var(--brand-red-rgb),.35);}
.chat-send:active{transform:scale(.93);}
.chat-send svg{width:18px;height:18px;}
/* Pedido en vivo por Abel: en el chat de Claude, el botón de ondas/mic en
   reposo es de un tono neutro/oscuro y SOLO se resalta (naranja, en su
   marca) al aparecer texto y convertirse en enviar — el rojo de RAFA debe
   quedar reservado para esa acción principal, no repartido también en
   "grabar" o "modo conversación" en reposo. .accent reemplaza el rojo por
   navy en los 2 botones de estado ocioso (mic y ondas); en cuanto hay
   texto, _updateMicButton() ya deja de usar esta clase y el botón vuelve a
   ser .chat-send sin modificador (rojo). */
.chat-send.accent{background:var(--navy);box-shadow:0 3px 10px rgba(0,0,0,.2);}
/* Estados del botón de ondas (#rafa-wave-btn) durante el modo
   conversación (P090): "listening" reusa el mismo pulso rojo de grabar
   (.recording); "thinking" mientras espera la respuesta de RAFA (estático,
   sin pulso); "speaking" mientras RAFA lee su respuesta en voz alta (pulso
   azul, distinto del rojo de "te estoy escuchando" para que se note de
   quién es el turno). */
.mic-btn.recording{animation:micPulse 1.4s ease-in-out infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--brand-red-rgb),.45)}50%{box-shadow:0 0 0 7px rgba(var(--brand-red-rgb),0)}}
.mic-btn.rafa-thinking{background:var(--blue-mid);color:var(--blue);}
.mic-btn.rafa-speaking{background:var(--blue);color:#fff;animation:rafaSpeakPulse 1.8s ease-in-out infinite;}
@keyframes rafaSpeakPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* Pausar/descartar — aparecen solo mientras se está grabando/pausado
   (_updateMicButton(), 13-chat-rafa.js), a la izquierda/derecha del ✓.
   Mismo criterio visual que .med-accion-danger (23-medicines.js) para la
   acción destructiva: ícono en rojo, sin cambiar el fondo entero. */
.mic-side-btn{width:30px;height:30px;font-size:14px;}
.mic-discard-btn{color:var(--brand-red-tx);}

/* Sugerencia de emoji mientras se escribe (_updateEmojiSuggest(),
   13-chat-rafa.js) — chip chico arriba de la barra, solo aparece si hay
   una palabra reconocida en lo que se está escribiendo; tocar el chip lo
   agrega, nunca se inserta ni se envía nada solo. */
.emoji-suggest-bar{margin:0 10px 6px;display:none;gap:6px;}
.emoji-suggest-chip{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:4px 12px;font-size:20px;line-height:1.3;cursor:pointer;box-shadow:var(--shadow-sm);}
.emoji-suggest-chip:active{transform:scale(.93);}

/* ── MODAL ── */
/* Sin backdrop-filter: el desenfoque de toda la pantalla se recalculaba en cada cuadro del scroll de la hoja y la volvía lenta (Abel 2026-10-13; ~19 → 60 cuadros/s medido) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:400;display:none;align-items:flex-end;}
.modal-overlay.active{display:flex;}
.modal{background:var(--bg);border-radius:28px 28px 0 0;width:100%;max-height:92vh;overflow-y:auto;padding:20px;animation:slideUp .3s ease;-webkit-overflow-scrolling:touch;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.modal-handle{width:36px;height:4px;background:#D1D5DB;border-radius:2px;margin:0 auto 16px;}
.modal-title{font-size:18px;color:var(--text);margin-bottom:12px;font-weight:700;}

/* ── DIÁLOGOS IN-APP (rafaAlert / rafaConfirm / rafaPrompt) ──
   Reutilizan .modal-overlay/.modal, así que aquí solo va lo propio del
   diálogo. white-space:pre-line es obligatorio: los mensajes heredados de
   alert()/confirm() usan \n para separar párrafos y los diálogos nativos los
   respetaban (ej. 20-email.js, 19-alerts.js). */
.rafa-dialog-msg{font-size:14px;line-height:1.6;color:var(--text);white-space:pre-line;overflow-wrap:anywhere;}
.rafa-dialog-input{display:none;width:100%;margin-top:14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;background:var(--surface);color:var(--text);outline:none;}
.rafa-dialog-input:focus{border-color:var(--brand-red);}
.rafa-dialog-actions{display:flex;gap:8px;margin-top:18px;}
.rafa-dialog-actions .btn{flex:1;min-height:44px;}
/* Mismo bloqueo de scroll que el drawer: el <body> ya es overflow:hidden, lo
   que scrollea de verdad es el .scroll de cada pantalla. */
body.rafa-dialog-open .scroll{overflow:hidden!important;}

/* ── TOAST (rafaToast) ── */
.rafa-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);max-width:320px;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;text-align:center;color:#fff;background:var(--navy);z-index:9999;opacity:0;transition:opacity .2s ease-out;pointer-events:none;}
/* Variante centrada (opciones.centro en rafaToast()) — pedido en vivo por
   Abel para el aviso de "eventos registrados", sin cambiar el default
   (abajo) que usa el resto de la app. */
.rafa-toast.centro{top:50%;bottom:auto;transform:translate(-50%,-50%);}
.rafa-toast.show{opacity:1;}
.rafa-toast.exito{background:var(--green);}
.rafa-toast.error{background:var(--brand-red);}
.rafa-toast.has-action{pointer-events:auto;display:flex;align-items:center;gap:10px;text-align:left;max-width:380px;}
.rafa-toast-btn{background:var(--brand-red);color:#fff;border:none;border-radius:12px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;}
.attach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.attach-btn{background:var(--surface);border-radius:14px;padding:16px 10px;text-align:center;cursor:pointer;border:2px solid var(--line);transition:border-color .2s,background-color .2s;}
.attach-btn:active{border-color:var(--brand-red);background:var(--brand-red-light);}
.attach-btn .ai{font-size:28px;margin-bottom:6px;}
.attach-btn .an{font-size:12px;font-weight:600;color:var(--text);}

/* ── SELECTOR DE EMOJIS ── organizado por categorías con encabezado, como
   el selector real de WhatsApp (openEmojiPicker(), 13-chat-rafa.js) — no
   una sola cuadrícula plana. */
.emoji-cat-label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;}
.emoji-cat-label:first-child{margin-top:0;}
.emoji-cat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;}
.emoji-btn{background:none;border:none;font-size:24px;padding:8px 0;cursor:pointer;border-radius:10px;transition:background-color .15s;}
.emoji-btn:active{background:var(--surface-2);}

/* ── TUTORIAL DEL MICRÓFONO ── primera vez del día (m-mic-tutorial,
   13-chat-rafa.js) — 2 renglones ícono+texto explicando dictado y modo
   conversación. */
.mic-tutorial-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:13.5px;line-height:1.5;color:var(--text);}

/* ── TIMELINE ── */
.timeline{position:relative;padding-left:4px;}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--line);}
.ti{display:flex;gap:12px;margin-bottom:14px;}
.tdot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;z-index:1;border:3px solid var(--bg);}
.tc{flex:1;background:var(--surface);border-radius:13px;padding:11px;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.tdate{font-size:10px;color:var(--text-muted);font-weight:600;margin-bottom:3px;}
.ttitle{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;}
.tdesc{font-size:11px;color:var(--text-muted);line-height:1.5;}

/* ── LANG TOGGLE ── */
.lang-tog{display:flex;background:var(--surface-2);border-radius:12px;padding:3px;margin-bottom:14px;}
.lang-btn{flex:1;padding:9px;border:none;background:none;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;border-radius:10px;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s;color:var(--text-muted);}
.lang-btn.active{background:var(--surface);color:var(--brand-red-tx);box-shadow:0 2px 8px rgba(0,0,0,.07);}
/* ── THEME TOGGLE (Commit 3) ── */
.theme-tog{display:flex;background:var(--surface-2);border-radius:12px;padding:3px;gap:2px;}
.theme-btn{flex:1;padding:8px 4px;border:none;background:none;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:600;border-radius:10px;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s;color:var(--text-muted);}
.theme-btn.active{background:var(--surface);color:var(--brand-red-tx);box-shadow:0 2px 8px rgba(0,0,0,.07);}

/* ── MEMBER CARD ── */
.member-card{background:var(--surface);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm);margin-bottom:8px;}
.mavatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;}

/* ── SETTINGS ── */
.settings-group{background:var(--surface);border-radius:16px;margin-bottom:12px;overflow:hidden;}
.settings-hdr{padding:10px 16px;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;background:var(--surface-2);}
.settings-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s;}
.settings-item:last-child{border-bottom:none;}
.settings-item:active{background:var(--surface-2);}
.si-icon{font-size:20px;width:28px;text-align:center;}
.si-text{flex:1;}
.si-title{font-size:13px;font-weight:600;color:var(--text);}
.si-sub{font-size:11px;color:var(--text-muted);margin-top:1px;}
.si-arrow{color:#D1D5DB;font-size:16px;}

/* ── TOGGLE SWITCH ── */
.toggle{width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.toggle.on{background:var(--green);}
.toggle::after{content:'';width:22px;height:22px;border-radius:50%;background:var(--surface);position:absolute;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.toggle.on::after{left:20px;}

/* ── DOCTOR DIRECTORY FUNNEL ── */
.dir-step{padding:5px 10px;border-radius:20px;font-size:10px;font-weight:700;color:var(--text-muted);background:var(--surface-2);white-space:nowrap;transition:background-color .2s,color .2s;cursor:default;}
.dir-step.active{background:var(--navy);color:#fff;cursor:pointer;}
.dir-step.done{background:var(--green-light);color:var(--green);cursor:pointer;}
.dir-step.done:active,.dir-step.active:active{transform:scale(.95);}
.dir-arrow{color:var(--text-muted);font-size:12px;flex-shrink:0;}
.dir-filter-btn{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.dir-filter-btn:active,.dir-filter-btn.selected{background:var(--navy);border-color:var(--navy);color:#fff;}
.dir-chip{display:inline-flex;align-items:center;gap:5px;background:var(--navy);color:#fff;border-radius:20px;padding:5px 10px;font-size:11px;font-weight:700;}
.dir-chip-x{cursor:pointer;opacity:.7;font-size:13px;line-height:1;}
/* ── ALT TREATMENTS ── */
.alt-filter-btn{padding:7px 14px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s;}
.alt-filter-btn.selected{background:var(--navy);border-color:var(--navy);color:#fff;}
.chat-menu-wrap{position:relative;flex-shrink:0;}
.chat-menu-dropdown{position:absolute;top:44px;right:0;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.13);z-index:500;min-width:190px;padding:6px 0;display:none;animation:fadeInDown .15s ease;}
.chat-menu-dropdown.open{display:block;}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cmd-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text);transition:background .12s;white-space:nowrap;}
.cmd-item:active{background:var(--surface-2);}
.cmd-item .cmd-icon{font-size:17px;width:22px;text-align:center;}
.cmd-item.danger{color:var(--brand-red-tx);}
.cmd-divider{height:1px;background:var(--line);margin:4px 0;}
.patient-switcher{margin:14px 0 0;padding:0 0 2px;}
.patient-switcher-label{font-size:9px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;}
.patient-cards{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.patient-cards::-webkit-scrollbar{display:none;}
.patient-card{flex-shrink:0;width:64px;cursor:pointer;text-align:center;padding:6px 4px;border-radius:10px;transition:background-color .2s;}
.patient-card:active{background:rgba(255,255,255,.1);}
.patient-card.active .patient-card-avatar{border:2.5px solid #fff;box-shadow:0 0 0 2px var(--brand-red);}
.patient-card-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;margin:0 auto 4px;border:2.5px solid transparent;transition:border-color .2s,box-shadow .2s;}
.patient-card-name{font-size:9px;color:rgba(255,255,255,.6);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.patient-card-add{flex-shrink:0;width:64px;cursor:pointer;text-align:center;padding:6px 4px;border-radius:10px;border:2px dashed rgba(255,255,255,.25);background:transparent;transition:background-color .2s;}
.patient-card-add:active{background:rgba(255,255,255,.1);}
.patient-card-add-icon{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:20px;color:rgba(255,255,255,.5);margin:0 auto 4px;}
.patient-card-add-label{font-size:9px;color:rgba(255,255,255,.4);font-weight:600;}
/* Modal multi-perfil */
.patient-list-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1.5px solid var(--line);margin-bottom:8px;cursor:pointer;transition:background-color .2s,border-color .2s;}
.patient-list-item:active{background:var(--surface-2);}
.patient-list-item.active{border-color:var(--brand-red);background:var(--brand-red-light);}
.pli-avatar{width:42px;height:42px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--text);flex-shrink:0;}
.patient-list-item.active .pli-avatar{background:var(--brand-red-mid);}
.pli-info{flex:1;min-width:0;}
.pli-name{font-size:14px;font-weight:600;color:var(--text);}
.pli-dx{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pli-active-badge{font-size:10px;font-weight:700;color:var(--brand-red-tx);background:var(--brand-red-light);padding:2px 8px;border-radius:20px;flex-shrink:0;}
/* ── PERSONA SELECTOR ── */
.persona-btn{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.persona-btn.selected{border-color:var(--brand-red);background:var(--brand-red);color:#fff;}
.persona-btn.selected div:first-child{transform:scale(1.1);}
/* ── DOCUMENT GENERATOR ── */
.gen-type-card{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:border-color .15s,background-color .15s;-webkit-tap-highlight-color:transparent;}
.gen-type-card:active,.gen-type-card.selected{border-color:var(--brand-red);background:var(--brand-red-light);}
.gen-type-card.selected .gen-type-title{color:var(--brand-red-tx);}
.gen-type-icon{font-size:26px;margin-bottom:6px;}
.gen-type-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px;}
.gen-type-sub{font-size:10px;color:var(--text-muted);line-height:1.4;}
.gen-fmt-btn{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px 4px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform 120ms ease-out;color:var(--text);}
.gen-fmt-btn.selected{border-color:var(--brand-red);background:var(--brand-red-light);color:var(--brand-red-tx);}
.gen-fmt-btn:active{transform:scale(.96);}
/* "Documento listo" pasaba de none a block sin remate visual tras varios
   segundos de espera de IA — reusa el keyframe fadeIn ya existente. */
#gen-result{animation:fadeIn .3s ease-out;}
/* ── QUICK PROMPTS ── */
.qp-btn{width:100%;text-align:left;padding:10px 13px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:500;color:var(--text);cursor:pointer;transition:background-color .15s,border-color .15s;line-height:1.4;}
.qp-btn:active{background:var(--brand-red-light);border-color:var(--brand-red);}
.qp-urgent{border-color:var(--brand-red-mid);background:var(--brand-red-light);color:var(--brand-red-tx);}
.qp-urgent:active{background:var(--brand-red);color:#fff;}
.tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.tag-red{background:var(--brand-red);color:#fff;}
.tag-green{background:var(--green-light);color:var(--green);}
.tag-navy{background:var(--blue-light);color:var(--text);}
.tag-gold{background:var(--gold-light);color:var(--gold);}
.divider{height:1px;background:var(--line);margin:12px 0;}
.empty{text-align:center;padding:36px 20px;color:var(--text-muted);}
.empty-icon{font-size:42px;margin-bottom:10px;}
.empty-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px;}
.empty-text{font-size:13px;line-height:1.6;}
.err-box{background:var(--brand-red-light);border:1px solid var(--brand-red-mid);color:var(--brand-red-tx);padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:12px;}
.suc-box{background:var(--green-light);border:1px solid var(--green-mid);color:var(--green);padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:12px;}
.info-box{background:var(--blue-light);border:1px solid var(--blue-mid);color:var(--blue);padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:12px;line-height:1.6;}

/* Reclamar/reportar consultorio (directorio México) */
.denue-report-link{background:none;border:none;padding:6px 2px;min-height:44px;font-size:10px;color:var(--text-muted);text-decoration:underline;cursor:pointer;font-family:inherit;transition:color 120ms ease;}
.denue-report-link:active{color:var(--brand-red-tx);}
.rm-submit-btn{width:100%;margin-top:4px;transition:transform 140ms ease-out;}
.rm-submit-btn:active{transform:scale(.97);}
.rm-confirmacion{margin-top:10px;text-align:center;color:var(--ok-tx);font-size:13px;font-weight:600;opacity:0;transform:scale(.95);transition:opacity 200ms ease-out,transform 200ms ease-out;}
.rm-confirmacion.show{opacity:1;transform:scale(1);}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--brand-red);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-text{0%,100%{opacity:1}50%{opacity:.4}}
.loading{text-align:center;padding:24px;color:var(--text-muted);font-size:13px;}
.flex{display:flex;align-items:center;}
.gap8{gap:8px;}
.gap10{gap:10px;}
.pad{padding:16px;}
.pos-rel{position:relative;}

/* Medicamentos — layout responsive: columna única en móvil, 2 columnas en desktop */
.med-layout{display:grid;grid-template-columns:1fr;gap:16px;}
.med-main{min-width:0;}
.med-side{display:flex;flex-direction:column;gap:16px;min-width:0;}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet 768px+, Desktop 1200px+
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  body { max-width:100% !important; display:flex; align-items:stretch; }

  #app-shell { display:flex; flex-direction:row; height:100vh; width:100%; overflow:hidden; position:relative; }


  /* Área de contenido */
  #content-area {
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
  }
  #content-area .screen {
    flex:1;
    overflow-y:auto;
  }


  /* Topbar */
  .topbar { padding:0 24px; }

  /* Modales centrados */
  .modal-overlay { align-items:center !important; justify-content:center !important; }
  .modal {
    border-radius:16px !important;
    width:540px !important;
    max-height:85vh;
    margin:0 auto;
  }

  /* Login split */
  #s-login { flex-direction:row !important; align-items:stretch; }
  .login-logo {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    margin-top:0 !important;
  }
  .login-card {
    width:400px !important;
    max-width:400px;
    margin:auto 40px !important;
  }

  /* Sin sidebar en login y hub */
  #app-shell.no-sidebar .drawer { display:none !important; }
  #app-shell.no-sidebar #content-area { width:100% !important; }

  /* Login y hub fuera del content-area deben ocupar todo el app-shell */
  #s-login.active, #s-profile-hub.active {
    position:absolute;
    inset:0;
    z-index:302;
    width:100% !important;
    height:100vh !important;
  }

}

@media (min-width: 1200px) {
  .drawer { width:280px !important; }
  .modal { width:620px !important; }
  .chat-wrap { max-width:900px; margin:0 auto; }
  #content-area .screen { padding-bottom:24px; }
  .scroll { padding-left:max(20px,calc((100% - 900px)/2)); padding-right:max(20px,calc((100% - 900px)/2)); }
}

@media (min-width: 1024px) {
  .med-layout{ grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); align-items:start; }
}

@media (hover: hover) {
  .ib:hover { background:var(--surface-2); }
  .btn-red:hover { opacity:0.9; }
  .drawer-item:hover { background:rgba(255,255,255,0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .screen{animation:none;}
  .modal{animation:fadeInReduced .2s ease;}
  .msg-typing span{animation:none;opacity:.6;}
  .msg-typing span:nth-child(2){opacity:.8;}
  .msg-typing span:nth-child(3){opacity:1;}
  .spinner{animation-duration:2s;}
  #alt-loading-sub{animation:none;opacity:.7;}
  .chat-menu-dropdown{animation:fadeInReduced .15s ease;}
}
@keyframes fadeInReduced{from{opacity:0}to{opacity:1}}

/* pw-match feedback */
#pw-match-msg.ok  { color:var(--green); }
#pw-match-msg.err { color:var(--brand-red-tx); }

/* ── LUCIDE ICON SIZING (drawer) ── */
.drawer-item .di{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.drawer-item .di svg{width:18px;height:18px;}

/* Commit 4.1 — submenú de apariencia en el drawer */
.theme-sub{display:flex; flex-direction:column; max-height:0; opacity:0; overflow:hidden; pointer-events:none; visibility:hidden; padding:0 0; transition:max-height .28s ease,opacity .2s ease,padding .2s ease,visibility 0s .2s;}
.theme-sub.open{max-height:200px; opacity:1; pointer-events:auto; visibility:visible; padding:4px 0 8px; transition-delay:0s;}
.theme-opt{display:flex; align-items:center; gap:10px; padding:10px 16px 10px 44px; border:0;
  background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer;}
.theme-opt:hover{background:var(--surface-2);}
.theme-opt.active{color:var(--brand-red-text,var(--brand-red)); font-weight:700;}
.theme-opt i{width:18px;height:18px;}
#drawer-theme-caret{transition:transform .15s;}

/* ── STAT CARD ICON CHIP ── */

/* ===== Commit 4.3a — tokens de estado (chips translúcidos) + scroll drawer ===== */
:root{
  --danger-bg:#FEF2F2; --danger-bd:#FECACA; --danger-tx:#B91C1C;
  --warn-bg:#FFFBEB;   --warn-bd:#FDE68A;   --warn-tx:#B45309;
  --ok-bg:#F0FDF4;     --ok-bd:#BBF7D0;     --ok-tx:#15803D;
  --info-bg:#EFF6FF;   --info-bd:#BFDBFE;   --info-tx:#1D4ED8;
}
:root[data-theme="dark"]{
  --danger-bg:rgba(198,40,40,.16); --danger-bd:rgba(198,40,40,.34); --danger-tx:#F2A39D;
  --warn-bg:rgba(224,163,58,.15);  --warn-bd:rgba(224,163,58,.30);  --warn-tx:#F0C277;
  --ok-bg:rgba(52,178,123,.15);    --ok-bd:rgba(52,178,123,.35);    --ok-tx:#6FD6A6;
  --info-bg:rgba(59,130,246,.15);  --info-bd:rgba(59,130,246,.30);  --info-tx:#93C5FD;
}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  background:var(--surface-2);color:var(--text-muted);border:1px solid var(--line);}
.chip.danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger-tx);}
.chip.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-tx);}
.chip.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx);}
.chip.info{background:var(--info-bg);border-color:var(--info-bd);color:var(--info-tx);}
/* scroll del drawer: funciona pero sin barra visible */
.drawer-body{scrollbar-width:none;}
.drawer-body::-webkit-scrollbar{display:none;}

/* Commit 4.3b — nivel "alta" de alertas (naranja) */
:root{ --alert-bg:#FFF7ED; --alert-bd:#FED7AA; --alert-tx:#C2410C; }
:root[data-theme="dark"]{ --alert-bg:rgba(234,97,58,.15); --alert-bd:rgba(234,97,58,.30); --alert-tx:#F0A97A; }

/* Commit A2 — punto indicador (nivel/estatus) */
.lvl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:5px;flex-shrink:0;}

/* Wizard progress bar — gradiente rojo pill */
.wiz-progress{padding:16px 16px 0;}
.wiz-progress-header{display:flex;justify-content:space-between;margin-bottom:6px;font-size:12px;color:var(--text-muted);}
.wiz-progress-track{background:rgba(255,255,255,.08);border-radius:999px;height:7px;overflow:hidden;}
.wiz-progress-fill{background:linear-gradient(90deg,var(--brand-red),var(--brand-red-light));height:100%;width:100%;border-radius:999px;transform-origin:left;transition:transform .4s ease;}
.wiz-cancel-btn{background:none;border:none;color:var(--text-muted);font-size:15px;cursor:pointer;line-height:1;padding:0;}
.an-step-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.an-step-spin{width:12px;height:12px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
.wiz-steps{display:flex;align-items:flex-start;margin-top:12px;}
.wiz-step-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;}
.wiz-step-line{position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--line-color);z-index:0;}
.wiz-step-item:last-child .wiz-step-line{display:none;}
.wiz-step-icon-wrap{position:relative;z-index:1;}
.wiz-step-icon{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--bg-dot);color:var(--tx-dot);border:2px solid var(--bd-dot);}
.wiz-step-check{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:var(--green);border:1.5px solid var(--surface);display:flex;align-items:center;justify-content:center;}
#med-selfie-cam video,#med-selfie-cam button{animation:wizFadeIn .2s ease;}
.wiz-upload{display:block;text-align:center;padding:12px;border:1.5px dashed var(--line);border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s;}
.wiz-upload.filled{border:1.5px solid rgba(var(--ok-rgb,52,178,123),.4);background:rgba(var(--ok-rgb,52,178,123),.08);}
.wiz-upload:hover{border-color:var(--brand-red);}
@keyframes wizFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.wiz-step{animation:wizFadeIn .25s ease;}
.wiz-chip{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.wiz-chip.on{background:var(--brand-red);border-color:var(--brand-red);color:#fff;font-weight:600;}
.wiz-chip:active{transform:scale(.96);}

/* Submitted screen — checkmark + timeline */
@keyframes tlPopIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.tl-check{width:64px;height:64px;border-radius:50%;background:var(--ok,#34B27B);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:tlPopIn .45s ease;box-shadow:0 8px 28px rgba(var(--ok-rgb,52,178,123),.35);}
.tl-check svg{width:32px;height:32px;stroke:#fff;stroke-width:3;}
.tl-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--text);text-align:center;margin:0 0 6px;}
.tl-sub{font-size:13px;color:var(--text-muted);text-align:center;margin:0 0 32px;line-height:1.5;}
.tl-steps{display:flex;flex-direction:column;gap:0;}
.tl-step{display:flex;align-items:flex-start;gap:12px;position:relative;padding-bottom:20px;}
.tl-step:last-child{padding-bottom:0;}
.tl-step::before{content:'';position:absolute;left:11px;top:28px;bottom:0;width:2px;background:var(--line);}
.tl-step:last-child::before{display:none;}
.tl-step.done::before{background:var(--ok,#34B27B);}
.tl-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;border:2px solid var(--line);color:var(--text-muted);position:relative;z-index:1;}
.tl-step.done .tl-dot{background:var(--ok,#34B27B);border-color:var(--ok,#34B27B);color:#fff;}
.tl-step.current .tl-dot{border-color:var(--brand-red);color:var(--brand-red-tx);animation:tlPulse 2s ease infinite;}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--brand-red-rgb),.4)}50%{box-shadow:0 0 0 6px rgba(var(--brand-red-rgb),0)}}
.tl-step-body{flex:1;padding-top:3px;}
.tl-step-title{font-size:14px;font-weight:700;color:var(--text);margin:0 0 2px;}
.tl-step-desc{font-size:12px;color:var(--text-muted);margin:0;}
.tl-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;margin-top:4px;}
.tl-pill.done{background:rgba(var(--ok-rgb,52,178,123),.15);color:var(--ok,#34B27B);}
.tl-pill.current{background:rgba(224,163,58,.15);color:#E0A33A;}
.tl-pill.pending{background:rgba(255,255,255,.06);color:var(--text-muted);}

/* ── Tarjeta del versículo (rediseño 2026-09-30) ──
   Clases con prefijo hv- (en el mockup una clase genérica .q colisionaba y pintaba un recuadro
   blanco encima del YHWH). La marca de agua va detrás (z-index:-1 dentro de un contexto aislado). */
.hv{position:relative;overflow:hidden;container-type:inline-size;isolation:isolate;margin-top:24px;margin-bottom:4px;padding:28px 24px 26px;text-align:center;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);}
.hv-wm{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none;user-select:none;direction:rtl;font-family:'Frank Ruhl Libre',serif;font-weight:900;line-height:1;font-size:clamp(120px,56cqw,330px);color:rgba(var(--brand-red-rgb),.10);transform:translateY(-5%);}
:root[data-theme="dark"] .hv-wm{color:rgba(232,87,74,.18);}
.hv-swap{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease,color 150ms ease;}
.hv[hidden]{display:none;}
.hv-gear{position:absolute;top:8px;left:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease,color 150ms ease;}
.hv-gear:active,.hv-swap:active{transform:scale(.95);}
.hv-gear svg{width:20px;height:20px;}
button.toggle{border:0;padding:0;}
.hv-swap svg{width:20px;height:20px;transition:transform 260ms var(--ease-out);}
.hv-badge{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--danger-bg);color:var(--danger-tx);}
.hv-badge svg{width:20px;height:20px;}
.hv-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
/* Hanken como el resto de la app (regla de una sola línea tipográfica; Playfair solo en el logotipo) */
.hv-text{margin:14px auto 0;max-width:30ch;font-family:'Hanken Grotesk',sans-serif;font-weight:600;letter-spacing:-.01em;font-size:clamp(17px,5.2cqw,24px);line-height:1.42;color:var(--text);text-wrap:balance;}
/* Escala de letra por longitud del versículo (data-len lo pone renderVerse): nada se corta, la tarjeta crece lo necesario */
.hv-text[data-len="s"]{font-size:clamp(16px,4.7cqw,23px);}
.hv-text[data-len="m"]{font-size:clamp(15px,4.2cqw,20px);max-width:34ch;}
.hv-text[data-len="l"]{font-size:clamp(15px,3.8cqw,18px);max-width:38ch;}
.hv-text[data-len="xl"]{font-size:clamp(14px,3.5cqw,17px);max-width:42ch;}
.hv-ref{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--danger-tx);}
.hv-rule{width:28px;height:2px;margin:12px auto 0;border-radius:2px;background:var(--brand-red);}
.hv-note{margin:14px auto 0;max-width:46ch;font-size:13px;line-height:1.55;color:var(--text-muted);}
.hv-text,.hv-ref,.hv-note{transition:opacity 220ms var(--ease-out),filter 220ms var(--ease-out);}
.hv-swapping .hv-text,.hv-swapping .hv-ref,.hv-swapping .hv-note{opacity:0;filter:blur(2px);transition-duration:140ms;}
@media (hover:hover) and (pointer:fine){.hv-gear:hover,.hv-swap:hover{background:var(--surface-2);color:var(--text);}}
@media (prefers-reduced-motion:reduce){
  .hv-text,.hv-ref,.hv-note{transition:opacity 220ms var(--ease-out)!important;}
  .hv-swapping .hv-text,.hv-swapping .hv-ref,.hv-swapping .hv-note{filter:none;transition:opacity 140ms var(--ease-out)!important;}
  .hv-swap svg{transition:none;}
}

/* ── Versículo: botón de versión junto a la cita + selector y créditos (B2) ── */
.hv-refrow{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap;margin-top:14px;}
.hv-refrow .hv-ref{margin-top:0;}
.hv-ver{min-height:44px;min-width:44px;padding:0 2px;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text);transition:transform 160ms var(--ease-out);}
.hv-ver:active{transform:scale(.95);}
.hv-ver-pill{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 8px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:12px;font-weight:700;letter-spacing:.08em;transition:background-color 150ms ease;}
.hv-ver-pill svg{width:14px;height:14px;color:var(--text-muted);}
@media (hover:hover) and (pointer:fine){.hv-ver:hover .hv-ver-pill{background:var(--line);}}
.ver-title{font-family:'Playfair Display',serif;font-size:19px;color:var(--text);margin-bottom:4px;}
.ver-sub{font-size:13px;line-height:1.5;color:var(--text-muted);margin-bottom:12px;}
.ver-list{display:flex;flex-direction:column;gap:8px;}
.ver-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer;font-family:inherit;color:var(--text);transition:transform 160ms var(--ease-out),border-color 150ms ease,background-color 150ms ease;}
.ver-opt:active{transform:scale(.98);}
.ver-opt[aria-checked="true"]{border-color:var(--text);background:var(--surface-2);}
.ver-radio{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;}
.ver-opt[aria-checked="true"] .ver-radio{border-color:var(--text);}
.ver-opt[aria-checked="true"] .ver-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--text);}
.ver-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ver-txt b{font-size:14px;font-weight:700;}
.ver-txt em,.ver-cred-h em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-muted);margin-left:4px;}
.ver-txt small{font-size:12px;color:var(--text-muted);line-height:1.35;}
.ver-lic{flex-shrink:0;font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap;}
.ver-link,.ver-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:0 4px;border:0;background:none;color:var(--text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.ver-link svg,.ver-back svg{width:16px;height:16px;color:var(--text-muted);}
.ver-back{margin:-6px 0 6px;}
.ver-cred{padding:12px 0;border-top:1px solid var(--line);}
.ver-cred-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ver-cred-h b{font-size:14px;}
.ver-cred p{font-size:12.5px;line-height:1.55;color:var(--text-muted);margin-bottom:6px;}
.ver-cred a{font-size:12.5px;font-weight:600;color:var(--blue);text-decoration:underline;min-height:44px;display:inline-flex;align-items:center;}
.si-icon svg{width:20px;height:20px;color:var(--text-muted);vertical-align:middle;}

/* Menú del engrane del versículo (dentro de m-verse-version) */
.vm-row{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 4px;border:0;background:transparent;color:var(--text);text-align:left;font:inherit;cursor:pointer;border-bottom:1px solid var(--line);}
.vm-row:last-of-type{border-bottom:0;}
.vm-row svg{width:20px;height:20px;color:var(--text-muted);flex-shrink:0;}
.vm-row .vm-t{flex:1;min-width:0;}
.vm-row .vm-t b{display:block;font-size:15px;font-weight:600;}
.vm-row .vm-t small{display:block;font-size:13px;color:var(--text-muted);margin-top:2px;}

/* Reacciones, comentario e identidad del versículo (25-versiculo-feedback.js) */
.hv-fb{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-align:left;cursor:default;}
.hv-react{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.hv-rb{min-width:44px;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease;}
.hv-rb:active{transform:scale(.97);}
.hv-rb-e{font-size:18px;line-height:1;}
.hv-rb-n{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-muted);}
.hv-rb[aria-pressed="true"]{background:var(--danger-bg);border-color:var(--brand-red);}
.hv-rb[aria-pressed="true"] .hv-rb-n{color:var(--danger-tx);}
.hv-rb-dis{margin-left:6px;opacity:.75;}
.hv-rb-dis[aria-pressed="true"]{opacity:1;}
.hv-rb:focus-visible,.hv-bp:focus-visible,.hv-bg:focus-visible,.hv-lnk:focus-visible,.hv-ctext:focus-visible,.hv-nick:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.hv-compose{margin-top:14px;}
.hv-cbox{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);}
.hv-clabel{display:block;font-size:14px;font-weight:600;color:var(--text);}
.hv-cnote{margin:4px 0 8px;font-size:12px;line-height:1.5;color:var(--text-muted);}
.hv-ctext{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.45;resize:vertical;min-height:76px;}
.hv-ccount{margin-top:4px;text-align:right;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.hv-cidt{margin-top:8px;font-size:13px;font-weight:600;color:var(--text);}
.hv-cid{margin:8px 0 0;font-size:13px;color:var(--text-muted);}
.hv-cid b{color:var(--text);}
.hv-lnk{min-height:44px;padding:0 4px;border:0;background:none;color:var(--text);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;}
.hv-idg{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.hv-idr{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 4px;cursor:pointer;}
.hv-idr input[type=radio]{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand-red);flex-shrink:0;}
.hv-idt{flex:1;min-width:0;}
.hv-idt b{display:block;font-size:14px;font-weight:600;color:var(--text);}
.hv-idt small{display:block;margin-top:1px;font-size:12px;line-height:1.4;color:var(--text-muted);}
.hv-nick{width:100%;box-sizing:border-box;margin-top:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;}
.hv-cerr{min-height:0;margin-top:8px;font-size:13px;line-height:1.45;color:var(--danger-tx);}
.hv-cerr:empty{display:none;}
.hv-cbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.hv-bp,.hv-bg{min-height:44px;padding:0 18px;border-radius:22px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease;}
.hv-bp{border:0;background:var(--text);color:var(--surface);}
.hv-bg{border:1px solid var(--line);background:var(--surface);color:var(--text);}
.hv-bp:active,.hv-bg:active{transform:scale(.97);}
.hv-bp:disabled{opacity:.6;cursor:default;}
.hv-cdone{margin:0;padding:12px 14px;border-radius:12px;background:var(--surface-2);font-size:13px;line-height:1.5;color:var(--text);}
.hv-others{margin-top:16px;}
.hv-oh{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.hv-oc{margin:0 0 10px;padding:10px 12px;border-left:2px solid var(--brand-red);background:var(--surface-2);border-radius:0 10px 10px 0;}
.hv-oc blockquote{margin:0;font-size:14px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;}
.hv-oc figcaption{margin-top:4px;font-size:12px;color:var(--text-muted);}
.hv-oc-mio{border-left-color:var(--line);}
@media (hover:hover) and (pointer:fine){.hv-rb:hover{background:var(--surface-2);}.hv-rb[aria-pressed="true"]:hover{background:var(--danger-bg);}}
@media (prefers-reduced-motion:reduce){.hv-rb,.hv-bp,.hv-bg{transition:none;}}

/* Admin: Versículos más queridos (26-admin-versiculos.js) */
.va-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;}
.va-nb{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out);}
.va-nb:active{transform:scale(.95);}.va-nb:disabled{opacity:.35;cursor:default;}
.va-nb svg{width:20px;height:20px;}
.va-mes{flex:1;text-align:center;font-family:'Playfair Display',serif;font-size:19px;color:var(--text);}
.va-sec{margin-bottom:22px;}
.va-sec h3{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.va-nota{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--text-muted);}
.va-vacio{padding:24px 8px;text-align:center;font-size:14px;color:var(--text-muted);}
.va-cuidado .va-c{border-left:3px solid var(--warn-tx,#B45309);}
.va-win{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);}
.va-wt{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;line-height:1.45;color:var(--text);}
.va-wr{margin:8px 0 12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--danger-tx);}
.va-v{margin-bottom:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);}
.va-vh{display:flex;gap:12px;align-items:flex-start;}
.va-rank{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.va-vr{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--danger-tx);}
.va-vt{margin-top:2px;font-size:14px;line-height:1.5;color:var(--text);}
.va-rcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.va-rc{padding:4px 10px;border:1px solid var(--line);border-radius:14px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--text);}
.va-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.va-det{margin-top:10px;}
.va-det summary{min-height:44px;display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;}
.va-c{margin:8px 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);}
.va-cv{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--danger-tx);margin-bottom:2px;}
.va-c blockquote{margin:0;font-size:14px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;}
.va-cm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--text-muted);}
.va-chip{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;}
.va-ok{background:var(--ok-bg,#DCFCE7);color:var(--ok-tx,#166534);}
.va-no{background:var(--danger-bg);color:var(--danger-tx);}
.va-pen{background:var(--warn-bg,#FEF3C7);color:var(--warn-tx,#92400E);}
.va-mot{font-style:italic;}
.va-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.va-b{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:transform 160ms var(--ease-out);}
.va-bp{border:0;background:var(--text);color:var(--surface);}
.va-b:active{transform:scale(.97);}
.va-b:focus-visible,.va-nb:focus-visible,.va-det summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.va-b,.va-nb{transition:none;}}

/* Leyenda discreta de licencia al pie de la tarjeta del versículo (atribución; pendiente de revisión legal) */
.hv-legal{display:block;min-height:44px;margin:4px auto -14px;padding:0 8px;border:0;background:none;color:var(--text-muted);font:inherit;font-size:11px;line-height:1.4;letter-spacing:.02em;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer;}
.hv-legal:empty{display:none;}
.hv-legal:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px;}

/* Imagen del versículo (07-multipatient.js _hvImagen): solo las aprobadas; mientras carga o sin imagen queda la marca YHWH */
.hv-foto{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:0;pointer-events:none;transition:opacity .45s ease;}
.hv-velo{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity .45s ease;background:linear-gradient(180deg,rgba(10,12,18,.32) 0%,rgba(10,12,18,.48) 45%,rgba(10,12,18,.86) 100%);}
.hv-wm{transition:opacity .35s ease;}
.hv.hv-con-foto .hv-wm{opacity:0;}
.hv.hv-con-foto.hv-img-b .hv-foto{opacity:.13;filter:saturate(.8) brightness(1.05);}
:root[data-theme="dark"] .hv.hv-con-foto.hv-img-b .hv-foto{opacity:.16;filter:saturate(.7) brightness(.85);}
.hv.hv-con-foto.hv-img-a .hv-foto,.hv.hv-con-foto.hv-img-a .hv-velo{opacity:1;}
.hv.hv-con-foto.hv-img-a{border-color:transparent;}
/* Leyenda «IA»: discreta, esquina inferior derecha, solo cuando hay imagen */
.hv-ia{position:absolute;right:10px;bottom:10px;font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1;padding:3px 5px;border-radius:4px;color:var(--text-muted);background:color-mix(in srgb,var(--surface) 70%,transparent);opacity:0;pointer-events:none;transition:opacity .3s ease;}
.hv.hv-con-foto .hv-ia{opacity:.85;}
/* Modo póster: texto claro sobre la imagen con velo */
.hv.hv-con-foto.hv-img-a .hv-kicker{color:rgba(255,255,255,.82);}
.hv.hv-con-foto.hv-img-a .hv-text{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.45);}
.hv.hv-con-foto.hv-img-a .hv-ref{color:#FFD9D5;}
.hv.hv-con-foto.hv-img-a .hv-ver{color:#fff;}
.hv.hv-con-foto.hv-img-a .hv-ver-pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);}
.hv.hv-con-foto.hv-img-a .hv-note{color:rgba(255,255,255,.86);}
.hv.hv-con-foto.hv-img-a .hv-badge{background:rgba(255,255,255,.16);color:#fff;}
.hv.hv-con-foto.hv-img-a .hv-gear,.hv.hv-con-foto.hv-img-a .hv-swap{color:rgba(255,255,255,.88);}
.hv.hv-con-foto.hv-img-a .hv-legal{color:rgba(255,255,255,.78);text-decoration-color:rgba(255,255,255,.3);}
.hv.hv-con-foto.hv-img-a .hv-ia{color:rgba(255,255,255,.92);background:rgba(0,0,0,.35);}
.hv.hv-con-foto.hv-img-a .hv-fb{border-top-color:rgba(255,255,255,.22);}
.hv.hv-con-foto.hv-img-a .hv-oh,.hv.hv-con-foto.hv-img-a .hv-cid,.hv.hv-con-foto.hv-img-a .hv-lnk{color:rgba(255,255,255,.88);}
@media (prefers-reduced-motion:reduce){.hv-foto,.hv-velo,.hv-wm,.hv-ia{transition:none;}}

/* Admin: imágenes del versículo (34-admin-imagenes.js) */
.vi-intro{font-size:14px;line-height:1.5;color:var(--text-muted);margin-bottom:12px;}
.vi-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.vi-cupo{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.vi-cupo b{color:var(--text);}
.vi-aviso{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--danger-bg);color:var(--danger-tx);font-size:13px;font-weight:600;line-height:1.45;}
.vi-dias{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line);}
.vi-dia{border-bottom:1px solid var(--line);}
.vi-h{width:100%;min-height:56px;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 2px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.vi-f{font-size:13px;font-weight:700;}
.vi-f small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.vi-r{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vi-chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;}
.vi-sin{background:var(--surface-2);color:var(--text-muted);}
.vi-gen{background:var(--surface-2);color:var(--text);}
.vi-pend{background:#FFFAEB;color:#B54708;}
:root[data-theme="dark"] .vi-pend{background:rgba(247,144,9,.14);color:#FEC84B;}
.vi-ok{background:#ECFDF3;color:#067647;}
:root[data-theme="dark"] .vi-ok{background:rgba(18,183,106,.14);color:#6CE9A6;}
.vi-fallo{background:var(--danger-bg);color:var(--danger-tx);}
.vi-b{padding:2px 2px 16px;}
.vi-nota{font-size:13px;line-height:1.5;color:var(--text-muted);margin:2px 0 4px;}
.vi-err{color:var(--danger-tx);}
.vi-prev{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:560px){.vi-prev{grid-template-columns:1fr 1fr;}}
.vi-pl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 2px 6px;}
.hv.vi-mini{margin:0;min-height:250px;padding:22px 16px 20px;cursor:default;display:flex;flex-direction:column;justify-content:center;}
.vi-desc{margin-top:10px;font-size:13px;line-height:1.5;color:var(--text-muted);}
.vi-desc summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--text);}
.vi-desc p{margin:4px 0 0;}
.vi-aprobar{border:0;background:#067647;color:#fff;}
.vi-x{color:var(--danger-tx);border-color:var(--danger-bd);}
.vi-cnt{margin-left:auto;align-self:center;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.vi-pie{margin-top:14px;font-size:12px;line-height:1.55;color:var(--text-muted);}
.vi-aj{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);}
.vi-aj-lb{display:block;font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;}
.vi-aj-in{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.45;resize:vertical;min-height:64px;}
.vi-aj-ay{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted);}
.vi-aj-ay b{color:var(--text);font-weight:600;}
.vi-aj-btns{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:10px;}
.vi-aj-t{font-weight:600;color:var(--text);margin-top:8px;}
.vi-aj-l{margin:4px 0 0;padding-left:20px;}
.vi-qs{margin:0 0 12px;}
.vi-qs-t{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--text);}
.vi-q{margin-top:10px;}
.vi-q-t{margin:0 0 6px;font-size:13px;color:var(--text);}
.vi-q-ops{display:flex;flex-wrap:wrap;gap:6px;}
.vi-q-op{min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;line-height:1.3;text-align:left;cursor:pointer;}
.vi-q-op[aria-pressed="true"]{border-color:var(--brand-red);background:var(--brand-red-mid);color:var(--brand-red-dark);font-weight:600;}
:root[data-theme="dark"] .vi-q-op[aria-pressed="true"]{background:rgba(var(--brand-red-rgb),.18);color:var(--brand-red-tx);}
.vi-q-otra{width:100%;box-sizing:border-box;margin-top:6px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;}
.vi-q-pedir{width:100%;margin-bottom:12px;}
.va-b:disabled{opacity:.45;cursor:not-allowed;}
.ver-opt[disabled]{opacity:.55;cursor:not-allowed;}
@media (hover:hover) and (pointer:fine){.hv-legal:hover{color:var(--text);}}

/* ── Tarjeta del paciente activo + selector (18-home-ui.js: renderPatientCard) ── */
.pt-card{container-type:inline-size;position:relative;margin-bottom:16px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);}
.pt-top{display:flex;align-items:center;gap:14px;}
.pt-av{width:52px;height:52px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-size:20px;font-weight:700;}
.pt-id{flex:1;min-width:0;}
.pt-switch{display:flex;align-items:center;gap:6px;width:fit-content;max-width:100%;min-height:44px;margin:-6px 0 -2px -8px;padding:6px 8px;border:0;border-radius:12px;background:transparent;color:var(--text);font:inherit;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease;}
.pt-switch:active{transform:scale(.97);}
.pt-switch svg{width:16px;height:16px;flex-shrink:0;color:var(--text-muted);}
.pt-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-align:left;}
.pt-meta{margin-top:2px;font-size:13px;line-height:1.4;color:var(--text-muted);}
.pt-mi-dato{white-space:nowrap;}
.pt-edit{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease;}
.pt-edit:active{transform:scale(.97);}
.pt-edit svg{width:16px;height:16px;color:var(--text-muted);}
@container (max-width:290px){.pt-edit span{display:none;}.pt-edit{padding:0 10px;}}
/* Filas de datos (reemplazan a los chips): icono · etiqueta · valor, alineadas y con la misma altura mínima */
.pt-rows{margin-top:14px;border-top:1px solid var(--line);}
.pt-row{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:"i l c" "i v c";column-gap:12px;align-items:center;width:100%;min-height:48px;padding:9px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:inherit;text-align:left;}
.pt-row:last-child{border-bottom:0;}
button.pt-row{cursor:pointer;transition:background-color 150ms ease,transform 160ms var(--ease-out);}
button.pt-row:active{transform:scale(.99);}
.pt-ri{grid-area:i;width:18px;height:18px;color:var(--text-muted);align-self:start;margin-top:2px;}
.pt-rl{grid-area:l;font-size:12px;line-height:1.3;color:var(--text-muted);}
.pt-rv{grid-area:v;font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.pt-rc{grid-area:c;width:16px;height:16px;color:var(--text-muted);}
.pt-row-alerta .pt-rv,.pt-row-alerta .pt-ri{color:var(--danger-tx);}
@container (min-width:420px){
  .pt-row{grid-template-columns:20px 168px minmax(0,1fr) auto;grid-template-areas:"i l v c";}
  .pt-rl{font-size:13px;}
}
.pt-foot{display:flex;justify-content:flex-end;margin:6px -8px -8px 0;}
.pt-custom{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:var(--text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color 150ms ease,transform 160ms var(--ease-out),color 150ms ease;}
.pt-custom svg{width:16px;height:16px;}
.pt-custom:active{transform:scale(.97);}
.pt-empty{padding:8px 0;text-align:center;}
.pt-empty p{margin:0 0 10px;font-size:13px;color:var(--text-muted);}
.pt-menu{position:absolute;z-index:20;top:76px;left:12px;right:12px;max-width:340px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm),0 12px 32px rgba(0,0,0,.14);transform-origin:top left;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);}
.pt-menu[hidden]{display:none;}
@starting-style{.pt-menu{opacity:0;transform:scale(.95);}}
.pt-mi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:4px 10px;border:0;border-radius:12px;background:transparent;color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background-color 150ms ease,transform 160ms var(--ease-out);}
.pt-mi:active{transform:scale(.98);}
.pt-mi svg{width:18px;height:18px;flex-shrink:0;color:var(--text-muted);}
.pt-mt{flex:1;min-width:0;}
.pt-mt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.pt-mt small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-muted);}
.pt-mav{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:12px;font-weight:700;color:var(--text);}
.pt-chk{margin-left:auto;color:var(--text)!important;}
.pt-sep{height:1px;margin:4px 6px;background:var(--line);}
.pt-switch:focus-visible,.pt-edit:focus-visible,.pt-row:focus-visible,.pt-custom:focus-visible,.pt-mi:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.pt-switch:hover,.pt-edit:hover,.pt-mi:hover,.pt-custom:hover{background:var(--surface-2);}.pt-custom:hover{color:var(--text);}button.pt-row:hover{background:var(--surface-2);}}
@media (prefers-reduced-motion:reduce){.pt-menu,.pt-switch,.pt-edit,.pt-row,.pt-custom,.pt-mi{transition:none;}@starting-style{.pt-menu{opacity:1;transform:none;}}}

/* Modal «Personalizar la tarjeta» */
.pcp-grp{margin:14px 0 2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
.pcp-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--line);}
.pcp-row:last-of-type{border-bottom:0;}
.pcp-row>svg{width:20px;height:20px;flex-shrink:0;color:var(--text-muted);}
.pcp-t{flex:1;min-width:0;}
.pcp-t b{display:block;font-size:15px;font-weight:600;}
.pcp-t small{display:block;margin-top:1px;font-size:12px;color:var(--text-muted);}

/* ── Home: «Requiere atención» (alerta más grave + acciones). Texto + ícono, nunca solo color ── */
.attn-card{--tono:var(--danger-tx);--tono-bg:var(--danger-bg);position:relative;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--tono);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;}
.attn-critica{--tono:var(--danger-tx);--tono-bg:var(--danger-bg);}
.attn-alta{--tono:var(--alert-tx);--tono-bg:var(--alert-bg);}
.attn-media{--tono:var(--warn-tx);--tono-bg:var(--warn-bg);}
.attn-info{--tono:var(--info-tx);--tono-bg:var(--info-bg);}
.attn-main{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 14px 10px 14px;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color 150ms ease,transform 160ms var(--ease-out);}
.attn-main:active{transform:scale(.995);}
.attn-ico{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--tono-bg);color:var(--tono);}
.attn-ico svg{width:20px;height:20px;}
.attn-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.attn-t{font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
.attn-s{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--tono);}
.attn-c{width:18px;height:18px;flex-shrink:0;color:var(--text-muted);}
.attn-acts{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px 66px;}
@media (max-width:420px){.attn-acts{padding-left:14px;}}
.attn-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease;}
.attn-b svg{width:16px;height:16px;color:var(--text-muted);}
.attn-b:active{transform:scale(.97);}
.attn-ok{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);}
.attn-ok svg{width:22px;height:22px;flex-shrink:0;color:var(--ok-tx);}
.attn-ok b{display:block;font-size:15px;font-weight:600;}
.attn-ok span{display:block;margin-top:1px;font-size:13px;color:var(--text-muted);}
.attn-main:focus-visible,.attn-b:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:12px;}
@media (hover:hover) and (pointer:fine){.attn-main:hover{background:var(--surface-2);}.attn-b:hover{background:var(--surface-2);}}
@media (prefers-reduced-motion:reduce){.attn-main,.attn-b{transition:none;}}

/* ── Barra «Pregúntale a RAFA» (campo de texto real) + robot (solo cabeza). Dormido → despierto al pasar el cursor, enfocar o escribir ── */
.ask-bar{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin:4px 0 0;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);cursor:text;transition:transform 160ms var(--ease-out),box-shadow 200ms ease,opacity 180ms var(--ease-out);view-transition-name:rafa-ask;}
.ask-input{flex:1;min-width:0;height:44px;padding:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:16px;}
.ask-input::placeholder{color:var(--text-muted);opacity:1;}
.ask-send{margin-left:auto;flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--surface);cursor:pointer;transition:transform 160ms var(--ease-out),opacity 150ms ease;}
.ask-send svg{width:18px;height:18px;color:var(--surface);}
.ask-send:active{transform:scale(.92);}
.ask-bar:has(.ask-input:placeholder-shown) .ask-send{opacity:.5;}
.rb-chip{flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;}
/* Sin círculo oscuro detrás (pedido de Abel, igual que en el chat grupal): la cabeza blanca del robot
   se separa del fondo con un contorno fino y una sombra suave. */
.rb-chip .rb{width:34px;height:34px;filter:drop-shadow(0 0 .6px rgba(15,23,42,.75)) drop-shadow(0 0 .6px rgba(15,23,42,.75)) drop-shadow(0 1px 2px rgba(15,23,42,.28));}
:root[data-theme="dark"] .rb-chip .rb{filter:drop-shadow(0 0 .5px rgba(255,255,255,.35)) drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.rb{--rb-head:#F8FAFC;--rb-visor:#0F172A;--rb-eye:#22D3EE;display:block;width:30px;height:30px;overflow:visible;}
.rb .all{transform:translateY(.8px);transition:transform 240ms var(--ease-out);}
.rb .eye{transform-box:fill-box;transform-origin:center;transform:scaleY(.12);transition:transform 220ms var(--ease-out);}
.rb .mouth{opacity:0;transition:opacity 200ms ease 70ms;}
.ask-bar:is(:active,:focus-within) .rb .all{transform:none;}
.ask-bar:is(:active,:focus-within) .rb .eye{transform:none;}
.ask-bar:is(:active,:focus-within) .rb .mouth{opacity:1;}
.ask-bar:focus-within{border-color:var(--text);box-shadow:var(--shadow-sm),0 0 0 3px color-mix(in srgb,var(--text) 14%,transparent);}
.ask-bar.ask-sending{opacity:.55;transform:translateY(-6px) scale(.985);}
.ask-bar.ask-sending .ask-send{transform:scale(.88);}
.ask-send:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .ask-bar:hover{box-shadow:var(--shadow-sm),0 6px 18px rgba(0,0,0,.08);}
  .ask-bar:hover .rb .all,.ask-bar:hover .rb .eye{transform:none;}
  .ask-bar:hover .rb .mouth{opacity:1;}
}
/* Transición «la barra viaja al chat» (View Transitions): el destino es la barra de escritura del chat */
#rafa-input-bar{view-transition-name:rafa-ask;}
::view-transition-group(rafa-ask){animation-duration:340ms;animation-timing-function:cubic-bezier(.23,1,.32,1);}
::view-transition-old(rafa-ask),::view-transition-new(rafa-ask){height:100%;object-fit:fill;}
::view-transition-old(root){animation:vt-out 160ms var(--ease-out) both;}
::view-transition-new(root){animation:vt-in 260ms var(--ease-out) both;}
@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px);}}
@media (prefers-reduced-motion:reduce){.ask-bar,.ask-send,.rb .all,.rb .eye,.rb .mouth{transition:none;}.ask-bar.ask-sending{transform:none;}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}}

/* Íconos del sprite Health Icons — escalan con el font-size del contexto (los usan Gráficas y los mosaicos del Inicio) */
.sys-ico{width:1.15em;height:1.15em;vertical-align:-0.18em;fill:currentColor;display:inline-block;}

/* ── Salud por sistemas: mosaicos con parámetro destacado, gráfica y rotación (18-home-ui.js) ── */
#h-semaforo-wrap{container-type:inline-size;}
.sys-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sys-h .slabel{margin:0;}
.sys-rot{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;margin-right:-10px;border:0;border-radius:12px;background:transparent;color:var(--text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color 150ms ease,transform 160ms var(--ease-out);}
.sys-rot[hidden]{display:none;}
.sys-rot svg{width:15px;height:15px;}
.sys-rot:active{transform:scale(.97);}
.sys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:6px;}
@container (min-width:560px){.sys-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.sy{--sc:var(--ok-tx);display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform 160ms var(--ease-out),box-shadow 200ms ease;}
.sy:active{transform:scale(.98);}
.sy.st-warn{--sc:var(--warn-tx);} .sy.st-crit{--sc:var(--danger-tx);} .sy.st-none{--sc:var(--text-muted);}
.sy-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sy .hiw{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--surface-2);color:var(--text);flex-shrink:0;}
.sy .hiw .sys-ico{width:22px;height:22px;}
.sy .pill{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 9px 0 7px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;}
.sy .pill svg{width:13px;height:13px;}
.sy .pill.ok{background:var(--ok-bg);color:var(--ok-tx);} .sy .pill.warn{background:var(--warn-bg);color:var(--warn-tx);}
.sy .pill.crit{background:var(--danger-bg);color:var(--danger-tx);} .sy .pill.none{background:var(--surface-2);color:var(--text-muted);}
.sy .nm{margin-top:10px;font-size:14px;font-weight:700;line-height:1.25;}
.sy .rot{display:block;min-height:112px;opacity:1;transition:opacity 500ms ease;}
.sy .rot.out{opacity:0;transition-duration:350ms;}
.sy .param{display:block;margin-top:2px;}
.sy .pname{display:block;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sy .pline{display:flex;justify-content:space-between;gap:6px;margin-top:1px;font-size:12px;line-height:1.3;}
.sy .pstat{font-weight:700;} .sy .pstat.ok{color:var(--ok-tx);} .sy .pstat.warn{color:var(--warn-tx);} .sy .pstat.crit{color:var(--danger-tx);} .sy .pstat.none{color:var(--text-muted);}
.sy .pcount{color:var(--text-muted);font-variant-numeric:tabular-nums;}
.sy .big{display:block;margin-top:6px;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sy .big small{margin-left:4px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--text-muted);}
.sy .spark{display:block;width:100%;height:34px;margin-top:8px;overflow:visible;color:var(--sc);}
.sy .spark .area{fill:currentColor;opacity:.12;}
.sy .spark .line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sy .spark .dot{fill:currentColor;}
.sy .spark.empty .line{stroke:var(--line);stroke-dasharray:4 5;}
.sy .delta{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;line-height:1.3;color:var(--text-muted);}
.sy .delta svg{width:14px;height:14px;flex-shrink:0;}
.sy .foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.3;color:var(--text-muted);}
.sy .foot b{font-weight:700;color:var(--text);}
.sy .foot svg{width:16px;height:16px;flex-shrink:0;}
.sys-note{margin:6px 2px 16px;font-size:11px;line-height:1.4;color:var(--text-muted);}
.sy:focus-visible,.sys-rot:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.sy:hover{box-shadow:var(--shadow-sm),0 6px 18px rgba(0,0,0,.08);}.sys-rot:hover{background:var(--surface-2);color:var(--text);}}
@media (prefers-reduced-motion:reduce){.sy,.sys-rot{transition:none;}}

/* ── Detalle de un sistema (modal) ── */
#m-system-detail .modal{container-type:inline-size;}
.sd-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.sd-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--text);flex-shrink:0;font-size:26px;}
.sd-ico .sys-ico{width:26px;height:26px;}
.sd-ht{flex:1;min-width:0;}
.sd-title{font-family:'Playfair Display',serif;font-size:20px;line-height:1.2;color:var(--text);}
.sd-sub{margin-top:1px;font-size:12px;color:var(--text-muted);}
.sd-head .pill{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:0 10px 0 8px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;}
.sd-head .pill svg{width:14px;height:14px;}
.sd-head .pill.ok{background:var(--ok-bg);color:var(--ok-tx);} .sd-head .pill.warn{background:var(--warn-bg);color:var(--warn-tx);}
.sd-head .pill.crit{background:var(--danger-bg);color:var(--danger-tx);} .sd-head .pill.none{background:var(--surface-2);color:var(--text-muted);}
.sd-filter{display:flex;gap:6px;margin:0 0 8px;padding:4px;border-radius:14px;background:var(--surface-2);}
.sd-filter button{flex:1;min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out);}
.sd-filter button:active{transform:scale(.97);}
.sd-filter button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.sd-list{display:flex;flex-direction:column;}
.sd-row{--sc:var(--ok-tx);position:relative;display:flex;align-items:stretch;border-bottom:1px solid var(--line);}
.sd-row.st-warn{--sc:var(--warn-tx);} .sd-row.st-crit{--sc:var(--danger-tx);} .sd-row.st-none{--sc:var(--text-muted);}
.sd-row.st-crit{background:var(--danger-bg);border-radius:12px;border-bottom-color:transparent;margin:2px 0;}
.sd-main{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l r" "c c";gap:6px 12px;align-items:center;min-height:56px;padding:10px 0 10px 4px;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color 150ms ease;}
.sd-row.st-crit .sd-main{padding-left:10px;}
.sd-l{grid-area:l;min-width:0;} .sd-c{grid-area:c;min-width:0;} .sd-r{grid-area:r;text-align:right;}
.sd-l b{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere;}
.sd-row.st-crit .sd-l b{font-weight:700;color:var(--danger-tx);}
.sd-l small{display:block;margin-top:1px;font-size:12px;color:var(--text-muted);}
.sd-r b{display:block;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sd-r b small{font-size:12px;font-weight:500;color:var(--text-muted);}
.sd-st{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-size:12px;font-weight:700;color:var(--sc);}
.sd-st svg{width:13px;height:13px;}
.sd-d{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:12px;color:var(--text-muted);}
.sd-d svg{width:13px;height:13px;}
.sd-row .spark{display:block;width:100%;height:28px;overflow:visible;color:var(--sc);}
.sd-row .spark .area{fill:currentColor;opacity:.12;} .sd-row .spark .line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .sd-row .spark .dot{fill:currentColor;}
.sd-one{font-size:12px;color:var(--text-muted);}
@container (min-width:440px){.sd-main{grid-template-columns:minmax(0,1.2fr) minmax(70px,1fr) auto;grid-template-areas:"l c r";}}
.sd-info{flex-shrink:0;align-self:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);display:grid;place-items:center;cursor:pointer;transition:background-color 150ms ease,transform 160ms var(--ease-out);}
.sd-info svg{width:18px;height:18px;} .sd-info:active{transform:scale(.95);}
.sd-share{margin-top:12px;}
.sd-note{margin:10px 0 0;font-size:11px;line-height:1.4;color:var(--text-muted);}
.sd-main:focus-visible,.sd-info:focus-visible,.sd-filter button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px;}
@media (hover:hover) and (pointer:fine){.sd-main:hover{background:var(--surface-2);}.sd-row.st-crit .sd-main:hover{background:transparent;}.sd-info:hover{background:var(--surface-2);}}
@media (prefers-reduced-motion:reduce){.sd-main,.sd-info,.sd-filter button{transition:none;}}

/* ── Acciones rápidas (rediseño 2026-10): tarjetas neutras con ícono Lucide; favorito = estrella; sin colores de fondo ── */
.qwrap{container-type:inline-size;}
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.qcard{position:relative;display:flex;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);transition:transform 160ms var(--ease-out),box-shadow 200ms ease;}
.qcard:active{transform:scale(.98);}
.qmain{flex:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:116px;padding:14px;border:0;border-radius:16px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.qcard .qi{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:var(--surface-2);color:var(--text);}
.qcard .qi svg{width:20px;height:20px;}
.qcard .qt{font-size:14px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;}
.qcard .qs{margin-top:2px;font-size:12px;line-height:1.35;color:var(--text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
/* Favorito: fija la tarjeta arriba del orden por uso. Zona táctil de 44 px; el ícono se ve chico */
.qfav{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;transition:color 150ms ease,transform 160ms var(--ease-out),background-color 150ms ease;}
.qfav svg{width:18px;height:18px;}
.qfav:active{transform:scale(.9);}
.qfav.is-fav{color:var(--gold,#B45309);}
.qfav.is-fav svg{fill:currentColor;}
.qmain:focus-visible,.qfav:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@container (min-width:560px){.qgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (hover:hover) and (pointer:fine){.qcard:hover{box-shadow:var(--shadow-sm),0 6px 18px rgba(0,0,0,.08);}.qfav:hover{background:var(--surface-2);color:var(--text);}}
@media (prefers-reduced-motion:reduce){.qcard,.qfav{transition:none;}}

/* ── Inicio responsivo: columna principal + columna lateral (la Palabra de hoy). Móvil/tablet: una columna en el mismo orden.
   Con ≥ 900 px de ancho de contenido (laptop/escritorio con la barra lateral): dos columnas. ── */
.home-grid{display:block;}
.home-rail{margin-top:0;}
#s-home .scroll{container-type:inline-size;}
@media (min-width:1100px){#s-home .scroll{padding-left:max(24px,calc((100% - 1180px)/2));padding-right:max(24px,calc((100% - 1180px)/2));}}
@container (min-width:932px){
  .home-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;}
  .home-rail{position:sticky;top:0;}
  .home-rail .hv{margin-top:0;}
  .home-grid:has(#h-verse-card[hidden]){grid-template-columns:minmax(0,1fr);}
}
.home-rail:has(>#h-verse-card[hidden]){display:none;}

/* ── Menú lateral en acordeón (18-home-ui.js: DRAWER_SECS) ── */
.drawer-sec{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 16px 8px 20px;border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:left;cursor:pointer;transition:color 150ms ease,background-color 150ms ease;}
.drawer-sec .ds-t{flex:1;}
.drawer-sec[aria-expanded="true"]{color:var(--text);}
.ds-dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--brand-red);}
.drawer-sec.has-badge .ds-dot{display:block;}
.drawer-sec[aria-expanded="true"] .ds-dot{display:none;}
.drawer-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms var(--ease-out);}
.drawer-panel.open{grid-template-rows:1fr;}
.dp-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s 240ms;}
.drawer-panel.open .dp-in{visibility:visible;transition-delay:0s;}
.drawer-sec:focus-visible,.drawer-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
@media (hover:hover) and (pointer:fine){.drawer-sec:hover{background:var(--surface-2);color:var(--text);}}
@media (prefers-reduced-motion:reduce){.drawer-panel,.drawer-sec svg,.dp-in{transition:none;}}

/* ── Estados de carga (esqueleto) y vacíos del Inicio ── */
@keyframes sk-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
.sk-bar{display:block;height:12px;margin:8px 0;border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sk-shimmer 1.4s linear infinite;}
.sk-w40{width:40%;} .sk-w60{width:60%;} .sk-w80{width:80%;}
.attn-sk{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);}
.sys-skel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-column:1/-1;}
@container (min-width:560px){.sys-skel{grid-template-columns:repeat(3,minmax(0,1fr));}}
.sy-sk{min-height:128px;cursor:default;}
.sys-empty{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border:1px dashed var(--line);border-radius:16px;background:var(--surface);}
.sys-empty>svg{width:24px;height:24px;flex-shrink:0;color:var(--text-muted);}
.sys-empty div{flex:1;min-width:180px;}
.sys-empty b{display:block;font-size:15px;font-weight:600;}
.sys-empty span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--text-muted);}
.sys-empty .btn{min-height:44px;}
@media (prefers-reduced-motion:reduce){.sk-bar{animation:none;background:var(--surface-2);}}

/* Pulido 2026-10: foco visible en las opciones de tema/idioma del menú */
.theme-opt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}

/* ══ Menú lateral + marco de la app (rediseño 2026-10, como el mockup v5) ══
   Menú claro y redondeado: logo RAFA en rojo, tu usuario como pastilla, secciones con ícono y flecha, subelementos con línea vertical.
   Móvil: tarjeta flotante con aire alrededor. Escritorio: el menú, la barra superior y el contenido forman UN marco redondeado
   con aire alrededor (fondo --page). */
.drawer{width:296px;background:transparent;padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom)) 8px;overflow:visible;}
.drawer-card{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;}
.drawer:not(.active) .drawer-card{box-shadow:none;transition:box-shadow 0s .3s;}
.drawer-header{background:transparent;padding:18px 16px 4px;}
.drawer-brand{display:inline-block;font-size:26px;font-weight:700;letter-spacing:.5px;color:var(--brand-red-tx);}
.drawer-sub{display:inline-block;margin:0 0 0 8px;font-family:inherit;font-style:normal;font-size:12px;color:var(--text-muted);}
.drawer-user{margin-top:14px;padding:8px 10px;border-radius:14px;background:var(--surface-2);}
.drawer-user:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.drawer-avatar{width:36px;height:36px;font-size:15px;background:var(--surface);color:var(--text);border:1px solid var(--line);flex-shrink:0;}
.drawer-name{color:var(--text);}
.drawer-role{color:var(--text-muted);}
.drawer-user>span:last-child{color:var(--text-muted)!important;}
.drawer-body{padding:8px 12px 12px;}
.drawer-item{gap:12px;min-height:44px;padding:10px 12px;border-left:0;border-radius:12px;}
.drawer-item.active{background:var(--surface-2);border-left-color:transparent;}
.drawer-item.active .dt{color:var(--text);font-size:14px;font-weight:700;}
:root[data-theme="dark"] .drawer-item.active{border-left-color:transparent;}
.drawer-item .di svg{color:var(--text-muted);}
.drawer-item.active .di svg{color:var(--text);}
.drawer-divider{margin:8px 4px;}
.drawer-sec{gap:12px;min-height:44px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);}
.drawer-sec .ds-ic{width:20px;height:20px;flex-shrink:0;color:var(--text-muted);}
.drawer-sec .ds-chev{width:16px;height:16px;color:var(--text-muted);transition:transform 220ms var(--ease-out);}
.drawer-sec[aria-expanded="true"] .ds-chev{transform:rotate(180deg);}
.drawer-sec[aria-expanded="true"]{color:var(--text);}
.dp-in{margin-left:21px;padding-left:10px;border-left:1px solid var(--line);}
.drawer-panel .drawer-item{padding:9px 12px;}
.drawer-panel .drawer-item .dt{font-size:14px;font-weight:500;color:var(--text-muted);}
.drawer-panel .drawer-item.active .dt{color:var(--text);font-weight:700;}
.drawer-panel .drawer-item .di:first-child{display:none;}
.drawer-panel .patient-switcher{margin:6px 0 4px;}
@media (hover:hover) and (pointer:fine){.drawer-item:hover{background:var(--surface-2);}}
@media (min-width:768px){
  body{background:var(--page);}
  #app-shell:not(.no-sidebar){width:calc(100% - 24px);max-width:1440px;height:calc(100vh - 24px);height:calc(100dvh - 24px);margin:12px auto;border-radius:20px;box-shadow:var(--shadow);background:var(--bg);}
  body.has-staging-banner #app-shell:not(.no-sidebar){margin-top:32px;height:calc(100vh - 44px);height:calc(100dvh - 44px);}
  .topbar-brand{text-align:left !important;}
  .topbar{min-height:64px;}
}
/* Menú lateral fijo solo desde 1024px (2026-10-12, Abel): en tablet vertical (768–1023px) el
   menú fijo se comía un tercio de la pantalla; ahí se comporta como en el celular (☰ + barra
   inferior) y el contenido usa todo el ancho. */
@media (min-width:1024px){
  /* Drawer → sidebar fija */
  .drawer {
    position:relative !important;
    transform:none !important;
    width:260px !important;
    height:100vh;
    overflow-y:auto;
    flex-shrink:0;
    border-right:1px solid var(--line);
  }
  .drawer-overlay { display:none !important; }
  .drawer-close { display:none !important; }
  /* Bottom nav oculto */
  .bnav { display:none !important; }
  .drawer{width:264px !important;height:100% !important;padding:0 !important;background:var(--surface);border-right:1px solid var(--line);}
  .drawer-card{border:0;border-radius:0;box-shadow:none;background:transparent;}
  .drawer:not(.active) .drawer-card{box-shadow:none;}
  [data-drawer-toggle]{display:none !important;}
}
@media (min-width:1100px){
  #app-shell:not(.no-sidebar){width:calc(100% - 32px);height:calc(100vh - 32px);height:calc(100dvh - 32px);margin:16px auto;}
  body.has-staging-banner #app-shell:not(.no-sidebar){margin-top:36px;height:calc(100vh - 52px);height:calc(100dvh - 52px);}
}

/* ── Ajuste fino a los valores EXACTOS del mockup v5 (plans/rediseno-home-mockup-v5.html) ── */
.drawer-header{padding:18px 12px 0;}
.drawer-brand{font-size:24px;letter-spacing:.06em;padding:2px 10px 0;}
.drawer-sub{margin-left:8px;}
.drawer-header .drawer-brand{display:inline;}
.drawer-user{margin:14px 0 8px;padding:8px 10px;gap:10px;border-radius:12px;}
.drawer-name{font-size:14px;font-weight:600;line-height:1.2;}
.drawer-role{font-size:12px;}
.drawer-body{padding:8px 12px 12px;display:flex;flex-direction:column;gap:2px;}
.drawer-item,.drawer-sec{min-height:44px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:600;}
.drawer-item .dt{font-size:14px;font-weight:600;color:var(--text);}
.drawer-item.active .dt{font-size:14px;}
.drawer-sec{position:relative;gap:12px;}
.drawer-panel{transition-duration:200ms;}
.dp-in{margin:2px 0 6px 22px;padding-left:12px;}
.drawer-panel .drawer-item{min-height:40px;padding:0 12px;}
.drawer-panel .drawer-item .dt{font-weight:500;color:var(--text-muted);}
.drawer-panel .drawer-item.active .dt{color:var(--text);font-weight:600;}
.drawer-divider{margin:6px 4px;}
/* punto de atención sobre el ícono de la sección (no ocupa ancho: el título cabe en una línea) */
.ds-dot{position:absolute;left:24px;top:8px;width:8px;height:8px;border:2px solid var(--surface);box-sizing:content-box;}
.drawer-sec[aria-expanded="true"] .ds-dot{display:none;}
.ds-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Títulos de sección del Inicio: frase normal, 13 px, negrita suave y atenuado (mockup: .h h3) */
#s-home .slabel{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--text-muted);margin:0 0 10px;}
.tb-d{display:none;}
@media (min-width:768px){
  .tb-m{display:none;}.tb-d{display:inline;font-size:17px;font-weight:700;letter-spacing:-.01em;font-family:'Hanken Grotesk',sans-serif;color:var(--text);}
  .topbar{padding:10px 20px;}
}
/* Columna lateral: 340 px y 380 px según el ancho, versículo centrado (mockup: .content / .rail) */
@container (min-width:932px){
  .home-rail .hv{min-height:340px;display:flex;flex-direction:column;justify-content:center;}
}
@container (min-width:1132px){.home-grid{grid-template-columns:minmax(0,1fr) 380px;}}

/* Aire entre secciones del Inicio: 24 px como en el mockup (.col-main{gap:24px}) */
.pt-card{margin-bottom:24px;}
.ask-bar{margin-top:24px;}
#h-semaforo-wrap{margin-top:24px;}
#s-home .home-main>.slabel:not(:first-child){margin-top:24px;}
#s-home .home-main>.slabel:first-of-type{margin-top:0;}
@media (prefers-reduced-motion:reduce){.drawer-panel,.drawer-sec .ds-chev,.dp-in{transition:none;}}

/* ── Preguntas al médico (27-preguntas-medico.js) ── */
.pm-top{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
.pm-intro{margin:0;font-size:14px;line-height:1.5;color:var(--text-muted);}
.pm-topb{display:flex;flex-wrap:wrap;gap:8px;}
.pm-topb .btn{flex:1 1 160px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.pm-topb .btn svg{width:18px;height:18px;}
.pm-ctx label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
.pm-ctx textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-size:16px;background:var(--surface);color:var(--text);resize:vertical;}
.pm-tabs{display:flex;gap:4px;padding:3px;margin:4px 0 14px;background:var(--surface-2);border-radius:12px;}
.pm-tab{flex:1;min-height:44px;border:0;border-radius:10px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:background 160ms ease-out,color 160ms ease-out;}
.pm-tab span{font-variant-numeric:tabular-nums;opacity:.8;}
.pm-tab.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.pm-tab:focus-visible,.pm-b:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.pm-q{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px;}
.pm-qh{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pm-cat{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);}
.pm-st{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;}
.pm-st.pen{background:var(--warn-bg);color:var(--warn-tx);}
.pm-st.ok{background:var(--ok-bg);color:var(--ok-tx);}
.pm-qt{margin:0;font-size:15px;line-height:1.55;color:var(--text);overflow-wrap:anywhere;}
.pm-a{background:var(--surface-2);border-radius:12px;padding:12px;}
.pm-ah{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ok-tx);margin-bottom:6px;}
.pm-ah svg{width:16px;height:16px;}
.pm-a p{margin:0;font-size:14px;line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;}
.pm-a small{display:block;margin-top:6px;font-size:12px;color:var(--text-muted);}
.pm-acts{display:flex;flex-wrap:wrap;gap:8px;}
.pm-b{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:transform 120ms ease-out;}
.pm-b:active{transform:scale(.97);}
.pm-bp{background:var(--navy);border-color:var(--navy);color:#fff;}
.pm-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:34px 16px;color:var(--text-muted);}
.pm-empty svg{width:36px;height:36px;opacity:.6;}
.pm-empty b{color:var(--text);font-size:15px;}
.pm-empty span{font-size:13.5px;}
#m-pm-content h3{margin:0 0 10px;font-size:18px;color:var(--text);}
.pm-sh-q{margin:0 0 14px;padding:10px 12px;border-left:3px solid var(--brand-red);background:var(--surface-2);border-radius:0 10px 10px 0;font-size:14px;line-height:1.5;color:var(--text);}
.pm-lbl{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
#pm-sh-txt{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;padding:12px;font:inherit;font-size:16px;line-height:1.5;background:var(--surface);color:var(--text);resize:vertical;}
.pm-cnt{margin-top:4px;text-align:right;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.pm-nota{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-muted);}
.pm-sh-b{display:flex;gap:8px;margin-top:16px;}
.pm-sh-b .btn{flex:1;min-height:44px;}
/* Preguntas al médico v2: origen del documento, versión técnica y avisos */
.pm-origen{font-size:12.5px;font-weight:600;color:var(--text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pm-tec{border-top:1px solid var(--line);padding-top:8px;}
.pm-tec summary{display:flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:600;color:var(--info-tx);cursor:pointer;list-style:none;}
.pm-tec summary::-webkit-details-marker{display:none;}
.pm-tec summary::after{content:'';width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 160ms ease-out;}
.pm-tec[open] summary::after{transform:rotate(225deg) translateY(-1px);}
.pm-tec summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px;}
.pm-tec p{margin:2px 0 0;font-size:14px;line-height:1.55;color:var(--text);overflow-wrap:anywhere;}
.pm-tec small{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--text-muted);}
.pm-aviso{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:10px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn-tx);font-size:13.5px;font-weight:600;}
.pm-aviso-info{justify-content:flex-start;background:var(--surface-2);color:var(--text-muted);}
.pm-aviso .spinner{width:18px;height:18px;margin:0;border-width:2px;}
.pm-sh-tec{margin:-6px 0 14px;font-size:12.5px;line-height:1.5;color:var(--text-muted);}
/* Distribución (2026-10-12, Abel): en tablet y escritorio angosto, una columna centrada de 760px;
   desde 1200px, panel fijo a la izquierda (idioma, agregar, pedir a RAFA, contexto) y la lista a
   la derecha usando el ancho disponible; tarjetas en dos columnas si caben. */
#s-preguntas .lang-btn{min-height:44px;}
@media (min-width:768px) and (max-width:1199px){#s-preguntas .scroll.pad{max-width:760px;margin:0 auto;width:100%;box-sizing:border-box;}}
@media (min-width:1200px){
  #s-preguntas .scroll{padding-left:max(24px,calc((100% - 1280px)/2));padding-right:max(24px,calc((100% - 1280px)/2));}
  #s-preguntas .scroll.pad{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start;align-content:start;}
  #s-preguntas .pm-side{position:sticky;top:0;}
  #s-preguntas .pm-top{margin-bottom:0;}
  #s-preguntas .pm-topb{flex-direction:column;}
  #s-preguntas .pm-topb .btn{flex:none;width:100%;}
  #s-preguntas .scroll.pad{container-type:inline-size;}
  #s-preguntas .pm-ctx textarea{min-height:84px;}
  #pm-root{min-width:0;}
}
/* 2 columnas de tarjetas cuando la lista tiene ~760px+ (contenedor ≥1060px con el panel de 280px). */
@container (min-width:1060px){
  #pm-root{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}
  #pm-root > :not(.pm-q){grid-column:1/-1;}
  #pm-root > .pm-tabs{margin-bottom:2px;}
  #pm-root .pm-q{margin-bottom:0;}
  #pm-root .pm-acts{gap:6px;}
  #pm-root .pm-b{padding:0 11px;}
  #pm-root .pm-bmic{padding:0;}
}
@media (prefers-reduced-motion:reduce){.pm-tab,.pm-b,.pm-tec summary::after{transition:none;}}


/* ══ Inicio de sesión, crear cuenta y verificación — rediseño (mockup de OpenCode, ajustado) ══
   Tokens propios: escarlata solo en estas pantallas. El rojo como TEXTO en modo noche se aclara
   (el escarlata sobre #17171A llega a 3.2:1; el texto necesita 4.5:1) y los textos de apoyo usan
   el gris que sí pasa contraste (el #9CA3AF del mockup sobre blanco da 2.5:1). */
#s-login,#s-verify,#s-profile-hub{
  --lg-brand:#C62828; --lg-brand-2:#8E1B1B; --lg-rgb:198,40,40; --lg-brand-tx:#C62828;
  --lg-navy:#1a3160; --lg-ink:#15181D; --lg-muted:#6B7280; --lg-line:#E7E9EE;
  --lg-card:#FFFFFF; --lg-card-2:#F6F7F9; --lg-shadow:0 8px 30px rgba(15,31,61,.08);
  --lg-bg:linear-gradient(180deg,#FFFFFF 0%,#F6F7F9 100%);
  --lg-ease:cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme="dark"] #s-login,:root[data-theme="dark"] #s-verify,:root[data-theme="dark"] #s-profile-hub{
  --lg-brand-tx:#FF6B5E; --lg-navy:#E8ECF4; --lg-ink:#F2F2F4; --lg-muted:#9CA3AF; --lg-line:#2C2C31;
  --lg-card:#17171A; --lg-card-2:#1F1F23; --lg-shadow:0 8px 30px rgba(0,0,0,.45);
  --lg-bg:linear-gradient(180deg,#0B0B0D 0%,#141418 100%);
}
#s-login,#s-verify{background:var(--lg-bg);color:var(--lg-ink);position:relative;}
#s-login.active,#s-verify.active{overflow-x:hidden;}
#s-login .login-logo,#s-verify .login-logo,#s-login .login-card,#s-verify .login-card{position:relative;z-index:1;}
.lg-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.lg-aurora span{position:absolute;border-radius:50%;}
.lg-aurora .a1{width:420px;height:420px;top:-120px;right:-100px;background:radial-gradient(circle,rgba(var(--lg-rgb),.12),transparent 65%);animation:lg-drift 22s ease-in-out infinite;}
.lg-aurora .a2{width:400px;height:400px;bottom:-120px;left:-100px;background:radial-gradient(circle,rgba(45,74,122,.14),transparent 65%);animation:lg-drift 28s ease-in-out infinite reverse;}
@keyframes lg-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-22px)}}
#s-login .login-logo,#s-verify .login-logo{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:26px;}
.lg-badge{width:64px;height:64px;border-radius:16px;background:var(--lg-brand);color:#fff;font-family:'Playfair Display',serif;font-weight:900;font-size:36px;letter-spacing:-1px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(var(--lg-rgb),.3);position:relative;overflow:hidden;}
.lg-badge::after{content:"";position:absolute;top:-20%;left:-60%;width:45%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);animation:lg-shine 3.4s ease-in-out 1.2s 2;}
@keyframes lg-shine{0%{left:-60%}55%,100%{left:160%}}
#s-login .login-rafa,#s-verify .login-rafa{font-size:34px;color:var(--lg-navy);letter-spacing:.5px;line-height:1;}
#s-login .login-hebrew,#s-verify .login-hebrew{font-family:'Hanken Grotesk',sans-serif;font-style:normal;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--lg-muted);margin-top:0;}
#s-login .login-verse{font-size:12px;letter-spacing:.2px;color:var(--lg-muted);margin-top:0;}
#s-login .login-card,#s-verify .login-card{background:var(--lg-card);backdrop-filter:none;border:1px solid var(--lg-line);border-radius:18px;padding:24px;width:100%;max-width:400px;box-shadow:var(--lg-shadow);}
/* pestañas con indicador deslizante */
#s-login .tabs{position:relative;background:var(--lg-card-2);margin-bottom:18px;}
#s-login .tab-ind{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:var(--lg-brand);border-radius:9px;box-shadow:0 4px 12px rgba(var(--lg-rgb),.3);transition:transform .32s var(--lg-ease);}
#s-login .tabs.up .tab-ind{transform:translateX(100%);}
#s-login .tabs button{position:relative;z-index:1;min-height:44px;color:var(--lg-muted);background:none;transition:color 200ms ease;}
#s-login .tabs button.active{background:none;color:#fff;}
#s-login #form-in,#s-login #form-up{animation:lg-rise .32s var(--lg-ease);}
@keyframes lg-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#s-login .err-box{background:rgba(var(--lg-rgb),.08);border:1px solid rgba(var(--lg-rgb),.3);color:var(--lg-brand-tx);}
.lg-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px;background:#fff;border:1px solid var(--lg-line);border-radius:12px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:#1F2937;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform 120ms var(--lg-ease);}
.lg-google:active{transform:scale(.97);}
.lg-divider{display:flex;align-items:center;gap:8px;margin:14px 0;}
.lg-divider::before,.lg-divider::after{content:"";flex:1;height:1px;background:var(--lg-line);}
.lg-divider span{color:var(--lg-muted);font-size:12px;}
#s-login .fg{margin-bottom:13px;}
#s-login .fg label{display:block;font-size:11px;font-weight:600;color:var(--lg-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
#s-login .fg input[type=text],#s-login .fg input[type=email],#s-login .fg input[type=password]{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--lg-line);border-radius:10px;background:var(--lg-card);color:var(--lg-ink);font-family:inherit;font-size:16px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;}
#s-login .fg input::placeholder,#s-login .lg-invite input::placeholder{color:var(--lg-muted);opacity:.85;}
#s-login .fg input:focus,#s-login .lg-invite input:focus{border-color:var(--lg-brand);box-shadow:0 0 0 3px rgba(var(--lg-rgb),.14);}
#s-login .pwd{position:relative;}
#s-login .pwd input{padding-right:52px !important;}
#s-login .pwd-eye-btn{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--lg-muted);cursor:pointer;border-radius:10px;}
#s-login .pwd-eye-btn svg{width:20px;height:20px;}
#s-login .pwd-eye-btn:active{transform:translateY(-50%) scale(.93);}
#s-login .btn-red,#s-verify .btn-red{background:linear-gradient(135deg,var(--lg-brand),var(--lg-brand-2));color:#fff;box-shadow:0 8px 20px rgba(var(--lg-rgb),.3);min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;}
#s-login .btn-red:active,#s-verify .btn-red:active{transform:scale(.97);}
#s-verify .btn-light{color:var(--lg-ink);border-color:var(--lg-line);min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;}
#s-verify .btn svg{width:18px;height:18px;}
#s-login a,#s-verify a{color:var(--lg-navy);}
.lg-msg{font-size:12px;margin-top:4px;color:var(--lg-muted);min-height:0;}
.lg-msg.ok{color:var(--ok-tx);}
#s-login .reg-photo-circle{background:var(--lg-card-2);border:2px dashed var(--lg-line);color:var(--lg-muted);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#s-login .reg-photo-circle svg{width:28px;height:28px;}
#s-login .reg-photo-label{color:var(--lg-muted);}
#s-login .role-card{background:var(--lg-card);border-color:var(--lg-line);min-height:44px;}
#s-login .role-card.sel{border-color:var(--lg-brand);background:rgba(var(--lg-rgb),.06);}
#s-login .role-card .rn{color:var(--lg-navy);}
#s-login .role-card .rd{color:var(--lg-muted);font-size:11px;}
.lg-invite{margin-top:12px;background:var(--lg-card-2);border:1px solid var(--lg-line);border-radius:12px;padding:12px;}
.lg-t{font-size:11px;font-weight:600;color:var(--lg-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;}
.lg-row{display:flex;gap:8px;align-items:center;}
.lg-invite input{flex:1;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--lg-line);border-radius:10px;background:var(--lg-card);color:var(--lg-ink);font-family:inherit;font-size:16px;outline:none;text-transform:uppercase;letter-spacing:2px;text-align:center;}
.lg-qr{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--lg-card);border:1px solid var(--lg-line);border-radius:10px;color:var(--lg-navy);cursor:pointer;}
.lg-qr svg{width:20px;height:20px;}
.lg-consent{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
.lg-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:12.5px;line-height:1.5;color:var(--lg-ink);}
.lg-check .opt{color:var(--lg-muted);}
.lg-hr{height:1px;background:var(--lg-line);margin:2px 0;}
.lg-foot{text-align:center;font-size:11px;color:var(--lg-muted);margin-top:14px;}
.lg-links{margin-top:6px;}
.lg-links a{color:var(--lg-muted);text-decoration:underline;}
.lg-verify{text-align:center;}
.lg-vicon{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(var(--lg-rgb),.08);color:var(--lg-brand-tx);display:flex;align-items:center;justify-content:center;}
.lg-vicon svg{width:28px;height:28px;}
.lg-vt{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--lg-ink);}
.lg-vp{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--lg-muted);}
.lg-vp strong{color:var(--lg-ink);font-size:14px;}
#s-login button:focus-visible,#s-login input:focus-visible,#s-login a:focus-visible,#s-verify button:focus-visible{outline:2px solid var(--lg-brand);outline-offset:2px;}
/* Intro: una vez por sesión del navegador, se salta con un toque (ver lgSplashInit en 05-auth.js) */
.lg-splash{position:fixed;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--lg-bg);text-align:center;}
/* La intro sigue el tema (blanca de día, negra de noche) y cubre toda la ventana (fixed), incluida la
   franja inferior. El arranque de Android usa un solo color fijo (manifest background_color = blanco,
   decisión de Abel 2026-10-02): de día todo es continuo; de noche hay un destello blanco breve. */
.lg-splash.show{display:flex;}
.lg-splash.out{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease;}
.lg-badge-xl{width:120px;height:120px;border-radius:30px;font-size:68px;}
.lg-badge-xl::after{display:none;}
/* Intro solo con el nombre (2026-10-02, pedido de Abel): el logo ya sale en la pantalla de arranque de Android. */
.lg-sw{font-family:'Playfair Display',serif;font-size:clamp(60px,19vw,88px);font-weight:700;color:var(--lg-navy);letter-spacing:1.5px;line-height:1;}
.lg-ss{font-size:clamp(15px,4.6vw,19px);color:var(--lg-muted);letter-spacing:4px;text-transform:uppercase;padding-left:4px;}
.lg-splash.show .lg-badge{animation:lg-pop .7s var(--lg-ease) both;}
.lg-splash.show .lg-sw{animation:lg-word .6s cubic-bezier(.23,1,.32,1) both;}
@keyframes lg-word{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}
.lg-splash.show .lg-ss{animation:lg-up .45s cubic-bezier(.23,1,.32,1) .25s both;}
@keyframes lg-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes lg-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:768px){
  #s-login.active{padding:0;}
  #s-login .login-logo{margin:0 !important;padding:40px;}
  #s-login .lg-badge{width:88px;height:88px;border-radius:22px;font-size:48px;}
  #s-login .login-rafa{font-size:44px;}
}
@media (prefers-reduced-motion:reduce){
  .lg-aurora span,.lg-badge::after{animation:none;}
  #s-login .tab-ind,#s-login #form-in,#s-login #form-up,.lg-splash.show .lg-badge,.lg-splash.show .lg-sw,.lg-splash.show .lg-ss{animation:none;transition:none;}
}

/* Recuperar contraseña, formularios reales, roles con ícono y panel de consentimientos */
.lg-forgot{display:block;margin:6px 0 0 auto;min-height:44px;padding:0 4px;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--lg-brand-tx);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
#s-login .role-card .ri{display:flex;justify-content:center;color:var(--lg-navy);}
#s-login .role-card .ri svg{width:26px;height:26px;}
#s-login .role-card.sel .ri{color:var(--lg-brand-tx);}
#s-login .role-card:focus-visible{outline:2px solid var(--lg-brand);outline-offset:2px;}
.lg-consent{padding:14px;border:1px solid var(--lg-line);border-radius:12px;background:var(--lg-card-2);}
#s-login .doc-lab-check{accent-color:var(--lg-brand);}

/* ── Hub de perfiles (rediseño) ── */
#s-profile-hub{background:var(--lg-bg);color:var(--lg-ink);position:relative;align-items:center;justify-content:flex-start;padding:20px 20px 28px;overflow-y:auto;overflow-x:hidden;}
#s-profile-hub>*:not(.lg-aurora){position:relative;z-index:1;}
.lg-badge-sm{width:44px;height:44px;border-radius:10px;font-size:24px;box-shadow:0 6px 16px rgba(var(--lg-rgb),.28);}
.hub-top{width:100%;max-width:1040px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;z-index:5 !important;}
.hub-brand{display:flex;align-items:center;gap:10px;}
.hub-word{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--lg-navy);letter-spacing:.5px;line-height:1;}
.hub-tag{font-size:10px;color:var(--lg-muted);letter-spacing:2px;text-transform:uppercase;}
.hub-account{position:relative;}
.hub-acc-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--lg-card);background:linear-gradient(135deg,var(--lg-brand),#2D4A7A);color:#fff;box-shadow:var(--lg-shadow);font:inherit;font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;transition:transform 120ms var(--lg-ease);}
.hub-acc-btn:active{transform:scale(.94);}
.hub-acc-btn img,.hm-av img{width:100%;height:100%;object-fit:cover;}
.hub-menu{position:absolute;top:calc(100% + 10px);right:0;width:min(300px,calc(100vw - 32px));background:var(--lg-card);border:1px solid var(--lg-line);border-radius:16px;box-shadow:0 24px 70px rgba(15,31,61,.22);padding:16px;z-index:10;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity 160ms ease-out,transform 160ms cubic-bezier(.23,1,.32,1),visibility 0s linear 160ms;}
.hub-menu.open{visibility:visible;opacity:1;transform:none;transition:opacity 160ms ease-out,transform 160ms cubic-bezier(.23,1,.32,1);}
.hm-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--lg-line);margin-bottom:6px;}
.hm-av{width:48px;height:48px;border-radius:50%;flex-shrink:0;border:0;padding:0;overflow:hidden;background:linear-gradient(135deg,var(--lg-brand),#2D4A7A);color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hm-id{min-width:0;}
.hm-nm{font-weight:700;font-size:14px;color:var(--lg-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-em{font-size:12px;color:var(--lg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-sec{font-size:11px;font-weight:700;color:var(--lg-muted);text-transform:uppercase;letter-spacing:1px;margin:14px 0 8px;}
.hm-seg{display:flex;background:var(--lg-card-2);border-radius:10px;padding:2px;gap:2px;}
.hm-seg button{flex:1;min-height:44px;border:0;background:none;border-radius:8px;font:inherit;font-size:12.5px;font-weight:600;color:var(--lg-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background 150ms ease,color 150ms ease;}
.hm-seg button svg{width:15px;height:15px;}
.hm-seg button[aria-pressed="true"]{background:var(--lg-card);color:var(--lg-ink);box-shadow:0 1px 3px rgba(0,0,0,.1);}
.hm-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;background:none;border:0;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:var(--lg-ink);cursor:pointer;text-align:left;transition:background 150ms ease;}
.hm-item svg{width:18px;height:18px;flex-shrink:0;}
.hm-item .go{margin-left:auto;color:var(--lg-muted);width:16px;height:16px;}
.hm-item.danger{color:var(--lg-brand-tx);}
.hub-menu button:focus-visible,.hub-acc-btn:focus-visible,.hub-card:focus-visible,.hub-cam:focus-visible,.hub-add-card:focus-visible,.hub-enter:focus-visible,.hub-skip:focus-visible{outline:2px solid var(--lg-brand);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.hm-item:hover{background:var(--lg-card-2);}.hub-card:hover{background:var(--lg-card);}.hub-add-card:hover{border-color:var(--lg-brand);background:var(--lg-card);}}
#s-profile-hub .hub-title{font-family:'Playfair Display',serif;font-size:25px;font-weight:700;color:var(--lg-navy);margin:auto 0 4px;letter-spacing:-.3px;line-height:1.2;text-align:center;}
#s-profile-hub .hub-sub{font-size:13px;color:var(--lg-muted);margin-bottom:26px;text-align:center;}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:340px;margin-bottom:28px;}
.hub-wrap{position:relative;display:flex;animation:lg-rise .4s var(--lg-ease) both;animation-delay:calc(min(var(--i,0),6)*45ms);}
.hub-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:18px 8px 14px;border-radius:16px;border:2px solid transparent;transition:transform 120ms var(--lg-ease),border-color 150ms ease,background-color 150ms ease,box-shadow 150ms ease;}
.hub-card:active{transform:scale(.97);}
.hub-card.active-profile{border-color:var(--lg-brand);background:var(--lg-card);box-shadow:var(--lg-shadow);}
.hub-avatar{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;overflow:hidden;position:relative;flex-shrink:0;}
.hub-avatar img{width:100%;height:100%;object-fit:cover;}
.hub-cam{position:absolute;top:72px;left:calc(50% + 12px);width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hub-cam svg{width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:50%;background:var(--lg-brand);color:#fff;border:2px solid var(--lg-card);}
.hub-name{font-size:14px;font-weight:700;color:var(--lg-navy);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;}
.hub-dx{font-size:12px;color:var(--lg-muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;}
.hub-st{font-size:11px;font-weight:700;color:var(--lg-muted);line-height:1.2;}
.hub-card.active-profile .hub-st{color:var(--lg-brand-tx);}
.hub-add-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:18px 8px 14px;border-radius:16px;border:2px dashed var(--lg-line);background:none;font:inherit;transition:transform 120ms var(--lg-ease),background-color 150ms ease,border-color 150ms ease;}
.hub-add-card:active{transform:scale(.97);}
.hub-add-circle{width:96px;height:96px;border-radius:50%;border:2px dashed var(--lg-line);display:flex;align-items:center;justify-content:center;color:var(--lg-muted);}
.hub-add-circle svg{width:32px;height:32px;}
.hub-add-label{font-size:13px;font-weight:600;color:var(--lg-muted);}
#hub-enter-area{width:100%;max-width:340px;margin-bottom:auto;padding-bottom:16px;}
.hub-enter{width:100%;min-height:50px;padding:14px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--lg-brand),var(--lg-brand-2));color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(var(--lg-rgb),.3);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform 120ms var(--lg-ease);}
.hub-enter:active{transform:scale(.97);}
.hub-enter svg{width:18px;height:18px;}
.hub-skip{width:100%;min-height:44px;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--lg-muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.hub-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:10px 0;color:var(--lg-muted);}
.hub-empty svg{width:40px;height:40px;opacity:.7;}
.hub-empty b{color:var(--lg-ink);font-size:15px;}
.hub-empty span{font-size:13px;margin-bottom:8px;}
@media (min-width:640px){.hub-grid{grid-template-columns:repeat(3,1fr);max-width:480px;}}
@media (min-width:900px){.hub-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-width:640px;gap:20px;}}
@media (prefers-reduced-motion:reduce){.hub-wrap{animation:none;}.hub-menu,.hub-menu.open{transition:none;}}

/* Preguntas al médico: dictado de la respuesta */
.pm-bmic{width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.pm-bmic svg{width:20px;height:20px;}
.pm-mic{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:10px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:transform 120ms ease-out,background-color 160ms ease,border-color 160ms ease;}
.pm-mic:active{transform:scale(.98);}
.pm-mic svg{width:20px;height:20px;}
.pm-dot{display:none;width:10px;height:10px;border-radius:50%;background:var(--brand-red);}
.pm-mic.on{border-color:var(--brand-red);background:rgba(var(--brand-red-rgb),.08);color:var(--brand-red-tx);}
.pm-mic.on .pm-dot{display:block;animation:pm-pulse 1.2s ease-in-out infinite;}
.pm-mic.on svg{display:none;}
@keyframes pm-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}}
.pm-mic:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.pm-live{min-height:18px;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--text-muted);}
@media (prefers-reduced-motion:reduce){.pm-mic.on .pm-dot{animation:none;}}

/* ── Interruptor «Tema automático» del menú (verde limón) ── */
.drawer-switch-row{align-items:center;}
.drawer-switch-row .dt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.drawer-switch-row .ds-sub{font-size:11.5px;font-weight:500;color:var(--text-muted);line-height:1.3;white-space:normal;text-align:left;}
.lime-switch{margin-left:auto;flex-shrink:0;position:relative;width:46px;height:28px;border-radius:999px;background:var(--surface-2);border:1.5px solid #8B93A1;transition:background-color .2s ease,border-color .2s ease;}
.ls-thumb{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .22s cubic-bezier(.23,1,.32,1),background-color .2s ease;}
.drawer-switch-row[aria-checked="true"] .lime-switch{background:#84CC16;border-color:#4D7C0F;}
.drawer-switch-row[aria-checked="true"] .ls-thumb{transform:translateX(18px);background:#14181F;}
:root[data-theme="dark"] .lime-switch{border-color:#6B7280;}
:root[data-theme="dark"] .drawer-switch-row[aria-checked="true"] .lime-switch{background:#A3E635;border-color:#A3E635;}
@media (prefers-reduced-motion:reduce){.lime-switch,.ls-thumb{transition:none;}}

/* Punto rojo de mensajes nuevos del chat grupal en el botón «Círculo» (se había perdido en junio al rediseñar la barra). */
.bn-primary{position:relative;}
.bn-dot{position:absolute;top:6px;right:calc(50% - 22px);width:10px;height:10px;border-radius:50%;background:var(--brand-red);border:2px solid var(--surface);}

/* RAFA en el chat grupal: carita del robot despierto en la etiqueta del remitente */
.rafa-tag{display:inline-flex;align-items:center;gap:6px;}
/* Sin círculo de fondo (pedido de Abel): la cabeza blanca se separa del fondo con un contorno fino y una sombra suave. */
.rb-mini{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;}
.rb-mini .rb{width:26px;height:26px;filter:drop-shadow(0 0 .6px rgba(15,23,42,.75)) drop-shadow(0 0 .6px rgba(15,23,42,.75)) drop-shadow(0 1px 2px rgba(15,23,42,.28));}
:root[data-theme="dark"] .rb-mini .rb{filter:drop-shadow(0 0 .5px rgba(255,255,255,.35)) drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.rb-awake .rb .all,.rb-awake .rb .eye{transform:none;}
.rb-awake .rb .mouth{opacity:1;}

/* Videoconsultas todavía no está lista: solo se muestra en staging/local (body.has-staging-banner,
   ver IS_STAGING en 02-state.js). En producción el ítem del menú no aparece (pedido de Abel, 2026-10-02). */
body:not(.has-staging-banner) .drawer-item[data-screen="s-telemedicina"]{display:none;}

/* ══════════════════════════════════════════════════════════════
   Medicamentos — rediseño 2026-10 (mockup aprobado por Abel el 2-oct)
   Prefijo mx-. Vistas «Hoy» (reloj de 24 h + avisos + línea del día +
   por razón necesaria) y «Tratamiento» (tarjetas con Pausar visible).
   ══════════════════════════════════════════════════════════════ */
:root{ --mx-line-2:rgba(20,24,31,.16); --mx-ink:var(--text); --mx-on-ink:#fff; }
:root[data-theme="dark"]{ --mx-line-2:rgba(255,255,255,.18); --mx-on-ink:#0B0B0D; }
.mx-sub{display:block;font-size:11px;font-weight:600;color:var(--text-muted);line-height:1.2}
.mx-sub:empty{display:none}
.ib.mx-add{background:var(--brand-red);color:#fff}
.ib.mx-add:hover{background:var(--brand-red-dark)}
#medicinas-list{container-type:inline-size}
#s-medicinas .num,.mx-t,.mx-pct,.mx-horas,.mx-day b{font-variant-numeric:tabular-nums}

/* Pestañas y periodo con píldora deslizante */
.mx-tabs,.mx-periodo{position:relative;display:flex;background:var(--surface-2);border-radius:14px;padding:3px;isolation:isolate}
.mx-tabs{margin-bottom:12px;max-width:420px}
.mx-tabs button,.mx-periodo button{position:relative;z-index:1;flex:1;border:0;background:none;font-family:inherit;font-weight:700;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:color .2s ease}
.mx-tabs button{min-height:42px;font-size:13.5px;border-radius:11px}
.mx-tabs button svg{width:16px;height:16px}
.mx-tabs button[aria-selected="true"],.mx-periodo button[aria-pressed="true"]{color:var(--text)}
.mx-pill{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:11px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.1);transition:transform .32s var(--ease-out),width .32s var(--ease-out)}
.mx-periodo{display:inline-flex;align-self:flex-start;border-radius:10px}
.mx-periodo button{flex:none;font-size:12.5px;padding:6px 11px;min-height:34px;border-radius:8px}
.mx-periodo .mx-pill{border-radius:8px}

/* Semana */
.mx-weekbar{display:flex;align-items:center;gap:4px;margin-bottom:14px}
.mx-weekbar[hidden]{display:none}
.mx-week{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;min-width:0}
.mx-wk-nav{width:34px;height:44px;border:0;background:transparent;color:var(--text-muted);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative}
.mx-wk-nav:hover{background:var(--surface-2);color:var(--text)}
.mx-wk-nav svg{width:18px;height:18px}
.mx-cal input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.mx-day{border:0;background:transparent;border-radius:13px;padding:6px 0 7px;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--text-muted);font-family:inherit;font-size:11px;font-weight:700;min-height:56px;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.mx-day:active{transform:scale(.95)}
.mx-day b{font-size:15px;color:var(--text);font-weight:800}
.mx-day[aria-current="date"] b{color:var(--brand-red-tx)}
.mx-day.sel{background:var(--mx-ink);color:var(--mx-on-ink)}
.mx-day.sel b{color:var(--mx-on-ink)}
.mx-day.futuro{opacity:.6}
.mx-dot{width:6px;height:6px;border-radius:50%;background:var(--mx-line-2);margin-top:2px}
.mx-dot.ok{background:var(--ok-tx)} .mx-dot.warn{background:var(--warn-tx)} .mx-dot.bad{background:var(--brand-red)}

/* Layout de «Hoy» */
.mx-hoy,.mx-hoy-lado,.mx-hoy-main{display:flex;flex-direction:column;gap:14px;min-width:0}
@container (min-width:760px){
  .mx-hoy{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.9fr);gap:20px;align-items:start}
  .mx-hoy-lado{order:2;position:sticky;top:0}
  .mx-hoy-main{order:1}
  .mx-resumen{grid-template-columns:1fr !important;justify-items:center;text-align:center}
  .mx-resumen-txt{align-items:center}
  .mx-periodo{align-self:center}
  .mx-reloj{width:196px !important;height:196px !important}
  .mx-pct{font-size:40px !important}
}

/* Resumen + reloj */
.mx-resumen-card{padding:0;overflow:hidden}
.mx-resumen{padding:14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.mx-reloj{width:144px;height:144px;position:relative;flex-shrink:0}
.mx-reloj svg{width:100%;height:100%;overflow:visible;display:block}
.mx-reloj-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.mx-pct{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text)}
.mx-pct small{font-size:15px;font-weight:700;margin-left:1px}
.mx-pct-l{font-size:10.5px;color:var(--text-muted);font-weight:700;margin-top:3px}
.mx-arc-track{fill:none;stroke:var(--surface-2);stroke-width:9}
.mx-arc{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease-out),stroke .4s ease}
.mx-tick{stroke:var(--mx-line-2);stroke-width:1.2}
.mx-tick.may{stroke:var(--text-muted);stroke-width:1.6}
.mx-hl{font-size:8px;fill:var(--text-muted);font-weight:700;font-family:'Hanken Grotesk',sans-serif}
.mx-mano{stroke:var(--brand-red);stroke-width:2;stroke-linecap:round}
.mx-mano-p{fill:var(--brand-red)}
.mx-dd{stroke:var(--surface);stroke-width:2;transition:fill .3s ease}
.mx-dd.tomada{fill:var(--ok-tx)} .mx-dd.perdida{fill:var(--brand-red)} .mx-dd.no{fill:var(--text-muted)} .mx-dd.prn{fill:var(--info-tx)}
.mx-dd.pendiente{fill:var(--surface);stroke:var(--text-muted);stroke-width:1.6}
.mx-dd.sig{stroke:var(--brand-red);stroke-width:2}
.mx-pulso{fill:none;stroke:var(--brand-red);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:mxPulso 2.4s var(--ease-out) infinite}
@keyframes mxPulso{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.mx-resumen-txt{display:flex;flex-direction:column;gap:9px;min-width:0}
.mx-resumen-txt h2{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--text);text-wrap:balance}
.mx-resumen-txt p{margin:0;color:var(--text-muted);font-size:13px}
.mx-leyenda{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--text-muted);font-weight:600}
.mx-leyenda span{display:inline-flex;align-items:center;gap:5px}
.mx-leyenda i{width:8px;height:8px;border-radius:50%;display:inline-block}
.mx-leyenda i.hueco{border:1.6px solid var(--text-muted)}
@container (max-width:440px){ .mx-reloj{width:122px;height:122px} .mx-pct{font-size:26px} .mx-resumen{gap:12px;padding:12px} .mx-resumen-txt h2{font-size:15.5px} .mx-periodo button{padding:6px 9px} }
@container (max-width:320px){ .mx-resumen{grid-template-columns:1fr;justify-items:center;text-align:center} .mx-resumen-txt{align-items:center} .mx-periodo{align-self:center} }
.mx-pormed{border-top:1px solid var(--line)}
.mx-pormed summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:13.5px;font-weight:700;color:var(--text);cursor:pointer;min-height:46px}
.mx-pormed summary::-webkit-details-marker{display:none}
.mx-pormed summary svg{width:18px;height:18px;transition:transform .3s var(--ease-out)}
.mx-pormed[open] summary svg{transform:rotate(180deg)}
.mx-bars{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px}
.mx-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 10px;align-items:center}
.mx-bar-n{font-size:13px;font-weight:700;color:var(--text);display:flex;justify-content:space-between;gap:8px;min-width:0}
.mx-bar-n span{color:var(--text-muted);font-weight:600;font-size:11.5px;white-space:nowrap}
.mx-bar-p{grid-row:span 2;text-align:right;font-weight:800;font-size:14px}
.mx-bar-p.ok{color:var(--ok-tx)} .mx-bar-p.warn{color:var(--warn-tx)} .mx-bar-p.bad{color:var(--brand-red-tx)}
.mx-bar{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.mx-bar i{display:block;height:100%;border-radius:4px;transition:width .7s var(--ease-out)}
.mx-bar i.ok{background:var(--ok-tx)} .mx-bar i.warn{background:var(--warn-tx)} .mx-bar i.bad{background:var(--brand-red)}
.mx-link{display:flex;align-items:center;gap:8px;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:12px 14px;font-family:inherit;font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer;min-height:46px}
.mx-link:hover{color:var(--text);background:var(--surface-2)}
.mx-link svg{width:16px;height:16px}

/* Botones */
.mx-btn{border:0;border-radius:10px;min-height:40px;padding:8px 13px;font-family:inherit;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:transform .16s var(--ease-out),background-color .2s ease;white-space:nowrap}
.mx-btn:active{transform:scale(.97)}
.mx-btn svg{width:16px;height:16px}
.mx-btn-ink{background:var(--mx-ink);color:var(--mx-on-ink)}
.mx-btn-soft{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.mx-btn-soft:hover{border-color:var(--mx-line-2)}
.mx-btn-ok{background:var(--ok-bg);color:var(--ok-tx);border:1px solid var(--ok-bd)}

/* Avisos «¿Se tomó?» */
.mx-attn{border:1px solid var(--warn-bd);background:var(--warn-bg);border-radius:18px;padding:12px 14px 4px}
.mx-attn-h{display:flex;align-items:center;gap:8px;color:var(--warn-tx);font-size:13px;font-weight:800}
.mx-attn-h svg{width:18px;height:18px}
.mx-cnt{margin-left:auto;background:var(--warn-tx);color:var(--surface);border-radius:999px;font-size:11px;padding:1px 8px}
.mx-attn-item{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease-out),opacity .22s ease}
.mx-attn-item.saliendo{grid-template-rows:0fr;opacity:0}
.mx-attn-item>div{overflow:hidden;min-height:0}
.mx-attn-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:11px 0;border-top:1px solid var(--warn-bd)}
.mx-attn-item:first-of-type .mx-attn-row{border-top:0}
.mx-attn-w{flex:1;min-width:150px}
.mx-attn-w b{display:block;font-size:14.5px;color:var(--text)}
.mx-attn-w b span{font-weight:600;font-size:12.5px;color:var(--text-muted)}
.mx-attn-w>span{font-size:12.5px;color:var(--warn-tx);font-weight:600}
.mx-attn-acts{display:flex;gap:6px}
.mx-btn-si{background:var(--warn-tx);color:var(--surface)}
.mx-btn-no{background:transparent;border:1px solid var(--warn-bd);color:var(--warn-tx)}

/* Línea del día */
.mx-sec-h{display:flex;align-items:baseline;gap:8px;padding:0 2px}
.mx-sec-h h3{margin:0;font-size:15px;font-weight:800;color:var(--text)}
.mx-sec-h span{margin-left:auto;font-size:12.5px;color:var(--text-muted);font-weight:600}
.mx-tl{list-style:none;margin:0;padding:0;position:relative}
.mx-tl::before{content:"";position:absolute;left:55px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.mx-dose{position:relative;display:grid;grid-template-columns:44px 22px minmax(0,1fr);align-items:center;gap:0 4px;padding:5px 0}
.mx-t{font-size:13px;font-weight:800;text-align:right;padding-right:4px;color:var(--text);display:flex;align-items:center;justify-content:flex-end;gap:2px}
.mx-luna{width:12px !important;height:12px !important;color:var(--purple)}
.mx-node{width:12px;height:12px;border-radius:50%;justify-self:center;background:var(--surface);border:2px solid var(--text-muted);z-index:1;transition:background-color .3s ease,border-color .3s ease}
.mx-dose.tomada .mx-node{background:var(--ok-tx);border-color:var(--ok-tx)}
.mx-dose.perdida .mx-node{background:var(--brand-red);border-color:var(--brand-red)}
.mx-dose.no .mx-node{background:var(--text-muted);border-color:var(--text-muted)}
.mx-dose.prn .mx-node{background:var(--info-tx);border-color:var(--info-tx)}
.mx-body{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 4px 6px 12px;display:flex;align-items:center;gap:2px;min-width:0;margin-left:6px;transition:background-color .3s ease,border-color .3s ease}
.mx-dose.tomada .mx-body{background:color-mix(in srgb,var(--ok-bg) 70%,var(--surface))}
.mx-dose.prn .mx-body{background:color-mix(in srgb,var(--info-bg) 60%,var(--surface))}
.mx-dose.sig .mx-body{border-color:color-mix(in srgb,var(--brand-red) 45%,var(--line));box-shadow:0 0 0 3px rgba(var(--brand-red-rgb),.1)}
.mx-nm{flex:1;min-width:0}
.mx-nm b{display:block;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-dosis{color:var(--text-muted);font-weight:600;font-size:12.5px}
.mx-sig-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-red-tx);background:var(--danger-bg);padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:2px}
.mx-st{display:block;border:0;background:none;padding:0;font-family:inherit;text-align:left;font-size:12px;color:var(--text-muted);font-weight:600}
button.mx-st{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.mx-dose.tomada .mx-st{color:var(--ok-tx)}
.mx-dose.perdida .mx-st{color:var(--brand-red-tx)}
.mx-dose.prn .mx-st{color:var(--info-tx)}
.mx-st em{font-style:normal;color:var(--text-muted);font-weight:500}
.mx-info{width:40px;height:40px;border:0;background:transparent;border-radius:10px;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.mx-info:hover{color:var(--text);background:var(--surface-2)}
.mx-info svg{width:18px;height:18px}
.mx-chk{width:44px;height:44px;border-radius:12px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;cursor:pointer}
.mx-box{width:26px;height:26px;border-radius:8px;border:2px solid var(--mx-line-2);display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,transform .16s var(--ease-out)}
.mx-chk:active .mx-box{transform:scale(.88)}
.mx-box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mx-box path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .28s var(--ease-out) .05s}
.mx-chk[aria-checked="true"] .mx-box{background:var(--ok-tx);border-color:var(--ok-tx)}
.mx-dose.prn .mx-chk[aria-checked="true"] .mx-box{background:var(--info-tx);border-color:var(--info-tx)}
.mx-chk[aria-checked="true"] .mx-box path{stroke-dashoffset:0}
.mx-dose.pop .mx-box{animation:mxPop .42s var(--ease-out)}
@keyframes mxPop{0%{transform:scale(.8)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.mx-ahora{display:grid;grid-template-columns:44px 22px minmax(0,1fr);align-items:center;gap:0 4px;padding:2px 0}
.mx-ahora .mx-t{font-size:11px;color:var(--brand-red-tx)}
.mx-nd{width:8px;height:8px;border-radius:50%;background:var(--brand-red);justify-self:center;z-index:1;box-shadow:0 0 0 4px rgba(var(--brand-red-rgb),.18)}
.mx-ln{height:2px;background:linear-gradient(90deg,var(--brand-red),transparent);margin-left:6px;border-radius:2px}
.mx-historial{display:flex;align-items:center;gap:10px;background:var(--info-bg);color:var(--info-tx);border-radius:14px;padding:8px 8px 8px 12px;font-size:13px;font-weight:700;margin-bottom:14px}
.mx-historial svg{width:18px;height:18px;flex-shrink:0}
.mx-historial span{flex:1;min-width:0;text-transform:capitalize}
.mx-vacio{font-size:13px;color:var(--text-muted);padding:10px 2px}

/* Por razón necesaria */
.mx-prn-sec{padding:14px;display:flex;flex-direction:column;gap:4px}
.mx-prn-sec .mx-sec-h{padding:0 0 6px}
.mx-prn-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.mx-prn-ic{width:38px;height:38px;border-radius:11px;background:var(--info-bg);color:var(--info-tx);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mx-prn-ic svg{width:18px;height:18px}
.mx-prn-w{flex:1;min-width:0}
.mx-prn-w b{display:block;font-size:14.5px;color:var(--text)}
.mx-prn-w b span{font-weight:600;font-size:12.5px;color:var(--text-muted)}
.mx-prn-w>span{display:block;font-size:12.5px;color:var(--text-muted)}
.mx-prn-w>span.espera{color:var(--warn-tx);font-weight:600}
.mx-prn-estado{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--text)}
.mx-prn-estado svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.mx-prn-estado b{display:block}
.mx-prn-estado span{color:var(--text-muted);font-size:12.5px}
.mx-prn-estado.espera{background:var(--warn-bg);color:var(--warn-tx)}
.mx-prn-estado.espera span{color:var(--warn-tx)}
.mx-modal .mx-prn-estado{margin-bottom:12px}

/* Tratamiento */
.mx-meds{display:grid;gap:12px;margin-top:10px}
@container (min-width:640px){ .mx-meds{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (min-width:1080px){ .mx-meds{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mx-med{padding:14px;display:flex;flex-direction:column;gap:11px;margin:0;transition:opacity .3s ease}
.mx-med-h{display:flex;gap:12px;align-items:flex-start}
.mx-med-ic{width:42px;height:42px;border-radius:12px;background:var(--danger-bg);color:var(--brand-red-tx);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mx-med.prn .mx-med-ic{background:var(--info-bg);color:var(--info-tx)}
.mx-med.pausado .mx-med-ic{background:var(--surface-2);color:var(--text-muted)}
.mx-med-ic svg{width:20px;height:20px}
.mx-med-w{flex:1;min-width:0}
.mx-med-w b{display:block;font-size:15.5px;font-weight:800;color:var(--text)}
.mx-med-w span{display:block;font-size:12.5px;color:var(--text-muted);font-weight:600}
.mx-med.pausado .mx-med-w b{color:var(--text-muted)}
.mx-pausa-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:var(--warn-tx);background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:999px;padding:3px 9px;flex-shrink:0}
.mx-pausa-tag svg{width:12px;height:12px}
.mx-pausa-nota{font-size:12.5px;color:var(--warn-tx);background:var(--warn-bg);border-radius:10px;padding:8px 10px}
.mx-horas{display:flex;flex-wrap:wrap;gap:6px}
.mx-horas span{font-size:12.5px;font-weight:800;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.mx-med.pausado .mx-horas span{color:var(--text-muted);text-decoration:line-through}
.mx-como{font-size:12.5px;color:var(--text-muted);display:flex;gap:6px;align-items:flex-start}
.mx-como svg{width:15px;height:15px;margin-top:1px;flex-shrink:0}
.mx-med-acts{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:11px;margin-top:auto}
.mx-med-acts .mx-btn{flex:1 1 auto}
.mx-hold{position:relative;overflow:hidden;color:var(--brand-red-tx) !important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.mx-hold-fill{position:absolute;inset:0;background:var(--brand-red);color:#fff;clip-path:inset(0 100% 0 0);transition:clip-path .2s var(--ease-out);display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none}
.mx-hold.sosteniendo .mx-hold-fill{clip-path:inset(0 0 0 0);transition:clip-path 1.4s linear}
.mx-add-med{border:2px dashed var(--mx-line-2);background:transparent;border-radius:var(--radius);min-height:64px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:800;color:var(--text-muted);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.mx-add-med:hover{border-color:var(--brand-red);color:var(--brand-red-tx)}
.mx-add-med svg{width:18px;height:18px}

/* Hojas (modales) */
.mx-hoja-lead{margin:0 2px 12px;color:var(--text-muted);font-size:13.5px}
.mx-hoja-nota{font-size:12px;color:var(--text-muted);margin:12px 2px 0}
.mx-opciones{display:flex;flex-direction:column;gap:8px}
.mx-opcion{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;min-height:56px;font-family:inherit;color:var(--text);cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .16s var(--ease-out)}
button.mx-opcion:hover{border-color:var(--mx-line-2);background:var(--surface-2)}
button.mx-opcion:active{transform:scale(.98)}
.mx-opcion-otra{cursor:default}
.mx-oi{width:36px;height:36px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mx-oi svg{width:18px;height:18px}
.mx-ow{flex:1;min-width:120px}
.mx-ow b{display:block;font-size:14.5px}
.mx-ow span{display:block;font-size:12.5px;color:var(--text-muted)}
.mx-opcion input[type="time"]{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface-2);color:var(--text);font-family:inherit;font-weight:700;font-size:15px;min-height:40px}
.mx-tool{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.mx-tool:first-of-type{border-top:0;padding-top:0}
.mx-tool h4{margin:0;font-size:14px;font-weight:800;color:var(--text)}
.mx-tool p{margin:0;font-size:12.5px;color:var(--text-muted)}
.mx-tool-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.mx-tool-row .mx-btn{flex:1}

@media (prefers-reduced-motion: reduce){
  .mx-pill,.mx-arc,.mx-bar i,.mx-attn-item,.mx-box,.mx-box path,.mx-hold-fill,.mx-day,.mx-btn{transition:none !important}
  .mx-pulso{display:none}
  .mx-dose.pop .mx-box{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   Directorio médico — búsqueda primero (rediseño 2026-10). Prefijo dr-;
   reutiliza .mx-tabs, .mx-btn, .mx-opcion y .mx-sec-h de Medicamentos.
   ══════════════════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#s-directorio .scroll{container-type:inline-size}
.dr-grid,.dr-side,.dr-main{display:flex;flex-direction:column;gap:14px;min-width:0}
@container (min-width:760px){
  .dr-grid{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);gap:22px;align-items:start}
  .dr-side{position:sticky;top:0}
}
.dr-ask{padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px}
.dr-ask h2{font-family:'Playfair Display',serif;font-weight:700;font-size:26px;line-height:1.12;margin:0;color:var(--text);letter-spacing:-.01em;text-wrap:balance}
.dr-ask h2 em{color:var(--brand-red-tx)}
.dr-ask>p{margin:0;color:var(--text-muted);font-size:13.5px}
.dr-q{position:relative;display:block;border:1.5px solid var(--mx-line-2);border-radius:16px;background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease}
.dr-q:focus-within{border-color:var(--text);box-shadow:0 0 0 4px rgba(20,24,31,.08)}
.dr-q>svg{position:absolute;left:14px;top:15px;width:18px;height:18px;color:var(--text-muted)}
.dr-q textarea{display:block;width:100%;border:0;outline:0;background:transparent;resize:none;padding:13px 40px 13px 42px;font-family:inherit;font-size:16px;line-height:1.4;min-height:74px;font-weight:500;color:var(--text)}
.dr-q textarea::placeholder{color:var(--text-muted);opacity:.8}
.dr-q-x{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.dr-q-x svg{width:16px;height:16px}
.dr-loc{display:flex;gap:8px}
.dr-loc-b{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:1.5px solid var(--mx-line-2);background:var(--surface);border-radius:14px;padding:8px 12px;min-height:52px;text-align:left;font-family:inherit;color:var(--text);cursor:pointer}
.dr-loc-b svg{width:18px;height:18px;flex-shrink:0;color:var(--text-muted)}
.dr-loc-w{flex:1;min-width:0}
.dr-loc-w small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.dr-loc-w b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-pais{display:inline-flex;border:1.5px solid var(--mx-line-2);border-radius:14px;overflow:hidden}
.dr-pais button{border:0;background:var(--surface);padding:0 12px;font-family:inherit;font-size:13px;font-weight:800;color:var(--text-muted);min-width:48px;cursor:pointer}
.dr-pais button[aria-pressed="true"]{background:var(--mx-ink);color:var(--mx-on-ink)}
.dr-go{min-height:52px;font-size:15.5px}
.dr-go svg{width:18px;height:18px;transition:transform .25s var(--ease-out)}
.dr-go:hover svg{transform:translateX(3px)}
.dr-sugs{display:flex;flex-wrap:wrap;gap:6px}
.dr-sug{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:7px 12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);min-height:38px;cursor:pointer;transition:background-color .2s ease,transform .16s var(--ease-out)}
.dr-sug:hover{background:var(--surface)}
.dr-sug:active{transform:scale(.96)}
.dr-sug svg{width:15px;height:15px;color:var(--brand-red-tx)}
.dr-status{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--text-muted);padding:4px 2px}
.dr-sp{width:18px;height:18px;border-radius:50%;border:2px solid var(--mx-line-2);border-top-color:var(--brand-red);animation:drGiro .6s linear infinite;flex-shrink:0;display:inline-block}
@keyframes drGiro{to{transform:rotate(360deg)}}
.dr-brillo{background:linear-gradient(90deg,var(--text-muted) 0%,var(--text-muted) 40%,var(--text) 50%,var(--text-muted) 60%,var(--text-muted) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:drBrillo 1.4s linear infinite}
@keyframes drBrillo{from{background-position:100% 0}to{background-position:-100% 0}}
.dr-skel{padding:16px;display:flex;gap:12px;margin-bottom:10px}
.dr-skel>div{flex:1;display:flex;flex-direction:column;gap:8px}
.dr-skel i{display:block;border-radius:8px;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:drBrillo 1.2s linear infinite}
.dr-urg{border:1.5px solid var(--danger-bd);background:var(--danger-bg);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.dr-urg-h{display:flex;gap:10px;align-items:flex-start;color:var(--danger-tx)}
.dr-urg-h b{display:block;font-size:15px}
.dr-urg-h p{margin:2px 0 0;font-size:13.5px;color:var(--text);line-height:1.45}
.dr-sirena{width:22px;height:22px;flex-shrink:0;color:var(--brand-red-tx);animation:drSirena 2.4s ease-in-out infinite}
@keyframes drSirena{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.dr-urg-acts{display:flex;gap:8px;flex-wrap:wrap}
.dr-urg-acts .dr-btn-rojo{flex:1;background:var(--brand-red);color:#fff;text-decoration:none;min-height:44px}
.dr-urg-acts .mx-btn-soft{min-height:44px}
.dr-entendido{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.dr-ent-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-muted)}
.dr-chip-ed{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--mx-line-2);background:var(--surface-2);border-radius:999px;padding:5px 8px 5px 11px;font-family:inherit;font-size:13.5px;font-weight:800;color:var(--text);min-height:36px;cursor:pointer}
.dr-chip-ed svg{width:15px;height:15px;color:var(--text-muted)}
.dr-chip-ed.esp{background:var(--danger-bg);border-color:transparent;color:var(--brand-red-tx)}
.dr-ent-src{font-size:12px;color:var(--text-muted)}
.dr-ent-src q{font-style:italic}
.dr-resultados+.dr-res-h{margin-top:16px}
.dr-res-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px;margin-bottom:8px;grid-column:1/-1}
.dr-res-h b{font-size:15px;color:var(--text)}
.dr-res-h span{font-size:12px;color:var(--text-muted);font-weight:600;text-align:right}
.dr-filtros{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin-bottom:10px;grid-column:1/-1}
.dr-filtros button{flex-shrink:0;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font-family:inherit;font-size:13px;font-weight:700;color:var(--text-muted);min-height:36px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.dr-filtros button span{opacity:.6}
.dr-filtros button[aria-pressed="true"]{background:var(--mx-ink);border-color:var(--mx-ink);color:var(--mx-on-ink)}
#npi-results,.dr-resultados{display:grid;gap:10px}
#npi-results>:not(.dr-card):not(.dr-resultados){grid-column:1/-1}
@container (min-width:1080px){ .dr-resultados,#npi-results{grid-template-columns:repeat(2,minmax(0,1fr))} .dr-resultados{grid-column:1/-1} }
.dr-card{padding:14px;display:flex;flex-direction:column;gap:11px;margin:0}
.dr-resultados.animar .dr-card{animation:drSube .42s var(--ease-out) both}
@keyframes drSube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dr-card-h{display:flex;gap:12px;align-items:flex-start}
.dr-av{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;background:var(--surface-2);color:var(--text)}
.dr-av.hosp{background:var(--info-bg);color:var(--info-tx)}
.dr-av svg{width:20px;height:20px}
.dr-card-w{flex:1;min-width:0}
.dr-card-w b{display:block;font-size:15px;line-height:1.3;color:var(--text)}
.dr-card-w span{display:block;font-size:12.5px;font-weight:700;color:var(--brand-red-tx);margin-top:1px}
.dr-facts{display:flex;flex-direction:column;gap:6px;font-size:13px}
.dr-facts div{display:flex;gap:8px;align-items:center;color:var(--text-muted);flex-wrap:wrap}
.dr-facts svg{width:15px;height:15px;flex-shrink:0}
.dr-tel{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.dr-copy{border:0;background:var(--surface-2);border-radius:8px;padding:2px 8px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--text-muted);min-height:28px;display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.dr-copy svg{width:13px;height:13px}
.dr-acts{display:flex;gap:6px;flex-wrap:wrap}
.dr-acts .mx-btn{flex:1 1 auto;text-decoration:none}
.dr-pie{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dr-src{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.dr-rep{border:0;background:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--text-muted);display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:6px 0;min-height:32px}
.dr-rep svg{width:14px;height:14px}
.dr-rep:hover{color:var(--text)}
.dr-mas{width:100%;grid-column:1/-1}
.dr-vacio{padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.dr-vacio b{font-size:16px;color:var(--text)}
.dr-vacio p{margin:0;color:var(--text-muted);font-size:13.5px;max-width:40ch}
.dr-vacio .mx-opciones{width:100%;max-width:400px;text-align:left}
.dr-vacio-i{width:52px;height:52px;border-radius:16px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.dr-vacio-i svg{width:22px;height:22px}
.dr-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@container (min-width:520px) and (max-width:759px){ .dr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
.dr-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:13px;text-align:left;min-height:92px;font-family:inherit;color:var(--text);cursor:pointer;transition:border-color .2s ease,transform .16s var(--ease-out),box-shadow .2s ease}
.dr-tile:hover{border-color:var(--mx-line-2);box-shadow:0 6px 18px -10px rgba(0,0,0,.25)}
.dr-tile:active{transform:scale(.97)}
.dr-tile{position:relative}
.dr-tile-fav{position:absolute;top:10px;right:10px;color:#E3A008;display:inline-flex}
.dr-tile-fav svg{width:15px;height:15px;fill:currentColor}
.dr-tile-mas{grid-column:1/-1;flex-direction:row;align-items:center;min-height:56px;border-style:dashed}
.dr-tile-mas b{flex:1}
.dr-tile-mas>span:last-child{margin-top:0}
#dr-esp-listas .dr-ciudad[hidden],#dr-esp-listas .dr-grp[hidden]{display:none}
.dr-tile-i{width:36px;height:36px;border-radius:11px;background:var(--danger-bg);color:var(--brand-red-tx);display:flex;align-items:center;justify-content:center}
.dr-tile-i svg{width:18px;height:18px}
.dr-tile b{font-size:13.5px}
.dr-tile>span:last-child{font-size:12px;color:var(--text-muted);margin-top:-5px}
.dr-embudo-link{border:1px solid var(--line);border-radius:14px;margin-top:10px;background:var(--surface)}
/* Hojas de lugar y especialidad */
.dr-grp{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:14px 4px 6px}
.dr-ciudades{display:flex;flex-direction:column}
.dr-ciudad{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.dr-ciudad[hidden]{display:none}
.dr-ciudad-b{flex:1;display:flex;align-items:baseline;gap:8px;border:0;background:none;text-align:left;padding:12px 6px;min-height:50px;font-family:inherit;color:var(--text);cursor:pointer}
.dr-ciudad-b:hover{background:var(--surface-2)}
.dr-ciudad-b b{font-size:14.5px;font-weight:700}
.dr-ciudad-b span{font-size:12px;color:var(--text-muted)}
.dr-esp-b{align-items:center}
.dr-esp-b svg{width:18px;height:18px;color:var(--brand-red-tx)}
.dr-ciudad.sel .dr-ciudad-b b{color:var(--brand-red-tx)}
.dr-estrella{width:44px;height:44px;border:0;background:none;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.dr-estrella svg{width:18px;height:18px}
.dr-estrella[aria-pressed="true"]{color:#E3A008}
.dr-estrella[aria-pressed="true"] svg{fill:currentColor}
.dr-estrella.rebote svg{animation:mxPop .45s var(--ease-out)}
.dr-lugar-q{margin:2px 0 4px}
/* Hojas con buscador (ciudad, especialidades): altura fija y buscador fijo
   arriba. Antes la hoja se encogía al filtrar y, pegada abajo, el buscador
   bajaba detrás del teclado del celular (reporte de Abel, 2026-10-11). */
.modal.dr-hoja-fija{height:85vh;height:85dvh}
@media (min-width:768px){.modal.dr-hoja-fija{height:min(85vh,720px)}}
.dr-hoja-fija .dr-lugar-q{position:sticky;top:0;z-index:2;box-shadow:0 10px 0 6px var(--bg)}
.dr-lugar-q input{display:block;width:100%;border:0;outline:0;background:transparent;padding:13px 14px 13px 42px;font-family:inherit;font-size:16px;font-weight:500;color:var(--text);min-height:50px}
.dr-lugar-q input::placeholder{color:var(--text-muted);opacity:.8}
.dr-select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-family:inherit;font-size:15px;padding:11px 12px;margin:4px 0 8px;min-height:46px}
.dr-cargando{display:flex;align-items:center;gap:10px;padding:12px 4px;color:var(--text-muted);font-size:13.5px;font-weight:600}
.dr-nota{font-size:13px;color:var(--text-muted);margin:8px 4px}
@media (prefers-reduced-motion: reduce){
  .dr-sirena,.dr-brillo,.dr-skel i,.dr-resultados.animar .dr-card,.dr-estrella.rebote svg{animation:none !important}
  .dr-brillo{color:var(--text-muted);background:none}
}
#dir-head{display:flex;flex-direction:column;gap:12px}
/* Búsqueda en internet: resultados rápidos + barra hasta confirmar */
.dr-web{display:flex;flex-direction:column;gap:10px;grid-column:1/-1}
.dr-web-prog{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.dr-web-prog-t{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--text-muted)}
.dr-web-prog-t .dr-brillo{flex:1}
.dr-web-prog-t b{font-variant-numeric:tabular-nums;color:var(--text);font-size:13px}
.dr-prog{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.dr-prog i{display:block;height:100%;border-radius:inherit;background:var(--brand-red);transition:width .3s ease}
.dr-web-sin{border:1px dashed var(--mx-line-2);border-radius:14px;padding:10px 12px;background:var(--surface)}
.dr-web-sin summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--text-muted);min-height:32px;display:flex;align-items:center}
.dr-web-sin[open] summary{margin-bottom:6px}
.dr-web-item{transition:opacity .3s ease,transform .3s ease}
.dr-web-item.saliendo{opacity:0;transform:scale(.97)}
@media (prefers-reduced-motion: reduce){.dr-prog i,.dr-web-item{transition:none}}
/* Escritorio: mismo ancho que Inicio (la regla general de .scroll lo dejaba en 900 px) */
@media (min-width:1200px){#s-directorio .scroll{padding-left:max(24px,calc((100% - 1180px)/2));padding-right:max(24px,calc((100% - 1180px)/2))}}
#s-directorio .mx-tabs{max-width:380px}
.dr-bienv{display:none}
@container (min-width:760px){
  .dr-bienv{display:flex;flex-direction:column;gap:12px}
  .dr-tiles-anchos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .dr-main:has(#dir-head:not(:empty)) .dr-bienv,.dr-main:has(#npi-results:not(:empty)) .dr-bienv{display:none}
  .dr-bienv-explorar,#dir-grid:has(#dir-tab-explorar:not([hidden])) .dr-bienv-buscar{display:none}
  #dir-grid:has(#dir-tab-explorar:not([hidden])) .dr-bienv-explorar{display:flex}
}
#dir-head:empty{display:none}

/* ══ Tratamientos alternativos v2 — «Lo que dice la ciencia» (P104, mockup plans/rediseno-tratamientos-v2-claude.html) ══ */
/* En escritorio, la regla general de .scroll centra una columna de 900px; esta pantalla tiene
   filtros + tarjetas en dos columnas y usa hasta 1280px (como el Directorio, que usa 1180px). */
@media (min-width:1024px){#s-alternativos .scroll{padding-left:max(24px,calc((100% - 1280px)/2));padding-right:max(24px,calc((100% - 1280px)/2));}}
.ta{--ta-ink:var(--text);--ta-on-ink:var(--surface);--ta-line2:color-mix(in srgb,var(--text) 20%,transparent);display:flex;flex-direction:column;gap:14px;}
.ta-side,.ta-main{display:flex;flex-direction:column;gap:14px;min-width:0;}
.ta-t{margin:0;font-family:'Playfair Display',serif;font-weight:700;font-size:26px;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;color:var(--text);}
.ta-t em{color:var(--brand-red-tx);}
.ta-lead{margin:6px 0 0;font-size:14px;color:var(--text-muted);line-height:1.5;max-width:58ch;}
.ta-who{display:flex;align-items:center;gap:12px;}
.ta-av{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text);flex-shrink:0;}
.ta-who b{display:block;font-size:14.5px;color:var(--text);}
.ta-who span{font-size:13px;color:var(--text-muted);}
.ta-q{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--ta-line2);border-radius:16px;padding:6px 6px 6px 14px;transition:border-color .2s ease,box-shadow .2s ease;}
.ta-q:focus-within{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 10%,transparent);}
.ta-q > svg{width:18px;height:18px;color:var(--text-muted);flex-shrink:0;}
.ta-q input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 16px 'Hanken Grotesk',sans-serif;color:var(--text);padding:8px 0;}
.ta-q input::placeholder{color:var(--text-muted);font-weight:500;}
.ta-btn{border:0;border-radius:12px;min-height:44px;padding:0 16px;font:800 14px 'Hanken Grotesk',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:transform .14s var(--ease-out),background-color .2s ease;color:var(--text);background:var(--surface-2);}
.ta-btn svg{width:17px;height:17px;}
.ta-btn:active{transform:scale(.97);}
.ta-btn:focus-visible,.ta-chip:focus-visible,.ta-sw:focus-visible,.ta-card summary:focus-visible,.ta-legend-d summary:focus-visible,.ta-sin summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.ta-btn-red{background:var(--brand-red);color:#fff;}
.ta-btn-ink{background:var(--ta-ink);color:var(--ta-on-ink);}
.ta-btn-line{background:var(--surface);border:1.5px solid var(--ta-line2);}
.ta-fbar{display:flex;gap:10px;align-items:center;}
.ta-fbar .ta-btn{flex-shrink:0;font-size:13.5px;}
.ta-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:999px;background:var(--brand-red);color:#fff;font-size:11.5px;font-weight:800;padding:0 6px;}
.ta-act{font-size:13px;color:var(--text-muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.ta-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:16px;}
.ta-panel hr{border:0;border-top:1px solid var(--line);margin:0;}
.ta-fp{display:none;}
.ta-fp.open{display:flex;animation:fadeIn .22s var(--ease-out);}
.ta-fset{display:flex;flex-direction:column;gap:8px;}
.ta-fset > b{font-size:13px;font-weight:800;color:var(--text);}
.ta-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ta-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 12px;min-height:44px;font:700 13px 'Hanken Grotesk',sans-serif;color:var(--text);cursor:pointer;transition:background-color .2s ease,color .2s ease;}
.ta-chip svg{width:15px;height:15px;color:var(--text-muted);}
.ta-chip .n{font-weight:600;color:var(--text-muted);}
.ta-chip[aria-pressed="true"]{background:var(--ta-ink);border-color:var(--ta-ink);color:var(--ta-on-ink);}
.ta-chip[aria-pressed="true"] svg,.ta-chip[aria-pressed="true"] .n{color:var(--ta-on-ink);opacity:.8;}
.ta-chip[aria-pressed="true"] .ta-bars i{background:color-mix(in srgb,var(--ta-on-ink) 35%,transparent);}
.ta-chip[aria-pressed="true"] .ta-bars[data-n="1"] i:nth-child(-n+1),.ta-chip[aria-pressed="true"] .ta-bars[data-n="2"] i:nth-child(-n+2),.ta-chip[aria-pressed="true"] .ta-bars[data-n="3"] i:nth-child(-n+3){background:var(--ta-on-ink);}
.ta-chip[aria-pressed="true"] .ta-bars[data-n="0"] i{background:none;border-color:var(--ta-on-ink);}
.ta-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;}
.ta-tx b{display:block;font-size:13.5px;font-weight:800;color:var(--text);}
.ta-tx span{font-size:12.5px;color:var(--text-muted);line-height:1.4;}
.ta-sw{margin-left:auto;width:46px;height:28px;border-radius:999px;background:var(--ta-line2);position:relative;flex-shrink:0;transition:background-color .2s ease;border:0;cursor:pointer;}
.ta-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--ease-out);}
.ta-sw[aria-checked="true"]{background:var(--ta-ink);}
.ta-sw[aria-checked="true"]::after{transform:translateX(18px);background:var(--ta-on-ink);}
.ta-bars{display:inline-flex;gap:3px;flex-shrink:0;}
.ta-bars i{width:16px;height:6px;border-radius:3px;background:var(--ta-line2);}
.ta-bars[data-n="1"] i:nth-child(-n+1),.ta-bars[data-n="2"] i:nth-child(-n+2),.ta-bars[data-n="3"] i:nth-child(-n+3){background:var(--ta-ink);}
.ta-bars[data-n="0"] i{background:none;border:1.5px dashed var(--text-muted);height:7px;box-sizing:border-box;}
.ta-legend-d summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;min-height:44px;color:var(--text);}
.ta-legend-d summary::-webkit-details-marker{display:none;}
.ta-legend-d summary svg{width:16px;height:16px;color:var(--text-muted);}
.ta-legend-d summary svg:last-child{margin-left:auto;transition:transform .25s var(--ease-out);}
.ta-legend-d[open] summary svg:last-child{transform:rotate(180deg);}
.ta-legend{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.ta-row{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;}
.ta-row b{font-size:13px;display:block;color:var(--text);}
.ta-row span{font-size:12.5px;color:var(--text-muted);line-height:1.4;}
/* Los bloques de la pantalla usan display:flex, que le gana al atributo hidden: sin esto la
   barra de avance se quedaba en 100 % con la ruedita girando al terminar la búsqueda. */
#s-alternativos [hidden]{display:none!important;}
.ta-prog{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.ta-prog-l{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--text-muted);}
.ta-prog-l b{margin-left:auto;color:var(--text);font-size:13px;font-variant-numeric:tabular-nums;}
.ta-sp{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand-red);animation:spin .8s linear infinite;flex-shrink:0;}
.ta-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.ta-bar i{display:block;height:100%;width:0;background:var(--brand-red);border-radius:inherit;transition:width .3s ease;}
.ta-sum{font-size:14px;line-height:1.55;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;}
.ta-sum b{font-weight:800;}
.ta-nota{margin:8px 0 0;font-size:13px;color:var(--text-muted);line-height:1.5;}
.ta-res-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.ta-res-h p{margin:0;font-size:14px;font-weight:800;color:var(--text);}
.ta-res-h p span{font-weight:600;color:var(--text-muted);}
.ta-sort{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-muted);}
.ta-sort select{font:700 13px 'Hanken Grotesk',sans-serif;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;min-height:44px;padding:0 8px;}
.ta-list{display:grid;gap:12px;transition:opacity .2s ease;}
.ta-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);min-width:0;}
.ta-card.in{animation:fadeIn .26s var(--ease-out) both;}
.ta-c-h h4{margin:0;font-size:16.5px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere;}
.ta-cat{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--text-muted);margin-top:3px;}
.ta-cat svg{width:14px;height:14px;}
.ta-scale{display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:1.45;color:var(--text);}
.ta-scale .ta-bars{transform:translateY(-1px);}
.ta-scale b{font-weight:800;white-space:nowrap;}
.ta-scale .d{color:var(--text-muted);}
.ta-trial{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--info-tx);background:var(--info-bg);border-radius:999px;padding:4px 10px;}
.ta-trial svg{width:14px;height:14px;}
.ta-dl{display:grid;gap:8px;margin:0;}
.ta-dl div{font-size:14px;line-height:1.5;color:var(--text);}
.ta-dl dt{font-size:12.5px;font-weight:800;color:var(--text-muted);margin-bottom:1px;}
.ta-dl dd{margin:0;overflow-wrap:anywhere;}
.ta-inter{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.45;color:var(--text);}
.ta-inter svg{width:18px;height:18px;color:var(--warn-tx);margin-top:1px;flex-shrink:0;}
.ta-inter b{color:var(--warn-tx);}
.ta-note{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--text-muted);}
.ta-note svg{width:16px;height:16px;margin-top:1px;flex-shrink:0;}
.ta-how{border-top:1px solid var(--line);padding-top:4px;}
.ta-how summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--text-muted);min-height:44px;}
.ta-how summary::-webkit-details-marker{display:none;}
.ta-how summary svg{width:16px;height:16px;transition:transform .25s var(--ease-out);}
.ta-how[open] summary svg{transform:rotate(90deg);}
.ta-how > div{display:flex;flex-direction:column;gap:10px;margin-top:2px;}
.ta-src{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;}
.ta-src > span:first-child{color:var(--text-muted);font-weight:700;}
.ta-src a{color:var(--info-tx);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere;}
.ta-acts{display:flex;gap:8px;flex-wrap:wrap;}
.ta-acts .ta-btn{font-size:13px;padding:0 12px;flex:1 1 auto;}
.ta-ask[aria-pressed="true"]{background:var(--ok-bg);color:var(--ok-tx);border-color:transparent;}
.ta-empty{background:var(--surface);border:1px dashed var(--ta-line2);border-radius:18px;padding:24px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text);}
.ta-empty svg{width:28px;height:28px;color:var(--text-muted);}
.ta-empty b{font-size:15.5px;}
.ta-empty p{margin:0;font-size:13.5px;color:var(--text-muted);max-width:44ch;line-height:1.5;}
.ta-mas,.ta-mas-fin{grid-column:1/-1;}
.ta-mas{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 2px;}
.ta-mas .ta-btn{min-width:240px;}
.ta-mas .ta-btn[disabled]{cursor:progress;opacity:.8;}
.ta-mas > span{font-size:12.5px;color:var(--text-muted);}
.ta-mas-fin{margin:0;padding:10px 4px;text-align:center;font-size:13px;color:var(--text-muted);}
.ta-sin{background:var(--surface-2);border-radius:16px;padding:4px 14px 14px;}
.ta-sin summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:13.5px;font-weight:800;color:var(--text);}
.ta-sin .ta-card{margin-top:10px;opacity:.9;}
.ta-askbar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:12px;background:var(--ta-ink);color:var(--ta-on-ink);border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);animation:fadeIn .26s var(--ease-out);}
.ta-askbar[hidden]{display:none;}
.ta-askbar > svg{width:20px;height:20px;flex-shrink:0;}
.ta-askbar p{flex:1;min-width:0;margin:0;font-size:13.5px;font-weight:700;line-height:1.35;}
.ta-askbar p span{display:block;font-weight:500;opacity:.78;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ta-askbar .ta-btn{background:var(--ta-on-ink);color:var(--ta-ink);flex-shrink:0;font-size:13px;}
.ta-foot{margin:0;font-size:12.5px;color:var(--text-muted);line-height:1.5;display:flex;gap:8px;align-items:flex-start;padding:4px 2px;}
.ta-foot svg{width:16px;height:16px;margin-top:1px;flex-shrink:0;}
@media (min-width:1024px){
  .ta{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start;}
  .ta-side{position:sticky;top:12px;}
  .ta-fbar{display:none;}
  .ta-fp{display:flex;}
}
@media (min-width:1280px){.ta-list{grid-template-columns:repeat(2,minmax(0,1fr));}.ta-list > .ta-empty,.ta-list > .ta-sin{grid-column:1/-1;}}
@media (prefers-reduced-motion:reduce){.ta-card.in,.ta-fp.open,.ta-askbar{animation:none;}.ta-sw,.ta-sw::after,.ta-btn,.ta-bar i,.ta-how summary svg,.ta-legend-d summary svg{transition:none;}}

/* ── Alertas: distribución (P106 paso 2) ──
   Filtros, «Revisar detecciones» y tarjetas comparten el mismo margen lateral. En tablet y
   escritorio los filtros bajan de renglón en vez de cortarse; desde 1200 px las tarjetas van en
   dos columnas. El botón de revisar ya no usa width:100% + margen (se salía por la derecha). */
.al-filtros{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 14px;flex-shrink:0;display:flex;align-items:center;gap:8px;}
.al-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;flex:1;min-width:0;}
.al-revisar{width:auto;margin:10px 14px 0;color:var(--brand-red-tx);flex-shrink:0;}
@media (min-width:768px){
  .al-filtros,#s-alertas .scroll{padding-left:max(24px,calc((100% - 1280px)/2));padding-right:max(24px,calc((100% - 1280px)/2));}
  .al-chips{flex-wrap:wrap;overflow:visible;padding-bottom:0;}
  .al-revisar{margin:12px max(24px,calc((100% - 1280px)/2)) 0;}
}
@media (min-width:1200px){
  #alertas-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;column-gap:14px;align-items:stretch;align-content:start;}
  #alertas-list > :not([data-alert-idx]){grid-column:1/-1;}
  /* Tarjetas del mismo renglón con la misma altura y los botones alineados abajo */
  #alertas-list > [data-alert-idx]{display:flex;flex-direction:column;}
  #alertas-list > [data-alert-idx] > :first-child{flex:1;}
}

/* ── Gráficas: distribución (P106 paso 3) ──
   Hasta 1280px de ancho como las demás pantallas; desde 1200px la lista (por prioridad o por
   sistemas) va en dos columnas y la gráfica de detalle es más alta. */
.graf-chart{height:240px;}
@media (min-width:768px){
  #s-graficas .scroll{padding-left:max(24px,calc((100% - 1280px)/2));padding-right:max(24px,calc((100% - 1280px)/2));}
  .graf-chart{height:320px;}
}
@media (min-width:1200px){
  #graf-param-list[data-vista="prio"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;column-gap:14px;align-items:start;}
  #graf-param-list > *{min-width:0;}
  /* Por sistemas: tarjetas de alto muy distinto → dos columnas tipo periódico, sin huecos */
  #graf-param-list[data-vista="sys"]{columns:2;column-gap:14px;}
  #graf-param-list[data-vista="sys"] > *{break-inside:avoid;}
  .graf-chart{height:400px;}
}

/* Alertas: «⋯» con las acciones ocasionales; contador «N de M» flotante mientras se desplaza */
#s-alertas .topbar-title{min-width:0;}
.al-pos-ancla{position:relative;height:0;flex-shrink:0;}
.al-pos{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--text);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:6px 14px;border-radius:20px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:5;}
.al-pos.visible{opacity:1;}
@media (prefers-reduced-motion:reduce){.al-pos{transition:none;}}
@media (max-width:359px){#s-alertas .topbar-title svg{display:none;}}

/* ── Agenda (Fase B, decisión 13; prototipo plans/prototipo-agenda-claude.html) ──
   Celular: controles arriba, «Te toca» y la vista. Escritorio (≥1200px):
   columna izquierda con mini calendario + «Te toca», la vista a la derecha. */
#s-eventos .topbar{position:relative;}
#s-eventos .topbar .ib{background:transparent;}
#s-eventos .topbar .ib:hover{background:var(--surface-2);}
#ag-filtro-btn.activo::after{content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--brand-red);}
#ag-filtro-btn{position:relative;}
.ag-menu{position:absolute;right:12px;top:calc(100% + 4px);z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:260px;display:none;}
.ag-menu.on{display:block;}
.ag-menu button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;min-height:44px;padding:0 10px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;}
.ag-menu button:hover{background:var(--surface-2);}
.ag-menu svg{width:18px;height:18px;}

.ag-controls{background:var(--surface);padding:8px 12px 10px;border-bottom:1px solid var(--line);flex-shrink:0;}
.ag-zoom{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-2);border-radius:12px;padding:3px;max-width:560px;}
.ag-zoom button{position:relative;z-index:1;border:0;background:none;height:38px;border-radius:9px;font:inherit;font-size:14px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:color .2s;}
.ag-zoom button[aria-selected="true"]{color:var(--text);}
.ag-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/4);background:var(--surface);border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .32s var(--ease-out);}
[data-theme="dark"] .ag-thumb{background:#2A2A30;}
.ag-nav{display:flex;align-items:center;gap:2px;margin-top:8px;}
.ag-nav h2{margin:0 4px;font-size:17px;font-weight:800;letter-spacing:-.2px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.ag-flecha{background:transparent!important;}
.ag-hoy{border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;height:34px;padding:0 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.ag-hoy:disabled{opacity:.45;cursor:default;}
.ag-chips{display:flex;flex-direction:column;gap:8px;padding:10px 0 2px;}
.ag-chips-fila{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.ag-chips[hidden]{display:none;}
.ag-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;height:36px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.ag-chip i{width:9px;height:9px;border-radius:50%;}
.ag-chip.on{background:var(--text);color:var(--bg);border-color:var(--text);}
.ag-colocando{display:none;align-items:center;gap:10px;background:var(--text);color:var(--bg);padding:10px 14px;font-size:13.5px;font-weight:600;flex-shrink:0;}
.ag-colocando.on{display:flex;}
.ag-colocando span{flex:1;}
.ag-colocando svg{width:18px;height:18px;}
.ag-colocando button{border:0;background:rgba(127,127,127,.3);color:inherit;border-radius:9px;height:36px;padding:0 12px;font:inherit;font-weight:700;cursor:pointer;}

.ag-body{display:block;}
.ag-side{display:none;}
.ag-pend{display:flex;flex-direction:column;gap:8px;padding:12px 12px 0;}
.ag-pend:empty{display:none;}
.ag-view{padding:12px 12px 28px;}
.ag-view.entra{animation:agEntra .22s var(--ease-out);}
@keyframes agEntra{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* íconos de tipo y tarjetas */
.ag-ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex-shrink:0;}
.ag-ti svg{width:17px;height:17px;}
.ag-ti.sm{width:26px;height:26px;border-radius:8px;}
.ag-ti.sm svg{width:14px;height:14px;}
.ag-ti.lg{width:44px;height:44px;border-radius:13px;}
.ag-ti.lg svg{width:21px;height:21px;}
.ag-ev{width:100%;text-align:left;display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:13px;padding:10px 12px;cursor:pointer;margin-bottom:6px;font:inherit;}
.ag-ev:hover{background:var(--surface-2);}
.ag-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.ag-t{font-size:14.5px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.ag-m{font-size:12.5px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ag-ev{min-height:64px;}
.ag-ev.off .ag-t,.ag-blk.off .ag-t,.ag-wblk.off b,.ag-pill.off{text-decoration:line-through;}
.ag-ev.off .ag-t{color:var(--text-muted);}
.ag-ev.off .ag-ti{filter:grayscale(1);opacity:.55;}
.ag-tag{font-size:10.5px;font-weight:700;border-radius:8px;padding:3px 6px;line-height:1.15;text-align:center;flex-shrink:0;}
.ag-tag.no{background:var(--surface-2);color:var(--text-muted);}
.ag-tag.pend{background:var(--gold-light);color:var(--gold);}
.ag-btn{min-height:40px;border-radius:11px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;}
.ag-btn svg{width:16px;height:16px;}
.ag-btn.ok{border-color:color-mix(in srgb,var(--green) 45%,transparent);color:var(--green);background:var(--green-light);}
.ag-btn.rojo{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}
.ag-btn.peligro{color:var(--brand-red-tx);}
.ag-link{border:0;background:none;color:var(--text-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:2px;}
.ag-dos{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ag-tres{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.ag-vacio{border:1.5px dashed var(--line);border-radius:13px;padding:14px;color:var(--text-muted);font-size:13.5px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.ag-dia-h{display:flex;align-items:baseline;gap:8px;margin:16px 2px 8px;font-size:14px;font-weight:800;color:var(--text);}
.ag-dia-h span{font-weight:500;color:var(--text-muted);font-size:12.5px;}
.ag-pista{font-size:12.5px;color:var(--text-muted);text-align:center;margin:12px 0 0;}
.ag-libre{border:0;background:none;width:100%;text-align:left;min-height:44px;color:var(--text-muted);font:inherit;font-size:13px;cursor:pointer;border-radius:10px;padding:0 8px;}
.ag-libre:hover{background:var(--surface-2);}

/* «Te toca» */
.ag-ask{background:var(--gold-light);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:14px;padding:12px;}
.ag-ask p{margin:0 0 10px;font-size:14px;line-height:1.4;color:var(--text);}
.ag-ask p span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.ag-revisar{min-height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--brand-red-tx);font:inherit;font-size:14px;font-weight:700;cursor:pointer;width:100%;}
.ag-bandeja{background:var(--surface);border:1px solid var(--line);border-radius:14px;}
.ag-bandeja summary{list-style:none;display:flex;align-items:center;gap:10px;padding:0 12px;min-height:48px;cursor:pointer;font-size:14px;font-weight:700;color:var(--text);}
.ag-bandeja summary::-webkit-details-marker{display:none;}
.ag-bandeja summary svg{width:18px;height:18px;}
.ag-bandeja .n{background:var(--brand-red);color:#fff;border-radius:999px;font-size:11.5px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;}
.ag-bandeja .chev{margin-left:auto;transition:transform .2s;}
.ag-bandeja[open] .chev{transform:rotate(180deg);}
.ag-rec{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-top:1px solid var(--line);}
.ag-rec .ag-t{font-size:14px;}
.ag-rec-acc{display:flex;flex-direction:column;align-items:center;gap:2px;}
.ag-rec-acc .ag-btn{min-height:36px;font-size:12.5px;}

/* Día */
.ag-todo-dia{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.ag-todo-dia>span{font-size:12.5px;color:var(--text-muted);font-weight:600;}
.ag-horas{position:relative;}
.ag-hora{display:grid;grid-template-columns:48px 1fr;height:56px;}
.ag-hora span{font-size:11.5px;color:var(--text-muted);font-weight:600;transform:translateY(-7px);}
.ag-hora:first-child span{transform:none;}
.ag-hora button{border:0;border-top:1px solid var(--line);background:none;cursor:pointer;border-radius:0;}
.ag-hora button:hover{background:var(--surface-2);}
.ag-blk{position:absolute;left:52px;right:2px;border-radius:10px;padding:7px 10px;border:0;text-align:left;cursor:pointer;display:flex;gap:9px;align-items:flex-start;overflow:hidden;color:var(--text);font:inherit;}
.ag-blk .ag-t{font-size:13.5px;line-height:1.2;}
.ag-blk .ag-m{font-size:12px;}
.ag-ahora{position:absolute;left:44px;right:0;height:0;border-top:2px solid var(--brand-red);z-index:2;pointer-events:none;}
.ag-ahora::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--brand-red);}

/* Semana — teléfono */
.ag-wk{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);}
.ag-wk:last-child{border-bottom:0;}
.ag-wk-d{text-align:center;padding-top:4px;display:flex;flex-direction:column;align-items:center;}
.ag-wk-d span{font-size:12px;color:var(--text-muted);font-weight:600;}
.ag-wk-d b{font-size:19px;font-weight:800;width:36px;height:36px;margin-top:2px;display:grid;place-items:center;border-radius:50%;color:var(--text);}
.ag-wk.hoy .ag-wk-d b{background:var(--brand-red);color:#fff;}
.ag-wk.hoy .ag-wk-d span{color:var(--brand-red-tx);}
.ag-wk .ag-ev{margin-bottom:4px;}

/* Semana — rejilla (≥900px) */
.ag-wg{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));}
.ag-wg-head{position:sticky;top:0;z-index:3;background:var(--bg);padding:6px 0 8px;text-align:center;border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:center;}
.ag-wg-head span{font-size:12px;font-weight:600;color:var(--text-muted);}
.ag-wg-head b{font-size:20px;font-weight:800;width:38px;height:38px;margin-top:2px;display:grid;place-items:center;border-radius:50%;color:var(--text);}
.ag-wg-head.hoy b{background:var(--brand-red);color:#fff;}
.ag-wg-head.hoy span{color:var(--brand-red-tx);}
.ag-wg-lbl{font-size:11.5px;color:var(--text-muted);font-weight:600;text-align:right;padding:9px 8px 0 0;border-bottom:1px solid var(--line);}
.ag-wg-ad{border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:4px 3px;min-height:32px;}
.ag-wg-horas div{height:48px;font-size:11.5px;color:var(--text-muted);font-weight:600;text-align:right;padding-right:8px;transform:translateY(-7px);}
.ag-wg-horas div:first-child{transform:none;padding-top:2px;}
.ag-wg-col{position:relative;border-left:1px solid var(--line);}
.ag-wg-col>button{height:48px;border:0;border-top:1px solid var(--line);display:block;width:100%;background:none;cursor:pointer;}
.ag-wg-col>button:hover{background:var(--surface-2);}
.ag-wg-col.hoy{background:color-mix(in srgb,var(--brand-red) 4%,transparent);}
.ag-wblk{position:absolute;left:3px;right:3px;border-radius:8px;padding:5px 7px;border:0;text-align:left;cursor:pointer;font:inherit;font-size:12px;line-height:1.2;color:var(--text);overflow:hidden;}
.ag-wblk b{display:block;font-size:12.5px;}
.ag-pill{display:block;width:100%;border:0;text-align:left;border-radius:6px;padding:3px 6px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);margin-bottom:2px;}

/* Mes */
.ag-mg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
.ag-dow{font-size:12px;font-weight:700;color:var(--text-muted);text-align:center;padding:2px 0 6px;}
.ag-md{border:0;background:none;color:var(--text);height:48px;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:15px;font-weight:700;min-width:0;}
.ag-md:hover{background:var(--surface-2);}
.ag-md.fuera{color:var(--text-muted);opacity:.45;}
.ag-md .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;}
.ag-md.hoy .n{background:var(--brand-red);color:#fff;}
.ag-md.sel{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--text);}
.ag-md .pts{display:flex;gap:3px;height:6px;}
.ag-md .pts i{width:6px;height:6px;border-radius:50%;}
.ag-md .pts i.pas{opacity:.45;}
.ag-md .pills{display:none;}
.ag-sel{margin-top:4px;}
.ag-mg.mini{gap:0;}
.ag-mg.mini .ag-dow{font-size:11px;padding:2px 0 4px;}
.ag-mg.mini .ag-md{height:34px;font-size:12.5px;gap:1px;border-radius:9px;}
.ag-mg.mini .ag-md .n{width:26px;height:26px;}
.ag-mg.mini .ag-md .pts{height:4px;}
.ag-mg.mini .ag-md .pts i{width:4px;height:4px;}

/* Año — línea de tiempo vertical */
.ag-anio-res{font-size:13.5px;color:var(--text-muted);margin:2px 2px 14px;}
.ag-anio-res b{color:var(--text);}
.ag-tl{max-width:760px;}
.ag-tl-m{display:grid;grid-template-columns:52px 1fr;}
.ag-tl-ml{font-size:13px;font-weight:800;padding-top:10px;color:var(--text);}
.ag-tl-m.fut .ag-tl-ml{color:var(--text-muted);}
.ag-tl-items{position:relative;padding:6px 0 10px 22px;border-left:2px solid var(--line);}
.ag-tl-m.fut .ag-tl-items{border-left-style:dashed;}
.ag-tl-m.quieto .ag-tl-items{padding-top:10px;padding-bottom:12px;}
.ag-tl-m.quieto .ag-tl-ml,.ag-tl-m.quieto .ag-tl-items span{color:var(--text-muted);font-weight:600;font-size:13px;}
.ag-tl-it{position:relative;}
.ag-tl-it::before{content:"";position:absolute;left:-29px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--bg);}
.ag-tl-it.fut::before{background:var(--bg);border:2px solid var(--c);box-sizing:border-box;}
.ag-dcol{display:flex;flex-direction:column;align-items:center;gap:4px;width:28px;flex-shrink:0;}
.ag-dcol b{font-size:16px;font-weight:800;line-height:1;}
.ag-tl-hoy{position:relative;margin:4px 0 10px;display:flex;align-items:center;gap:8px;color:var(--brand-red-tx);font-size:12.5px;font-weight:800;}
.ag-tl-hoy::before{content:"";position:absolute;left:-30px;width:14px;height:14px;border-radius:50%;background:var(--brand-red);box-shadow:0 0 0 4px rgba(var(--brand-red-rgb),.18);}
.ag-tl-hoy::after{content:"";flex:1;border-top:2px solid var(--brand-red);}
.ag-anio-ant{margin:6px 0 0 52px;}

/* Detalle (m-ev-detalle) */
.ag-det-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.ag-det-head h3{margin:0;font-size:18px;font-weight:800;line-height:1.25;color:var(--text);}
.ag-det-sub{font-size:13px;color:var(--text-muted);margin-top:3px;}
.ag-datos{display:flex;flex-direction:column;gap:10px;margin:0 0 14px;padding:12px;border-radius:14px;background:var(--surface-2);}
.ag-dato{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);line-height:1.4;}
.ag-dato svg{color:var(--text-muted);width:17px;height:17px;flex-shrink:0;margin-top:1px;}
#ag-detalle .ag-dos{margin-bottom:8px;}
.ag-ancho{width:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:6px;}

@media (min-width:768px){
  #s-eventos .ag-controls{padding-left:max(16px,calc((100% - 1400px)/2));padding-right:max(16px,calc((100% - 1400px)/2));}
  #s-eventos .ag-body{padding-left:max(0px,calc((100% - 1400px)/2));padding-right:max(0px,calc((100% - 1400px)/2));}
  #s-eventos .ag-view,#s-eventos .ag-pend{padding-left:16px;padding-right:16px;}
  .ag-md{height:56px;}
}
@media (min-width:1200px){
  #s-eventos .ag-body{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start;}
  .ag-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:0;max-height:calc(100dvh - 160px);overflow-y:auto;padding:16px;border-right:1px solid var(--line);}
  .ag-mini-h{font-size:14px;font-weight:800;margin-bottom:6px;color:var(--text);}
  .ag-side-toca{display:flex;flex-direction:column;gap:8px;}
  .ag-side-toca:empty{display:none;}
  #s-eventos .ag-view{padding:16px 20px 32px;}
  #s-eventos .ag-mg:not(.mini){gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);}
  #s-eventos .ag-mg:not(.mini) .ag-dow{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;}
  #s-eventos .ag-mg:not(.mini) .ag-md{height:112px;border-radius:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:flex-start;align-items:stretch;padding:6px;gap:3px;font-size:13px;}
  #s-eventos .ag-mg:not(.mini) .ag-md .n{align-self:flex-start;width:26px;height:26px;}
  #s-eventos .ag-mg:not(.mini) .ag-md .pts{display:none;}
  #s-eventos .ag-mg:not(.mini) .ag-md .pills{display:block;}
  .ag-mas{font-size:11.5px;font-weight:700;color:var(--text-muted);padding-left:6px;}
}
@media (prefers-reduced-motion:reduce){.ag-thumb,.ag-bandeja .chev{transition:none;}.ag-view.entra{animation:none;}}

/* ── Chat con RAFA: propuestas para registrar (P108) ── */
.rafa-prop{display:flex;flex-direction:column;gap:8px;align-self:flex-start;max-width:min(520px,92%);margin-top:8px;}
.rp-item{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--info-tx);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--text);}
.rp-tit{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:4px;}
.rp-cuerpo{line-height:1.5;}
.rp-notas{font-size:12px;color:var(--text-muted);margin-top:2px;}
.rp-alerta{font-size:12px;color:var(--text-muted);margin-bottom:2px;}
.rp-btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.rp-btns button{min-height:44px;padding:0 16px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.rp-si{background:var(--navy);color:#fff;border:1px solid var(--navy);}
.rp-no{background:transparent;color:var(--text-muted);border:1px solid var(--line);}
.rp-btns button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.rp-estado{font-size:12px;font-weight:700;margin-top:6px;color:var(--ok-tx);}
.rp-st-no .rp-estado{color:var(--text-muted);font-weight:600;}
/* Oferta «Agregar a Medicamentos» bajo un evento de medicamento/suplemento */
.rp-med{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text);line-height:1.4;}
.rp-med .rp-si{display:block;margin-top:8px;min-height:44px;padding:0 16px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.rp-med .rp-si:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.rp-med-ok{color:var(--ok-tx);font-weight:700;}
.rp-st-ok{border-left-color:var(--ok-tx);}
.rp-st-no{opacity:.75;}
.rp-err-tx{color:var(--danger-tx);}

/* ── Limpieza inteligente de repetidos (P109) ── */
#limp-aplicar[hidden]{display:none!important;}
.limp-cargando,.limp-vacio{text-align:center;padding:28px 12px;color:var(--text-muted);font-size:13px;line-height:1.5;}
.limp-resumen{background:var(--info-bg);color:var(--text);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.5;}
.limp-sec{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px;}
.limp-grupo{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:8px;background:var(--surface);}
.limp-keep{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:13px;color:var(--text);padding:4px 0 8px;border-bottom:1px solid var(--line);}
.limp-fila{display:flex;gap:10px;align-items:flex-start;padding:8px 0;min-height:44px;cursor:pointer;border-bottom:1px solid var(--line);}
.limp-fila:last-child{border-bottom:none;}
.limp-fila input{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:var(--brand-red);}
.limp-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.limp-desc{font-size:13px;color:var(--text);overflow-wrap:anywhere;}
.limp-meta{font-size:11px;color:var(--text-muted);}
.limp-nota{font-size:12px;color:var(--text);font-style:italic;}
.limp-tag{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:8px;background:var(--surface-2);color:var(--text-muted);}
.limp-ok{background:var(--ok-bg);color:var(--ok-tx);}
.limp-seg{background:var(--info-bg);color:var(--info-tx);}
.limp-sv{background:var(--warn-bg);color:var(--warn-tx);}
.limp-diag{font-size:11px;color:var(--text-muted);margin-top:8px;text-align:right;}
.limp-pie{font-size:12px;color:var(--text-muted);margin-top:10px;line-height:1.5;}

/* Barras de desplazamiento ocultas en toda la app (Abel, 2026-10-13: «rompen la armonía del
   diseño»). Mismo criterio que ya usaban el menú lateral, los filtros y el hub de perfiles.
   Se sigue desplazando igual con rueda, trackpad, teclado o dedo; solo se oculta la barra. */
*{scrollbar-width:none;-ms-overflow-style:none;}
*::-webkit-scrollbar{display:none;width:0;height:0;}


/* Chat grupal: sugerencias compartidas (P110) */
#chat-group-messages .rafa-prop{max-width:min(520px,82%);}
.rp-espera{color:var(--text-muted);font-weight:600;}
.grp-aj-intro{font-size:13px;color:var(--text-muted);line-height:1.5;margin:0 0 12px;}
.grp-aj-op{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;min-height:44px;}
.grp-aj-op input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand-red);flex-shrink:0;}
.grp-aj-op span{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--text);}
.grp-aj-op small{font-size:12px;color:var(--text-muted);}
.grp-aj-nota{font-size:12px;color:var(--text-muted);margin:6px 0 0;}
#grp-aj-guardar[hidden]{display:none!important;}

#reex-guardar[hidden]{display:none!important;}

/* ── Gráfica en grande de un parámetro (hoja m-param-chart, rediseño «Mis métricas» 2026-10) ──
   Una sola tipografía (Hanken): el título no usa Playfair. */
#m-param-chart .modal{container-type:inline-size;}
@media (min-width:768px){#m-param-chart .modal{width:min(760px,92vw) !important;}}
.pc-title{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--text);}
.pc-x{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);cursor:pointer;}
.pc-x svg{width:18px;height:18px;}
.pc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.pc-seg{display:inline-flex;gap:2px;max-width:100%;overflow-x:auto;padding:3px;border-radius:12px;background:var(--surface-2);}
.pc-seg button{min-width:44px;min-height:36px;padding:0 10px;border:0;border-radius:9px;background:none;font:inherit;font-size:12.5px;font-weight:800;color:var(--text-muted);cursor:pointer;transition:background-color .2s ease,color .2s ease;}
.pc-seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1);}
.pc-seg button:disabled{opacity:.38;cursor:not-allowed;}
.pc-info{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-left:auto;padding:0 12px;border:0;border-radius:999px;background:var(--surface-2);color:var(--text);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;}
.pc-info svg{width:15px;height:15px;}
.pc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0;}
.pc-stats div{padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.pc-stats span{display:block;font-size:11.5px;font-weight:700;color:var(--text-muted);}
.pc-stats b{font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.pc-table{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);}
.pc-table .lab-table{margin:0;}
.pc-table .lab-table th{position:sticky;top:0;background:var(--surface);color:var(--text-muted);border-bottom:1px solid var(--line);}
.pc-table td{font-variant-numeric:tabular-nums;}
.pc-st{font-weight:800;} .pc-st.ok{color:var(--ok-tx);} .pc-st.warn{color:var(--warn-tx);} .pc-st.crit{color:var(--danger-tx);}
.pc-src{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--text-muted);}
.pc-del{display:grid;place-items:center;width:40px;height:40px;margin:-8px 0;border:0;border-radius:10px;background:none;color:var(--text-muted);cursor:pointer;}
.pc-del svg{width:16px;height:16px;}
.pc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.pc-acts .btn{display:inline-flex;flex:1 1 160px;align-items:center;justify-content:center;gap:7px;min-height:44px;}
.pc-acts .btn svg,.pc-share svg{width:16px;height:16px;}
.pc-insight{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13.5px;line-height:1.6;color:var(--text);}
.pc-insight-h{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12.5px;font-weight:800;color:var(--text-muted);}
.pc-insight-h svg{width:15px;height:15px;color:var(--brand-red-tx);}
.pc-fine{margin-top:8px;font-size:12px;color:var(--text-muted);}
.pc-share{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;}
@container (max-width:420px){.pc-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.pc-src{display:none;}}

/* ── «Mis métricas» (33-metricas.js, rediseño 2026-10; mockup plans/rediseno-mis-metricas-v4-claude.html) ──
   Una sola tipografía (Hanken): jerarquía con tamaño y peso. Escritorio: columna + riel desde 1024px. */
:root{--mm-hero-a:#F4F5F7;--mm-hero-b:#DFE2E8;--mm-hero-glow:rgba(255,255,255,.85);--mm-hero-chip:rgba(255,255,255,.7);--mm-hero-grid:rgba(20,24,31,.09);}
:root[data-theme="dark"]{--mm-hero-a:#2B2D34;--mm-hero-b:#1A1B20;--mm-hero-glow:rgba(255,255,255,.06);--mm-hero-chip:rgba(255,255,255,.08);--mm-hero-grid:rgba(255,255,255,.08);}
.btn-ink{background:var(--text);color:var(--bg);}
.btn-ink:active{transform:scale(.97);}
.mm-title{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:0;}
.mm-title small{font-size:12px;font-weight:600;color:var(--text-muted);}
#s-graficas .scroll{container-type:inline-size;}
.mm{display:flex;flex-direction:column;gap:16px;}
.mm-col{display:contents;}
#mm-alert{order:1}#mm-hero{order:2}#mm-comp{order:3}#mm-rafa{order:4}#mm-met{order:5}#mm-sys{order:6}
@container (min-width:860px){
  .mm{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;}
  .mm-col{display:flex;flex-direction:column;gap:18px;min-width:0;}
  .mm-rail{position:sticky;top:8px;}
}
.mm-sec{display:flex;flex-direction:column;gap:10px;min-width:0;container-type:inline-size;}
.mm-sec .sys-h{margin:0;}
.mm-h{margin:0;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--text-muted);}
.mm-sec-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mm-fine{margin:0;font-size:12px;line-height:1.45;color:var(--text-muted);}
.mm-sec .sys-grid{margin:0;}
/* aviso crítico */
.mm-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--brand-red);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);}
.mm-alert-ic{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--danger-bg);color:var(--danger-tx);}
.mm-alert-ic svg{width:20px;height:20px;}
.mm-alert-tx{flex:1;min-width:0;}
.mm-alert .t{margin:0;font-size:15px;font-weight:800;line-height:1.3;color:var(--text);}
.mm-alert .s{margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--text-muted);}
.mm-alert-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.mm-alert-acts .btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;}
.mm-alert-acts svg{width:16px;height:16px;}
/* métrica destacada: degradado gris según el tema; la línea cambia de color según la tendencia */
.mm-hero{--mm-c:var(--text);position:relative;overflow:hidden;padding:18px 18px 14px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(90% 70% at 0% 0%,var(--mm-hero-glow),transparent 60%),linear-gradient(160deg,var(--mm-hero-a),var(--mm-hero-b));box-shadow:var(--shadow-sm);color:var(--text);isolation:isolate;}
.mm-hero[data-tono="good"]{--mm-c:var(--ok-tx);}
.mm-hero[data-tono="bad"]{--mm-c:var(--danger-tx);}
.mm-swap{animation:mmSwap .26s cubic-bezier(.23,1,.32,1);}
@keyframes mmSwap{from{opacity:.2;filter:blur(3px)}to{opacity:1;filter:none}}
.mm-hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mm-hero-lab{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.25;color:var(--text-muted);}
.mm-hero-lab b{display:block;font-size:14.5px;font-weight:800;color:var(--text);}
.mm-hero-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--mm-hero-chip);color:var(--text);}
.mm-hero-ic svg{width:18px;height:18px;}
.mm-chip-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-left:auto;padding:0 12px;border:0;border-radius:999px;background:var(--mm-hero-chip);color:var(--text);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:transform .14s cubic-bezier(.23,1,.32,1);}
.mm-chip-btn:active{transform:scale(.97);}
.mm-chip-btn svg{width:14px;height:14px;color:#D97706;fill:#F59E0B;}
.mm-hero-num{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:14px;}
.mm-big{font-size:52px;font-weight:800;line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
.mm-big small{margin-left:6px;font-size:16px;font-weight:600;letter-spacing:0;color:var(--text-muted);}
.mm-hero-dl{display:flex;flex-direction:column;gap:6px;padding-bottom:4px;}
.mm-dchip{display:inline-flex;align-items:center;gap:6px;width:fit-content;min-height:28px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:800;}
.mm-dchip svg{width:14px;height:14px;}
.mm-dchip.good{background:var(--ok-bg);color:var(--ok-tx);} .mm-dchip.bad{background:var(--danger-bg);color:var(--danger-tx);} .mm-dchip.flat{background:var(--mm-hero-chip);color:var(--text-muted);}
.mm-dsub{font-size:12.5px;color:var(--text-muted);}
.mm-hero-ch{height:180px;margin:10px -4px 0;}
@container (min-width:960px){.mm-hero-ch{height:220px;}.mm-big{font-size:60px;}}
.mm-evlist{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px;font-size:12.5px;color:var(--text-muted);}
.mm-evlist[hidden]{display:none;}
.mm-evlist>span{display:inline-flex;align-items:flex-start;gap:6px;min-width:0;max-width:100%;}
.mm-ev-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mm-ev-tx b{font-weight:700;color:var(--text);}
.mm-ev-all{min-height:32px;padding:0 4px;border:0;background:none;color:var(--text);font:inherit;font-size:12.5px;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.mm-evlist i{flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--text-muted);color:var(--mm-hero-a);font-size:10px;font-style:normal;font-weight:800;}
.mm-hero-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--text-muted);}
.mm-tono{display:inline-flex;align-items:center;gap:6px;font-weight:700;}
.mm-tono i{width:10px;height:3px;border-radius:2px;background:var(--mm-c);}
.mm-src{display:inline-flex;align-items:center;gap:6px;}
.mm-src svg{width:14px;height:14px;}
.mm-sp{flex:1;}
.mm-seg{background:var(--mm-hero-chip);}
/* resumen de RAFA */
.mm-rafa{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);}
.mm-rafa-h{display:flex;align-items:center;gap:10px;}
.mm-rafa-h b{display:block;font-size:14.5px;font-weight:800;color:var(--text);}
.mm-rafa-h span{font-size:12.5px;color:var(--text-muted);}
.mm-rafa-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--surface-2);color:var(--brand-red-tx);}
.mm-rafa-ic svg{width:18px;height:18px;}
.mm-lead{margin:0;font-size:18px;font-weight:800;line-height:1.35;letter-spacing:-.015em;color:var(--text);text-wrap:pretty;}
.mm-lead em{font-style:normal;color:var(--brand-red-tx);}
.mm-facts{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;}
.mm-facts li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--text);}
.mm-fd{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;border-radius:7px;}
.mm-fd svg{width:13px;height:13px;}
.mm-fd.ok{background:var(--ok-bg);color:var(--ok-tx);} .mm-fd.warn{background:var(--warn-bg);color:var(--warn-tx);} .mm-fd.crit{background:var(--danger-bg);color:var(--danger-tx);}
.mm-ask{min-height:44px;}
.mm-ask svg{width:16px;height:16px;}
/* mosaicos de métricas */
.mm-edit{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background-color .2s ease,color .2s ease;}
.mm-edit svg{width:15px;height:15px;}
.mm-edit[aria-pressed="true"]{background:var(--text);color:var(--bg);}
.mm-edit-tip{margin:0;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:12.5px;line-height:1.45;color:var(--text-muted);}
.mm-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@container (min-width:560px) and (max-width:959px){.mm-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}}
.mm-tile{display:flex;flex-direction:column;min-height:132px;padding:13px 13px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .2s ease,opacity .2s ease;}
.mm-tile:active{transform:scale(.98);}
@media (hover:hover) and (pointer:fine){.mm-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}}
.mm-tile.off{opacity:.45;}
.mm-tile-h{display:flex;align-items:center;gap:8px;min-width:0;}
.mm-tile-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;}
.mm-tile-ic{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:9px;background:var(--surface-2);}
.mm-tile-ic svg{width:16px;height:16px;}
.mm-dot{width:8px;height:8px;flex-shrink:0;margin-left:auto;border-radius:50%;background:var(--text-muted);}
.mm-dot.ok{background:var(--ok-tx);} .mm-dot.warn{background:var(--warn-tx);} .mm-dot.crit{background:var(--danger-tx);}
.mm-tile-v{margin-top:10px;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.mm-tile-v small{margin-left:3px;font-size:12px;font-weight:600;letter-spacing:0;color:var(--text-muted);}
.mm-delta{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:12px;font-weight:700;color:var(--text-muted);}
.mm-delta svg{width:14px;height:14px;}
.mm-delta.good{color:var(--ok-tx);} .mm-delta.bad{color:var(--danger-tx);}
.mm-suf{margin-left:4px;font-weight:600;color:var(--text-muted);}
.mm-spark{display:block;width:100%;height:30px;margin-top:auto;padding-top:6px;overflow:visible;color:var(--ok-tx);}
.mm-tile.st-warn .mm-spark{color:var(--warn-tx);} .mm-tile.st-crit .mm-spark{color:var(--danger-tx);} .mm-tile.st-none .mm-spark{color:var(--text-muted);}
.mm-spark .area{fill:currentColor;opacity:.12;} .mm-spark .line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .mm-spark .dot{fill:currentColor;}
.mm-tile-src{margin-top:4px;font-size:11.5px;color:var(--text-muted);}
.mm-editing .mm-spark,.mm-editing .mm-tile-src{display:none;}
.mm-tile-ed{display:flex;gap:6px;margin-top:8px;}
.mm-tile-ed button{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:5px;min-height:40px;border:0;border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;}
.mm-tile-ed svg{width:15px;height:15px;}
.mm-tile-ed .star[aria-pressed="true"]{background:#FEF3C7;color:#92400E;}
.mm-tile-ed .star[aria-pressed="true"] svg{fill:currentColor;}
:root[data-theme="dark"] .mm-tile-ed .star[aria-pressed="true"]{background:rgba(251,191,36,.16);color:#FCD34D;}
/* sin datos */
.mm-empty{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:460px;margin:24px auto;padding:24px 18px;border:1px dashed var(--line);border-radius:18px;text-align:center;}
.mm-empty b{font-size:16px;color:var(--text);}
.mm-empty p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-muted);}
.mm-empty-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--surface-2);color:var(--text-muted);}
.mm-empty .btn{width:auto;display:inline-flex;gap:7px;padding:12px 18px;}
.mm-empty .btn svg{width:16px;height:16px;}
@media (prefers-reduced-motion:reduce){.mm-swap{animation:none;}.mm-tile,.mm-chip-btn{transition:none;}}

/* ── Mis métricas · composición corporal e importación de báscula (33-metricas.js) ── */
:root{--c-fat:#B45309;--c-lean:#2563EB;--c-water:#0E7490;--c-bone:#64748B;}
:root[data-theme="dark"]{--c-fat:#F59E0B;--c-lean:#60A5FA;--c-water:#22D3EE;--c-bone:#94A3B8;}
.mm-empty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.bio-empty{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px dashed var(--line);border-radius:18px;background:var(--surface);}
.bio-empty b{font-size:15px;color:var(--text);}
.bio-empty p{margin:4px 0 10px;font-size:13px;line-height:1.5;color:var(--text-muted);}
.bio-empty .btn,.bio-acts .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;min-height:44px;padding:0 16px;}
.bio-empty .btn svg,.bio-acts .btn svg{width:16px;height:16px;}
.bio-card{display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);}
.bio-top{display:grid;gap:14px;}
@container (min-width:620px){.bio-top{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;}}
.bio-lost .k{margin:0;font-size:12.5px;font-weight:800;color:var(--text-muted);}
.bio-lost .v{margin:2px 0 0;font-size:36px;font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text);}
.bio-lost .v small{margin-left:4px;font-size:14px;font-weight:600;color:var(--text-muted);}
.bio-lost p:last-child{margin:6px 0 0;max-width:42ch;font-size:13px;line-height:1.45;color:var(--text-muted);}
.bio-stack{display:flex;gap:2px;height:16px;overflow:hidden;border-radius:999px;background:var(--surface-2);}
.bio-stack i{display:block;height:100%;transform-origin:left;transition:transform .8s cubic-bezier(.23,1,.32,1);}
.bio-stack i+i{transition-delay:.1s;}
.bio-stack.pre i{transform:scaleX(0);}
.bio-stack-l{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:13px;color:var(--text);}
.bio-stack-l div{display:flex;align-items:center;gap:8px;}
.bio-stack-l b{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.bio-stack-l .m{min-width:40px;text-align:right;font-size:12px;font-weight:600;color:var(--text-muted);}
.bio-card .sw{width:10px;height:10px;flex-shrink:0;border-radius:3px;}
.bio-musc{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13px;line-height:1.45;color:var(--text);}
.bio-musc svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--c-lean);}
.bio-bul{display:flex;flex-direction:column;}
.bio-bu{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;width:100%;padding:11px 4px;border:0;border-top:1px solid var(--line);border-radius:10px;background:none;font:inherit;text-align:left;color:var(--text);cursor:pointer;transition:background-color .2s ease,transform .14s cubic-bezier(.23,1,.32,1);}
.bio-bu:first-child{border-top:0;}
.bio-bu:active{transform:scale(.99);}
@media (hover:hover) and (pointer:fine){.bio-bu:hover{background:var(--surface-2);}}
.bio-bu .nm{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;}
.bio-bu .nm .sw{background:var(--c);}
.bio-bu .val{font-size:15px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;}
.bio-bu .val small{font-size:12px;font-weight:600;color:var(--text-muted);}
.bio-bu .track{grid-column:1/-1;position:relative;height:22px;margin:2px 7px 0;}
.bio-bu .rail{position:absolute;left:-7px;right:-7px;top:9px;height:4px;border-radius:999px;background:var(--surface-2);}
.bio-bu .band{position:absolute;top:5px;height:12px;border:1px dashed var(--ok-tx);border-radius:999px;background:var(--ok-bg);opacity:.85;}
.bio-bu .ghost,.bio-bu .mk{position:absolute;inset:0;pointer-events:none;}
.bio-bu .ghost i,.bio-bu .mk i{position:absolute;top:4px;left:-7px;width:14px;height:14px;border-radius:50%;}
.bio-bu .ghost i{border:2px dashed var(--text-muted);opacity:.7;}
.bio-bu .mk{transition:transform .8s cubic-bezier(.23,1,.32,1);}
.bio-bu .mk i{background:var(--c);border:2.5px solid var(--surface);box-shadow:0 0 0 1px var(--c);}
.bio-bu .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);}
.bio-bu .meta .sp{flex:1;}
.bio-bu .meta .mm-delta{margin-top:0;}
.bio-bu .pill{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 9px 0 7px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;}
.bio-bu .pill svg{width:13px;height:13px;}
.bio-bu .pill.ok{background:var(--ok-bg);color:var(--ok-tx);} .bio-bu .pill.warn{background:var(--warn-bg);color:var(--warn-tx);}
.bio-bu .pill.crit{background:var(--danger-bg);color:var(--danger-tx);} .bio-bu .pill.none{background:var(--surface-2);color:var(--text-muted);}
.bio-note{display:flex;gap:8px;align-items:flex-start;}
.bio-note svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;}
#m-bio-import .modal{container-type:inline-size;}
.bio-imp{display:flex;flex-direction:column;gap:14px;}
.bio-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;border:1.5px dashed var(--line);border-radius:18px;background:var(--surface);text-align:center;cursor:pointer;transition:border-color .2s ease,background-color .2s ease;}
.bio-drop b{font-size:15.5px;color:var(--text);}
.bio-drop>span:not(.mm-empty-ic){font-size:13px;color:var(--text-muted);}
.bio-drop.over,.bio-drop:focus-visible{border-color:var(--brand-red);background:var(--surface-2);}
.bio-how{font-size:13px;color:var(--text);}
.bio-how summary{display:flex;align-items:center;gap:6px;min-height:40px;font-weight:800;cursor:pointer;}
.bio-how summary svg{width:16px;height:16px;}
.bio-how ol{margin:4px 0 0;padding-left:20px;line-height:1.6;color:var(--text-muted);}
.bio-err{padding:12px 14px;border-left:4px solid var(--brand-red);border-radius:12px;background:var(--danger-bg);font-size:13px;line-height:1.45;color:var(--text);}
.bio-imp-sum{margin:0;font-size:14px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;}
.bio-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.bio-kpis div{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);}
.bio-kpis b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;}
.bio-kpis span{font-size:12px;font-weight:700;color:var(--text-muted);}
.bio-kpis .new b{color:var(--ok-tx);} .bio-kpis .upd b{color:var(--warn-tx);}
.bio-lbl{margin:0 0 6px;font-size:12.5px;font-weight:800;color:var(--text-muted);}
.bio-cols{display:flex;flex-wrap:wrap;gap:6px;}
.bio-cols span{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 10px;border-radius:999px;background:var(--surface-2);font-size:12px;font-weight:700;color:var(--text);}
.bio-cols span svg{width:13px;height:13px;color:var(--ok-tx);}
.bio-cols .miss{color:var(--text-muted);} .bio-cols .miss svg{color:var(--text-muted);}
.bio-skip{padding:10px 12px;border-radius:12px;background:var(--warn-bg);font-size:12.5px;line-height:1.45;color:var(--text);}
.bio-gap td{padding:4px;text-align:center;font-weight:800;letter-spacing:.2em;color:var(--text-muted);}
.bio-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.bio-acts .btn{flex:1 1 160px;}
.bio-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:bioSpin .7s linear infinite;}
@keyframes bioSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.bio-stack i,.bio-bu .mk,.bio-bu{transition:none;}.bio-spin{animation-duration:1.6s;}}

/* ── Compartir con el círculo (33-metricas.js compartirEnCirculo) e imagen en el chat grupal ── */
#m-share .modal{container-type:inline-size;}
.sh-prev{padding:12px;border-radius:18px;background:var(--surface-2);}
.sh-bubble{display:flex;flex-direction:column;gap:8px;max-width:440px;margin-left:auto;padding:8px;border-radius:16px 16px 4px 16px;background:var(--surface);box-shadow:var(--shadow-sm);}
.sh-ch{height:200px;overflow:hidden;border-radius:10px;background:#fff;}
.sh-com{margin:0 4px;font-size:14px;line-height:1.45;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;}
.sh-pie{margin:0 4px 2px;font-size:13px;line-height:1.5;color:var(--text);white-space:pre-wrap;}
.sh-lbl{display:block;margin:14px 0 6px;font-size:12.5px;font-weight:800;color:var(--text-muted);}
.sh-txt{width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;resize:vertical;}
.sh-st:not(:empty){margin:12px 0 0;}
.sh-ok{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--ok-bg);font-size:13px;font-weight:700;color:var(--ok-tx);}
.sh-ok svg{width:18px;height:18px;flex-shrink:0;}
#m-share .bio-acts{margin-top:12px;}
#m-share .mm-fine{margin-top:8px;}
.gc-img{display:block;width:min(82%,340px);aspect-ratio:560/300;margin:0 0 4px;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2);cursor:zoom-in;}
.gc-img img{display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s ease;}
/* ya cargada: el cuadro toma la proporción real de la imagen (gráfica + tabla), sin franjas vacías a los lados */
.gc-img.lista{aspect-ratio:auto;background:none;} .gc-img.lista img{opacity:1;height:auto;}
.gc-img.falla{cursor:default;}
@media (prefers-reduced-motion:reduce){.gc-img img{transition:none;}}
/* Eventos de la gráfica en grande (hoja m-param-chart), mismo estilo que la métrica destacada */
.pc-evlist{margin:2px 0 12px;}
.pc-evlist i{color:var(--bg);}
/* Báscula: varias pesadas por día — el valor es la mediana y se despliegan las pesadas con su hora */
.pc-med{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:4px;padding:0;border:0;border-radius:50%;background:none;color:var(--text-muted);cursor:pointer;vertical-align:middle;}
.pc-med:hover{background:var(--surface-2);color:var(--text);}
.pc-med svg{width:16px;height:16px;transition:transform .15s;}
.pc-med[aria-expanded="true"] svg{transform:rotate(180deg);}
.pc-medtag{display:none;margin-left:6px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ok-tx);}
.lab-table tr.pc-esmed td{color:var(--text);font-weight:700;}
.lab-table tr.pc-esmed .pc-medtag{display:inline;}
.lab-table tr.pc-sub td{background:var(--surface-2);font-size:12.5px;color:var(--text-muted);}
.lab-table tr.pc-sub[hidden]{display:none;}
.pc-hora{padding-left:14px;font-variant-numeric:tabular-nums;}
.pc-atip{display:inline-flex;align-items:center;gap:3px;margin-left:6px;color:var(--warn-tx);font-weight:700;font-size:11.5px;}
.pc-atip svg{width:12px;height:12px;}
.bio-med{display:flex;gap:8px;align-items:flex-start;}
.bio-med svg{flex-shrink:0;width:15px;height:15px;margin-top:2px;}
.bio-h{color:var(--text-muted);font-size:11.5px;font-variant-numeric:tabular-nums;}

/* Comentarios de un evento (incluye los seguimientos que deja «Limpiar repetidos»): uno por renglón, legibles */
.ev-coment{margin-top:6px;padding:6px 9px;border-left:3px solid var(--line);background:var(--surface-2);border-radius:6px;font-size:12px;color:var(--text);line-height:1.45;display:grid;gap:3px;}

/* Asistente de Documentos abierto desde un chat: ventana sobre el chat, sin cambiar de pantalla (Abel 2026-10-14) */
#s-docs.docs-sobre-chat{display:flex;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.55);padding-top:max(24px,env(safe-area-inset-top));animation:none;}
#s-docs.docs-sobre-chat>.topbar,#s-docs.docs-sobre-chat>.scroll{width:100%;max-width:760px;margin:0 auto;background:var(--bg);}
#s-docs.docs-sobre-chat>.topbar{border-radius:18px 18px 0 0;}
#s-docs.docs-sobre-chat>.topbar .ib[title="Inicio"],#s-docs.docs-sobre-chat>.topbar .chat-menu-wrap,#s-docs.docs-sobre-chat #d-tagline{display:none;}
#s-docs.docs-sobre-chat>.scroll{flex:1;padding-left:20px!important;padding-right:20px!important;} /* el padding de escritorio se calcula con el ancho de la pantalla, no de la ventana: dejaba el asistente en 380 px */
/* «Ver archivo» bajo el resumen de un documento en el chat */
.chat-ver-archivo{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin:6px 0 2px;padding:8px 14px;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.chat-ver-archivo svg{width:16px;height:16px;}
.chat-ver-archivo:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

/* ══ Búsqueda en los chats (1:1 y grupal) — chatBuscar(), 03-helpers.js ══
   Barra con tokens (antes #group-search-bar tenía background:#fff fijo y se
   veía blanca en Nocturno). Resultados como tarjetas; tocar una lleva al
   mensaje y lo marca con un destello (.chat-flash) que se desvanece. */
:root{--chat-mark:#FEF08A;--chat-mark-tx:#14181F;}
:root[data-theme="dark"]{--chat-mark:rgba(250,204,21,.30);--chat-mark-tx:var(--text);}
.chat-search-bar{padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line);flex-shrink:0;}
.chat-search-bar[hidden],.chat-search-cnt[hidden]{display:none;}
.chat-search-row{display:flex;gap:8px;align-items:center;}
.chat-search-fld{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;background:var(--surface-2);border:1px solid transparent;transition:border-color 150ms ease;}
.chat-search-fld:focus-within{border-color:var(--text-muted);}
.chat-search-fld svg{width:16px;height:16px;color:var(--text-muted);flex-shrink:0;}
.chat-search-fld input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:inherit;font-size:16px;color:var(--text);}
.chat-search-fld input::placeholder{color:var(--text-muted);}
.chat-search-cnt{font-size:12px;color:var(--text-muted);padding:5px 6px 0;}
.chat-res{display:flex;flex-direction:column;gap:6px;width:100%;min-height:44px;padding:11px 12px;text-align:left;font-family:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:transform 120ms ease-out,border-color 150ms ease;}
.chat-res:active{transform:scale(.98);}
.chat-res:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.chat-res:hover{border-color:var(--text-muted);}}
.chat-res-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);}
.chat-res-top b{font-size:13px;color:var(--text);}
.chat-res-top .rb-chip{width:22px;height:22px;}
.chat-res-top .rb-mini .rb{width:20px;height:20px;}
.chat-res-top>svg{width:16px;height:16px;margin-left:auto;flex-shrink:0;}
.chat-res-ini{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--navy);flex-shrink:0;}
.chat-res-ini.yo{background:var(--brand-red);}
.chat-res-tx{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.chat-res-sec{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:6px 2px 0;}
.chat-res-vacio{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 12px;text-align:center;color:var(--text-muted);font-size:14px;}
.chat-res-vacio svg{width:28px;height:28px;}
.chat-mark{background:var(--chat-mark);color:var(--chat-mark-tx);border-radius:3px;padding:0 2px;}
/* Anillo (no fondo: sobre la burbuja roja un fondo amarillo dejaría el texto blanco ilegible). Acción rara → keyframes está bien. */
.chat-flash{animation:chatFlash 1.8s ease-out;}
@keyframes chatFlash{0%,30%{box-shadow:0 0 0 4px var(--chat-mark);}100%{box-shadow:0 0 0 4px transparent;}}
/* La columna del chat ocupa siempre su ancho (en escritorio tiene margin:0 auto
   y, con pocos resultados de búsqueda, se encogía al ancho del contenido). */
#chat-rafa-messages,#chat-group-messages{width:100%;box-sizing:border-box;}

/* ══ Íconos Lucide en lugar de emojis de interfaz (chats) ══
   .cmd-icon sigue aceptando emoji: los menús de Documentos/Métricas/Alertas aún no se migran. */
.cmd-item .cmd-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);}
.cmd-item .cmd-icon svg{width:18px;height:18px;}
.cmd-item.danger .cmd-icon{color:var(--brand-red-tx);}
.attach-btn .ai svg{width:26px;height:26px;color:var(--text);}
.attach-btn .ai{display:flex;justify-content:center;}
.qp-ic{width:24px;height:24px;border-radius:7px;background:var(--surface-2);display:inline-grid;place-items:center;flex-shrink:0;}
.qp-ic svg{width:14px;height:14px;}
.rp-tit svg,.rp-estado svg,.rp-med svg{width:14px;height:14px;vertical-align:-2px;flex-shrink:0;}
.rp-tit{display:flex;align-items:center;gap:6px;}
.rp-estado{display:flex;align-items:center;gap:5px;}

/* ══ Mensajes de los chats: RAFA con robot + nombre, tipografía legible, acciones táctiles ══ */
.msg-user,.msg-rafa,.msg-other{font-size:15px;line-height:1.55;}
.msg-system{font-size:12px;line-height:1.5;}
.msg-sender{font-size:12px;}
.msg-time{font-size:11px;color:var(--text-muted);margin-top:2px;padding:0 4px;}
.msg-rafa .rafa-tx{white-space:pre-wrap;overflow-wrap:anywhere;}
.rafa-head{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:4px;white-space:normal;}
.rafa-head .rafa-tag b{font-size:13px;font-weight:800;color:var(--text);}
.rafa-head-t{font-size:11px;color:var(--text-muted);display:inline-flex;align-items:center;gap:8px;}
.rafa-head-t::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--text-muted);opacity:.6;}
.msg-rafa .msg-typing{padding:4px 0 0;}
/* Acciones por mensaje: ícono 16 px, botón de 36 px y área táctil de 44 px */
.msg-action-btn{position:relative;width:36px;height:36px;padding:0;border-radius:9px;transition:background 150ms ease-out,color 150ms ease-out,transform 120ms ease-out;}
.msg-action-btn::before{content:"";position:absolute;inset:-4px;}
.msg-action-btn svg{width:16px;height:16px;}
.msg-action-btn:active{transform:scale(.92);}
.msg-actions{margin-left:-8px;}
@media (hover:none){.msg-action-btn:hover{background:none;color:var(--text-muted);}}

/* ══ Movimiento de los chats (criterio Emil: rápido, ease-out fuerte, solo transform/opacity) ══ */
/* Entrada: solo el mensaje nuevo lleva .msg-new (renderRafaChat/renderGroupChat). */
.msg-new{transition:opacity 220ms var(--ease-out),transform 240ms var(--ease-out);}
@starting-style{.msg-new{opacity:0;transform:translateY(6px);}}
/* Menú ···: crece desde el botón (esquina superior derecha), 180 ms; cierra al instante. */
.chat-menu-dropdown{animation:none;transform-origin:top right;transition:opacity 160ms var(--ease-out),transform 180ms var(--ease-out);}
@starting-style{.chat-menu-dropdown.open{opacity:0;transform:translateY(-4px) scale(.96);}}
/* «X está escribiendo…» del grupal: flota sobre el borde inferior del chat y entra con opacidad. */
.gtyping-ancla{position:relative;height:0;flex-shrink:0;z-index:5;}
.gtyping{position:absolute;left:14px;bottom:8px;max-width:calc(100% - 28px);padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity 180ms ease,transform 220ms var(--ease-out);}
@starting-style{.gtyping{opacity:0;transform:translateY(4px);}}
/* Botón «ir al final»: aparece con fundido y escala, no de golpe. */
.rafa-jump-bottom-btn{transition:opacity 160ms ease,transform 200ms var(--ease-out);}
@starting-style{.rafa-jump-bottom-btn{opacity:0;transform:translateX(-50%) scale(.9);}}
@media (prefers-reduced-motion:reduce){
  @starting-style{
    .msg-new{transform:none;}
    .chat-menu-dropdown.open{transform:none;}
    .gtyping{transform:none;}
    .rafa-jump-bottom-btn{transform:translateX(-50%);}
  }
}

/* ══ Personalidad de RAFA (#m-persona) — rediseño 2026-10-14 ══
   Celular: hoja desde abajo con cabecera y pie fijos; la vista previa queda fija arriba.
   Escritorio (≥1024): diálogo de dos columnas, vista previa fija a la derecha. */
#m-persona .ps-modal{display:flex;flex-direction:column;padding:0;overflow:hidden;max-height:92vh;background:var(--surface);animation:psSube 320ms var(--ease-drawer);}
@keyframes psSube{from{transform:translateY(100%)}to{transform:none}}
#m-persona .modal-handle{margin:8px auto 0;flex-shrink:0;}
.ps-head{display:flex;align-items:flex-start;gap:12px;padding:12px 18px 10px;flex-shrink:0;}
.ps-head-ic{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex-shrink:0;}
.ps-head-ic svg{width:20px;height:20px;}
.ps-head-tx{flex:1;min-width:0;}
.ps-titulo{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--text);margin:0;}
.ps-sub{font-size:13.5px;color:var(--text-muted);margin:3px 0 0;line-height:1.45;}
.ps-x{width:44px;height:44px;margin:-6px -8px 0 0;border:0;background:none;border-radius:10px;display:grid;place-items:center;color:var(--text-muted);cursor:pointer;flex-shrink:0;}
.ps-x svg{width:20px;height:20px;}
.ps-cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 18px 16px;display:flex;flex-direction:column;}
.ps-lado{position:sticky;top:0;z-index:2;background:var(--surface);padding-bottom:6px;}
.ps-prev{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:12px 14px;max-height:190px;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);}
.ps-prev-l{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;}
.ps-prev-q{display:flex;gap:6px;font-size:12.5px;color:var(--text-muted);margin-bottom:8px;line-height:1.4;}
.ps-prev-q svg{width:14px;height:14px;margin-top:2px;flex-shrink:0;}
.ps-prev-tx{font-size:14px;line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;}
.ps-sum{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.ps-sum span{font-size:11.5px;font-weight:700;color:var(--text-muted);background:var(--surface-2);border-radius:999px;padding:3px 9px;}
.ps-skel{display:flex;flex-direction:column;gap:7px;margin:2px 0 8px;}
.ps-skel i{display:block;height:10px;border-radius:6px;background:var(--surface-2);animation:psSkel 1.2s ease-in-out infinite;}
.ps-skel i:nth-child(2){width:88%;}.ps-skel i:nth-child(3){width:62%;}
.ps-skel-t{font-size:12px;color:var(--text-muted);}
@keyframes psSkel{50%{opacity:.45}}
.ps-sec{padding:14px 0 4px;border-top:1px solid var(--line);}
.ps-lado+.ps-opciones .ps-sec:first-child{border-top:0;}
.ps-sec-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--text);margin-bottom:10px;}
.ps-sec-h svg{width:16px;height:16px;color:var(--text-muted);}
.ps-sec-h small{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--text-muted);}
.ps-ops{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));}
.ps-ops.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ps-op{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 12px;text-align:left;font-family:inherit;color:var(--text);border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color 150ms ease,background-color 150ms ease,transform 120ms ease-out;}
.ps-op:active{transform:scale(.97);}
.ps-op:focus-visible,.ps-fe:focus-visible,.ps-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.ps-op>svg{width:18px;height:18px;color:var(--text-muted);margin-bottom:4px;}
.ps-op b{font-size:14px;font-weight:700;}
.ps-op>span:last-child{font-size:12px;color:var(--text-muted);line-height:1.3;}
.ps-op[aria-checked="true"]{border-color:var(--text);background:var(--surface-2);}
.ps-op[aria-checked="true"]>svg{color:var(--text);}
.ps-ck{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--text);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity 150ms ease,transform 200ms var(--ease-out);}
.ps-ck svg{width:12px;height:12px;color:var(--surface);stroke-width:3;}
.ps-op[aria-checked="true"] .ps-ck{opacity:1;transform:none;}
@media (hover:hover) and (pointer:fine){.ps-op:hover{border-color:var(--text-muted);}}
.ps-voz{display:flex;gap:8px;}
.ps-voz select{flex:1;min-width:0;height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);padding:0 12px;font-family:inherit;font-size:15px;}
.ps-probar{flex:0 0 auto!important;width:auto!important;min-height:48px;margin:0!important;padding:0 16px!important;display:inline-flex;align-items:center;gap:6px;}
.ps-probar svg{width:16px;height:16px;}
.ps-fe{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;text-align:left;font-family:inherit;color:var(--text);border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;}
.ps-fe-t{flex:1;display:flex;flex-direction:column;gap:2px;}
.ps-fe-t b{font-size:14px;}
.ps-fe-t span{font-size:12px;color:var(--text-muted);line-height:1.35;}
.ps-tg{position:relative;width:48px;height:28px;border-radius:999px;background:var(--line);flex-shrink:0;transition:background-color 200ms ease;}
.ps-tg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform 220ms var(--ease-out);}
.ps-fe[aria-checked="true"] .ps-tg{background:var(--ok-tx);}
.ps-fe[aria-checked="true"] .ps-tg::after{transform:translateX(20px);}
.ps-pie{display:flex;gap:10px;align-items:center;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);flex-shrink:0;}
.ps-restablecer{min-height:48px;padding:0 14px;border:0;background:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--text-muted);cursor:pointer;border-radius:12px;}
.ps-aplicar{flex:1;width:auto!important;margin:0!important;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.ps-aplicar svg{width:18px;height:18px;}
@media (min-width:600px){.ps-ops.c4{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:1024px){
  #m-persona .ps-modal{width:min(880px,92vw)!important;max-height:88vh;animation:psDialogo 200ms var(--ease-out);}
  @keyframes psDialogo{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
  #m-persona .modal-handle{display:none;}
  .ps-head{padding-top:18px;}
  .ps-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;}
  .ps-lado{order:2;padding:4px 0 0;background:none;}
  .ps-opciones{order:1;}
  .ps-prev{max-height:none;-webkit-mask-image:none;mask-image:none;}
}
@media (prefers-reduced-motion:reduce){
  #m-persona .ps-modal{animation:fadeInReduced .2s ease;}
  .ps-skel i{animation:none;}
}

/* ── Motor de Escucha (2026-10-14): razón de RAFA y escucha inteligente en Personalidad ── */
.rafa-razon{display:flex;align-items:flex-start;gap:6px;max-width:82%;margin:-4px 0 8px;padding:8px 10px;border-radius:10px;background:var(--surface-2);color:var(--text-muted);font-size:13px;line-height:1.4;}
.rafa-razon svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;}
.ps-nota{margin:10px 0 0;font-size:12.5px;color:var(--text-muted);line-height:1.4;}
.ps-sec-h.ps-sub{margin-top:18px;}
@media (prefers-reduced-motion:no-preference){.rafa-razon{animation:rafaRazon .18s cubic-bezier(.23,1,.32,1);}}
@keyframes rafaRazon{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}

/* Lo que RAFA recuerda (memoria privada del chat 1:1, 2026-10-20) */
.rmem-chip{display:flex;align-items:center;gap:6px;margin:6px auto 0;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--text-muted);font:inherit;font-size:12px;cursor:pointer;}
.rmem-chip[hidden]{display:none;}
.rmem-chip svg{width:14px;height:14px;}
.rmem-niveles{display:grid;gap:8px;margin:4px 0 14px;}
.rmem-op{width:100%;min-height:0;}
.rmem-h{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px;}
.rmem-ls{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.rmem-it{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.rmem-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4;overflow-wrap:anywhere;}
.rmem-tx b{font-weight:700;}
.rmem-tx span{color:var(--text-muted);font-size:13px;}
.rmem-x{flex-shrink:0;width:32px;height:32px;}
.rmem-vacio{color:var(--text-muted);font-size:14px;line-height:1.5;margin:8px 0 4px;}
.grp-aj-det{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;cursor:pointer;}
.grp-aj-det.bloqueado{opacity:.6;cursor:default;}

/* ── Revisar detecciones, una por una (11-events.js, 2026-10-23) ── */
.rv-avance{margin-bottom:14px;}
.rv-avance-tx{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-muted);margin-bottom:6px;min-height:28px;}
.rv-avance-tx b{color:var(--text);}
.rv-avance-tx .ag-link{display:inline-flex;align-items:center;gap:4px;}
.rv-avance-tx .ag-link svg{width:14px;height:14px;}
.rv-pista{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.rv-relleno{height:100%;border-radius:999px;transition:width .45s var(--ease-out),background-color .45s;}
.rv-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;animation:rvEntra .25s var(--ease-out);}
@keyframes rvEntra{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}
.rv-tipo{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);font-weight:600;}
.rv-card h3{margin:12px 0 12px;font-size:18px;font-weight:800;line-height:1.3;color:var(--text);overflow-wrap:anywhere;}
.rv-card .ag-datos{margin:0;}
.rv-botones{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px;}
.rv-botones.dos{grid-template-columns:1fr 1fr;}
.rv-botones .ag-btn{min-height:48px;font-size:14.5px;}
.rv-fin{position:relative;text-align:center;padding:28px 12px 18px;overflow:hidden;}
.rv-fin-ico{font-size:52px;line-height:1;animation:rvPop .5s var(--ease-out);}
@keyframes rvPop{0%{transform:scale(.3);opacity:0;}70%{transform:scale(1.15);opacity:1;}100%{transform:scale(1);}}
.rv-fin h3{margin:12px 0 6px;font-size:22px;font-weight:800;color:var(--text);}
.rv-fin p{margin:0;font-size:14.5px;color:var(--text-muted);line-height:1.5;}
.rv-fin .rv-res{margin-top:10px;font-weight:700;color:var(--text);}
.rv-confeti{position:absolute;inset:0;pointer-events:none;}
.rv-confeti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:0;animation:rvCae 1.8s ease-in forwards;}
@keyframes rvCae{0%{opacity:1;transform:translateY(0) rotate(0);}100%{opacity:0;transform:translateY(260px) rotate(var(--giro));}}
@media (prefers-reduced-motion:reduce){.rv-confeti{display:none;}.rv-fin-ico,.rv-card{animation:none;}.rv-relleno{transition:none;}}
[data-theme="dark"] .ag-ti{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.doc-ev-lista .ag-rec{border:1px solid var(--line);border-radius:13px;margin-bottom:6px;background:var(--surface);}
.ag-md.sug{box-shadow:inset 0 0 0 2px var(--brand-red);background:color-mix(in srgb,var(--brand-red) 8%,transparent);}
.ag-md.sug::after{content:"sugerido";position:absolute;bottom:2px;left:0;right:0;font-size:8.5px;font-weight:800;color:var(--brand-red-tx);text-transform:none;}
.ag-md{position:relative;}