/* ver_pantalla.css — Soporte / Ver Pantalla Remota (SP-011). Navy, responsive. */
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; background:#eef3fa; color:#0f2438; min-height:100vh; }

/* Panel centrado (código / conectando / fin) */
.vp-panel{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.vp-card{ background:#fff; border:1px solid #d8e2ee; border-radius:16px; box-shadow:0 10px 35px rgba(20,61,102,.1); width:100%; max-width:460px; padding:2rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
.vp-icon{ width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a4d80,#143d66); color:#fff; font-size:2.4rem; }
.vp-icon-done{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.vp-card h1{ font-size:1.4rem; font-weight:700; color:#143d66; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.vp-card h2{ font-size:1.2rem; font-weight:700; color:#143d66; }
.vp-cod{ font-size:.6rem; font-weight:600; background:#eef5ff; color:#1a4d80; padding:2px 7px; border-radius:5px; }
.vp-desc{ font-size:.92rem; color:#5a7390; line-height:1.55; }

.vp-input-group{ width:100%; }
.vp-code-input{ width:100%; text-align:center; font-family:'Consolas',monospace; font-size:2.2rem; font-weight:700; letter-spacing:.3rem; color:#1a4d80; border:2px solid #cdd9e8; border-radius:12px; padding:.7rem; background:#f8fafd; }
.vp-code-input:focus{ outline:none; border-color:#2563eb; background:#fff; }
.vp-error{ color:#dc2626; font-size:.84rem; margin-top:.5rem; }

.vp-btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; font:inherit; font-size:1rem; font-weight:700; border:none; background:linear-gradient(135deg,#2563eb,#1a4d80); color:#fff; padding:.85rem 1.6rem; border-radius:11px; text-decoration:none; width:100%; }
.vp-btn-primary:hover{ filter:brightness(1.07); }

.vp-spinner{ width:54px; height:54px; border:5px solid #e8eef6; border-top-color:#1a4d80; border-radius:50%; animation:vp-spin 1s linear infinite; }
@keyframes vp-spin{ to{ transform:rotate(360deg); } }

/* Viendo (fullscreen) */
.vp-fullscreen{ position:fixed; inset:0; background:#0f2438; display:flex; flex-direction:column; z-index:50; }
.vp-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#143d66; color:#fff; padding:.55rem 1rem; }
.vp-toolbar-left{ display:flex; align-items:center; gap:.6rem; }
.vp-live-dot{ width:11px; height:11px; border-radius:50%; background:#ef4444; animation:vp-pulse 1.3s infinite; }
@keyframes vp-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.vp-live-text{ font-size:.78rem; font-weight:700; letter-spacing:.05em; }
.vp-room-code{ font-family:'Consolas',monospace; font-size:.82rem; background:rgba(255,255,255,.14); padding:2px 9px; border-radius:6px; letter-spacing:.15rem; }
.vp-toolbar-right{ display:flex; gap:.5rem; }
.vp-tool-btn{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font:inherit; font-size:.85rem; font-weight:600; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; padding:.45rem .8rem; border-radius:8px; }
.vp-tool-btn:hover{ background:rgba(255,255,255,.2); }
.vp-tool-danger{ background:rgba(239,68,68,.85); border-color:#dc2626; }
.vp-tool-danger:hover{ background:#dc2626; }
.vp-video-container{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.vp-video-container video{ max-width:100%; max-height:100%; }

/* Aviso mientras no llega imagen: sin esto el visor mostraba un rectangulo azul
   (el fondo .vp-fullscreen) con la barra diciendo EN VIVO, sin manera de saber
   que no estaba entrando video. Se oculta con el primer frame real. */
.vp-espera{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; padding:1.5rem; color:#cfe0f2; background:#0f2438; }
.vp-espera .vp-spinner{ margin:0; }
.vp-espera-txt{ font-size:.95rem; max-width:32rem; line-height:1.5; margin:0; }
.vp-espera-txt strong{ color:#fff; }
.vp-espera.vp-espera-error .vp-spinner{ display:none; }
.vp-btn-ver{ width:auto; }

@media (max-width:560px){ .vp-card{ padding:1.3rem; } .vp-code-input{ font-size:1.8rem; } .vp-card h1{ font-size:1.2rem; } .vp-live-text{ display:none; } }

/* ═══════════════════════════════════════════════════════════════════
 * MODO OSCURO — body.dark-mode (tema-navy.js). Solo AGREGA; paleta clara intacta.
 * El VISOR .vp-fullscreen (fondo #0f2438, toolbar #143d66) YA es oscuro por
 * diseño y funciona en ambos temas: se deja INTACTO (lección 8). El <video>
 * remoto tampoco se toca: es la pantalla del usuario, va tal cual.
 * ═══════════════════════════════════════════════════════════════════ */
body.dark-mode{ background:var(--nv-bg); color:var(--nv-text); }
body.dark-mode .vp-card{ background:var(--nv-card); border-color:var(--nv-border); box-shadow:var(--nv-shadow); }
body.dark-mode .vp-icon{ background:linear-gradient(135deg,var(--nv-head1),var(--nv-head2)); color:var(--nv-head-ink); }
/* verde = sesión finalizada OK, se preserva (lección 5); re-declarado por especificidad */
body.dark-mode .vp-icon.vp-icon-done{ background:linear-gradient(135deg,#22c55e,#16a34a); color:#0b1622; }
/* navy1/navy2 como COLOR DE TEXTO -> --nv-text (lección 1) */
body.dark-mode .vp-card h1,
body.dark-mode .vp-card h2{ color:var(--nv-text); }
body.dark-mode .vp-cod{ background:rgba(79,156,249,.16); color:var(--nv-accent); }
body.dark-mode .vp-desc{ color:var(--nv-muted); }
body.dark-mode .vp-code-input{ background:var(--nv-input); border-color:var(--nv-border); color:var(--nv-accent); }
body.dark-mode .vp-code-input::placeholder{ color:var(--nv-faint); }
body.dark-mode .vp-code-input:focus{ background:var(--nv-input); border-color:var(--nv-accent); }
body.dark-mode .vp-error{ color:var(--nv-danger); }
body.dark-mode .vp-spinner{ border-color:var(--nv-border); border-top-color:var(--nv-accent); }