/* ENAP Vivo v1.1: tokens transcritos de la guía, pp. 4-9.
   Recursos oficiales incorporados desde la carpeta marca el 11-09-2026. */
:root {
 --enap-aqua-700:#00A09A; --enap-aqua-500:#16A0AD; --enap-sky-400:#5AAEE3;
 --enap-blue-500:#4780B3; --enap-blue-700:#024B94; --enap-violet-500:#813789;
 --enap-magenta-600:#B00072; --enap-red-600:#D50032; --enap-gold-400:#E6B642;
 --enap-text:#333F48; --enap-muted:#64717A; --enap-surface:#F3F5F6;
 --enap-surface-200:#E8EDEF; --enap-white:#fff; --enap-line:#D7DEE1;
 --enap-error:#B42318; --enap-success:#087A62; --enap-focus:#1677D2;
 --enap-spectrum:linear-gradient(90deg,#00A09A 0%,#16A0AD 28%,#5AAEE3 40%,#4780B3 52%,#024B94 60%,#813789 70%,#B00072 80%,#D50032 90%,#E6B642 100%);
 --enap-shadow:0 12px 32px rgba(18,32,43,.14);
 --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px;
}
/* html con el mismo fondo: así el body pinta su propio gris (no se "propaga" al
   lienzo) y el multiply del video de la portada tiene contra qué fundirse. */
html {background:var(--enap-surface)}
body {font-family:"Rubrik New","New Rubrik",Arial,sans-serif;font-synthesis:none;background:var(--enap-surface);color:var(--enap-text);font-size:16px;line-height:1.5}
a {color:var(--enap-blue-700)}
a:hover {color:var(--enap-text)}
header {background:var(--enap-white);box-shadow:none;min-height:72px;padding:var(--space-3) var(--space-7);border-bottom:1px solid var(--enap-line);position:relative}
header h1,header nav a,#user-info span {color:var(--enap-text)}
header h1::before,.login-card h2::before {display:none}
header h1 {letter-spacing:0;font-size:24px}
header nav a:hover {background:var(--enap-surface);color:var(--enap-text)}
.btn-logout {background:var(--enap-white);color:var(--enap-text);border:1px solid var(--enap-line);min-height:44px;font:inherit}
.btn-logout:hover {background:var(--enap-surface-200);border-color:var(--enap-muted)}
main {max-width:1440px;padding:var(--space-6) var(--space-7)}
.top-bar {height:6px;background:var(--enap-spectrum);flex-shrink:0}
/* Portada: las dos columnas (título+fecha/hora y la casilla de ingreso) miden
   lo que ocupa su contenido y se centran juntas; en pantallas grandes ya no
   quedan pegadas a los costados con un hueco al medio. */
.login-container {background:var(--enap-surface);min-height:0;flex:1;display:grid;grid-template-columns:auto minmax(0,408px);justify-content:center;gap:clamp(64px,7vw,128px);align-items:center;max-width:1440px;width:100%;margin:auto;padding:var(--space-7)}
.login-intro h1 {font-size:56px;line-height:1.08;max-width:650px;margin:var(--space-4) 0;font-weight:700;letter-spacing:-.025em}
.login-intro p {font-size:20px;line-height:1.5;max-width:520px;color:var(--enap-muted)}
.login-card {max-width:480px;border:1px solid var(--enap-line);border-radius:8px;box-shadow:var(--enap-shadow);padding:var(--space-5)}
.login-card h2 {font-size:24px;text-align:left;color:var(--enap-text)}
.login-card p.subtitle {text-align:left;font-size:16px;color:var(--enap-muted);margin-bottom:var(--space-4)}
.form-group {margin-bottom:var(--space-3)}
.form-group label {text-transform:none;letter-spacing:0;font-size:14px;color:var(--enap-text);font-weight:500}
.form-group input,.form-group select,.form-group textarea {min-height:48px;border:1px solid var(--enap-line);border-radius:4px;background:var(--enap-white);font-size:16px;color:var(--enap-text);padding:12px var(--space-3)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {border-color:var(--enap-focus);box-shadow:0 0 0 3px rgb(22 119 210 / 25%)}
:focus-visible {outline:3px solid var(--enap-focus);outline-offset:3px}
.btn {min-height:48px;font-weight:500;font-size:16px;letter-spacing:0;border-radius:4px;transition:background 200ms cubic-bezier(.2,0,0,1)}
.btn:active {transform:translateY(1px)}
/* Botón principal: azul corporativo ENAP (antes dorado). Sin amarillo. */
.btn-primary {background:var(--enap-blue-700);color:var(--enap-white)}
.btn-primary:hover {background:#013a73;box-shadow:none}
.btn-secondary {background:var(--enap-white);border:1px solid var(--enap-line);color:var(--enap-text)}
.btn-danger {background:var(--enap-error)}
button:disabled {opacity:.45;cursor:not-allowed}
.card {border-color:var(--enap-line);border-radius:8px;box-shadow:none}
.card h3,.modal h3,table th {color:var(--enap-text);text-transform:none;letter-spacing:0}
table th {background:var(--enap-surface);font-size:14px}
.badge {text-transform:none;letter-spacing:0}
.badge-admin,.badge-viewer {background:var(--enap-surface-200);color:var(--enap-text);border:1px solid var(--enap-line)}
.error-msg {color:var(--enap-error);border-color:var(--enap-error)}
.streaming-wrapper {text-align:left;padding:var(--space-5);box-shadow:none;border:1px solid var(--enap-line);border-radius:8px}
.streaming-wrapper h2 {font-size:40px;line-height:1.15;color:var(--enap-text)}
.event-description,.streaming-wrapper .fecha {color:var(--enap-muted);margin-bottom:var(--space-3)}
.video-container {max-width:none;background:var(--enap-text);border-radius:4px;box-shadow:none;margin-bottom:0}
.status-panel {padding:var(--space-6);text-align:center;color:var(--enap-text);background:var(--enap-surface);border-radius:8px}
.status-panel h2 {font-size:32px;margin-bottom:var(--space-3)}
footer {background:var(--enap-white);color:var(--enap-muted);border-top:1px solid var(--enap-line);padding:var(--space-4)}
footer strong {color:var(--enap-text)}
.skip-link {position:fixed;left:16px;top:-100px;z-index:2000;background:var(--enap-white);padding:16px}
.skip-link:focus {top:8px}
@media(max-width:1023px){header{min-height:64px;padding:16px 32px}main{padding:32px}.login-container{padding:32px;gap:32px}.login-intro h1{font-size:40px}.admin-grid{grid-template-columns:1fr}}
@media(max-width:767px){header{min-height:56px;padding:12px 20px;align-items:flex-start}#user-info{flex-wrap:wrap;gap:8px}.login-container{grid-template-columns:1fr;padding:32px 20px;gap:32px}.login-intro h1{font-size:40px;line-height:44px}.login-intro p{font-size:16px}.login-card{max-width:none;padding:24px}main{padding:24px 20px}.streaming-wrapper{padding:16px}.streaming-wrapper h2{font-size:32px}.status-panel{padding:24px}.admin-grid{gap:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Recursos originales, sin modificar trazados ni gradientes. */
.brand-logo {display:block;width:auto;height:40px;max-width:100%;flex-shrink:0}
/* Título de la portada ("EnapVivo", junto y todo en Light): el bloque se ajusta al
   ancho del texto y las líneas divisorias (arriba y abajo) miden el 70% de ese ancho, centradas. */
/* La columna de la portada se ajusta al ancho del bloque fecha/hora, y el
   título (con sus líneas) se centra respecto a ese bloque. */
.login-intro{justify-self:start;width:fit-content;max-width:100%}
.login-intro .titulo-portada{margin:0 auto;width:fit-content;max-width:100%;font-weight:300}
.titulo-portada::before,.titulo-portada::after{content:"";display:block;width:70%;height:2px;margin-inline:auto;background:var(--enap-line)}
.titulo-portada::before{margin-bottom:var(--space-3)}
.titulo-portada::after{margin-top:var(--space-3)}

/* Bloque fecha/hora de la portada: dos columnas separadas por una línea.
   Izquierda (centrada): fecha en el verde de la franja de marca (antes rojo #B8002E),
   con el día muy grande. Derecha: hora de Chile (oficial) y de Ecuador. */
.evento-bloque{--evento-color:#63A099;--evento-sep:clamp(23px,3.84vw,46px);display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:0 var(--evento-sep);margin-top:var(--space-5)}
.login-intro .evento-fecha{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0;max-width:none;color:var(--evento-color);line-height:1.1}
.evento-dia-semana,.evento-mes{font-size:1.5rem;font-weight:300}
.evento-dia{font-size:8.4rem;font-weight:500;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:-.02em 0 -.042em}
.evento-horas{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:29px;padding-left:var(--evento-sep);border-left:2px solid var(--enap-line)}
.evento-horas>div{display:grid;gap:2px}
.evento-horas dt{font-size:1.74rem;font-weight:500;line-height:1.15;color:var(--evento-color)}
.evento-horas dd{margin:0;font-size:2.16rem;font-weight:600;line-height:1.1;color:var(--evento-color);font-variant-numeric:tabular-nums}
.evento-hrs{font-weight:300;font-size:.7em}
/* Escritorio (>=1200px): todo el bloque de la izquierda (título + fecha/horas)
   un 20% más grande. En tablet y celular se mantiene el tamaño anterior (no
   cabría o dejaría angosta la casilla de ingreso). */
@media(min-width:1200px){
 .login-intro .titulo-portada{font-size:67px}
 .titulo-portada::before{margin-bottom:19px}
 .titulo-portada::after{margin-top:19px}
 .evento-bloque{--evento-sep:clamp(28px,4.6vw,55px);margin-top:38px}
 .evento-dia-semana,.evento-mes{font-size:1.8rem}
 .evento-dia{font-size:10.08rem}
 .evento-horas{gap:35px}
 .evento-horas dt{font-size:2.09rem}
 .evento-horas dd{font-size:2.59rem}
 /* El bloque más grande llega más abajo: se baja la ola del fondo para que no lo toque. */
 .login-page .brand-wave--video{--bajar-ola:45px}
}
@media(max-width:767px){.evento-dia{font-size:6.6rem}.evento-horas dd{font-size:1.8rem}.evento-horas dt{font-size:1.44rem}.evento-dia-semana,.evento-mes{font-size:1.32rem}}
.login-page {position:relative;isolation:isolate;overflow-x:clip}
.login-page .login-container {padding-bottom:160px;position:relative;z-index:1;background:transparent}
.login-page footer {position:relative;z-index:1}
.brand-wave {position:absolute;bottom:72px;left:0;width:100%;height:200px;overflow:hidden;pointer-events:none;z-index:0}
.brand-wave img {position:absolute;width:110%;max-width:none;height:auto;left:-5%;bottom:-8px;display:block}
@media(max-width:767px){.brand-logo{height:32px}.login-page .login-container{padding-bottom:140px}.brand-wave{height:140px;bottom:72px}.brand-wave img{width:190%;left:-45%;bottom:0}}
/* La variante responsive extiende el SVG al ancho disponible sin bandas laterales.
   Se conserva el original; trazados y gradientes son idénticos. */
.brand-wave img {width:110%;height:100%;left:-5%;bottom:0;object-fit:fill}
@media(min-width:768px){.brand-wave{height:230px}}

[hidden] {display:none!important}
.waiting-state {background:var(--enap-text);color:var(--enap-white);padding:64px 24px;min-height:300px;border-radius:8px;text-align:center}
.waiting-state h2 {color:var(--enap-white);margin-bottom:16px}
.countdown {display:flex;gap:24px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.countdown>div {display:grid;min-width:88px;padding:16px;background:rgb(255 255 255 / 8%);border-radius:4px}
.countdown>div>span:first-child {font-size:56px;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums}
.countdown>div>span:last-child {font-size:14px;margin-top:8px}
.field-help {font-size:14px;color:var(--enap-muted);margin-top:8px}
#connection-status:not(:empty) {padding:16px;background:var(--enap-surface-200);margin-bottom:16px}
@media(max-width:479px){.waiting-state{padding:32px 12px}.countdown{gap:8px}.countdown>div{min-width:52px;padding:8px}.countdown>div>span:first-child{font-size:32px}}

/* Espera ENAP: superficies claras, línea de espectro y ondas oficiales. */
.brand-heading {display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand-heading>span {color:var(--enap-muted);font-size:16px}
.waiting-state {position:relative;isolation:isolate;overflow:hidden;background:var(--enap-surface);color:var(--enap-text);padding:48px 24px 148px;border:1px solid var(--enap-line)}
.waiting-state::before {content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--enap-spectrum)}
.waiting-state h2 {color:var(--enap-text);font-size:40px;margin-bottom:12px}
.waiting-eyebrow {font-size:14px;color:var(--enap-muted);margin-bottom:16px}
#waiting-message {color:var(--enap-muted)}
.countdown {gap:16px;margin-top:32px;position:relative;z-index:1}
.countdown>div {min-width:112px;padding:20px 24px;background:var(--enap-white);border:1px solid var(--enap-line);border-radius:8px}
.countdown>div>span:first-child {font-size:64px;line-height:1.1;letter-spacing:-.025em}
.countdown>div>span:last-child {color:var(--enap-muted);font-size:14px}
.countdown-wave {position:absolute;inset:auto 0 0;height:112px;overflow:hidden;pointer-events:none;z-index:0}
.countdown-wave img {position:absolute;left:-5%;width:110%;height:100%;max-width:none}
@media(max-width:767px){.waiting-state{padding:32px 12px 112px}.waiting-state h2{font-size:30px}.countdown{gap:8px}.countdown>div{min-width:0;padding:16px 12px}.countdown>div>span:first-child{font-size:40px}.countdown-wave{height:88px}}
@media(max-width:379px){.countdown>div{padding:12px 8px}.countdown>div>span:first-child{font-size:32px}.countdown>div>span:last-child{font-size:12px}}
/* Contador centrado al 70% en escritorio; ancho disponible en móvil. */
.waiting-state {width:70%;margin-inline:auto}
.waiting-state::before {display:none}
@media(max-width:767px){.waiting-state{width:100%}}

/* La columna del evento ocupa aproximadamente el 70%; comentarios a la derecha. */
.event-layout {display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,3fr);gap:24px;align-items:start}
.event-stage {min-width:0}
.event-stage .waiting-state {width:100%}
.event-stage .countdown>div {min-width:0;padding:16px}
.chat-panel {border:1px solid var(--enap-line);border-radius:8px;background:var(--enap-white);overflow:hidden}
.chat-heading {display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--enap-line)}
.chat-heading h3 {font-size:18px;font-weight:500}
.chat-demo-label {font-size:12px;padding:4px 8px;border-radius:4px;background:var(--enap-surface-200)}
.chat-notice {font-size:13px;color:var(--enap-muted);padding:12px 16px;background:var(--enap-surface)}
.chat-messages {height:220px;overflow-y:auto;overscroll-behavior:contain;padding:16px}
.chat-message {margin-bottom:16px;overflow-wrap:anywhere}
.chat-message strong {font-size:14px;font-weight:500}
.chat-message p {font-size:15px;margin-top:4px;line-height:1.4}
.chat-form {padding:16px;border-top:1px solid var(--enap-line);display:grid;gap:8px}
.chat-form label {font-size:14px}
.chat-form textarea {width:100%;min-height:48px;resize:vertical;border:1px solid var(--enap-line);border-radius:4px;padding:12px;font:inherit}
.chat-simulate {display:block;width:100%;min-height:44px;background:var(--enap-surface);color:var(--enap-text);border:0;border-top:1px solid var(--enap-line);padding:12px;font:inherit;font-size:13px;cursor:pointer}
@media(max-width:1023px){.event-layout{grid-template-columns:minmax(0,1fr)}.chat-messages{height:240px}}

/* ── Chat con moderación (T6) ─────────────────────────── */
.chat-item{padding:0.5rem 0;border-bottom:1px solid var(--enap-line)}
.chat-item-head{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.15rem}
.chat-autor{font-weight:600;font-size:0.85rem;color:var(--enap-text)}
.chat-badge{font-size:0.7rem;font-weight:600;color:var(--enap-white);background:var(--enap-blue-700);border-radius:999px;padding:0.05rem 0.5rem}
.chat-text{margin:0;font-size:0.95rem;color:var(--enap-text);word-break:break-word}
.chat-empty{color:var(--enap-muted);font-size:0.9rem}
.chat-feedback{margin:0.4rem 0 0;font-size:0.85rem;color:var(--enap-error)}
.chat-form select{width:100%;margin-bottom:0.5rem}
.moderacion-panel{margin-top:1rem;padding-top:0.8rem;border-top:2px solid var(--enap-line)}
.moderacion-list{display:grid;gap:0.5rem;max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.mod-item{padding:0.5rem;border-radius:8px;border:1px solid var(--enap-line)}
.mod-item.mod-pend{background:#fff8e6;border-color:#e6b642}
.mod-item.mod-visible{background:var(--enap-surface)}
.mod-actions{display:flex;gap:0.4rem;margin-top:0.4rem}

/* Recuadro de transmisión/espera con proporción 16:9 (igual que el video).
   El contenido (título + contador) se centra vertical y horizontalmente. */
.event-stage .waiting-state{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
@media(max-width:767px){.event-stage .waiting-state{aspect-ratio:auto;min-height:320px;padding:32px 12px 112px}}

/* Reproductor YouTube con controles propios (solo play/pausa y volumen).
   #yt-block bloquea la UI propia de YouTube (título al pasar el cursor, menú);
   la barra inferior queda libre para nuestros controles. */
.video-container{position:relative;overflow:hidden}
#yt-player,#yt-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* La capa cubre TODO el video (bloquea UI de YouTube y capta el movimiento del
   cursor para mostrar la barra). Los controles van por encima (z-index mayor). */
#yt-block{position:absolute;inset:0;z-index:1}
.yt-controls{position:absolute;left:0;right:0;bottom:0;height:48px;display:flex;align-items:center;gap:12px;padding:0 12px;background:linear-gradient(to top,rgb(0 0 0 / 70%),rgb(0 0 0 / 0%));z-index:2;opacity:1;transition:opacity .35s ease}
.yt-controls button{background:transparent;border:0;color:#fff;line-height:0;cursor:pointer;min-width:40px;height:40px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.yt-controls button svg{display:block;width:22px;height:22px}
.yt-controls button:hover{background:rgb(255 255 255 / 15%)}
.yt-controls input[type=range]{width:120px;max-width:40%;accent-color:#fff}
/* Auto-ocultar la barra tras inactividad */
.video-container.controls-hidden .yt-controls{opacity:0;pointer-events:none}
.video-container.controls-hidden{cursor:none}

/* Cabecera de la sección de usuarios: título + acciones lado a lado */
.usuarios-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.usuarios-acciones{display:flex;gap:0.5rem;flex-wrap:wrap}
/* .btn-primary trae width:100% de style.css; en la barra de acciones el botón
   debe ocupar solo su contenido para que quepan dos lado a lado. */
.usuarios-acciones .btn{width:auto;flex:0 0 auto}

/* Barra de búsqueda/filtros de usuarios (panel admin) */
.usuarios-filtros{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.6rem}
.usuarios-filtros input,.usuarios-filtros select{min-height:40px;border:1px solid var(--enap-line);border-radius:4px;background:var(--enap-white);font-size:14px;color:var(--enap-text);padding:8px 12px}
.usuarios-filtros input[type=search]{flex:1;min-width:220px}

/* Bloque de carga masiva de usuarios (CSV), desplegable con "Subir usuarios" */
.usuarios-csv{border:1px dashed var(--enap-line);border-radius:8px;padding:0.85rem;margin-bottom:0.8rem}
.usuarios-csv[hidden]{display:none}
.usuarios-csv-body{padding-top:0}

/* Footer: solo la descripción de la plataforma (sin logo ni la palabra "Enap"). */
.site-footer{text-align:center}

/* Portada: fondo animado de líneas (reemplaza la franja estática).
   El video (16:9, ancho completo) tiene fondo blanco; mix-blend-mode:multiply en
   el contenedor lo funde con el gris de la página y solo se ven las líneas.
   Geometría: --ola es la banda donde descansa la ola (centro del video); el
   contenedor se extiende hacia arriba hasta el borde superior del video, así las
   líneas que suben durante la animación (hasta ~15% del alto) no se cortan. Lo
   que baja más pasa detrás del footer. */
.brand-wave--video{--ola:clamp(160px,min(26vw,42vh),520px);--bajar-ola:0px;bottom:0;height:calc(var(--ola)/2 + 28.125vw - var(--bajar-ola));max-height:calc(100vh - 72px);mix-blend-mode:multiply}
.brand-wave--video .brand-wave-video{position:absolute;top:0;left:0;width:100%;height:auto;pointer-events:none}
.brand-wave--video .brand-wave-static{display:none}
.login-page header{z-index:2}
@media(prefers-reduced-motion:reduce){
 .brand-wave--video .brand-wave-video{display:none}
 .brand-wave--video .brand-wave-static{display:block}
}

/* Panel admin: resumen de asistencia (personas, conectadas ahora, ingresos) */
.asistencia-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:0.6rem;margin-bottom:1rem}
.asistencia-dato{display:flex;flex-direction:column;gap:2px;background:var(--enap-surface);border:1px solid var(--enap-line);border-radius:8px;padding:0.75rem 0.85rem}
.asistencia-dato strong{font-size:1.45rem;font-weight:700;color:var(--enap-text);font-variant-numeric:tabular-nums;line-height:1.1}
.asistencia-dato span{font-size:0.85rem;color:var(--enap-muted)}

/* Acciones de las tablas del panel (editar, suspender/reactivar, eliminar):
   íconos de línea, sin borde ni fondo, en una sola fila. Al pasar el mouse se
   marcan con el azul Enap; eliminar, con el rojo de error. */
.acciones-fila{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.btn-icono{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--enap-muted);cursor:pointer;transition:background-color 150ms ease,color 150ms ease}
.btn-icono svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.btn-icono:hover{background:var(--enap-surface-200);color:var(--enap-blue-700)}
.btn-icono--peligro:hover{background:#FCEBEA;color:var(--enap-error)}
.btn-icono:focus-visible{outline:3px solid var(--enap-focus);outline-offset:1px}
.btn-icono:active{transform:translateY(1px)}

/* Asistencia: período, detalle de tarjetas, gráfico y reinicio */
.asistencia-rango{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.75rem;margin:0 0 1rem;padding:0.75rem 1rem;background:var(--enap-surface);border:1px solid var(--enap-line);border-radius:8px}
.asistencia-rango>label{font-size:14px;font-weight:600;color:var(--enap-text)}
.asistencia-rango select,.asistencia-rango input{min-height:38px;border:1px solid var(--enap-line);border-radius:4px;background:var(--enap-white);font:inherit;font-size:14px;color:var(--enap-text);padding:6px 10px}
.asistencia-rango-custom{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.asistencia-rango-custom label{display:inline-flex;align-items:center;gap:0.4rem;font-size:14px;color:var(--enap-muted)}
.asistencia-rango-texto{margin:0 0 0 auto}
.asistencia-dato small{font-size:0.75rem;color:var(--enap-muted);margin-top:2px}
.celda-num{font-variant-numeric:tabular-nums;text-align:right}

.asistencia-grafico{margin:0 0 1.25rem;padding:0.9rem 1rem 0.5rem;border:1px solid var(--enap-line);border-radius:8px;background:var(--enap-white)}
.asistencia-grafico figcaption{font-size:14px;font-weight:600;color:var(--enap-text);margin-bottom:0.4rem}
.asistencia-grafico-lienzo{position:relative}
.grafico-svg{display:block;width:100%;height:auto;overflow:visible}
.grafico-grilla{stroke:var(--enap-line);stroke-width:1;stroke-dasharray:2 4}
.grafico-base{stroke:#B9C3C8;stroke-width:1}
.grafico-eje{font-size:11px;fill:var(--enap-muted);font-variant-numeric:tabular-nums}
.grafico-area{fill:var(--enap-blue-700);fill-opacity:0.10;stroke:none}
.grafico-linea{fill:none;stroke:var(--enap-blue-700);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.grafico-guia{stroke:var(--enap-muted);stroke-width:1;stroke-dasharray:3 3}
.grafico-punto{fill:var(--enap-blue-700);stroke:var(--enap-white);stroke-width:2}
.grafico-tip{position:absolute;transform:translate(-50%,calc(-100% - 12px));pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 10px;background:var(--enap-text);color:var(--enap-white);border-radius:6px;font-size:12px;white-space:nowrap;box-shadow:0 4px 12px rgba(18,32,43,.18)}
.grafico-tip strong{font-size:13px;font-variant-numeric:tabular-nums}

.asistencia-reinicio{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--enap-line)}
.asistencia-reinicio h4{margin:0;font-size:15px;font-weight:600;color:var(--enap-text)}
.asistencia-reinicio .field-help{margin:0.25rem 0 0.75rem}
.reinicio-acciones{display:flex;flex-wrap:wrap;gap:0.5rem}
.reinicio-acciones .btn{width:auto}

/* Portadas: tarjeta de ingreso ~15% más compacta (ancho, márgenes, textos,
   campos y botón). Solo en .login-page: los formularios del panel no cambian.
   En celular los campos quedan en 16px para que iOS no haga zoom al tocarlos. */
.login-page .login-card{max-width:408px;padding:26px}
.login-page .login-card h2{font-size:20px;margin-bottom:4px}
.login-page .login-card p.subtitle{font-size:14px;margin-bottom:18px}
.login-page .login-card .form-group{margin-bottom:12px}
.login-page .login-card .form-group label{font-size:13px;margin-bottom:4px}
.login-page .login-card .form-group input{min-height:42px;padding:9px 12px;font-size:15px}
.login-page .login-card .btn{min-height:42px;font-size:15px;margin-top:4px}
@media(max-width:767px){.login-page .login-card{padding:22px}.login-page .login-card .form-group input{font-size:16px}}

/* Chat: mensaje fijo de bienvenida (primer elemento, firmado "EnapVivo") */
.chat-bienvenida{margin:0 0 0.5rem;padding:0.7rem 0.85rem;background:var(--enap-surface);border:1px solid var(--enap-line);border-radius:8px}
.chat-bienvenida-autor{display:block;font-weight:600;font-size:0.85rem;color:var(--enap-blue-700);margin-bottom:0.2rem}
.chat-bienvenida p{margin:0;font-size:0.9rem;line-height:1.45;color:var(--enap-text)}

/* Portadas (tablet y escritorio): campos y botón al 90% del ancho interior de la
   tarjeta, centrados; la tarjeta mantiene su tamaño. Título, subtítulo y aviso
   de error se alinean con el mismo borde. En celular ocupan todo el ancho. */
@media(min-width:768px){
 .login-page .login-card>h2,
 .login-page .login-card>.subtitle,
 .login-page .login-card>.error-msg,
 .login-page .login-card>form{width:90%;margin-left:auto;margin-right:auto}
}

/* Caja de PREGUNTAS (reemplaza el chat): mismo espacio que tenía el chat
   (474 px de alto en escritorio); la zona para escribir ocupa lo que dejó la
   lista de mensajes. */
.preguntas-panel{display:flex;flex-direction:column}
@media(min-width:1024px){.preguntas-panel{min-height:474px}}
.preguntas-bienvenida{padding:18px 16px 16px;border-bottom:1px solid var(--enap-line)}
.preguntas-saludo{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--enap-text);text-wrap:balance}
.preguntas-invitacion{margin:6px 0 0;font-size:15px;line-height:1.4;color:var(--enap-muted)}
.preguntas-form{flex:1;display:flex;flex-direction:column;gap:10px;border-top:0}
.preguntas-form textarea{flex:1;min-height:140px;resize:none;line-height:1.45}
.chat-feedback--ok{color:var(--enap-success);font-weight:500}
.chat-feedback--error{color:var(--enap-error)}

/* Preguntas recibidas (moderador/admin), debajo de la caja */
.preguntas-panel .moderacion-panel{margin:0;padding:14px 16px 16px;border-top:2px solid var(--enap-line)}
.preguntas-panel .moderacion-panel h3{font-size:16px;font-weight:600;margin:0}
.preguntas-total{font-weight:400;color:var(--enap-muted)}
.preguntas-panel .moderacion-list{max-height:420px}
.pregunta-item{padding:10px 12px;border:1px solid var(--enap-line);border-radius:8px;background:var(--enap-surface)}
.pregunta-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.pregunta-autor{font-weight:600;color:var(--enap-text)}
.pregunta-hora{color:var(--enap-muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.pregunta-texto{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--enap-text);overflow-wrap:anywhere}
@media(max-width:1023px){.preguntas-form textarea{min-height:120px}}