/*
 * TLJ Tema 2.0 · Shell global.
 * Fase 10.1: una sola cabecera para toda la web (Kadence + Astra).
 * Los módulos no deben definir la cabecera del sitio.
 */

/* =========================================================
   FONDO Y TIPOGRAFÍA DE TODA LA WEB · FASE 10.7 / 11.63
   Única fuente del lienzo de las páginas (body y contenedores de
   Kadence/Astra, sin degradados ni sombras de caja) y de la familia
   tipográfica (--tlj-font-family), que también reciben los títulos de
   Kadence. Los plugins no definen fondo de página ni familia de letra:
   sus raíces son transparentes y heredan la tipografía.
   ========================================================= */
html[data-tlj-theme] {
    --global-body-font-family: var(--tlj-font-family);
    --global-heading-font-family: var(--tlj-font-family);
}

html[data-tlj-theme] body,
html[data-tlj-theme] body :is(
    #page,
    #wrapper,
    #inner-wrap,
    .site,
    .site-content,
    .site-main,
    #primary,
    .content-area,
    .content-bg,
    .content-container.site-container,
    .content-wrap,
    article.entry,
    .entry-content-wrap,
    .entry-content,
    .ast-container
) {
    background: var(--tlj-ui-page);
    box-shadow: none;
    color: var(--tlj-ui-text);
}

html[data-tlj-theme] body {
    font-family: var(--tlj-font-family);
    transition: background-color var(--tlj-transition), color var(--tlj-transition);
}

:where(html[data-tlj-theme] body) :where(button, input, optgroup, select, textarea) {
    font-family: inherit;
}

/* =========================================================
   ESTRUCTURA DE PÁGINA · FASE 11.59 / 11.64
   Ninguna página TLJ muestra el título de Kadence.
   - Herramientas de la app (Panel, Plan, Lista, Evolución, Estadísticas,
     Gráficos y Herramientas), reconocidas por la clase de body que ya
     añade cada plugin: ocupan todo el ancho, sin márgenes ni rellenos en
     los contenedores de Kadence. Al depender de la clase de body, se
     aplica desde el primer pintado, sin destellos de la maqueta estrecha.
   - Páginas con cabecera global (.tlj-page-hero y Contacto): empiezan a
     la misma distancia de la cabecera del sitio; la fija solo el margen
     superior de la cabecera global.
   ========================================================= */
html[data-tlj-theme] body.tlj-theme-enabled:is(
    .tlj-panel-theme2-native,
    .tlj-plan-page-active,
    .tlj-trades-page-active,
    .tlj-eh-page-active,
    .tlj-stats-page-active,
    .tlj-graphs-page,
    .tlj-tools-page-active,
    :has(.tlj-page-hero, tlj-contact-form)
) :is(.entry-hero, #main .entry-header) {
    display: none;
}

html[data-tlj-theme] body.tlj-theme-enabled:is(
    .tlj-panel-theme2-native,
    .tlj-plan-page-active,
    .tlj-trades-page-active,
    .tlj-eh-page-active,
    .tlj-stats-page-active,
    .tlj-graphs-page,
    .tlj-tools-page-active
) :is(
    #primary,
    .content-area,
    .content-container.site-container,
    .content-wrap,
    article.entry,
    .entry-content-wrap,
    .entry-content
) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

html[data-tlj-theme] body.tlj-theme-enabled:has(.tlj-page-hero, tlj-contact-form) :is(#primary, #main, #main .content-wrap, #main .entry, #main .entry-content-wrap, #main .entry-content) {
    margin-top: 0;
    padding-top: 0;
}

html[data-tlj-theme="light"] input,
html[data-tlj-theme="light"] textarea,
html[data-tlj-theme="light"] select { color-scheme: light; }
html[data-tlj-theme="dark"] input,
html[data-tlj-theme="dark"] textarea,
html[data-tlj-theme="dark"] select { color-scheme: dark; }

/* =========================================================
   CABECERA GLOBAL · GEOMETRÍA ÚNICA
   Se aplica en Claro / Oscuro / Sistema resuelto.
   ========================================================= */

:root {
    --tlj-header-max-width: var(--tlj-layout-wide, 1460px);
    --tlj-header-height: 86px;
    --tlj-header-logo-height: 114px;
    --tlj-header-logo-max-width: 188px;
    --tlj-header-menu-gap: 3px;
    --tlj-header-menu-pad-y: 4px;
    --tlj-header-menu-pad-x: 5px;
    --tlj-header-link-pad-y: 7px;
    --tlj-header-link-pad-x: 13px;
}

@media (min-width: 922px) {
    /* Ancho total y altura idénticos en todas las páginas. */
    html[data-tlj-theme] :is(
        #masthead .site-header-row-container-inner > .site-container,
        #masthead .site-header-row-container-inner > .ast-container,
        #masthead .ast-builder-grid-row,
        #ast-desktop-header .ast-builder-grid-row,
        .site-header .site-header-row-container-inner > .site-container
    ) {
        width: 100% !important;
        max-width: var(--tlj-header-max-width) !important;
        min-height: var(--tlj-header-height) !important;
        margin-inline: auto !important;
        padding-inline: var(--tlj-layout-gutter, clamp(14px, 2.1vw, 30px)) !important;
        box-sizing: border-box !important;
    }

    html[data-tlj-theme] :is(
        #masthead .site-header-main-section,
        #masthead .site-header-section,
        #masthead .site-header-primary-section-left,
        #masthead .site-header-primary-section-center,
        #masthead .site-header-primary-section-right
    ) {
        min-height: var(--tlj-header-height) !important;
        align-items: center !important;
    }

    /* Logo: misma presencia visual en todas las páginas. */
    html[data-tlj-theme] :is(
        #masthead .site-branding img,
        #masthead img.custom-logo,
        #masthead .site-logo-img img,
        #ast-desktop-header img.custom-logo,
        .site-header .site-branding img
    ) {
        width: auto !important;
        height: var(--tlj-header-logo-height) !important;
        max-width: var(--tlj-header-logo-max-width) !important;
        max-height: var(--tlj-header-logo-height) !important;
        object-fit: contain !important;
        display: block !important;
        /* Desplazamiento vertical del logo */
        transform: translateY(25px) !important;
    }

    html[data-tlj-theme] :is(
        #masthead .site-branding,
        #masthead .site-branding a,
        #masthead .site-logo-img,
        #ast-desktop-header .site-branding
    ) {
        min-height: var(--tlj-header-height) !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
    }
    
    /* Mover logo hacia la izquierda */
    html[data-tlj-theme] #masthead .site-branding {
        margin-left: -110px;
    }
    
    /* Separación y ancho natural del menú, iguales en todas las páginas. */
    html[data-tlj-theme] .header-navigation .header-menu-container,
    html[data-tlj-theme] #masthead .ast-builder-menu-1 .main-header-menu {
        width: max-content !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-tlj-theme] .header-navigation .header-menu-container > ul,
    html[data-tlj-theme] #masthead .ast-builder-menu-1 .main-header-menu,
    html[data-tlj-theme] #masthead .main-header-menu {
        align-items: center !important;
        gap: var(--tlj-header-menu-gap) !important;
    }

    html[data-tlj-theme] .header-navigation .header-menu-container > ul > li > a,
    html[data-tlj-theme] #masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
    html[data-tlj-theme] #masthead .main-header-menu > .menu-item > .menu-link {
        min-height: auto !important;
        height: auto !important;
        padding: var(--tlj-header-link-pad-y) var(--tlj-header-link-pad-x) !important;
        line-height: 1.25 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   CABECERA GLOBAL · SIN LÍNEA / SOMBRA INFERIOR
   Neutraliza el separador nativo de Astra/Kadence en todos los temas.
   ========================================================= */
html[data-tlj-theme] :is(
    #masthead,
    .site-header,
    .site-main-header-wrap,
    .site-header-row-container,
    .site-header-row-container-inner,
    .ast-primary-header-bar,
    .main-header-bar
) {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

html[data-tlj-theme] :is(
    .site-header-row-container.item-is-fixed .site-header-row-container-inner,
    #masthead .ast-sticky-active,
    .site-header.item-is-fixed
) {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   CABECERA GLOBAL · MODO CLARO
   El fondo de la cabecera usa EL MISMO fondo que las páginas.
   ========================================================= */

html[data-tlj-theme="light"] :is(
    #masthead,
    #ast-desktop-header,
    #ast-mobile-header,
    .site-header,
    .site-header-wrap,
    .site-main-header-wrap,
    .site-main-header-inner-wrap,
    .site-header-row-container,
    .site-header-row-container-inner,
    .ast-primary-header-bar,
    .main-header-bar
) {
    background: var(--tlj-ui-page) !important;
    background-image: none !important;
    color: var(--tlj-ui-text) !important;
}


html[data-tlj-theme="light"] #masthead :is(
    .site-header-primary-section-left,
    .site-header-primary-section-center,
    .site-header-primary-section-right,
    .site-header-main-section,
    .site-header-section,
    .ast-builder-grid-row-container-inner,
    .ast-builder-menu-1,
    .main-navigation,
    .ast-nav-menu
) {
    background: transparent !important;
    background-image: none !important;
}

/* Caja del menú clara, integrada con el fondo de página. */
html[data-tlj-theme="light"] .header-navigation .header-menu-container,
html[data-tlj-theme="light"] #masthead .ast-builder-menu-1 .main-header-menu {
    padding: var(--tlj-header-menu-pad-y) var(--tlj-header-menu-pad-x) !important;
    border: none !important;
    border-radius: 8px !important;
    background: var(--tlj-ui-page) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Kadence + Astra: enlaces normales. */
html[data-tlj-theme="light"] .header-navigation .header-menu-container > ul > li > a,
html[data-tlj-theme="light"] #masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
html[data-tlj-theme="light"] #masthead .main-header-menu > .menu-item > .menu-link {
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--tlj-ui-text-2) !important;
    -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: background-color var(--tlj-transition), color var(--tlj-transition), border-color var(--tlj-transition) !important;
}

/* Hover/focus uniforme. */
html[data-tlj-theme="light"] .header-navigation .header-menu-container > ul > li > a:is(:hover,:focus-visible),
html[data-tlj-theme="light"] #masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:is(:hover,:focus-visible),
html[data-tlj-theme="light"] #masthead .main-header-menu > .menu-item > .menu-link:is(:hover,:focus-visible) {
    border-color: var(--tlj-ui-border-strong) !important;
    background: var(--tlj-ui-hover) !important;
    color: var(--tlj-ui-accent-strong) !important;
    -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
    outline: none !important;
}

/* Activo uniforme. Incluye todas las clases habituales de Kadence/WordPress/Astra. */
html[data-tlj-theme="light"] .header-navigation .header-menu-container > ul > li:is(
    .current-menu-item,
    .current-menu-ancestor,
    .current-menu-parent,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor
) > a,
html[data-tlj-theme="light"] #masthead .main-header-menu > li:is(
    .current-menu-item,
    .current-menu-ancestor,
    .current-menu-parent,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor
) > .menu-link {
    border-color: transparent !important;
    border-radius: 7px !important;
    background: var(--tlj-ui-active-bg) !important;
    color: var(--tlj-ui-accent-strong) !important;
    -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
    box-shadow: var(--tlj-effect-active-inset) !important;
    font-weight: 700 !important;
}

html[data-tlj-theme="light"] .header-navigation .header-menu-container > ul > li:is(
    .current-menu-item,
    .current-menu-ancestor,
    .current-menu-parent
) > a:hover,
html[data-tlj-theme="light"] #masthead .main-header-menu > li:is(
    .current-menu-item,
    .current-menu-ancestor,
    .current-menu-parent
) > .menu-link:hover {
    border-color: var(--tlj-ui-border-strong) !important;
    background: var(--tlj-color-hover-strong) !important;
    color: var(--tlj-ui-accent-strong) !important;
    -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
}

/* Submenús. */
html[data-tlj-theme="light"] :is(
    .header-navigation .sub-menu,
    #masthead .main-header-menu .sub-menu,
    #masthead .ast-menu-shadow
) {
    background: var(--tlj-ui-surface) !important;
    border-color: var(--tlj-ui-border) !important;
    box-shadow: var(--tlj-effect-shadow-popover) !important;
}

html[data-tlj-theme="light"] .header-navigation .sub-menu a,
html[data-tlj-theme="light"] #masthead .main-header-menu .sub-menu .menu-link {
    background: transparent !important;
    color: var(--tlj-ui-text-2) !important;
    -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
}

html[data-tlj-theme="light"] .header-navigation .sub-menu a:hover,
html[data-tlj-theme="light"] .header-navigation .sub-menu .current-menu-item > a,
html[data-tlj-theme="light"] #masthead .main-header-menu .sub-menu .menu-link:hover,
html[data-tlj-theme="light"] #masthead .main-header-menu .sub-menu .current-menu-item > .menu-link {
    background: var(--tlj-ui-hover) !important;
    color: var(--tlj-ui-accent-strong) !important;
    -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
}

