/* ==========================================================================
   TEMA OSCURO · Atrium Group
   Se activa con <html data-theme="dark"> (lo gestiona assets/js/tema.js).
   Cargar después de premium.css y directorio.css.
   ========================================================================== */

/* ── Botón de tema en la cabecera (visible en ambos temas) ─────────────── */
.header-acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.tema-toggle {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(15, 46, 38, 0.14);
    background: transparent;
    color: var(--primary-dark);
    font-size: 1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.tema-toggle:hover {
    color: var(--accent-main);
    border-color: var(--accent-main);
    transform: rotate(-12deg);
}
.tema-toggle:focus-visible { outline: 2px solid var(--accent-main); outline-offset: 2px; }
.tema-toggle-flotante {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1200;
}

@media (max-width: 991px) {
    .header-acciones > .header-desktop-cta { display: none !important; }
    .header-acciones { gap: 1.1rem; }
    .tema-toggle { width: 38px; height: 38px; font-size: 0.92rem; }
}

/* Cabecera de la portada al hacer scroll (antes iba en línea desde el JS) */
header.is-scrolled {
    padding: 1rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.98);
}

/* ==========================================================================
   PALETA OSCURA
   ========================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Nuevos tonos de fondo (de más profundo a más elevado) */
    --fondo: #0B1512;
    --fondo-alt: #0F1C18;
    --superficie: #13231E;
    --superficie-2: #1A2E28;
    --verde-marca: #0F2E26;
    --pie: #07100D;
    --crema: #F3EFE6;

    /* Variables de premium.css reinterpretadas: primary-dark/main se usan sobre todo como color de texto */
    --primary-dark: #F3EFE6;
    --primary-main: #E4DDD0;
    --secondary-linen: #0F1C18;
    --secondary-glass: rgba(11, 21, 18, 0.9);

    --accent-main: #D46A43;
    --accent-dark: #C15C3D;
    --accent-light: #E38B6D;

    --text-main: #F3EFE6;
    --text-muted: #B3BDB7;
    --text-light: #8B9892;

    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.5);
    --shadow-btn: 0 8px 22px rgba(212, 106, 67, 0.22);

    /* directorio.css */
    --borde-suave: rgba(243, 239, 230, 0.09);
    --verde-suave: rgba(243, 239, 230, 0.04);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] body { background-color: var(--fondo); }
