/* compartir_pantalla.css — Soporte / Compartir mi Pantalla (SP-010). 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; }

.sp-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.sp-card{ background:#fff; border:1px solid #d8e2ee; border-radius:16px; box-shadow:0 10px 35px rgba(20,61,102,.1); width:100%; max-width:520px; padding:2rem; }

.sp-panel{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; }
.sp-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; }
.sp-icon-done{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.sp-panel h1{ font-size:1.4rem; font-weight:700; color:#143d66; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.sp-cod{ font-size:.6rem; font-weight:600; background:#eef5ff; color:#1a4d80; padding:2px 7px; border-radius:5px; }
.sp-desc{ font-size:.92rem; color:#5a7390; line-height:1.55; }
.sp-features{ list-style:none; text-align:left; display:flex; flex-direction:column; gap:.55rem; margin:.4rem 0; width:100%; }
.sp-features li{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:#475569; background:#f8fafd; border:1px solid #e8eef6; border-radius:9px; padding:.6rem .8rem; }
.sp-features i{ color:#1a4d80; font-size:1.05rem; }

.sp-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%; margin-top:.4rem; }
.sp-btn-primary:hover{ filter:brightness(1.07); }
.sp-btn-danger{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer; font:inherit; font-size:.95rem; font-weight:700; border:none; background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; padding:.8rem 1.5rem; border-radius:11px; width:100%; }
.sp-btn-copy{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; font:inherit; font-size:.86rem; font-weight:600; border:1px solid #cdd9e8; background:#fff; color:#1a4d80; padding:.5rem 1rem; border-radius:9px; }
.sp-btn-copy:hover{ background:#f1f6fc; }

/* Compartiendo */
.sp-status-bar{ display:flex; align-items:center; justify-content:center; gap:.6rem; background:#f8fafd; border:1px solid #e8eef6; border-radius:10px; padding:.6rem 1rem; width:100%; font-size:.88rem; color:#5a7390; }
.sp-status-dot{ width:11px; height:11px; border-radius:50%; background:#f59e0b; animation:sp-pulse 1.4s infinite; }
.sp-status-dot.connected{ background:#22c55e; animation:none; }
.sp-status-dot.disconnected{ background:#ef4444; animation:none; }
@keyframes sp-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.sp-code-section{ width:100%; }
.sp-code-label{ font-size:.82rem; color:#7d93ad; margin-bottom:.4rem; }
.sp-code{ font-family:'Consolas',monospace; font-size:2.6rem; font-weight:700; letter-spacing:.3rem; color:#1a4d80; background:#eef5ff; border:2px dashed #b9cae0; border-radius:12px; padding:.7rem; margin-bottom:.6rem; }
.sp-preview{ width:100%; }
.sp-preview video{ width:100%; border-radius:11px; border:1px solid #d8e2ee; background:#0f2438; max-height:240px; }
.sp-preview-label{ font-size:.74rem; color:#9aa9bd; margin-top:.35rem; }
.sp-info{ display:flex; align-items:center; gap:.5rem; background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; border-radius:10px; padding:.65rem .9rem; width:100%; font-size:.86rem; }

.sp-footer{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1.2rem; font-size:.74rem; color:#9aa9bd; }
.sp-foot-cod{ background:#eef5ff; color:#1a4d80; padding:2px 7px; border-radius:5px; font-weight:600; }

@media (max-width:560px){ .sp-card{ padding:1.3rem; } .sp-code{ font-size:2rem; letter-spacing:.2rem; } .sp-panel h1{ font-size:1.2rem; } }

/* ═══════════════════════════════════════════════════════════════════
 * MODO OSCURO — body.dark-mode (tema-navy.js). Solo AGREGA; paleta clara intacta.
 * El VIDEO de la vista previa NO se toca: es contenido del usuario y ya
 * tiene fondo propio oscuro por diseño (lección 8).
 * ═══════════════════════════════════════════════════════════════════ */
body.dark-mode{ background:var(--nv-bg); color:var(--nv-text); }
body.dark-mode .sp-card{ background:var(--nv-card); border-color:var(--nv-border); box-shadow:var(--nv-shadow); }
body.dark-mode .sp-icon{ background:linear-gradient(135deg,var(--nv-head1),var(--nv-head2)); color:var(--nv-head-ink); }
/* sp-icon-done: verde = éxito, se preserva (lección 5). Re-declarado por especificidad */
body.dark-mode .sp-icon.sp-icon-done{ background:linear-gradient(135deg,#22c55e,#16a34a); color:#0b1622; }
/* navy1 hacía doble función (fondo de header Y color de texto): aquí es TEXTO -> --nv-text (lección 1) */
body.dark-mode .sp-panel h1{ color:var(--nv-text); }
body.dark-mode .sp-cod{ background:rgba(79,156,249,.16); color:var(--nv-accent); }
body.dark-mode .sp-desc{ color:var(--nv-muted); }
body.dark-mode .sp-features li{ background:var(--nv-soft); border-color:var(--nv-border); color:var(--nv-text); }
body.dark-mode .sp-features i{ color:var(--nv-accent); }
body.dark-mode .sp-btn-copy{ background:var(--nv-input); border-color:var(--nv-border); color:var(--nv-accent); }
body.dark-mode .sp-btn-copy:hover{ background:var(--nv-hover); }
body.dark-mode .sp-status-bar{ background:var(--nv-soft); border-color:var(--nv-border); color:var(--nv-muted); }
body.dark-mode .sp-code-label{ color:var(--nv-muted); }
body.dark-mode .sp-code{ background:var(--nv-input); border-color:var(--nv-border); color:var(--nv-accent); }
body.dark-mode .sp-preview video{ border-color:var(--nv-border); }
body.dark-mode .sp-preview-label{ color:var(--nv-faint); }
/* Verde = técnico conectado (OK): se preserva como translúcido (lecciones 5 y 7) */
body.dark-mode .sp-info{ background:rgba(22,163,74,.14); border-color:rgba(22,163,74,.35); color:#86efac; }
body.dark-mode .sp-footer{ color:var(--nv-faint); }
body.dark-mode .sp-foot-cod{ background:rgba(79,156,249,.16); color:var(--nv-accent); }