/* Idioma / HTML de cabecera. */
html[data-tlj-theme="light"] #masthead :is(
    .tlj-header-language-switcher,
    .tlj-header-language-switcher__item,
    .ast-header-html-1,
    .ast-header-html-2
) {
    color: var(--tlj-ui-text-2) !important;
    -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
}

html[data-tlj-theme="light"] #masthead .tlj-header-language-switcher__item:is(:hover,.is-active) {
    color: var(--tlj-ui-accent-strong) !important;
    -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
}

/* Sticky: conserva únicamente el fondo del tema al desplazarse. */
html[data-tlj-theme="light"] .site-header-row-container.item-is-fixed .site-header-row-container-inner,
html[data-tlj-theme="light"] #masthead .ast-sticky-active,
html[data-tlj-theme="light"] .site-header.item-is-fixed {
    background: var(--tlj-ui-page) !important;
}

/* =========================================================
   COMPATIBILIDAD CON EL ANTIGUO CSS DEL MENÚ ACTIVO EN OSCURO
   Permite eliminar el CSS manual de WordPress sin cambiar el aspecto oscuro.
   ========================================================= */
html[data-tlj-theme="dark"] .header-navigation .header-menu-container > ul > li:is(
    .current-menu-item,
    .current-menu-ancestor,
    .current-menu-parent,
    .current_page_item,
    .current_page_parent,
    .current_page_ancestor
) > a {
    background: var(--tlj-ui-accent) !important;
    color: var(--tlj-color-on-accent) !important;
    -webkit-text-fill-color: var(--tlj-color-on-accent) !important;
    border-radius: 10px !important;
    min-height: auto !important;
    height: auto !important;
}

/* =========================================================
   CABECERA MÓVIL / TABLET
   ========================================================= */
@media (max-width: 921px) {
    :root {
        --tlj-header-height: 70px;
        --tlj-header-logo-height: 52px;
        --tlj-header-logo-max-width: 78px;
    }

    html[data-tlj-theme] :is(
        #ast-mobile-header .ast-builder-grid-row,
        #masthead .site-header-row-container-inner > .site-container,
        #masthead .site-header-row-container-inner > .ast-container,
        .site-mobile-header-inner-wrap
    ) {
        min-height: var(--tlj-header-height) !important;
        padding-inline: 14px !important;
        box-sizing: border-box !important;
    }

    html[data-tlj-theme] :is(
        #masthead .site-branding img,
        #masthead img.custom-logo,
        #masthead .site-logo-img img,
        #ast-mobile-header img.custom-logo
    ) {
        width: auto !important;
        height: var(--tlj-header-logo-height) !important;
        max-width: var(--tlj-header-logo-max-width) !important;
        max-height: var(--tlj-header-logo-height) !important;
        object-fit: contain !important;
    }

    html[data-tlj-theme="light"] :is(
        #ast-mobile-header,
        #ast-mobile-header .ast-primary-header-bar,
        #ast-mobile-header .main-header-bar,
        .site-mobile-header-wrap,
        .site-mobile-header-inner-wrap,
        .popup-drawer,
        .popup-drawer .drawer-inner,
        .mobile-navigation,
        .ast-mobile-popup-drawer .ast-mobile-popup-inner,
        .ast-mobile-popup-drawer .ast-mobile-popup-content,
        .ast-mobile-popup-drawer .main-header-menu,
        .ast-mobile-popup-drawer .ast-builder-menu-mobile
    ) {
        background: var(--tlj-ui-page) !important;
        color: var(--tlj-ui-text) !important;
        border-color: var(--tlj-ui-border) !important;
    }

    html[data-tlj-theme="light"] :is(
        #ast-mobile-header .menu-toggle,
        #ast-mobile-header .ast-mobile-menu-trigger-minimal,
        #ast-mobile-header .mobile-menu-toggle-icon,
        .ast-mobile-popup-drawer .menu-toggle-close,
        #masthead .menu-toggle-open,
        #masthead .mobile-toggle-open-container button
    ) {
        color: var(--tlj-ui-text-2) !important;
        -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
        background: transparent !important;
        border-color: var(--tlj-ui-border) !important;
        box-shadow: none !important;
    }

    html[data-tlj-theme="light"] :is(
        .mobile-navigation a,
        .ast-mobile-popup-drawer .main-header-menu .menu-link
    ) {
        color: var(--tlj-ui-text-2) !important;
        -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
        background: transparent !important;
        border-color: var(--tlj-ui-divider) !important;
    }

    html[data-tlj-theme="light"] .mobile-navigation a:is(:hover,:focus-visible),
    html[data-tlj-theme="light"] .mobile-navigation li:is(.current-menu-item,.current-menu-ancestor,.current_page_item) > a,
    html[data-tlj-theme="light"] .ast-mobile-popup-drawer .main-header-menu .menu-link:is(:hover,:focus-visible),
    html[data-tlj-theme="light"] .ast-mobile-popup-drawer .main-header-menu :is(.current-menu-item,.current-menu-ancestor,.current_page_item) > .menu-link {
        color: var(--tlj-ui-accent-strong) !important;
        -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
        background: var(--tlj-ui-hover) !important;
    }

    html[data-tlj-theme="light"] :is(
        .mobile-navigation .sub-menu,
        .ast-mobile-popup-drawer .sub-menu,
        .ast-mobile-popup-drawer .ast-menu-toggle
    ) {
        background: var(--tlj-ui-surface-2) !important;
        color: var(--tlj-ui-text-2) !important;
        border-color: var(--tlj-ui-divider) !important;
    }
}

/* =========================================================
   PIE GLOBAL · MODO CLARO
   Una única implementación para Kadence + Astra.
   El pie comparte el mismo fondo verde/gris hielo de la página,
   igual que la cabecera, y no crea una franja blanca independiente.
   ========================================================= */
html[data-tlj-theme="light"] :is(
    #colophon,
    .site-footer,
    .site-footer-wrap,
    .site-footer-row-container,
    .site-footer-row-container-inner,
    .site-primary-footer-wrap,
    .site-above-footer-wrap,
    .site-below-footer-wrap,
    .ast-builder-footer-grid-columns,
    .ast-builder-footer-grid-columns > .site-footer-section
) {
    background: var(--tlj-ui-page) !important;
    background-image: none !important;
    color: var(--tlj-ui-text-2) !important;
    border-color: var(--tlj-ui-border) !important;
    box-shadow: none !important;
}

/* Separación limpia entre contenido y pie. */
html[data-tlj-theme="light"] :is(
    #colophon,
    .site-footer,
    .site-footer-wrap
) {
    border-top: 1px solid var(--tlj-ui-border) !important;
}

/* Las columnas y widgets no deben recuperar cajas blancas/negras del tema. */
html[data-tlj-theme="light"] :is(
    #colophon .site-footer-section,
    #colophon .footer-widget-area,
    #colophon .widget,
    #colophon .footer-html-inner,
    .site-footer .site-footer-section,
    .site-footer .footer-widget-area,
    .site-footer .widget,
    .site-footer .footer-html-inner
) {
    background: transparent !important;
    background-image: none !important;
    color: var(--tlj-ui-text-2) !important;
    border-color: var(--tlj-ui-divider) !important;
    box-shadow: none !important;
}

/* Títulos del pie. */
html[data-tlj-theme="light"] :is(
    #colophon h1, #colophon h2, #colophon h3, #colophon h4, #colophon h5, #colophon h6,
    #colophon .widget-title,
    .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6,
    .site-footer .widget-title
) {
    color: var(--tlj-ui-text) !important;
    -webkit-text-fill-color: var(--tlj-ui-text) !important;
    text-shadow: none !important;
}

/* Texto auxiliar, copyright y metadatos. */
html[data-tlj-theme="light"] :is(
    #colophon p,
    #colophon li,
    #colophon .site-info,
    #colophon .footer-html,
    #colophon .footer-html-inner,
    #colophon .ast-footer-copyright,
    .site-footer p,
    .site-footer li,
    .site-footer .site-info,
    .site-footer .footer-html,
    .site-footer .footer-html-inner,
    .site-footer .ast-footer-copyright
) {
    color: var(--tlj-ui-text-2) !important;
    -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
}

/* Enlaces del pie: legibles en reposo y acento TLJ al interactuar. */
html[data-tlj-theme="light"] :is(
    #colophon a,
    .site-footer a,
    .footer-navigation a,
    #colophon .menu a
) {
    color: var(--tlj-ui-text-2) !important;
    -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
    background: transparent !important;
    text-decoration-color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: color var(--tlj-transition), background-color var(--tlj-transition) !important;
}

html[data-tlj-theme="light"] :is(
    #colophon a,
    .site-footer a,
    .footer-navigation a,
    #colophon .menu a
):is(:hover,:focus-visible) {
    color: var(--tlj-ui-accent-strong) !important;
    -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
    background: transparent !important;
    outline-color: var(--tlj-ui-accent) !important;
}

/* Menú de pie Kadence/Astra: sin franja oscura propia. */
html[data-tlj-theme="light"] :is(
    .footer-navigation,
    .footer-navigation .menu,
    #colophon .footer-menu-wrap,
    #colophon .ast-footer-navigation
) {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--tlj-ui-divider) !important;
    box-shadow: none !important;
}

/* Iconos sociales o botones pequeños del pie. */
html[data-tlj-theme="light"] :is(
    #colophon .social-button,
    #colophon .social-link,
    #colophon .ast-builder-social-element,
    .site-footer .social-button,
    .site-footer .social-link,
    .site-footer .ast-builder-social-element
) {
    background: var(--tlj-ui-surface-2) !important;
    color: var(--tlj-ui-text-2) !important;
    border-color: var(--tlj-ui-border) !important;
    box-shadow: none !important;
}

html[data-tlj-theme="light"] :is(
    #colophon .social-button,
    #colophon .social-link,
    #colophon .ast-builder-social-element,
    .site-footer .social-button,
    .site-footer .social-link,
    .site-footer .ast-builder-social-element
):is(:hover,:focus-visible) {
    background: var(--tlj-ui-hover) !important;
    color: var(--tlj-ui-accent-strong) !important;
    border-color: var(--tlj-ui-border-strong) !important;
}

/* Campos que puedan existir en widgets de pie (newsletter/búsqueda). */
html[data-tlj-theme="light"] :is(
    #colophon input, #colophon select, #colophon textarea,
    .site-footer input, .site-footer select, .site-footer textarea
) {
    background: var(--tlj-ui-surface) !important;
    color: var(--tlj-ui-text) !important;
}

html[data-tlj-theme="light"] :is(
    #colophon input, #colophon select, #colophon textarea,
    .site-footer input, .site-footer select, .site-footer textarea
):focus {
    border-color: var(--tlj-ui-border-strong) !important;
    box-shadow: 0 0 0 3px var(--tlj-ui-focus-ring) !important;
    outline: 0 !important;
}

/* Selector de apariencia insertado dentro de Preferencias del diario. */
.tlj-mc-page [data-tlj-theme-preference-row] {
    min-width: 0;
}

/* =========================================================
   MENOS MOVIMIENTO · FASE 11.99
   Única regla de toda la web para quien pide reducir el movimiento:
   sin scroll suave, transiciones ni animaciones (cada animación termina
   al instante en su estado final). Se exceptúan los indicadores cuyo
   movimiento es información: el spinner de carga y los puntos lentos de
   estado (cabecera, «Sesión protegida» y «Perfil activo»). Especificidad
   cero: un módulo no necesita repetir este bloque.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html[data-tlj-theme] {
        scroll-behavior: auto !important;
    }

    :where(html[data-tlj-theme] body.tlj-theme-enabled *:not(.tlj-loading__spinner, .tlj-page-header__pulse, .tlj-mc-secure i, .tlj-pf-status i)),
    :where(html[data-tlj-theme] body.tlj-theme-enabled *:not(.tlj-loading__spinner, .tlj-page-header__pulse, .tlj-mc-secure i, .tlj-pf-status i))::before,
    :where(html[data-tlj-theme] body.tlj-theme-enabled *:not(.tlj-loading__spinner, .tlj-page-header__pulse, .tlj-mc-secure i, .tlj-pf-status i))::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   FORMULARIOS DEL PIE · MODO CLARO · FASE 10.3
   Capa única para Kadence/Astra y plugins habituales de forms.
   No modifica formularios fuera del footer.
   ========================================================= */

