/* 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;
}
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}
.login-container {background:var(--enap-surface);min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:var(--space-7);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)}
.eyebrow {font-size:14px!important;font-weight:500;color:var(--enap-text)!important}
.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)}
.btn-primary {background:var(--enap-gold-400);color:var(--enap-text)}
.btn-primary:hover {background:#d9aa39;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:32px;max-width:100%;flex-shrink:0}
.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:28px}.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}}