/* Capa de transición para rutas que aún tienen estructura útil, pero conservaban
   la estética anterior. Se carga después de sus hojas inline para que tema,
   tipografía y contraste sigan un único sistema sin reescribir su lógica. */
body.legacy-surface {
    --bg-color: #f8fafc;
    --text-color: #0b1533;
    --card-bg: #ffffff;
    --navbar-bg: #ffffff;
    --border-color: #dbe2ee;
    --input-bg: #ffffff;
    --input-text: #0b1533;
    --text-secondary: #566078;
    --accent-color: #1463e6;
    --bg-principal: #f8fafc;
    --texto-principal: #0b1533;
    --texto-secundario: #566078;
    --borde: #dbe2ee;
    margin: 0;
    background: #f8fafc !important;
    color: #0b1533 !important;
    font-family: "Onest", sans-serif !important;
}

body.legacy-surface .navbar,
body.legacy-surface .legal-navbar,
body.legacy-surface .comparar-nav {
    border-color: #dbe2ee !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 5px 20px rgba(22, 34, 62, .055);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.legacy-surface .nav-left,
body.legacy-surface .nav-left h1,
body.legacy-surface .legal-navbar h1,
body.legacy-surface .comparar-marca,
body.legacy-surface .navbar a:not(.nav-pill-primary) { color: #0b1533 !important; }
body.legacy-surface .nav-pill-primary,
body.legacy-surface .alertas-btn:not(.secundario),
body.legacy-surface .comparar-vacio a:not(.secundario),
body.legacy-surface .lista-publica-body a,
body.legacy-surface .mensajes-cab-chat { background: #1463e6 !important; color: #fff !important; }
body.legacy-surface .nav-pill-primary:hover,
body.legacy-surface .alertas-btn:not(.secundario):hover,
body.legacy-surface .lista-publica-body a:hover { background: #0e50c8 !important; }

body.legacy-surface .alertas-hero,
body.legacy-surface .mensajes-hero,
body.legacy-surface .lista-publica-head,
body.legacy-surface .comparar-vacio,
body.legacy-surface .highlight-box {
    border-color: #dbe2ee !important;
    background: #f3f7fc !important;
    color: #0b1533 !important;
    box-shadow: none !important;
}
body.legacy-surface .alertas-kicker,
body.legacy-surface .mensajes-kicker,
body.legacy-surface .comparar-kicker,
body.legacy-surface .lista-publica-kicker { color: #1463e6 !important; }
body.legacy-surface .alertas-card,
body.legacy-surface .alerta-item,
body.legacy-surface .coincidencia,
body.legacy-surface .lista-publica-item,
body.legacy-surface .comparar-tabla,
body.legacy-surface .chat-conversacion-card { background: #fff !important; border-color: #dbe2ee !important; box-shadow: 0 8px 20px rgba(25, 43, 75, .08) !important; }
body.legacy-surface .alertas-card h2,
body.legacy-surface .alerta-item h3,
body.legacy-surface .coincidencia h3,
body.legacy-surface .lista-publica-body h2,
body.legacy-surface .comparar-cabecera h1,
body.legacy-surface .mensajes-hero h1 { color: #0b1533 !important; }
body.legacy-surface .alertas-card p,
body.legacy-surface .alerta-item p,
body.legacy-surface .coincidencia p,
body.legacy-surface .lista-publica-head p,
body.legacy-surface .comparar-cabecera p,
body.legacy-surface .comparar-ayuda,
body.legacy-surface .mensajes-hero p,
body.legacy-surface .legal-container p,
body.legacy-surface .legal-container li { color: #566078 !important; opacity: 1 !important; }
body.legacy-surface .alertas-form input,
body.legacy-surface .alertas-form select,
body.legacy-surface .mensajes-herramientas input { border-color: #c7d2e3 !important; background: #fff !important; color: #0b1533 !important; }
body.legacy-surface .mensajes-filtros button,
body.legacy-surface .comparar-volver,
body.legacy-surface .comparar-vacio a.secundario { border-color: #dbe2ee !important; background: #fff !important; color: #0b1533 !important; }
body.legacy-surface .mensajes-filtros button.activo { border-color: #1463e6 !important; background: #eaf2ff !important; color: #0e50c8 !important; }

body.legacy-surface .legal-container { max-width: 760px; }
body.legacy-surface .legal-container h1 { color: #0b1533 !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.legacy-surface .legal-container h2 { border-color: #1463e6 !important; color: #0b1533 !important; }
body.legacy-surface .legal-container h3,
body.legacy-surface .legal-container a,
body.legacy-surface .legal-navbar a { color: #1463e6 !important; }
body.legacy-surface .tabla-datos th { background: #f3f7fc !important; }
body.legacy-surface .tabla-datos th,
body.legacy-surface .tabla-datos td { border-color: #dbe2ee !important; color: #0b1533 !important; }

body.legacy-surface .comparar-servicio img,
body.legacy-surface .comparar-sin-imagen { background: #eaf2ff !important; }
body.legacy-surface .comparar-badge { border-color: #bfd4f7 !important; background: #eaf2ff !important; color: #0e50c8 !important; }
body.legacy-surface .comparar-cta { background: #1463e6 !important; box-shadow: none !important; }
body.legacy-surface .comparar-cta:hover { background: #0e50c8 !important; }
body.legacy-surface .comparar-volver svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

:root[data-theme="dark"] body.legacy-surface {
    --bg-color: #0a1225;
    --text-color: #f5f8ff;
    --card-bg: #111b31;
    --navbar-bg: #0a1225;
    --border-color: #283854;
    --input-bg: #0f192e;
    --input-text: #f5f8ff;
    --text-secondary: #b3bfd3;
    background: #0a1225 !important;
    color: #f5f8ff !important;
}
:root[data-theme="dark"] body.legacy-surface .navbar,
:root[data-theme="dark"] body.legacy-surface .legal-navbar,
:root[data-theme="dark"] body.legacy-surface .comparar-nav { border-color: #24314b !important; background: #0a1225 !important; box-shadow: none; }
:root[data-theme="dark"] body.legacy-surface .nav-left,
:root[data-theme="dark"] body.legacy-surface .nav-left h1,
:root[data-theme="dark"] body.legacy-surface .legal-navbar h1,
:root[data-theme="dark"] body.legacy-surface .comparar-marca,
:root[data-theme="dark"] body.legacy-surface .navbar a:not(.nav-pill-primary) { color: #f5f8ff !important; }
:root[data-theme="dark"] body.legacy-surface .alertas-hero,
:root[data-theme="dark"] body.legacy-surface .mensajes-hero,
:root[data-theme="dark"] body.legacy-surface .lista-publica-head,
:root[data-theme="dark"] body.legacy-surface .comparar-vacio,
:root[data-theme="dark"] body.legacy-surface .highlight-box { border-color: #283854 !important; background: #0f192e !important; color: #f5f8ff !important; }
:root[data-theme="dark"] body.legacy-surface .alertas-card,
:root[data-theme="dark"] body.legacy-surface .alerta-item,
:root[data-theme="dark"] body.legacy-surface .coincidencia,
:root[data-theme="dark"] body.legacy-surface .lista-publica-item,
:root[data-theme="dark"] body.legacy-surface .comparar-tabla,
:root[data-theme="dark"] body.legacy-surface .chat-conversacion-card { border-color: #33425e !important; background: #111b31 !important; box-shadow: none !important; }
:root[data-theme="dark"] body.legacy-surface .alertas-card h2,
:root[data-theme="dark"] body.legacy-surface .alerta-item h3,
:root[data-theme="dark"] body.legacy-surface .coincidencia h3,
:root[data-theme="dark"] body.legacy-surface .lista-publica-body h2,
:root[data-theme="dark"] body.legacy-surface .comparar-cabecera h1,
:root[data-theme="dark"] body.legacy-surface .mensajes-hero h1,
:root[data-theme="dark"] body.legacy-surface .legal-container h1,
:root[data-theme="dark"] body.legacy-surface .tabla-datos th,
:root[data-theme="dark"] body.legacy-surface .tabla-datos td { color: #f5f8ff !important; }
:root[data-theme="dark"] body.legacy-surface .alertas-card p,
:root[data-theme="dark"] body.legacy-surface .alerta-item p,
:root[data-theme="dark"] body.legacy-surface .coincidencia p,
:root[data-theme="dark"] body.legacy-surface .lista-publica-head p,
:root[data-theme="dark"] body.legacy-surface .comparar-cabecera p,
:root[data-theme="dark"] body.legacy-surface .comparar-ayuda,
:root[data-theme="dark"] body.legacy-surface .mensajes-hero p,
:root[data-theme="dark"] body.legacy-surface .legal-container p,
:root[data-theme="dark"] body.legacy-surface .legal-container li { color: #b3bfd3 !important; }
:root[data-theme="dark"] body.legacy-surface .alertas-form input,
:root[data-theme="dark"] body.legacy-surface .alertas-form select,
:root[data-theme="dark"] body.legacy-surface .mensajes-herramientas input { border-color: #3b4a66 !important; background: #0f192e !important; color: #f5f8ff !important; }
:root[data-theme="dark"] body.legacy-surface .mensajes-filtros button,
:root[data-theme="dark"] body.legacy-surface .comparar-volver,
:root[data-theme="dark"] body.legacy-surface .comparar-vacio a.secundario { border-color: #3b4a66 !important; background: #111b31 !important; color: #f5f8ff !important; }
:root[data-theme="dark"] body.legacy-surface .tabla-datos th { background: #16233e !important; }

@media (prefers-reduced-motion: reduce) {
    body.legacy-surface *, body.legacy-surface *::before, body.legacy-surface *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Las superficies de transición no quedan fuera del sistema de navegación.
   En teléfono cada acción conserva 44px y el control de tema vive en la
   cabecera, no flotando sobre el contenido. */
@media (max-width: 520px) {
    body.legacy-surface .legal-navbar,
    body.legacy-surface .comparar-nav {
        min-height: 64px;
        padding: 8px 12px;
        gap: 8px;
    }

    body.legacy-surface .legal-navbar h1,
    body.legacy-surface .comparar-marca {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
    }

    body.legacy-surface .legal-navbar > a,
    body.legacy-surface .comparar-volver {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 44px;
        padding: 0 10px;
        font-size: .8rem;
        white-space: nowrap;
    }

    body.legacy-surface .legal-navbar .nav-utilidades,
    body.legacy-surface .comparar-nav .nav-utilidades {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    body.legacy-surface .legal-navbar .theme-toggle,
    body.legacy-surface .comparar-nav .theme-toggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    body.legacy-surface.legacy-lista .navbar .nav-right { display: flex; align-items: center; gap: 8px; }
    body.legacy-surface.legacy-lista .navbar .nav-right > .nav-pill { min-height: 44px !important; }
}

@media (max-width: 380px) {
    body.legacy-surface .legal-navbar,
    body.legacy-surface .comparar-nav { padding-right: 8px; padding-left: 8px; gap: 4px; }
    body.legacy-surface .legal-navbar > a { padding-right: 6px; padding-left: 6px; font-size: .76rem; }
    body.legacy-surface .comparar-volver .comparar-volver-text { font-size: 0; }
    body.legacy-surface .comparar-volver .comparar-volver-text::after { content: "Añadir"; font-size: .8rem; }
}