/* Etiquetas, leyendas, ayudas y campos obligatorios. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    form label,
    form legend,
    .wpforms-field-label,
    .gfield_label,
    .frm_primary_label,
    .ff-el-input--label label,
    .kb-forms-label,
    .mc4wp-form label
) {
    color: var(--tlj-ui-text) !important;
    -webkit-text-fill-color: var(--tlj-ui-text) !important;
    text-shadow: none !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    .wpforms-field-description,
    .gfield_description,
    .frm_description,
    .ff-el-help-message,
    .kb-form-description,
    .mc4wp-form small,
    form .description,
    form .help-text
) {
    color: var(--tlj-ui-muted) !important;
    -webkit-text-fill-color: var(--tlj-ui-muted) !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    .wpforms-required-label,
    .gfield_required,
    .frm_required,
    .ff-el-is-required,
    form .required
) {
    color: var(--tlj-negative-text) !important;
    -webkit-text-fill-color: var(--tlj-negative-text) !important;
}

/* Inputs de texto, email, teléfono, búsqueda, número, fecha, select y textarea. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
) {
    background: var(--tlj-ui-input-bg) !important;
    background-image: none !important;
    color: var(--tlj-ui-text) !important;
    -webkit-text-fill-color: var(--tlj-ui-text) !important;
    border: 1px solid var(--tlj-input-border) !important;
    border-radius: var(--tlj-radius-sm) !important;
    box-shadow: none !important;
    outline: 0 !important;
    min-height: 44px;
    caret-color: var(--tlj-ui-accent-strong) !important;
    transition: border-color var(--tlj-transition), background-color var(--tlj-transition), box-shadow var(--tlj-transition) !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) form textarea {
    min-height: 104px;
    resize: vertical;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
    textarea
)::placeholder {
    color: var(--tlj-input-placeholder) !important;
    -webkit-text-fill-color: var(--tlj-input-placeholder) !important;
    opacity: 1 !important;
}

/* El desplegable y sus opciones nunca recuperan negro en modo claro. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form select,
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form select option {
    background-color: var(--tlj-ui-input-bg) !important;
    color: var(--tlj-ui-text) !important;
    -webkit-text-fill-color: var(--tlj-ui-text) !important;
}

/* Focus unificado. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
):focus {
    background: var(--tlj-ui-surface) !important;
    border-color: var(--tlj-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--tlj-focus-ring) !important;
    outline: 0 !important;
}

/* Autofill de Chrome/Safari: evita fondo amarillo u oscuro. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form input:-webkit-autofill,
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form input:-webkit-autofill:hover,
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--tlj-ui-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--tlj-ui-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--tlj-ui-input-bg) inset !important;
    border-color: var(--tlj-input-focus-border) !important;
    caret-color: var(--tlj-ui-text) !important;
}

/* Checkbox y radio: mismo acento sobrio que el resto de TLJ. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    input[type="checkbox"],
    input[type="radio"]
) {
    accent-color: var(--tlj-ui-accent) !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    .wpforms-field-checkbox,
    .wpforms-field-radio,
    .wpcf7-list-item,
    .gchoice,
    .ff-el-form-check,
    .mc4wp-form-fields
) label {
    color: var(--tlj-ui-text-2) !important;
    -webkit-text-fill-color: var(--tlj-ui-text-2) !important;
}

/* Botón principal de cualquier formulario del pie. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    button[type="submit"],
    input[type="submit"],
    .wpforms-submit,
    .wpcf7-submit,
    .gform_button,
    .frm_button_submit,
    .ff-btn-submit,
    .kb-forms-submit,
    .mc4wp-form input[type="submit"]
),
html[data-tlj-theme="light"] :is(#colophon, .site-footer) .wp-block-search__button {
    background: var(--tlj-ui-accent) !important;
    background-image: none !important;
    color: var(--tlj-color-on-accent) !important;
    -webkit-text-fill-color: var(--tlj-color-on-accent) !important;
    border: 1px solid var(--tlj-ui-accent) !important;
    border-radius: var(--tlj-radius-sm) !important;
    box-shadow: none !important;
    min-height: 44px;
    font-weight: 700 !important;
    text-shadow: none !important;
    transition: background-color var(--tlj-transition), border-color var(--tlj-transition), transform var(--tlj-transition-fast), box-shadow var(--tlj-transition) !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    button[type="submit"],
    input[type="submit"],
    .wpforms-submit,
    .wpcf7-submit,
    .gform_button,
    .frm_button_submit,
    .ff-btn-submit,
    .kb-forms-submit,
    .mc4wp-form input[type="submit"]
):is(:hover,:focus-visible),
html[data-tlj-theme="light"] :is(#colophon, .site-footer) .wp-block-search__button:is(:hover,:focus-visible) {
    background: var(--tlj-ui-accent-strong) !important;
    color: var(--tlj-color-on-accent) !important;
    -webkit-text-fill-color: var(--tlj-color-on-accent) !important;
    border-color: var(--tlj-ui-accent-strong) !important;
    box-shadow: 0 0 0 3px var(--tlj-focus-ring) !important;
    outline: 0 !important;
}

/* Botones secundarios/reset. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    button[type="reset"],
    input[type="reset"],
    button[type="button"]
) {
    background: var(--tlj-button-bg) !important;
    color: var(--tlj-button-text) !important;
    -webkit-text-fill-color: var(--tlj-button-text) !important;
    border: 1px solid var(--tlj-button-border) !important;
    border-radius: var(--tlj-radius-sm) !important;
    box-shadow: none !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    button[type="reset"],
    input[type="reset"],
    button[type="button"]
):is(:hover,:focus-visible) {
    background: var(--tlj-button-hover-bg) !important;
    color: var(--tlj-button-hover-text) !important;
    -webkit-text-fill-color: var(--tlj-button-hover-text) !important;
    border-color: var(--tlj-ui-border-strong) !important;
    outline: 0 !important;
}

/* Disabled coherente y claramente inactivo. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(input,select,textarea,button):disabled,
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(input,select,textarea,button)[aria-disabled="true"] {
    opacity: .58 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Mensajes neutros / validación general. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    .wpcf7-response-output,
    .wpforms-confirmation-container-full,
    .wpforms-error-container,
    .gform_confirmation_message,
    .gform_validation_errors,
    .frm_message,
    .frm_error_style,
    .ff-message-success,
    .ff-el-is-error .text-danger,
    .mc4wp-alert,
    .kb-form-message,
    .kadence-blocks-form-message,
    .forminator-response-message
) {
    border-radius: var(--tlj-radius-sm) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Éxito. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    .wpforms-confirmation-container-full,
    .gform_confirmation_message,
    .frm_message,
    .ff-message-success,
    .mc4wp-success,
    .kb-form-message-success,
    .forminator-response-message.forminator-success
) {
    background: var(--tlj-positive-bg) !important;
    color: var(--tlj-positive-text) !important;
    -webkit-text-fill-color: var(--tlj-positive-text) !important;
    border: 1px solid rgba(var(--tlj-color-positive-rgb), .30) !important;
}

/* Error y validación. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    .wpforms-error,
    .wpforms-error-container,
    .gform_validation_errors,
    .validation_message,
    .frm_error,
    .frm_error_style,
    .ff-el-is-error .text-danger,
    .mc4wp-error,
    .kb-form-message-error,
    .forminator-response-message.forminator-error
) {
    color: var(--tlj-negative-text) !important;
    -webkit-text-fill-color: var(--tlj-negative-text) !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    .wpforms-error-container,
    .gform_validation_errors,
    .frm_error_style,
    .mc4wp-error,
    .kb-form-message-error,
    .forminator-response-message.forminator-error
) {
    background: var(--tlj-negative-bg) !important;
    border: 1px solid rgba(var(--tlj-color-negative-rgb), .30) !important;
}

/* Contact Form 7 diferencia el estado con data-status. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) .wpcf7 form:is(.sent) .wpcf7-response-output {
    background: var(--tlj-positive-bg) !important;
    color: var(--tlj-positive-text) !important;
    -webkit-text-fill-color: var(--tlj-positive-text) !important;
    border-color: rgba(var(--tlj-color-positive-rgb), .30) !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) .wpcf7 form:is(.invalid,.failed,.aborted,.spam) .wpcf7-response-output {
    background: var(--tlj-negative-bg) !important;
    color: var(--tlj-negative-text) !important;
    -webkit-text-fill-color: var(--tlj-negative-text) !important;
    border-color: rgba(var(--tlj-color-negative-rgb), .30) !important;
}

/* Avisos informativos / warning. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) :is(
    .mc4wp-notice,
    .mc4wp-alert:not(.mc4wp-success):not(.mc4wp-error),
    .forminator-response-message.forminator-warning
) {
    background: var(--tlj-warning-bg) !important;
    color: var(--tlj-warning-text) !important;
    -webkit-text-fill-color: var(--tlj-warning-text) !important;
    border: 1px solid rgba(var(--tlj-color-warning-rgb), .30) !important;
}

/* Enlaces dentro de textos legales/consentimiento del formulario. */
html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    .wpcf7-list-item-label,
    .wpforms-field-gdpr-checkbox,
    .gfield_consent_label,
    .frm_checkbox,
    .ff-el-form-check-label
) a {
    color: var(--tlj-ui-accent-strong) !important;
    -webkit-text-fill-color: var(--tlj-ui-accent-strong) !important;
    text-decoration-color: rgba(var(--tlj-color-accent-rgb), .35) !important;
}

html[data-tlj-theme="light"] :is(#colophon, .site-footer) form :is(
    .wpcf7-list-item-label,
    .wpforms-field-gdpr-checkbox,
    .gfield_consent_label,
    .frm_checkbox,
    .ff-el-form-check-label
) a:hover {
    color: var(--tlj-ui-text) !important;
    -webkit-text-fill-color: var(--tlj-ui-text) !important;
}


/* =========================================================
   TLJ · SCROLL VERTICAL GLOBAL DE LA VENTANA · FASE 10.4
   Una única fuente para el scroll de la ventana. Las zonas con scroll
   propio (tablas, modales, listas) tienen su piel en el bloque siguiente.
   ========================================================= */

/* Firefox */
html[data-tlj-theme],
html[data-tlj-theme] body {
    scrollbar-width: thin;
    scrollbar-color: var(--tlj-color-page-scrollbar) var(--tlj-ui-page);
}

/* Chromium / Edge / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--tlj-ui-page);
}

html[data-tlj-theme]::-webkit-scrollbar-thumb,
html[data-tlj-theme] body::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 3px solid var(--tlj-ui-page);
    border-radius: 999px;
    background: var(--tlj-color-page-scrollbar);
    background-clip: padding-box;
}

html[data-tlj-theme]::-webkit-scrollbar-thumb:hover,
html[data-tlj-theme] body::-webkit-scrollbar-thumb:hover {
    background: var(--tlj-color-page-scrollbar-hover);
    background-clip: padding-box;
}

/* Botones/flechas nativas del scrollbar: no crear bloques oscuros. */
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}


/* =========================================================
   TLJ · SCROLLBARS INTERNAS · FASE 11.99
   Una única piel para cualquier zona con scroll propio: tablas, modales,
   listas, desplegables y tarjetas, en Claro y Oscuro (tokens
   --tlj-color-scrollbar-*). Especificidad cero: un módulo solo declara
   scrollbar-width / scrollbar-color si necesita una excepción, por
   ejemplo ocultarla. Los pseudoelementos -webkit- cubren los navegadores
   sin scrollbar-color.
   ========================================================= */
:where(html[data-tlj-theme] body.tlj-theme-enabled) * {
    scrollbar-width: thin;
    scrollbar-color: var(--tlj-color-scrollbar) var(--tlj-color-scrollbar-track);
}

:where(html[data-tlj-theme] body.tlj-theme-enabled) *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

:where(html[data-tlj-theme] body.tlj-theme-enabled) *::-webkit-scrollbar-track {
    background: var(--tlj-color-scrollbar-track);
}

:where(html[data-tlj-theme] body.tlj-theme-enabled) *::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--tlj-color-scrollbar);
}

:where(html[data-tlj-theme] body.tlj-theme-enabled) *::-webkit-scrollbar-thumb:hover {
    background: var(--tlj-color-scrollbar-hover);
}


/* =========================================================
   TLJ · AROS DE FOCO · FASE 11.99
   Un único aro de teclado (:focus-visible) para enlaces, botones, campos
   y elementos con tabindex. Especificidad cero: un componente que dibuja
   su propio estado de foco (los botones de modal, los desplegables, los
   campos con borde/sombra) lo declara con `outline: none` y gana sin
   !important; el resto lo hereda de aquí en Claro y Oscuro. Los
   tabindex="-1" (contenedores que reciben foco por script) no lo
   muestran.
   ========================================================= */
