/* ============================================================================
   claut-theme-visitante.css — variante OSCURA del portal de visitante (visitante.html nació claro:
   «aurora glass»). Solo actúa con html[data-theme="dark"]. El escenario de cine (radiografía), la tarjeta
   CTA y la banda de contacto ya son oscuros y no cambian.
   Estrategia: redefinir las variables de la página (--bg, --ink, --glass…) y ajustar los pocos colores fijos.
   ============================================================================ */

html[data-theme="dark"] {
    --bg: #09090b;
    --ink: #f3f4f7;
    --mid: #a7adba;
    --low: #7f8696;
    --glass: rgba(255, 255, 255, 0.045);
    --glass-h: rgba(255, 255, 255, 0.08);
    --stroke: rgba(255, 255, 255, 0.08);
    --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
    --accent-deep: #ff8a8f;          /* rojo para texto sobre oscuro */
    --info: #7aa7ff;
    --success: #4ade80;
    --wa: #4ade80;
    color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* Auroras: en oscuro, resplandores profundos y tenues en lugar de pasteles */
html[data-theme="dark"] .aurora { opacity: 0.32; }
html[data-theme="dark"] .aurora .a1 { background: radial-gradient(circle, #5b2bb5 0%, transparent 65%); }
html[data-theme="dark"] .aurora .a2 { background: radial-gradient(circle, #1e3a8a 0%, transparent 65%); }
html[data-theme="dark"] .aurora .a3 { background: radial-gradient(circle, #8f1a1f 0%, transparent 68%); }
html[data-theme="dark"] .aurora .a4 { background: radial-gradient(circle, #0e4f66 0%, transparent 65%); }

/* Header sobre la zona de contenido: el fundido era del gris claro de fondo */
html[data-theme="dark"] .hdr::before {
    background: linear-gradient(180deg, rgba(9, 9, 11, 0.92) 0%, rgba(9, 9, 11, 0.55) 60%, rgba(9, 9, 11, 0) 100%) !important;
}
html[data-theme="dark"] .hdr.on-light { color: var(--ink); }
html[data-theme="dark"] .hdr.on-light .btn-ghost,
html[data-theme="dark"] .btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ink);
    --splash: rgba(255, 255, 255, 0.12);
}

/* Paso del cine a la zona de contenido: el degradado terminaba en el gris claro */
html[data-theme="dark"] .light-wrap {
    background: linear-gradient(180deg, #0b0b0f 0%, rgba(9, 9, 11, 0.92) 6%, rgba(9, 9, 11, 0) 18%) !important;
}

/* Palabras editoriales de fondo (contorno) */
html[data-theme="dark"] .wm { -webkit-text-stroke-color: rgba(255, 255, 255, 0.05) !important; }

/* Tarjetas de vidrio: sombra y contorno para separarse del fondo oscuro */
html[data-theme="dark"] :is(.bcard, .pcard, .person, .empty, .empty-rich, .lumia-badge) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] :is(.bcard, .pcard):hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 70px -26px rgba(0, 0, 0, 0.85); }
html[data-theme="dark"] .person img { background: linear-gradient(135deg, #2a2d38, #1b1d25); }
html[data-theme="dark"] .pfoot { border-top-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .badge-open { background: rgba(74, 222, 128, 0.12); }
html[data-theme="dark"] .badge-doc { background: rgba(122, 167, 255, 0.12); }

/* Botones de acento sobre la zona de contenido: el rojo profundo pasa a rojo claro legible */
html[data-theme="dark"] .light-wrap .btn-red,
html[data-theme="dark"] .hdr.on-light .btn-red {
    background: rgba(199, 37, 43, 0.2);
    border-color: rgba(255, 90, 96, 0.24);
    color: #fff;
}
html[data-theme="dark"] .btn-wa { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.18); }
html[data-theme="dark"] .btn-mail { background: rgba(122, 167, 255, 0.08); border-color: rgba(122, 167, 255, 0.18); }

/* Formulario de contacto (banda oscura): ya es oscuro; solo los campos, por si heredan el claro */
html[data-theme="dark"] .contact :is(input, textarea) { color: #fff; }