[data-theme="dark"] ::selection { background: rgba(212, 106, 67, 0.35); color: #fff; }
[data-theme="dark"] .bg-white,
[data-theme="dark"] .adn-section,
[data-theme="dark"] .dir-listado,
[data-theme="dark"] .ficha-cuerpo { background-color: var(--fondo); }
[data-theme="dark"] .bg-linen { background-color: var(--fondo-alt); }

/* ── Cabecera y menú ───────────────────────────────────────────────────── */
[data-theme="dark"] header { border-bottom-color: rgba(243, 239, 230, 0.06); }
[data-theme="dark"] header.solid-header {
    background: rgba(11, 21, 18, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] header.is-scrolled {
    background: rgba(11, 21, 18, 0.96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .logo-img { content: url('/assets/images/logos/logo-cabecera-oscuro.png'); }
[data-theme="dark"] .tema-toggle { border-color: rgba(243, 239, 230, 0.16); }
[data-theme="dark"] .tema-toggle-flotante { background: var(--superficie); }

@media (max-width: 991px) {
    [data-theme="dark"] nav.main-nav {
        background: rgba(15, 28, 24, 0.97);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        border-left-color: rgba(243, 239, 230, 0.06);
    }
    [data-theme="dark"] nav.main-nav ul li a { border-bottom-color: rgba(243, 239, 230, 0.07); }
}

/* ── Botones ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .btn-outline:hover { background-color: var(--crema); color: var(--verde-marca); }
[data-theme="dark"] .btn-light { background: var(--crema); color: var(--verde-marca); }
[data-theme="dark"] .btn-light:hover { background: #fff; color: var(--verde-marca); }
[data-theme="dark"] .ficha-hero.con-portada .btn-outline:hover { background: #fff; color: var(--verde-marca); }
[data-theme="dark"] .member-visit-btn { background: var(--superficie-2); border-color: var(--borde-suave); }
[data-theme="dark"] .member-more-btn { border-color: var(--borde-suave); }
[data-theme="dark"] .member-more-btn:hover,
[data-theme="dark"] .member-more-btn[aria-expanded="true"] { background: var(--verde-suave); border-color: rgba(243, 239, 230, 0.2); }

/* ── Hero de portada ───────────────────────────────────────────────────── */
[data-theme="dark"] #vanta-hero { background-color: var(--fondo); }
[data-theme="dark"] .hero-content .badge {
    background: rgba(19, 35, 30, 0.8);
    border-color: rgba(243, 239, 230, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* ── Superficies (tarjetas, cajas, formularios) ────────────────────────── */
[data-theme="dark"] .hero-buscador,
[data-theme="dark"] .paso,
[data-theme="dark"] .chip,
[data-theme="dark"] .dir-toolbar,
[data-theme="dark"] .dir-card,
[data-theme="dark"] .ficha-caja,
[data-theme="dark"] .pe-comparativa,
[data-theme="dark"] .pe-item,
[data-theme="dark"] .solicitud,
[data-theme="dark"] .pilar-card:hover,
[data-theme="dark"] .pilar-icon,
[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .empresa-card { background: var(--superficie) !important; }
[data-theme="dark"] .pilar-card { border-color: var(--borde-suave); }

[data-theme="dark"] .hero-buscador { border-color: rgba(243, 239, 230, 0.12); }
[data-theme="dark"] .paso-num { background: var(--superficie-2); }
[data-theme="dark"] a.dir-card:hover { border-color: rgba(212, 106, 67, 0.4); }
[data-theme="dark"] .dir-card-nota { background: var(--superficie-2); }
[data-theme="dark"] .dir-card-descuento { background: rgba(212, 106, 67, 0.12); border-color: rgba(212, 106, 67, 0.28); color: var(--accent-light); }

/* Logos de empresa: suelen venir pensados para fondo claro, les dejamos una base crema */
[data-theme="dark"] .dir-card-logo { background: var(--superficie-2); }
[data-theme="dark"] .ficha-logo { background: var(--superficie-2); }
[data-theme="dark"] .dir-card-logo:has(img),
[data-theme="dark"] .ficha-logo:has(img),
[data-theme="dark"] .empresa-logo-wrap:has(img) { background: var(--crema) !important; }

/* Esqueletos de carga */
[data-theme="dark"] .skel {
    background: linear-gradient(90deg, #162923 25%, #1F352E 50%, #162923 75%) !important;
    background-size: 200% 100% !important;
}

/* ── Ficha de empresa ──────────────────────────────────────────────────── */
[data-theme="dark"] .ficha-especialidad { background: var(--superficie); }
[data-theme="dark"] .ficha-servicios li { background: var(--superficie); }
[data-theme="dark"] .ficha-opinion { background: var(--superficie); }
[data-theme="dark"] .ficha-redes a { background: var(--superficie-2); }
[data-theme="dark"] .ficha-redes a:hover { background: var(--accent-main); }
[data-theme="dark"] .ficha-mapa,
[data-theme="dark"] .ficha-galeria-item { background: var(--superficie); }
[data-theme="dark"] .ficha-captura-barra { background: var(--superficie-2); }
[data-theme="dark"] .ficha-captura-barra span { background: rgba(243, 239, 230, 0.2); }
[data-theme="dark"] .ficha-captura-barra em { background: var(--fondo); }
[data-theme="dark"] .ficha-captura img { background: var(--superficie); }
[data-theme="dark"] .ficha-descuento {
    background: linear-gradient(135deg, rgba(212, 106, 67, 0.14), rgba(212, 106, 67, 0.05));
    border-color: rgba(212, 106, 67, 0.3);
}
[data-theme="dark"] .ficha-relacionadas { background: var(--fondo-alt); }
[data-theme="dark"] .ficha-lightbox { background: rgba(4, 9, 8, 0.94); }

/* ── Para empresas ─────────────────────────────────────────────────────── */
[data-theme="dark"] .pe-resultado { background: rgba(243, 239, 230, 0.09); }
[data-theme="dark"] .pe-unico { background: rgba(212, 106, 67, 0.08); }
[data-theme="dark"] .pe-precio {
    background: var(--verde-marca);
    border: 1px solid rgba(243, 239, 230, 0.08);
    color: rgba(243, 239, 230, 0.8);
}

/* ── Formularios ───────────────────────────────────────────────────────── */
[data-theme="dark"] .form-campo input,
[data-theme="dark"] .form-campo select,
[data-theme="dark"] .form-campo textarea {
    background: var(--fondo-alt);
    border-color: rgba(243, 239, 230, 0.14);
}
[data-theme="dark"] .form-campo input:focus,
[data-theme="dark"] .form-campo select:focus,
[data-theme="dark"] .form-campo textarea:focus {
    background: var(--superficie-2);
    box-shadow: 0 0 0 3px rgba(212, 106, 67, 0.22);
}
[data-theme="dark"] .dir-campo { background: var(--fondo-alt); }
[data-theme="dark"] input::placeholder { color: var(--text-light); }
[data-theme="dark"] .form-estado.ok { background: rgba(46, 160, 90, 0.14); color: #7FD9A0; }
[data-theme="dark"] .form-estado.error { background: rgba(220, 90, 60, 0.14); color: #F2A08A; }

/* ── CTA y pie ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .cta-section {
    background: var(--verde-marca);
    border: 1px solid rgba(243, 239, 230, 0.07);
}
[data-theme="dark"] .cta-section h2 { color: var(--crema); }
[data-theme="dark"] footer {
    background: var(--pie);
    border-top: 1px solid rgba(243, 239, 230, 0.06);
}
[data-theme="dark"] .footer-col h4 { color: var(--crema); }

/* ── Banner y modal de cookies ─────────────────────────────────────────── */
[data-theme="dark"] #cookie-banner {
    background: rgba(19, 35, 30, 0.98);
    border-color: rgba(243, 239, 230, 0.1);
    color: var(--crema);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .cookie-banner-text { color: rgba(243, 239, 230, 0.8); }
[data-theme="dark"] #cookie-settings-modal { background: rgba(4, 9, 8, 0.75); }
[data-theme="dark"] .cookie-modal-content { background: var(--superficie); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .cookie-modal-header { background: var(--verde-marca); }
[data-theme="dark"] .cookie-modal-footer { background: var(--fondo-alt); border-top-color: var(--borde-suave); }
[data-theme="dark"] .cookie-modal-btn-save { background: var(--superficie-2); border: 1px solid var(--borde-suave); }
[data-theme="dark"] .cookie-modal-btn-save:hover { background: #223A33; }
[data-theme="dark"] .cookie-slider { background-color: rgba(243, 239, 230, 0.18); }
[data-theme="dark"] input:disabled + .cookie-slider { background-color: rgba(212, 106, 67, 0.45); }

/* ── Páginas legales (estilos propios en sus <style>) ──────────────────── */
[data-theme="dark"] .legal-section { background-color: var(--fondo-alt); }
[data-theme="dark"] .legal-card,
[data-theme="dark"] .legal-block { background: var(--superficie); border-color: var(--borde-suave); }
[data-theme="dark"] .legal-data-table tr,
[data-theme="dark"] .legal-table td,
[data-theme="dark"] .cookies-table tbody tr { border-color: var(--borde-suave); }
[data-theme="dark"] .legal-divider { background: var(--borde-suave); }
[data-theme="dark"] .legal-table thead tr,
[data-theme="dark"] .cookies-table thead tr { background: var(--verde-marca); color: var(--crema); }
[data-theme="dark"] .cookies-table thead th { color: var(--crema); }
[data-theme="dark"] .cookies-table { background: var(--superficie); }
[data-theme="dark"] .cookies-table-wrapper { border-color: var(--borde-suave); box-shadow: none; }
[data-theme="dark"] .browser-list a { background: var(--superficie-2); border-color: var(--borde-suave); }
[data-theme="dark"] .badge-funcional,
[data-theme="dark"] .badge-eu { background: rgba(243, 239, 230, 0.1); }
[data-theme="dark"] .badge-tecnica { background: rgba(148, 163, 184, 0.16); color: #CBD5E1; }

/* ── Transición suave al cambiar de tema ───────────────────────────────── */
html.tema-cambiando,
html.tema-cambiando *,
html.tema-cambiando *::before,
html.tema-cambiando *::after {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

/* ── Desplegables (select) en modo oscuro ──────────────────────────────────
   La lista de opciones la pinta el navegador: se le da fondo oscuro y texto claro
   para que haya contraste (antes salía fondo blanco con texto casi blanco). */
[data-theme="dark"] select {
    color-scheme: dark;
    color: var(--text-main);
}
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
    background-color: var(--superficie-2);
    color: var(--crema);
}
[data-theme="dark"] select option:checked,
[data-theme="dark"] select option:hover {
    background-color: var(--accent-main);
    color: #fff;
}
[data-theme="dark"] select option:disabled { color: var(--text-light); }