:where(html[data-tlj-theme] body.tlj-theme-enabled :is(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus-visible) {
    outline: 2px solid var(--tlj-color-accent);
    outline-offset: 2px;
}


/* =========================================================
   LOADING GLOBAL TLJ · FASE 10.8 / 11.62
   Única fuente del loading de toda la web: capa, caja, spinner y texto
   en ambos modos (.tlj-loading, __box, __spinner, __text).
   - Cargas de página (Panel, Plan, Lista, Evolución, Estadísticas y
     Gráficos): cada módulo conserva solo cómo lo muestra u oculta
     (style.display, .is-hidden o .is-loading en la raíz del Panel).
   - Procesos (exportar, importar, restaurar, reiniciar, PDF, PayPal…):
     window.TLJLoading.show(texto) / hide() de theme.js, un <dialog>
     modal que queda por encima de cualquier modal abierto.
   Mientras un loading de página está visible, la cabecera del sitio se
   oculta sin alterar su espacio en el layout.
   ========================================================= */
@supports selector(body:has(*)) {
    html[data-tlj-theme] body.tlj-theme-enabled:has(:is(
        .tlj-loading[style*="display: flex"],
        .tlj-loading[data-plan-loading]:not(.is-hidden),
        .tlj-dashboard.is-loading .tlj-loading
    )) :is(
        #masthead,
        .site-header
    ) {
        visibility: hidden;
        pointer-events: none;
    }
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-loading {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: flex;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
    border: 0;
    background: var(--tlj-loading-overlay);
    transition: opacity .3s ease, visibility .3s ease;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-loading::backdrop {
    background: none;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-loading.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-loading__box {
    display: flex;
    min-width: 285px;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
    flex-direction: column;
    gap: 13px;
    align-items: center;
    justify-content: center;
    padding: 22px 25px;
    border: 1px solid var(--tlj-loading-border);
    border-radius: 11px;
    background: var(--tlj-loading-surface);
    color: var(--tlj-loading-text);
    -webkit-text-fill-color: var(--tlj-loading-text);
    box-shadow: var(--tlj-loading-shadow);
    text-align: center;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-loading__spinner {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin: 0;
    box-sizing: border-box;
    border: 3px solid rgba(var(--tlj-color-accent-rgb), .16);
    border-top-color: var(--tlj-ui-accent);
    border-radius: 50%;
    animation: tljLoadingSpin .9s linear infinite;
}

@keyframes tljLoadingSpin {
    to { transform: rotate(360deg); }
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-loading__text {
    margin: 0;
    color: var(--tlj-loading-text);
    -webkit-text-fill-color: var(--tlj-loading-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: center;
    text-shadow: none;
}

/* =========================================================
   SELECTOR DE MERCADOS GLOBAL TLJ · FASE 11.77
   Tarjeta con el texto del mercado activo a la izquierda y un
   desplegable a la derecha (misma piel que los selectores de
   calendario de Estadísticas y Gráficos).
   theme.js transforma la rejilla original de botones en el
   desplegable. Los botones originales solo aplican su estilo
   mientras NO tienen la clase .tlj-market-dropdown__option,
   así no interfieren con el disparador ni con las opciones.
   ========================================================= */

/* ---------- Tarjeta ---------- */
html[data-tlj-theme] body.tlj-theme-enabled :is(
    .tlj-dashboard .tlj-panel-market,
    .tlj-plan .tlj-plan-market,
    .lista-trades-root .tlj-trades-market-switcher,
    .evolucion-historica-container .tlj-eh-market,
    .tlj-stats-root .tlj-stats-market,
    .tlj-graphs .tlj-graphs-market,
    .tlj-tools .tlj-tools-market
) {
    display: grid !important;
    grid-template-columns: auto auto !important;
    gap: 14px 24px !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: var(--tlj-market-selector-margin, 24px auto 18px) !important;
    padding: 12px 14px !important;
    border: 1px solid var(--tlj-color-accent) !important;
    border-radius: 11px !important;
    background: var(--tlj-color-surface) !important;
    box-shadow: none !important;
}

html[data-tlj-theme="light"] body.tlj-theme-enabled :is(
    .tlj-dashboard .tlj-panel-market,
    .tlj-plan .tlj-plan-market,
    .lista-trades-root .tlj-trades-market-switcher,
    .evolucion-historica-container .tlj-eh-market,
    .tlj-stats-root .tlj-stats-market,
    .tlj-graphs .tlj-graphs-market,
    .tlj-tools .tlj-tools-market
) {
    border-width: 1.5px !important;
    border-color: rgba(var(--tlj-color-accent-rgb), .22) !important;
    background: var(--tlj-color-field) !important;
    box-shadow: 0 8px 22px rgba(var(--tlj-color-shadow-rgb), .07) !important;
}

/* ---------- Fila centralizada de mercado, estado y acciones ---------- */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-toolbar-row {
    --tlj-market-selector-margin: 0 auto;
    position: relative;
    z-index: 100;
    width: 100%;
    margin: 24px 0 18px;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-toolbar-row > .tlj-market-toolbar-actions {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    width: auto;
    margin: 0;
    transform: translateY(-50%);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-toolbar-row > :is(.tlj-plan__save-state, .tlj-dashboard__sync-status) {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 101;
    margin: 0;
    transform: translateY(-50%);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-toolbar-actions > .tlj-data-menu {
    margin-left: 0;
}

@media (max-width: 900px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-toolbar-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-toolbar-row > .tlj-market-toolbar-actions {
        position: static;
        align-self: flex-end;
        width: auto;
        transform: none;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-toolbar-row > :is(.tlj-plan__save-state, .tlj-dashboard__sync-status) {
        position: static;
        align-self: flex-start;
        transform: none;
    }
}

/* ---------- Texto del mercado activo (izquierda) ---------- */
html[data-tlj-theme] body.tlj-theme-enabled :is(
    .tlj-panel-market__copy,
    .tlj-plan-market__copy,
    .tlj-trades-market-switcher__copy,
    .tlj-eh-market__copy,
    .tlj-stats-market__copy,
    .tlj-graphs-market__copy,
    .tlj-tools-market__copy
) {
    display: grid !important;
    gap: 4px !important;
    min-width: 150px !important;
}

html[data-tlj-theme] body.tlj-theme-enabled :is(
    .tlj-panel-market__copy > span,
    .tlj-plan-market__copy > span,
    .tlj-trades-market-switcher__eyebrow,
    .tlj-eh-market__copy > span,
    .tlj-stats-market__copy > span,
    .tlj-graphs-market__copy > span,
    .tlj-tools-market__copy > span
) {
    display: block !important;
    margin: 0 !important;
    color: var(--tlj-color-text-muted) !important;
    -webkit-text-fill-color: var(--tlj-color-text-muted) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
}

html[data-tlj-theme] body.tlj-theme-enabled :is(
    .tlj-panel-market__copy > strong,
    .tlj-plan-market__copy > strong,
    .tlj-trades-market-switcher__copy > strong,
    .tlj-eh-market__copy > strong,
    .tlj-stats-market__copy > strong,
    .tlj-graphs-market__copy > strong,
    .tlj-tools-market__copy > strong
) {
    display: block !important;
    color: var(--tlj-color-accent) !important;
    -webkit-text-fill-color: var(--tlj-color-accent) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    letter-spacing: .35px !important;
}

/* ---------- Contenedor del desplegable ---------- */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown {
    position: relative !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    min-width: 200px !important;
    max-width: 420px !important;
    width: auto !important;
    justify-self: start !important;
}

/* ---------- Disparador (con el mercado activo centrado) ---------- */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__trigger {
    position: relative;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 45px;
    align-items: center;
    justify-content: center !important;
    margin: 0;
    padding: 0 40px !important;
    border: 1px solid var(--tlj-color-filter-selector-border);
    border-radius: 8px;
    background: var(--tlj-color-filter-selector-bg);
    color: var(--tlj-color-filter-selector-text);
    font-family: var(--tlj-font-family);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .75px;
    text-align: center !important;
    text-transform: uppercase;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    transition: color .22s ease, border-color .22s ease, background-color .22s ease;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__trigger::after {
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--tlj-color-accent);
    border-bottom: 1.5px solid var(--tlj-color-accent);
    content: "";
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown.is-open .tlj-market-dropdown__trigger::after {
    transform: translateY(-30%) rotate(225deg);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__trigger:is(:hover, :focus-visible),
html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown.is-open .tlj-market-dropdown__trigger {
    border-color: var(--tlj-color-filter-selector-hover-border);
    background: var(--tlj-color-filter-selector-hover-bg);
    color: var(--tlj-color-filter-selector-hover-text);
    outline: none;
}

/* ---------- Panel desplegable ---------- */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 101;
    box-sizing: border-box;
    display: flex;
    width: max-content;
    min-width: 100%;
    max-width: min(420px, calc(100vw - 40px));
    max-height: 260px;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--tlj-color-dropdown-border);
    border-radius: 8px;
    background: var(--tlj-color-dropdown-bg);
    box-shadow: var(--tlj-effect-dropdown-shadow);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__panel[hidden] {
    display: none !important;
}

/* ---------- Opciones dentro del panel ---------- */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__option {
    box-sizing: border-box;
    display: flex !important;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--tlj-color-dropdown-text);
    font-family: var(--tlj-font-family);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .75px;
    text-align: left;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: color .22s ease, border-color .22s ease, background-color .22s ease;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__option:is(:hover, :focus-visible) {
    border-color: var(--tlj-color-dropdown-hover-border);
    background: var(--tlj-color-dropdown-hover-bg);
    color: var(--tlj-color-dropdown-hover-text);
    outline: none;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__option.is-active {
    border-color: var(--tlj-color-dropdown-selected-border);
    background: var(--tlj-color-dropdown-selected-bg);
    color: var(--tlj-color-dropdown-selected-text);
}

html[data-tlj-theme="light"] body.tlj-theme-enabled .tlj-market-dropdown__option.is-active {
    color: var(--tlj-color-accent-strong);
    -webkit-text-fill-color: var(--tlj-color-accent-strong);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown__option:is(.is-locked, [aria-disabled="true"]) {
    opacity: .55;
    cursor: not-allowed;
}

/* ---------- Botones originales antes de ser transformados ---------- */
/* Solo aplica a los que AÚN no llevan la clase del desplegable. En
   cuanto theme.js los mueve al panel, esta regla deja de alcanzarlos
   y aplican los estilos del desplegable. Evita el destello azul
   durante la carga sin tocar JavaScript ni PHP. */
html[data-tlj-theme] body.tlj-theme-enabled :is(
    .tlj-panel-market__switch,
    .tlj-plan-market__switch,
    .tlj-trades-market-switcher__controls,
    .tlj-eh-market__switch,
    .tlj-stats-market__switch,
    .tlj-graphs-market__switch,
    .tlj-tools-market__switch
) > :is(
    .tlj-panel-market__option,
    .tlj-plan-market__option,
    .tlj-trades-market-option,
    .tlj-eh-market__option,
    .tlj-stats-market__option,
    .tlj-graphs-market__option,
    .tlj-tools-market__option
):not(.tlj-market-dropdown__option) {
        display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
    html[data-tlj-theme] body.tlj-theme-enabled :is(
        .tlj-dashboard .tlj-panel-market,
        .tlj-plan .tlj-plan-market,
        .lista-trades-root .tlj-trades-market-switcher,
        .evolucion-historica-container .tlj-eh-market,
        .tlj-stats-root .tlj-stats-market,
        .tlj-graphs .tlj-graphs-market,
        .tlj-tools .tlj-tools-market
    ) {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 14px !important;
    }

    html[data-tlj-theme] body.tlj-theme-enabled :is(
        .tlj-panel-market__copy,
        .tlj-plan-market__copy,
        .tlj-trades-market-switcher__copy,
        .tlj-eh-market__copy,
        .tlj-stats-market__copy,
        .tlj-graphs-market__copy,
        .tlj-tools-market__copy
    ) {
        min-width: 0 !important;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-market-dropdown {
        justify-self: stretch !important;
        max-width: none !important;
        width: 100% !important;
    }
}
/* =========================================================
   Fase 11.60 - Botones globales de cabecera de las herramientas TLJ
   Única fuente visual de la fila de acciones de Panel, Plan, Lista,
   Evolución, Estadísticas, Gráficos y Herramientas: botón IA (lo genera
   el plugin IA), botón «Panel de control» y su variante de icono para
   Insight. El «?» lo inserta y estiliza Tutoriales. Los plugins solo
   colocan los botones que tienen una posición especial.
   ========================================================= */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 86px;
    height: 42px;
    min-height: 42px;
    gap: 9px;
    align-items: center;
    justify-content: center;
    padding: 2px 15px 0;
    border: 1px solid var(--tlj-color-accent);
    border-radius: 9px;
    background: rgba(var(--tlj-color-accent-rgb), .025);
    color: var(--tlj-color-accent);
    -webkit-text-fill-color: var(--tlj-color-accent);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .65px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: color .22s ease, border-color .22s ease, background-color .22s ease;
    white-space: nowrap;
}

html[data-tlj-theme="light"] body.tlj-theme-enabled .tlj-ai-access-button {
    background: var(--tlj-color-surface);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 21px;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin: 0;
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button:hover,
html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button:focus-visible {
    border-color: var(--tlj-color-accent);
    background: rgba(var(--tlj-color-accent-rgb), .09);
    color: var(--tlj-color-accent);
    -webkit-text-fill-color: var(--tlj-color-accent);
}

/* Variante de icono (TLJ Insight): mismo botón, sin texto. */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button--icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border-color: rgba(var(--tlj-color-accent-rgb), .22);
    border-radius: 50%;
    background: rgba(var(--tlj-color-accent-rgb), .035);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button--icon:hover,
html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button--icon:focus-visible {
    border-color: rgba(var(--tlj-color-accent-rgb), .42);
    background: rgba(var(--tlj-color-accent-rgb), .08);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button--icon svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    stroke-width: 1.65;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-access-button--icon span {
    display: none;
}

@media (max-width: 767px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header-actions {
        justify-content: flex-start;
        width: 100%;
    }
}




/* =========================================================
   Fase 12.00 - Modales globales TLJ: capa, ventana y confirmación
   Única fuente de: fondo y apilado, centrado, fundido de entrada y
   salida, bloqueo de scroll de la página, la ventana (borde, radio,
   fondo y sombra) y la confirmación (destructiva o de aviso).
   TLJModal (theme.js) pone/quita [hidden] y las clases .is-open /
   .is-closing; los plugins solo declaran tamaño, relleno y contenido.
   Los valores por defecto usan :where() (especificidad 0): un plugin
   puede ajustar una medida sin !important.
   Marcado de una ventana: .tlj-modal-layer > .tlj-modal-window; una
   confirmación añade .tlj-confirm (ver más abajo).
   ========================================================= */
.tlj-modal-layer:not(dialog) {
    z-index: 2147483000;
    background: var(--tlj-color-modal-backdrop);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.tlj-modal-layer::backdrop {
    background: var(--tlj-color-modal-backdrop);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.tlj-modal-layer.timepicker-modal,
.tlj-modal-dialog-layer {
    z-index: 2147483001;
}

:where(.tlj-modal-layer:not(dialog)) {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: var(--tlj-modal-layer-pad, 20px);
    overflow: auto;
}

@media (max-width: 680px) {
    :where(.tlj-modal-layer:not(dialog)) {
        --tlj-modal-layer-pad: 12px;
    }
}

html[data-tlj-theme] .tlj-modal-layer[hidden] {
    display: none;
}

html.tlj-modal-open {
    overflow: hidden;
}

/* TLJModal enfoca la ventana al abrir: es un destino de foco, sin aro. */
.tlj-modal-layer:focus,
.tlj-modal-window:focus {
    outline: none;
}

.tlj-modal-layer.is-open {
    animation: tlj-modal-fade-in .32s ease;
}

.tlj-modal-layer.is-closing {
    pointer-events: none;
    animation: tlj-modal-fade-out .32s ease forwards;
}

:where(.tlj-modal-layer.is-open) .tlj-modal-window {
    animation: tlj-modal-window-in .32s ease;
}

:where(.tlj-modal-layer.is-closing) .tlj-modal-window {
    animation: tlj-modal-window-out .32s ease forwards;
}

@keyframes tlj-modal-fade-in {
    from { opacity: 0; }
}

@keyframes tlj-modal-fade-out {
    to { opacity: 0; }
}

@keyframes tlj-modal-window-in {
    from { opacity: 0; transform: translateY(12px) scale(.975); }
}

@keyframes tlj-modal-window-out {
    to { opacity: 0; transform: translateY(12px) scale(.975); }
}

:where(.tlj-modal-window) {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    margin: auto;
    border: 1px solid var(--tlj-color-border-strong);
    border-radius: var(--tlj-modal-radius, 14px);
    background: var(--tlj-color-surface);
    box-shadow: var(--tlj-effect-shadow-lg);
    color: var(--tlj-color-text);
}

/* Confirmación: cabecera común centrada con icono, mensaje y acciones.
   .tlj-confirm--danger (borde y icono rojos) para eliminar o reiniciar;
   .tlj-confirm--warning (icono ámbar) para avisos. */
.tlj-confirm {
    width: min(100%, var(--tlj-confirm-width, 460px));
    padding: 0;
    text-align: center;
}

.tlj-confirm--danger {
    border-color: rgba(var(--tlj-color-negative-vivid-rgb), .48);
}

.tlj-confirm__icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 1px solid rgba(var(--tlj-color-accent-rgb), .32);
    border-radius: 50%;
    background: rgba(var(--tlj-color-accent-rgb), .08);
    color: var(--tlj-color-accent);
}

.tlj-confirm--danger .tlj-confirm__icon {
    border-color: rgba(var(--tlj-color-negative-vivid-rgb), .38);
    background: var(--tlj-color-negative-bg);
    color: var(--tlj-color-negative-text);
}

.tlj-confirm--warning .tlj-confirm__icon {
    border-color: rgba(var(--tlj-color-warning-vivid-rgb), .38);
    background: var(--tlj-color-warning-bg);
    color: var(--tlj-color-warning-text);
}

.tlj-confirm__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tlj-confirm__body {
    padding: 4px 28px 10px;
    color: var(--tlj-color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.tlj-confirm__body p {
    margin: 0;
}

.tlj-confirm strong {
    color: var(--tlj-color-info-text);
    font-weight: 750;
}

.tlj-confirm__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 8px 28px 26px;
}

@media (max-width: 700px) {
    .tlj-confirm__actions {
        flex-direction: column;
        padding: 8px 22px 22px;
    }

    .tlj-confirm__actions > .tlj-modal-action {
        width: 100%;
    }
}

/* =========================================================
   Fase 11.53 - Calendarios Flatpickr globales TLJ
   Única fuente visual de los calendarios de Plan, Lista, Evolución,
   Estadísticas, Gráficos y Asistente IA. Los plugins solo configuran
   cada instancia en JS.
   - Selección única (día o mes): referencia Plan de Trading.
   - Rango (.rangeMode): referencia Estadísticas, con el tramo
     intermedio continuo en un único color, como en Gráficos.
   Solo tokens de la paleta: Claro y Oscuro comparten las mismas reglas.
   ========================================================= */
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar {
    z-index: 2147483001;
    overflow: hidden;
    border-radius: 10px;
    background: var(--tlj-color-surface);
    box-shadow: var(--tlj-effect-shadow-lg);
    color: var(--tlj-color-text-secondary);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) {
    border: 1px solid rgba(var(--tlj-color-accent-rgb), .35);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode {
    border: 1px solid var(--tlj-color-accent);
}

/* Cabecera */
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar :is(.flatpickr-months, .flatpickr-month, .flatpickr-current-month) {
    background: var(--tlj-color-accent);
    color: var(--tlj-color-on-accent);
    fill: var(--tlj-color-on-accent);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-current-month input.cur-year {
    color: inherit;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) {
    color: var(--tlj-color-on-accent);
    fill: var(--tlj-color-on-accent);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month):hover svg {
    fill: var(--tlj-color-button-hover-text);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) .flatpickr-months {
    padding: 8px 0;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) .flatpickr-current-month {
    top: -2px;
    font-size: 18px;
}

/* Mes en negrita y año normal (pesos nativos de Flatpickr); el selector
   mensual solo muestra el año, que mantiene la negrita. */
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar[class*="flatpickr-monthSelect-theme"] .flatpickr-current-month input.cur-year {
    font-weight: 900;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) :is(.flatpickr-prev-month, .flatpickr-next-month) {
    top: 5px;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode :is(.flatpickr-months, .flatpickr-month, .flatpickr-current-month) {
    padding-top: 2px;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode :is(.flatpickr-month, .flatpickr-current-month) {
    top: 2px;
}

/* Días de la semana */
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) .flatpickr-weekdays {
    background: var(--tlj-color-accent-soft);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode .flatpickr-weekdays {
    background: var(--tlj-effect-compare-header-bg);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar span.flatpickr-weekday {
    color: var(--tlj-color-accent);
    font-size: 10px;
    font-weight: 900;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode :is(.flatpickr-weekdaycontainer, span.flatpickr-weekday) {
    padding-top: 2px;
}

/* Días */
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-day {
    border-color: transparent;
    background: transparent;
    color: var(--tlj-color-text-secondary);
    font-weight: 600;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) .flatpickr-day {
    font-size: 12px;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode .flatpickr-day {
    font-size: 11px;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-day:is(:hover, :focus),
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange) {
    border-color: var(--tlj-color-accent);
    background: var(--tlj-color-accent);
    color: var(--tlj-color-on-accent);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) .flatpickr-day.selected {
    font-weight: 850;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) .flatpickr-day.today:not(.selected) {
    border-color: rgba(var(--tlj-color-accent-rgb), .55);
    color: var(--tlj-color-text);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar:not(.rangeMode) .flatpickr-day:is(.flatpickr-disabled, .prevMonthDay, .nextMonthDay) {
    color: var(--tlj-color-text-muted-2);
}

/* Tramo del rango: color opaco único en número, borde y hueco entre días
   (mismo tono que la cabecera de días: #183a3a en Oscuro, hover en Claro). */
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode .flatpickr-day.inRange {
    border-color: var(--tlj-effect-compare-header-bg);
    background: var(--tlj-effect-compare-header-bg);
    box-shadow: -5px 0 0 var(--tlj-effect-compare-header-bg), 5px 0 0 var(--tlj-effect-compare-header-bg);
    color: var(--tlj-color-text);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar.rangeMode .flatpickr-day:is(.startRange, .endRange) {
    box-shadow: none;
}

/* Selector mensual (plugin monthSelect) */
html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar[class*="flatpickr-monthSelect-theme"] {
    width: 240px;
    min-width: 240px;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar[class*="flatpickr-monthSelect-theme"] :is(.flatpickr-innerContainer, .flatpickr-rContainer) {
    width: 100%;
    justify-content: center;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-monthSelect-months {
    display: grid;
    grid-template-columns: repeat(2, 98px);
    gap: 8px;
    justify-content: center;
    justify-items: center;
    align-content: start;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 14px;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-monthSelect-month {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    max-width: 98px;
    height: 34px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--tlj-color-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    outline: none;
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-monthSelect-month:hover {
    background: var(--tlj-color-hover);
    color: var(--tlj-color-accent-strong);
}

html[data-tlj-theme] body.tlj-theme-enabled .flatpickr-calendar .flatpickr-monthSelect-month.selected {
    background: var(--tlj-color-accent);
    color: var(--tlj-color-on-accent);
    font-weight: 850;
}

/* =========================================================
   Fase 11.55 - Cabecera global de páginas TLJ
   Única fuente visual del antetítulo con líneas laterales, el título en
   dos líneas, la descripción y la línea inferior degradada de Galería,
   Tutoriales, Academia, Área Personal, Suscripciones, Contacto,
   Mi Cuenta, Perfil, Restablecer contraseña, FAQ y páginas legales.
   También fija la distancia a la cabecera del sitio (margen superior) y
   al bloque siguiente (margen inferior), iguales en todas las páginas.
   Referencia: Contacto + línea inferior de Galería. Los plugins solo
   aportan el texto; Contacto (Shadow DOM) la recibe mediante ::part().
   Las líneas de 1px se dibujan como borde: el navegador ajusta el grosor
   del borde a píxeles físicos y se ven idénticas en todas las páginas
   con cualquier escala de pantalla o zoom.
   ========================================================= */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero) {
    max-width: 880px;
    margin: 70px auto 52px;
    text-align: center;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__kicker,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-kicker) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    color: var(--tlj-color-text-muted-2);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.3;
    text-transform: uppercase;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__kicker::before,
html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__kicker::after,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-kicker)::before,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-kicker)::after {
    content: "";
    flex: 0 0 auto;
    width: 42px;
    height: 0;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--tlj-color-accent)) 1;
    opacity: .75;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__kicker::after,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-kicker)::after {
    transform: scaleX(-1);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__title,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-title) {
    width: 100%;
    margin: 25px 0 19px;
    padding: 0;
    color: var(--tlj-color-text);
    font-family: inherit;
    font-size: clamp(38px, 6.2vw, 72px);
    font-weight: 300;
    letter-spacing: -3px;
    line-height: .95;
    text-transform: uppercase;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__title > :is(span, strong),
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-title-line),
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-title-accent) {
    display: block;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__title > strong,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-title-accent) {
    margin-top: 7px;
    color: var(--tlj-color-accent);
    font-weight: 900;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__lead,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-lead) {
    max-width: 650px;
    margin: 0 auto;
    color: var(--tlj-color-text-muted);
    font-size: 15px;
    line-height: 1.8;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__rule,
html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-rule) {
    width: min(760px, 92vw, 100%);
    height: 0;
    margin: 34px auto 0;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, rgba(var(--tlj-color-accent-rgb), .08) 10%, rgba(var(--tlj-color-accent-rgb), .42) 50%, rgba(var(--tlj-color-accent-rgb), .08) 90%, transparent 100%) 1;
    box-shadow: 0 0 18px rgba(var(--tlj-color-accent-rgb), .13);
}

@media (max-width: 980px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero,
    html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero) {
        margin-top: 60px;
    }
}

@media (max-width: 600px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero,
    html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero) {
        margin-top: 46px;
        margin-bottom: 39px;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__kicker,
    html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-kicker) {
        gap: 9px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__kicker::before,
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__kicker::after,
    html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-kicker)::before,
    html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-kicker)::after {
        width: 27px;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__title,
    html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-title) {
        margin-top: 21px;
        font-size: clamp(34px, 11vw, 48px);
        letter-spacing: -2px;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-hero__lead,
    html[data-tlj-theme] body.tlj-theme-enabled tlj-contact-form::part(page-hero-lead) {
        font-size: 13.5px;
    }
}

/* =========================================================
   Fase 11.57 - Cabecera global de las herramientas TLJ
   Única fuente visual del antetítulo con punto pulsante, el título y la
   descripción de Panel de Control, Plan de Trading, Lista de Operaciones,
   Evolución Histórica, Estadísticas, Gráficos, Asistente IA y
   Herramientas. Referencia: Panel de Control. Cada plugin conserva solo
   la distribución de su cabecera y sus acciones.
   ========================================================= */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header__kicker {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 0 14px;
    color: var(--tlj-color-accent);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.6;
    letter-spacing: 2px;
    text-transform: uppercase;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header__pulse {
    position: relative;
    top: -1px;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--tlj-color-accent);
    box-shadow: 0 0 0 5px rgba(var(--tlj-color-accent-rgb), .08);
    animation: tljPageHeaderPulse 3s ease-in-out infinite;
}

@keyframes tljPageHeaderPulse {
    0%, 100% { opacity: .42; box-shadow: 0 0 0 3px rgba(var(--tlj-color-accent-rgb), .055); }
    50% { opacity: 1; box-shadow: 0 0 0 7px rgba(var(--tlj-color-accent-rgb), .10); }
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header__title {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--tlj-color-text);
    font-size: clamp(42px, 5.1vw, 70px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -3px;
    text-transform: uppercase;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header__title > span {
    color: var(--tlj-color-accent);
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header__lead {
    max-width: 790px;
    margin: 18px auto 0;
    text-align: center;
    color: var(--tlj-color-text-soft);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.75;
}

@media (max-width: 640px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header__title {
        font-size: clamp(38px, 12.5vw, 55px);
        letter-spacing: -2px;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header__lead {
        font-size: 13.5px;
        line-height: 1.7;
    }
}

/* =========================================================
   Fase 12.01 - Contenedor y cabecera de página de las herramientas TLJ
   Única fuente del ancho y relleno de la página (.tlj-page-inner) y de la
   cabecera con su línea inferior (.tlj-page-header) de Plan de Trading,
   Lista de Operaciones, Evolución Histórica, Estadísticas, Gráficos y
   Herramientas. Dentro de la cabecera van el bloque de texto (antetítulo,
   título y descripción: Fase 11.57) y la fila de acciones (Fase 11.60).
   ========================================================= */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-inner {
    width: min(100%, var(--tlj-layout-wide));
    margin: 0 auto;
    padding: 64px 30px 110px;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
    padding-bottom: 48px;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header > :first-child:not(.tlj-page-header-actions) {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    text-align: center;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header > :first-child:not(.tlj-page-header-actions) .tlj-page-header__lead {
    margin-right: auto;
    margin-left: auto;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header > .tlj-page-header-actions {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header::after,
html[data-tlj-theme] body.tlj-theme-enabled .tlj-dashboard__hero::after,
html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-page .tlj-ai-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--tlj-color-accent-rgb), .22) 10%,
        rgba(var(--tlj-color-accent-rgb), .88) 50%,
        rgba(var(--tlj-color-accent-rgb), .22) 90%,
        transparent 100%
    );
    content: "";
}

@media (max-width: 980px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header {
        grid-template-columns: 1fr;
        gap: 26px;
        align-items: start;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header > .tlj-page-header-actions {
        position: static;
        grid-column: 1 / -1;
        grid-row: auto;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 900px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header {
        padding-bottom: 40px;
    }
}

@media (max-width: 700px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-inner {
        padding: 42px 12px 65px;
    }

    html[data-tlj-theme] body.tlj-theme-enabled .tlj-page-header {
        gap: 24px;
        padding-bottom: 34px;
    }
}

/* Cabeceras de Panel y Asistente IA: misma separación y línea que el resto. */
html[data-tlj-theme] body.tlj-theme-enabled .tlj-dashboard__hero,
html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-page .tlj-ai-hero {
    padding-bottom: 48px;
}

@media (max-width: 900px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-dashboard__hero,
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-page .tlj-ai-hero {
        padding-bottom: 40px;
    }
}

@media (max-width: 700px) {
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-dashboard__hero,
    html[data-tlj-theme] body.tlj-theme-enabled .tlj-ai-page .tlj-ai-hero {
        padding-bottom: 34px;
    }
}

/* =========================================================
   Fase 11.44 - Cabeceras globales de modales y tarjetas TLJ
   Fuente visual: "Filtrar días" de Evolución Histórica.
   Los plugins conservan únicamente geometría/layout específico.
   La cabecera llega a los bordes de su tarjeta: si la tarjeta tiene
   relleno, lo declara en --tlj-modal-pad-top y --tlj-modal-pad-x y la
   cabecera lo compensa. .tlj-modal-header--center centra el contenido
   (modales de aviso con icono dentro de la cabecera).
   ========================================================= */
.tlj-modal-header,
tlj-contact-form::part(modal-header) {
    position: relative;
    box-sizing: border-box;
    margin: calc(-1 * var(--tlj-modal-pad-top)) calc(-1 * var(--tlj-modal-pad-x)) 20px;
    padding: 22px 70px 16px 28px;
    border: 0;
    background:
        var(--tlj-effect-modal-header-rule) 34px 100% / calc(100% - 68px) 1px no-repeat,
        var(--tlj-effect-modal-header-bg);
    color: var(--tlj-color-text);
    text-align: left;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.tlj-modal-header--center {
    padding-right: 28px;
    text-align: center;
}

.tlj-modal-header--center > p {
    margin-right: auto;
    margin-left: auto;
}

.tlj-modal-header > span:first-child,
.tlj-modal-header > small:first-child,
.tlj-modal-header .tlj-calendar-dialog__kicker,
.tlj-modal-header .tlj-plan-card__kicker,
.tlj-modal-header .tlj-tools-card__kicker,
.tlj-modal-header .tlj-ob-kicker,
.tlj-modal-header .tlj-pay-kicker,
.tlj-modal-header .tlj-header-text > span,
.tlj-modal-header .tlj3-header-text > span,
.tlj-modal-header .tlj2-header-text > span,
.tlj-modal-header .tlj5-header-text > span,
.tlj-modal-header .tlj6-header-text > span,
.tlj-modal-header .tlj-help-dialog__brand small,
tlj-contact-form::part(modal-kicker) {
    display: block;
    margin: 0 0 4px;
    color: var(--tlj-color-accent);
    -webkit-text-fill-color: currentColor;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

html[data-tlj-theme="light"] .tlj-modal-header > span:first-child,
html[data-tlj-theme="light"] .tlj-modal-header > small:first-child,
html[data-tlj-theme="light"] .tlj-modal-header .tlj-calendar-dialog__kicker,
html[data-tlj-theme="light"] .tlj-modal-header .tlj-plan-card__kicker,
html[data-tlj-theme="light"] .tlj-modal-header .tlj-tools-card__kicker,
html[data-tlj-theme="light"] .tlj-modal-header .tlj-ob-kicker,
html[data-tlj-theme="light"] .tlj-modal-header .tlj-pay-kicker,
html[data-tlj-theme="light"] .tlj-modal-header .tlj-header-text > span,
html[data-tlj-theme="light"] .tlj-modal-header .tlj3-header-text > span,
html[data-tlj-theme="light"] .tlj-modal-header .tlj2-header-text > span,
html[data-tlj-theme="light"] .tlj-modal-header .tlj5-header-text > span,
html[data-tlj-theme="light"] .tlj-modal-header .tlj6-header-text > span,
html[data-tlj-theme="light"] .tlj-modal-header .tlj-help-dialog__brand small,
html[data-tlj-theme="light"] tlj-contact-form::part(modal-kicker) {
    color: var(--tlj-color-accent-strong);
}

.tlj-modal-header > h2,
.tlj-modal-header > h3,
.tlj-modal-header > div > h2,
.tlj-modal-header > div > h3,
.tlj-modal-header > div > div > h2,
.tlj-modal-header > div > div > h3,
tlj-contact-form::part(modal-title) {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--tlj-color-text);
    -webkit-text-fill-color: currentColor;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -.65px;
    text-transform: none;
    text-shadow: none;
}

.tlj-modal-header > p,
.tlj-modal-header > div > p,
.tlj-modal-header > div > div > p,
tlj-contact-form::part(modal-description) {
    display: block;
    max-width: 650px;
    margin: 5px 0 0;
    padding: 0;
    color: var(--tlj-color-text-muted);
    -webkit-text-fill-color: currentColor;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
}

@media (max-width: 700px) {
    .tlj-modal-header,
    tlj-contact-form::part(modal-header) {
        margin-bottom: 16px;
        padding: 18px 56px 14px 18px;
        background:
            var(--tlj-effect-modal-header-rule) 18px 100% / calc(100% - 36px) 1px no-repeat,
            var(--tlj-effect-modal-header-bg);
    }

    .tlj-modal-header > h2,
    .tlj-modal-header > h3,
    .tlj-modal-header > div > h2,
    .tlj-modal-header > div > h3,
    .tlj-modal-header > div > div > h2,
    .tlj-modal-header > div > div > h3,
    tlj-contact-form::part(modal-title) {
        font-size: 20px;
    }

    .tlj-modal-header--center {
        padding-right: 18px;
    }
}

/* Fase 11.43 - Acciones globales de modales TLJ.
   Fuente visual: modal Personalizar de Gráficos. */
.tlj-modal-action {
    min-height: 36px;
    margin: 0;
    padding: 9px 17px;
    border: 1px solid var(--tlj-ui-border-strong);
    border-radius: 8px;
    background: var(--tlj-ui-surface);
    color: var(--tlj-ui-text-2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    white-space: nowrap;
}
.tlj-modal-action--primary {
    background: var(--tlj-ui-accent);
    border-color: var(--tlj-ui-accent);
    color: var(--tlj-color-on-accent);
}
.tlj-modal-action--secondary:hover,
.tlj-modal-action--secondary:focus,
.tlj-modal-action--secondary:focus-visible,
.tlj-modal-action--secondary:active {
    background: var(--tlj-ui-hover);
    color: var(--tlj-ui-accent-strong);
    outline: none;
    box-shadow: none;
}
.tlj-modal-action--primary:hover,
.tlj-modal-action--primary:focus,
.tlj-modal-action--primary:focus-visible,
.tlj-modal-action--primary:active {
    background: var(--tlj-ui-accent-strong);
    outline: none;
    box-shadow: none;
}
.tlj-modal-action--warning {
    border-color: rgba(var(--tlj-color-warning-vivid-rgb), .34);
    background: var(--tlj-color-warning-bg);
    color: var(--tlj-color-warning-text);
}
.tlj-modal-action--warning:hover,
.tlj-modal-action--warning:focus,
.tlj-modal-action--warning:focus-visible,
.tlj-modal-action--warning:active {
    border-color: var(--tlj-color-warning-hover-border);
    background: var(--tlj-color-warning-hover-bg);
    color: var(--tlj-color-warning-hover-text);
    outline: none;
    box-shadow: none;
}

.tlj-modal-action:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* =========================================================
   Fase 11.42 - Cierre global de modales y ventanas TLJ
   Fuente canónica: cierre de "Personalizar" de Panel de Control.
   Cada plugin conserva únicamente posición/layout cuando lo necesita.
   ========================================================= */
.tlj-modal-close,
tlj-contact-form::part(modal-close),
body.tlj-perfil-activo :is(.um-modal-close,.um-modal-close-link) {
    box-sizing: border-box;
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tlj-color-button-border);
    border-radius: 8px;
    background: var(--tlj-color-button-bg);
    background-image: none;
    color: var(--tlj-color-button-text);
    -webkit-text-fill-color: var(--tlj-color-button-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
    text-shadow: none;
    transform: none;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.tlj-modal-close svg,
tlj-contact-form::part(modal-close-icon) {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.tlj-modal-close:hover,
.tlj-modal-close:focus-visible,
tlj-contact-form::part(modal-close):hover,
tlj-contact-form::part(modal-close):focus-visible,
body.tlj-perfil-activo :is(.um-modal-close,.um-modal-close-link):hover,
body.tlj-perfil-activo :is(.um-modal-close,.um-modal-close-link):focus-visible {
    border-color: var(--tlj-color-negative-hover-border-strong);
    background: var(--tlj-color-negative-hover-bg);
    color: var(--tlj-color-negative-hover-text);
    -webkit-text-fill-color: var(--tlj-color-negative-hover-text);
    box-shadow: none;
    outline: none;
    transform: none;
}

.tlj-modal-close:active:not(:hover),
.tlj-modal-close:focus:not(:focus-visible):not(:hover),
tlj-contact-form::part(modal-close):active:not(:hover),
tlj-contact-form::part(modal-close):focus:not(:focus-visible):not(:hover),
body.tlj-perfil-activo :is(.um-modal-close,.um-modal-close-link):active:not(:hover),
body.tlj-perfil-activo :is(.um-modal-close,.um-modal-close-link):focus:not(:focus-visible):not(:hover) {
    border-color: var(--tlj-color-button-border);
    background: var(--tlj-color-button-bg);
    color: var(--tlj-color-button-text);
    -webkit-text-fill-color: var(--tlj-color-button-text);
    box-shadow: none;
    outline: none;
    transform: none;
}

/* X en la esquina superior derecha del modal (Fase 11.61 / 11.65):
   misma posición en todos los modales y ventanas de la web, también
   cuando la X está dentro de la cabecera (.tlj-modal-header reserva su
   hueco). Referencia: modal de gráfica de Estadísticas. */
.tlj-modal-close--corner,
tlj-contact-form::part(modal-close-corner) {
    position: absolute;
    top: var(--tlj-modal-corner-offset);
    right: var(--tlj-modal-corner-offset);
    z-index: 20;
}

@media (max-width: 600px) {
    :root {
        --tlj-modal-corner-offset: 11px;
    }
}

/* =========================================================
   Fase 11.66 - Ayudas «i» globales TLJ
   Fuente visual: tarjetas de Análisis avanzado de Estadísticas.
   Marcado: .tlj-info-wrap > button.tlj-info + .tlj-info-help.
   La «i» va en la esquina superior derecha de su tarjeta (o a la
   izquierda de la X en los modales) y, mientras la ayuda está
   abierta, el resto de la página se difumina. La ayuda nunca tiene
   scroll: crece con su contenido. Plan de Trading también la abre al
   pulsar (.is-open).
   ========================================================= */
.tlj-info-wrap {
    position: absolute;
    top: 22px;
    right: 18px;
    z-index: 15;
    display: flex;
}

/* En un modal se coloca respecto al mismo cuadro que la X, a su izquierda
   y centrada con ella. */
.tlj-modal-close--corner ~ .tlj-modal-header:has(> .tlj-info-wrap) {
    position: static;
}

.tlj-modal-close--corner ~ .tlj-modal-header .tlj-info-wrap {
    top: calc(var(--tlj-modal-corner-offset) + 5px);
    right: calc(var(--tlj-modal-corner-offset) + 46px);
}

.tlj-info-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--tlj-color-tooltip-backdrop);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}

.tlj-info-wrap:is(:hover, :focus-within, .is-open) {
    z-index: 80;
}

.tlj-info-wrap:is(:hover, :focus-within, .is-open)::before {
    opacity: 1;
    visibility: visible;
}

.tlj-info {
    box-sizing: border-box;
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tlj-color-info-border);
    border-radius: 50%;
    background: var(--tlj-color-info-bg);
    box-shadow: none;
    color: var(--tlj-color-info-text);
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
    cursor: help;
    appearance: none;
    -webkit-appearance: none;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}

.tlj-info:is(:hover, :focus, :active),
.tlj-info-wrap.is-open .tlj-info {
    border-color: var(--tlj-color-info-hover-border);
    background: var(--tlj-color-info-hover-bg);
    box-shadow: none;
    color: var(--tlj-color-info-hover-text);
    outline: none;
}

.tlj-info[hidden] {
    display: none;
}

.tlj-info-help {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    box-sizing: border-box;
    width: min(390px, calc(100vw - 40px));
    margin: 0;
    padding: 17px 19px;
    border: 1px solid var(--tlj-color-tooltip-border);
    border-radius: 9px;
    background: var(--tlj-color-tooltip-bg);
    box-shadow: var(--tlj-effect-tooltip-shadow);
    color: var(--tlj-color-tooltip-text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}

.tlj-info-wrap:is(:hover, :focus-within, .is-open) .tlj-info-help {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.tlj-info-wrap .tlj-info-help > strong {
    display: block;
    margin: 0 0 9px;
    color: var(--tlj-color-tooltip-title);
    font-size: 14px;
    font-weight: 850;
}

.tlj-info-wrap .tlj-info-help p {
    display: block;
    max-width: none;
    margin: 0 0 9px;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.tlj-info-wrap .tlj-info-help p:last-child {
    margin-bottom: 0;
}

.tlj-info-wrap .tlj-info-help b {
    color: var(--tlj-color-tooltip-strong);
    font-weight: 850;
}

.tlj-info-wrap .tlj-info-help a {
    color: var(--tlj-color-tooltip-title);
    font-weight: 800;
    text-decoration: underline;
}

/* Móvil: la ayuda se despliega bajo la «i» con el ancho de su tarjeta
   (8 px por lado) o de su modal (11 px por lado), siempre a su tamaño. */
@media (max-width: 700px) {
    .tlj-info-wrap {
        left: 8px;
        justify-content: flex-end;
        pointer-events: none;
    }

    .tlj-info {
        pointer-events: auto;
    }

    .tlj-info-help {
        right: -10px;
        left: 0;
        width: auto;
    }

    .tlj-modal-close--corner ~ .tlj-modal-header .tlj-info-wrap {
        left: var(--tlj-modal-corner-offset);
    }

    .tlj-modal-close--corner ~ .tlj-modal-header .tlj-info-help {
        right: -46px;
    }
}

/* =========================================================
   Fase 11.68 - Desplegables globales TLJ
   Una sola piel para las listas desplegables de Lista de Operaciones,
   Evolución Histórica, Estadísticas, Gráficos, Herramientas y Mi Cuenta
   (también el Select2 de Ultimate Member en Privacidad). Cada plugin
   conserva solo la posición, el tamaño y la tipografía de su lista y de
   sus opciones.
   --picker: selectores de calendario, año y símbolo (hover turquesa);
   --filled: la opción elegida va rellena; --rows: filas a todo el ancho.
   Variables opcionales: --tlj-dropdown-border y --tlj-dropdown-option.
   ========================================================= */
.tlj-dropdown,
body.tlj-mi-cuenta-activa .um-field .select2-container--open .select2-dropdown {
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid var(--tlj-dropdown-border, var(--tlj-color-dropdown-border));
    border-radius: 8px;
    background: var(--tlj-color-dropdown-bg);
    box-shadow: var(--tlj-effect-dropdown-shadow);
    color: var(--tlj-color-dropdown-text);
    -webkit-text-fill-color: currentColor;
}

.tlj-dropdown .tlj-dropdown__option,
body.tlj-mi-cuenta-activa .select2-results__option {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--tlj-dropdown-option, var(--tlj-color-dropdown-text));
    font-family: var(--tlj-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}

.tlj-dropdown .tlj-dropdown__option:is(:hover, :focus) {
    border-color: var(--tlj-color-dropdown-hover-border);
    background: var(--tlj-color-dropdown-hover-bg);
    color: var(--tlj-color-dropdown-hover-text);
    outline: none;
}

.tlj-dropdown .tlj-dropdown__option:is(.selected, .active, .is-selected, [aria-selected="true"]) {
    border-color: var(--tlj-color-dropdown-selected-border);
    background: var(--tlj-color-dropdown-selected-bg);
    color: var(--tlj-color-dropdown-selected-text);
}

/* Select2 de UM: um-styles.css fija el borde del menú y el color de las
   opciones con !important, y el fondo con selectores de seis clases. El texto
   se pinta con -webkit-text-fill-color (UM no lo usa) y solo el borde y los
   fondos de estado necesitan !important para imponerse. */
body.tlj-mi-cuenta-activa .um-field .select2-container--open .select2-dropdown {
    border-color: var(--tlj-color-dropdown-border) !important;
    -webkit-text-fill-color: var(--tlj-color-dropdown-text);
}

body.tlj-mi-cuenta-activa .select2-results__option--highlighted {
    border-color: var(--tlj-color-dropdown-hover-border);
    background: var(--tlj-color-dropdown-hover-bg) !important;
    -webkit-text-fill-color: var(--tlj-color-dropdown-hover-text);
}

body.tlj-mi-cuenta-activa .select2-results__option[aria-selected="true"] {
    border-color: var(--tlj-color-dropdown-selected-border);
    background: var(--tlj-color-dropdown-selected-bg) !important;
    -webkit-text-fill-color: var(--tlj-color-dropdown-selected-text);
}

.tlj-dropdown--picker .tlj-dropdown__option {
    border: 0;
}

.tlj-dropdown--picker .tlj-dropdown__option:is(:hover, :focus, .selected) {
    background: var(--tlj-color-picker-hover-bg);
    color: var(--tlj-color-dropdown-selected-text);
}

.tlj-dropdown--filled .tlj-dropdown__option.selected {
    background: var(--tlj-color-picker-selected-bg);
    color: var(--tlj-color-picker-selected-text);
}

.tlj-dropdown--rows {
    padding: 0;
}

.tlj-dropdown--rows .tlj-dropdown__option {
    border-radius: 0;
}

/* Control cerrado de desplegable: misma piel para selectores personalizados.
   Cada plugin conserva solo su tamaño y posición. */
.tlj-dropdown-control > .tlj-dropdown-trigger {
    box-sizing: border-box;
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0 40px 0 13px;
    border: 1px solid var(--tlj-color-border);
    border-radius: 8px;
    background: var(--tlj-color-field);
    color: var(--tlj-color-text-secondary);
    font-family: var(--tlj-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}


.tlj-dropdown-control > .tlj-dropdown-trigger.filled {
    border-color: rgba(var(--tlj-color-accent-rgb), .28);
    background: var(--tlj-color-field);
    color: var(--tlj-color-text);
    font-weight: 700;
}

.tlj-dropdown-control > .tlj-dropdown-trigger::after {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--tlj-color-accent);
    border-bottom: 1.5px solid var(--tlj-color-accent);
    content: "";
    transform: translateY(-65%) rotate(45deg);
    transition: transform .35s ease;
}

.tlj-dropdown-control > .tlj-dropdown-trigger:is(:hover, :focus-visible),
.tlj-dropdown-control.open > .tlj-dropdown-trigger {
    border-color: var(--tlj-color-accent);
    background: var(--tlj-color-surface);
    color: var(--tlj-color-text);
    box-shadow: 0 0 0 3px var(--tlj-color-focus-ring);
}

.tlj-dropdown-control.open > .tlj-dropdown-trigger::after {
    transform: translateY(-25%) rotate(225deg);
}

/* Fase 11.76 · Menú «Otros» compartido.
   La posición y geometría son comunes a Plan, Lista y Evolución;
   la tipografía y la piel del control y del panel usan los tokens del Tema. */
.tlj-data-menu {
    position: relative;
    z-index: 105;
    flex: 0 0 auto;
    margin-left: auto;
}

.tlj-data-menu__toggle {
    box-sizing: border-box;
    min-width: 108px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--tlj-color-accent);
    border-radius: 9px;
    background: var(--tlj-color-dropdown-bg);
    color: var(--tlj-color-dropdown-text);
    box-shadow: none;
    -webkit-text-fill-color: currentColor;
    font-family: var(--tlj-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    cursor: pointer;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}

.tlj-data-menu__toggle:is(:hover, :focus, :active),
.tlj-data-menu.is-open .tlj-data-menu__toggle {
    border-color: var(--tlj-color-accent);
    background: var(--tlj-color-dropdown-hover-bg);
    color: var(--tlj-color-dropdown-hover-text);
    outline: none;
}

.tlj-data-menu__toggle svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform .18s ease;
}

.tlj-data-menu.is-open .tlj-data-menu__toggle svg {
    transform: rotate(180deg);
}

.tlj-data-menu.is-open {
    z-index: 106;
}

.tlj-data-menu__panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 107;
    min-width: 205px;
}

.tlj-data-menu__item {
    display: flex;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.tlj-data-menu__item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

@media (max-width: 720px) {
    .tlj-data-menu {
        margin-left: 0;
    }

    .tlj-data-menu__toggle {
        min-width: 0;
    }
}

/* =========================================================
   Fase 11.70 - Personalizar, tarjeta de filtros y botones comunes
   .tlj-customize-btn  Botón de icono que abre Personalizar (Lista,
                       Evolución, Estadísticas, Gráficos, Panel y el
                       formulario de operaciones). Icono de referencia:
                       el del modal de añadir operación. En barras de filtros
                       toma --tlj-toolbar-control-height.
   .tlj-customize      Modal Personalizar (ref.: Estadísticas): cabecera
                       con el título a la altura de la X, casillas,
                       notas y pie con Todo/Restablecer a la izquierda y
                       Cancelar/Guardar a la derecha. Es la ventana
                       (.tlj-modal-window) de una capa .tlj-modal-layer
                       con .tlj-customize-dialog (hueco propio); la
                       densidad se ajusta con data-customize-density.
                       Cada plugin fija el ancho del panel y
                       --tlj-customize-columns.
   .tlj-filter-card    Tarjeta de filtros: texto a la izquierda,
                       selectores en el centro y acciones a la derecha.
   .tlj-pdf-btn        Botón Descargar PDF.
   .tlj-field-icon     Icono dentro de un campo (calendario, horas,
                       imagen, psicología); cada plugin lo posiciona.
   Botones del modal: [data-tlj-customize-all] marca todas las casillas y
   [data-tlj-customize-cancel] cierra como la X (theme.js).
   ========================================================= */

/* Botón de copiar de las tarjetas de Plan de Trading.
   Componente visual común centralizado en Tema. */
button.tlj-copy-trigger {
    box-sizing: border-box;
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tlj-color-info-border);
    border-radius: 7px;
    background: var(--tlj-color-info-bg);
    color: var(--tlj-color-info-text);
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}

button.tlj-copy-trigger svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.tlj-copy-trigger:is(:hover, :focus-visible) {
    border-color: var(--tlj-color-info-hover-border);
    background: var(--tlj-color-info-hover-bg);
    color: var(--tlj-color-info-hover-text);
    box-shadow: none;
    outline: none;
}

button.tlj-copy-trigger:disabled {
    opacity: .55;
    cursor: wait;
}   
   
button.tlj-customize-btn {
    box-sizing: border-box;
    display: inline-flex;
    width: var(--tlj-customize-btn-size);
    height: var(--tlj-customize-btn-size);
    flex: 0 0 var(--tlj-customize-btn-size);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tlj-color-customize-btn-border);
    border-radius: 8px;
    background: var(--tlj-color-customize-btn-bg);
    color: var(--tlj-color-customize-btn-text);
    box-shadow: none;
    cursor: pointer;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}

button.tlj-customize-btn svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.tlj-customize-btn:is(:hover, :focus-visible) {
    border-color: var(--tlj-color-customize-btn-hover-border);
    background: var(--tlj-color-customize-btn-hover-bg);
    box-shadow: var(--tlj-effect-customize-btn-hover-ring);
    outline: none;
}

button.tlj-customize-btn:disabled {
    opacity: .55;
    cursor: wait;
}

.tlj-customize-dialog {
    --tlj-modal-layer-pad: var(--tlj-customize-dialog-gap);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    overscroll-behavior: contain;
}

/* div o form: así el margen gana al de los formularios de Kadence (.single-content form). */
.tlj-customize:is(div, form) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(1460px, 100%);
    min-width: 0;
    max-height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

/* El título queda centrado con la X de la esquina (36 px a 14 px del borde). */
.tlj-customize__head {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-top: 18px;
}

.tlj-customize__options {
    min-height: 0;
    flex: 1 1 auto;
    padding: var(--tlj-customize-options-padding, 22px) 28px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tlj-customize__group {
    min-width: 0;
    margin: 0 0 var(--tlj-customize-group-gap, 18px);
    padding: 0;
    border: 0;
}

.tlj-customize__group > legend {
    float: none;
    width: 100%;
    margin: 0 0 var(--tlj-customize-legend-gap, 8px);
    padding: 0;
    color: var(--tlj-ui-accent-strong);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.tlj-customize__grid {
    display: grid;
    grid-template-columns: repeat(min(var(--tlj-customize-columns, 6), var(--tlj-customize-layout-columns, 6)), minmax(0, 1fr));
    gap: var(--tlj-customize-grid-gap, 10px);
}

.tlj-customize__option {
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    min-height: var(--tlj-customize-row-height, 42px);
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: var(--tlj-customize-row-padding, 8px) 11px;
    border: 1px solid var(--tlj-ui-border);
    border-radius: 8px;
    background: var(--tlj-ui-surface-2);
    color: var(--tlj-ui-text-2);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
}

.tlj-customize__option:is(:hover, :has(input:checked)) {
    border-color: var(--tlj-ui-border-strong);
    background: var(--tlj-ui-active-bg);
}

.tlj-customize__option:has(input:not(:checked)) {
    border-color: var(--tlj-ui-accent);
}

.tlj-customize__option input[type="checkbox"] {
    appearance: auto;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0;
    padding: 0;
    accent-color: var(--tlj-ui-accent);
    cursor: pointer;
}

html[data-tlj-theme="dark"] .tlj-customize__option input[type="checkbox"]:not(:checked) {
    appearance: none;
    box-sizing: border-box;
    border: 1px solid var(--tlj-ui-accent);
    border-radius: 3px;
    background: transparent;
}

p.tlj-customize__note {
    margin: 3px 0 0;
    color: var(--tlj-ui-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.tlj-customize__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
    padding: var(--tlj-customize-footer-padding, 16px) 28px;
    border-top: 1px solid var(--tlj-ui-border);
    background: var(--tlj-ui-surface-2);
}

.tlj-customize__side,
.tlj-customize__buttons {
    display: flex;
    flex-shrink: 0;
    gap: 9px;
}

.tlj-customize__buttons {
    margin-left: auto;
}

.tlj-customize__feedback {
    min-width: 0;
    color: var(--tlj-ui-muted);
    font-size: 11px;
    line-height: 1.5;
}

.tlj-customize__feedback p {
    margin: 4px 0 0;
    font-size: 11px;
}

.tlj-customize__feedback p:empty {
    display: none;
}

.tlj-customize__feedback p.is-error {
    color: var(--tlj-negative-text);
}

.tlj-customize button:not(.tlj-modal-action):disabled {
    opacity: .55;
    cursor: wait;
}

/* Estadísticas y Gráficos compactan el modal si no cabe en la altura disponible. */
.tlj-customize-dialog[data-customize-density="balanced"] {
    --tlj-customize-row-height: 36px;
    --tlj-customize-row-padding: 6px;
    --tlj-customize-grid-gap: 8px;
    --tlj-customize-group-gap: 12px;
    --tlj-customize-legend-gap: 6px;
    --tlj-customize-options-padding: 16px;
    --tlj-customize-footer-padding: 12px;
}

.tlj-customize-dialog[data-customize-density="compact"] {
    --tlj-customize-row-height: 32px;
    --tlj-customize-row-padding: 5px;
    --tlj-customize-grid-gap: 6px;
    --tlj-customize-group-gap: 10px;
    --tlj-customize-legend-gap: 4px;
    --tlj-customize-options-padding: 14px;
    --tlj-customize-footer-padding: 10px;
}

.tlj-filter-card {
    --tlj-customize-btn-size: var(--tlj-toolbar-control-height);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(205px, 1fr) auto minmax(205px, 1fr);
    gap: 18px;
    align-items: center;
    margin: 30px 0 12px;
    padding: 20px 22px;
    border: 1px solid var(--tlj-color-filter-card-border);
    border-radius: 12px;
    background: var(--tlj-color-filter-card-bg);
    box-shadow: var(--tlj-effect-filter-card-shadow);
    color: var(--tlj-color-text);
}

.tlj-filter-card__heading {
    min-width: 0;
    justify-self: start;
    text-align: left;
}

.tlj-filter-card__heading > span {
    display: block;
    color: var(--tlj-color-filter-card-title);
    font-size: 15px;
    font-weight: 800;
}

.tlj-filter-card__heading > small {
    display: block;
    margin-top: 5px;
    color: var(--tlj-color-filter-card-text);
    font-size: 12px;
}

.tlj-filter-card__controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 8px;
    margin: 0;
}

.tlj-filter-card__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
}

button.tlj-pdf-btn {
    box-sizing: border-box;
    display: inline-flex;
    width: var(--tlj-customize-btn-size);
    height: var(--tlj-customize-btn-size);
    min-height: var(--tlj-customize-btn-size);
    flex: 0 0 var(--tlj-customize-btn-size);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tlj-color-customize-btn-border);
    border-radius: 8px;
    background: var(--tlj-color-customize-btn-bg);
    color: var(--tlj-color-customize-btn-text);
    box-shadow: none;
    cursor: pointer;
    transition: color .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}

button.tlj-pdf-btn svg {
    width: 28px;
    height: 28px;
}

button.tlj-pdf-btn:is(:hover, :focus-visible) {
    border-color: var(--tlj-color-customize-btn-hover-border);
    background: var(--tlj-color-customize-btn-hover-bg);
    color: var(--tlj-color-customize-btn-text);
    box-shadow: var(--tlj-effect-customize-btn-hover-ring);
    outline: none;
}

button.tlj-pdf-btn:is(:disabled, .is-loading) {
    opacity: .55;
    cursor: wait;
}

/* Selector de filtros compartido: misma piel que los selectores de Gráficos.
   Estadísticas conserva únicamente el tamaño propio del selector. */
.tlj-graphs .gg-box,
.tlj-stats-root .custom-selectCal__selected {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--tlj-color-filter-selector-border);
    border-radius: 8px;
    background: var(--tlj-color-filter-selector-bg);
    color: var(--tlj-color-filter-selector-text);
    cursor: pointer;
    font-family: var(--tlj-font-family);
    font-size: 14px;
    text-align: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.tlj-graphs .gg-box:not(.gg-toggle)::after,
.tlj-stats-root .custom-selectCal__selected::after {
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-right: 1.5px solid var(--tlj-color-accent);
    border-bottom: 1.5px solid var(--tlj-color-accent);
    content: "";
    transform: rotate(45deg) translateY(-2px);
}

.tlj-graphs .gg-box:is(:hover, .open, :focus-visible),
.tlj-stats-root .custom-selectCal.open > .custom-selectCal__selected {
    border-color: var(--tlj-color-filter-selector-hover-border);
    background: var(--tlj-color-filter-selector-hover-bg);
    color: var(--tlj-color-filter-selector-hover-text);
    outline: none;
}

.tlj-graphs .gg-box.selected,
.tlj-graphs .gg-toggle.active,
.tlj-stats-root .custom-selectCal__selected.filled {
    border-color: var(--tlj-color-filter-selector-selected-border);
    background: var(--tlj-color-filter-selector-selected-bg);
    color: var(--tlj-color-filter-selector-selected-text);
    font-weight: 700;
}

.tlj-field-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: var(--tlj-color-accent);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1200px) {
    .tlj-customize {
        --tlj-customize-layout-columns: 5;
    }
}

@media (max-width: 1180px) {
    .tlj-filter-card {
        grid-template-columns: 1fr auto;
        grid-template-areas: "heading actions" "controls controls";
    }

    .tlj-filter-card__heading {
        grid-area: heading;
    }

    .tlj-filter-card__controls {
        grid-area: controls;
    }

    .tlj-filter-card__actions {
        grid-area: actions;
    }
}

@media (max-width: 1100px) {
    .tlj-customize {
        --tlj-customize-layout-columns: 4;
    }
}

@media (max-width: 850px) {
    .tlj-customize {
        --tlj-customize-layout-columns: 3;
    }
}

@media (max-width: 820px) {
    .tlj-filter-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .tlj-filter-card__heading {
        text-align: center;
    }

    .tlj-filter-card__controls {
        flex-wrap: wrap;
        align-self: center;
    }

    .tlj-filter-card__actions {
        align-self: center;
    }
}

@media (max-width: 700px) {
    .tlj-filter-card {
        margin-top: 22px;
        padding: 16px 12px;
    }
}

@media (max-width: 650px) {
    .tlj-customize {
        --tlj-customize-layout-columns: 2;
    }
}

@media (max-width: 520px) {
    :root {
        --tlj-customize-dialog-gap: 12px;
    }

    .tlj-customize__options {
        padding: 18px 16px;
    }

    .tlj-customize__footer {
        flex-wrap: wrap;
        padding: 14px 16px;
    }
}

@media (max-width: 380px) {
    .tlj-customize {
        --tlj-customize-layout-columns: 1;
    }
}

/* =========================================================
   Fase 11.37 - Accesibilidad publica (Kadence + Hu-manity)
   ========================================================= */

/* Objetivo tactil del disparador movil de Kadence. */
@media (max-width: 921px) {
    #mobile-toggle,
    #masthead .menu-toggle-open,
    #masthead .mobile-toggle-open-container button {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
    }
}

/* Skip-link: visible al foco y destino programaticamente enfocable via theme.js. */
a.skip-link.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 1000000 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #102526 !important;
    -webkit-text-fill-color: #102526 !important;
    outline: 3px solid #0f766e !important;
    outline-offset: 2px !important;
}

/* Cookie Compliance / Hu-manity: solo presentacion y accesibilidad.
   No altera categorias, listeners, autoblocking ni consentimiento. */
.hu-toggle-label,
.hu-toggle-heading {
    color: #1f3334 !important;
    -webkit-text-fill-color: #1f3334 !important;
}

#hu-cookies-save.hu-cookies-save,
button#hu-cookies-save {
    min-height: 44px !important;
    padding: 10px 16px !important;
    background: #0b625e !important;
    border-color: #0b625e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hu-nav-item.hu-btn,
#hu-cookies-notice-privacy-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    touch-action: manipulation;
}