/*
 * Tema claro L1X de la parte pública (punto 1.5, D8).
 *
 * Solo lo cargan las páginas cuyo layout pide $tema (layouts/public, lista de
 * rutas en $temaL1x), siempre después de premium-design.css y como hoja
 * bloqueante, y toda regla va bajo .tema-l1x (la clase del <body>). Así los
 * paneles, el chat y la pantalla de directo, que comparten premium-design.css
 * y el header, no cambian. Los valores salen de tokens-l1x.css.
 *
 * Índice: base · tipografía · contenedor · botones · etiquetas · tarjeta ·
 * esqueleto · aparición · portada · cabecera · barra lateral y chips ·
 * listados · avisos · movimiento reducido (al final, para que gane).
 */

/* ========== Base ========== */

body.tema-l1x {
    --font-titles: var(--l1x-fuente-titulos);
    --font-body: var(--l1x-fuente-cuerpo);
    --font-buttons: var(--l1x-fuente-cuerpo);

    background: var(--l1x-fondo);
    color: var(--l1x-texto);
    font-family: var(--l1x-fuente-cuerpo);
    color-scheme: light;
    scrollbar-color: #C4C4C4 var(--l1x-fondo);
}

body.tema-l1x::-webkit-scrollbar-track {
    background: var(--l1x-fondo);
}

body.tema-l1x::-webkit-scrollbar-thumb {
    background: #C4C4C4;
}

body.tema-l1x ::selection {
    background: rgb(var(--l1x-oro-rgb) / .35);
    color: var(--l1x-texto);
}

/* ========== Tipografía ========== */

.tema-l1x h1,
.tema-l1x h2,
.tema-l1x h3 {
    color: var(--l1x-texto);
}

/* El degradado dorado recortado sobre el texto no se lee sobre claro. */
.tema-l1x .text-gradient-gold {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--l1x-texto);
}

.tema-l1x .l1x-titulo-seccion {
    margin: 0;
    font-family: var(--l1x-fuente-titulos);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--l1x-texto);
}

.tema-l1x .l1x-texto-secundario {
    color: var(--l1x-texto-secundario);
}

.tema-l1x .l1x-frase {
    margin: 4px 0 0;
    font-family: var(--l1x-fuente-titulos);
    font-style: italic;
    font-size: 18px;
    line-height: 1.4;
    color: var(--l1x-texto-secundario);
}

.tema-l1x .l1x-frase[hidden] {
    display: none;
}

/* ========== Contenedor y espaciado ==========
   premium-design.css fija .container con !important en móvil; solo otra
   declaración !important más específica lo vence. */

.tema-l1x .container {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--l1x-espacio-lateral) !important;
}

.tema-l1x .l1x-seccion {
    padding-top: var(--l1x-espacio-seccion) !important;
}

.tema-l1x .l1x-seccion:last-of-type {
    padding-bottom: var(--l1x-espacio-seccion) !important;
}

.tema-l1x .l1x-seccion__cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--l1x-espacio-rejilla);
}

@media (max-width: 639px) {
    body.tema-l1x {
        --l1x-espacio-lateral: 16px;
        --l1x-espacio-seccion: 32px;
        --l1x-espacio-rejilla: 16px;
    }

    .tema-l1x .l1x-titulo-seccion {
        font-size: 22px;
    }
}

/* ========== Botones ========== */

.tema-l1x .l1x-boton-oro,
.tema-l1x .l1x-boton-contorno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--l1x-radio);
    font-family: var(--l1x-fuente-cuerpo);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--l1x-dur-rapida) var(--l1x-curva),
        border-color var(--l1x-dur-rapida) var(--l1x-curva),
        transform var(--l1x-dur-rapida) var(--l1x-curva);
}

.tema-l1x .l1x-boton-oro {
    background: var(--l1x-oro);
    border: 1px solid var(--l1x-oro);
    color: var(--l1x-texto);
}

.tema-l1x .l1x-boton-oro:hover {
    background: var(--l1x-oro-hover);
    border-color: var(--l1x-oro-hover);
    color: var(--l1x-texto);
}

.tema-l1x .l1x-boton-contorno {
    background: transparent;
    border: 1px solid var(--l1x-texto);
    color: var(--l1x-texto);
}

.tema-l1x .l1x-boton-contorno:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .l1x-boton-oro:active,
.tema-l1x .l1x-boton-contorno:active {
    transform: scale(.98);
}

.tema-l1x .l1x-boton-oro:focus-visible,
.tema-l1x .l1x-boton-contorno:focus-visible,
.tema-l1x .l1x-enlace:focus-visible {
    outline: 2px solid var(--l1x-oro-texto);
    outline-offset: 2px;
}

.tema-l1x .l1x-enlace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--l1x-oro-texto);
    text-decoration: none;
    white-space: nowrap;
}

.tema-l1x .l1x-enlace:hover {
    text-decoration: underline;
    color: var(--l1x-oro-texto);
}

/* ========== Etiquetas ========== */

.tema-l1x .l1x-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--l1x-fuente-cuerpo);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tema-l1x .l1x-etiqueta--envivo {
    background: var(--l1x-envivo-etiqueta);
    color: #FFFFFF;
}

.tema-l1x .l1x-etiqueta__punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 2px var(--l1x-envivo);
    animation: l1x-pulso 1.6s ease-out infinite;
}

.tema-l1x .l1x-etiqueta__precio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, .45);
}

.tema-l1x .l1x-etiqueta--nueva {
    background: var(--l1x-nueva);
    color: var(--l1x-nueva-texto);
}

.tema-l1x .l1x-etiqueta--vip {
    background: var(--l1x-vip);
    color: var(--l1x-vip-texto);
}

.tema-l1x .l1x-etiqueta--favorita {
    background: var(--l1x-favorita);
    color: var(--l1x-favorita-texto);
}

.tema-l1x .l1x-etiqueta--categoria {
    background: var(--l1x-categoria);
    color: var(--l1x-categoria-texto);
}

@keyframes l1x-pulso {
    0% { box-shadow: 0 0 0 0 rgb(var(--l1x-envivo-rgb) / .9); }
    100% { box-shadow: 0 0 0 6px rgb(var(--l1x-envivo-rgb) / 0); }
}

/* ========== Rejilla de tarjetas ========== */

.tema-l1x .l1x-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--l1x-espacio-rejilla);
}

@media (max-width: 639px) {
    .tema-l1x .l1x-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========== Tarjeta de modelo (<x-tarjeta-modelo>) ==========
   Solo transform, opacity y box-shadow se animan. El hover escala la tarjeta
   entera (no la foto por separado) y solo en dispositivos con ratón; el foco
   del teclado da el mismo efecto. */

.tema-l1x .l1x-tarjeta {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--l1x-radio);
    background: var(--l1x-superficie);
    box-shadow: var(--l1x-sombra);
    color: #FFFFFF;
    text-decoration: none;
    transition: transform var(--l1x-dur) var(--l1x-curva),
        box-shadow var(--l1x-dur) var(--l1x-curva);
}

@media (hover: hover) {
    .tema-l1x .l1x-tarjeta:hover {
        transform: scale(1.02);
        box-shadow: var(--l1x-sombra-elevada);
    }
}

.tema-l1x .l1x-tarjeta:focus-visible {
    transform: scale(1.02);
    box-shadow: var(--l1x-sombra-elevada);
    outline: 2px solid var(--l1x-oro-texto);
    outline-offset: 2px;
}

.tema-l1x .l1x-tarjeta__foto {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* Hasta que llega la imagen se ve el gris cálido del esqueleto. */
    background: var(--l1x-esqueleto);
}

.tema-l1x .l1x-tarjeta__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tema-l1x .l1x-tarjeta__sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #B5B1AA;
    font-size: 48px;
}

.tema-l1x .l1x-tarjeta__etiquetas {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

/* En una tarjeta estrecha (móvil, dos columnas) EN VIVO con candado y precio
   no cabe junto a la de categoría: pasan de línea, y la de categoría sigue a
   la derecha. */
.tema-l1x .l1x-tarjeta__etiquetas > .l1x-etiqueta:not(.l1x-etiqueta--envivo) {
    margin-left: auto;
}

.tema-l1x .l1x-etiqueta--envivo {
    flex-wrap: wrap;
    max-width: 100%;
}

.tema-l1x .l1x-etiqueta__precio {
    white-space: nowrap;
}

.tema-l1x .l1x-tarjeta__pie {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 12px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}

.tema-l1x .l1x-tarjeta__nombre {
    margin: 0;
    overflow: hidden;
    font-family: var(--l1x-fuente-cuerpo);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #FFFFFF;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tema-l1x .l1x-tarjeta__datos {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.3;
    color: #FFFFFF;
}

.tema-l1x .l1x-tarjeta__datos > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tema-l1x .l1x-tarjeta__datos .fi {
    flex: none;
    border-radius: 2px;
}

.tema-l1x .l1x-tarjeta__criterios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.tema-l1x .l1x-tarjeta__criterio {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: var(--l1x-texto);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}

/* ========== Esqueleto de carga ========== */

.tema-l1x .l1x-esqueleto {
    position: relative;
    overflow: hidden;
    background: var(--l1x-esqueleto);
}

.tema-l1x .l1x-esqueleto::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--l1x-esqueleto-brillo), transparent);
    animation: l1x-brillo 1.2s linear infinite;
}

.tema-l1x .l1x-tarjeta--esqueleto {
    pointer-events: none;
}

.tema-l1x .l1x-tarjeta--esqueleto .l1x-tarjeta__pie {
    background: none;
}

.tema-l1x .l1x-esqueleto-linea {
    height: 12px;
    margin-top: 8px;
    border-radius: 4px;
    background: var(--l1x-esqueleto-brillo);
}

.tema-l1x .l1x-esqueleto-linea--corta {
    width: 45%;
}

@keyframes l1x-brillo {
    100% { transform: translateX(100%); }
}

/* ========== Aparición gradual ==========
   No hay ninguna regla opacity:0 fuera de la animación: el estado oculto es el
   fotograma "from", y solo existe con JS activo (html.l1x-js, lo pone el
   layout) y sin "reducir movimiento". Sin JS el contenido se ve tal cual.
   Se usa fill-mode backwards (no both): así el "from" cubre el retraso, pero
   al terminar la animación no retiene transform y el hover de la tarjeta
   sigue funcionando. --l1x-retraso lo fija el JS (30 ms por tarjeta, tope de
   300 ms). */

@media (prefers-reduced-motion: no-preference) {
    html.l1x-js .tema-l1x .l1x-aparecer {
        animation: l1x-aparecer var(--l1x-dur) var(--l1x-curva) var(--l1x-retraso, 0ms) backwards;
    }
}

@keyframes l1x-aparecer {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

/* ========== Listados (categories/models y filters/results) ========== */

.tema-l1x .l1x-listado {
    padding-bottom: var(--l1x-espacio-seccion);
}

.tema-l1x .l1x-listado__cabecera {
    padding-top: var(--l1x-espacio-seccion);
    padding-bottom: var(--l1x-espacio-rejilla);
}

.tema-l1x .l1x-listado__titulo {
    margin: 0;
    font-family: var(--l1x-fuente-titulos);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--l1x-texto);
}

.tema-l1x .l1x-listado__descripcion {
    max-width: 640px;
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--l1x-texto-secundario);
}

.tema-l1x .l1x-listado__datos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--l1x-texto-secundario);
}

.tema-l1x .l1x-listado__datos strong {
    color: var(--l1x-texto);
}

.tema-l1x .sh-no-results {
    grid-column: 1 / -1;
    padding: 56px 24px;
    border: 1px solid var(--l1x-borde);
    border-radius: var(--l1x-radio);
    background: var(--l1x-superficie);
    text-align: center;
}

.tema-l1x .sh-no-results > i {
    margin-bottom: 16px;
    font-size: 40px;
    color: var(--l1x-oro);
}

.tema-l1x .sh-no-results h3 {
    margin: 0 0 8px;
    font-family: var(--l1x-fuente-cuerpo);
    font-size: 20px;
    font-weight: 600;
}

.tema-l1x .sh-no-results p {
    margin: 0 0 24px;
    color: var(--l1x-texto-secundario);
}

/* Paginación (custom/pagination) */
.tema-l1x .sh-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--l1x-espacio-seccion);
}

.tema-l1x .pagination-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tema-l1x .pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--l1x-borde);
    border-radius: var(--l1x-radio);
    background: var(--l1x-superficie);
    color: var(--l1x-texto);
    font-weight: 600;
    text-decoration: none;
}

.tema-l1x a.pagination-item:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .pagination-item.active {
    background: var(--l1x-chip-activo);
    border-color: var(--l1x-chip-activo);
    color: var(--l1x-chip-activo-texto);
}

.tema-l1x .pagination-item.disabled {
    color: var(--l1x-texto-secundario);
    background: transparent;
}

.tema-l1x a.pagination-item:focus-visible {
    outline: 2px solid var(--l1x-oro-texto);
    outline-offset: 2px;
}

/* ========== Cabecera (components/header-unified) ==========
   Sin tocar su marcado: la comparten los paneles, que siguen oscuros. Los
   colores en línea del desplegable de notificaciones obligan a !important. */

.tema-l1x .header-stripchat {
    background: var(--l1x-cabecera-fondo-respaldo);
    border-bottom: 1px solid var(--l1x-borde);
    color: var(--l1x-texto);
    transition: box-shadow var(--l1x-dur) var(--l1x-curva);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    @media (min-width: 769px) {
        .tema-l1x .header-stripchat {
            background: var(--l1x-cabecera-fondo);
            -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
        }
    }
}

.tema-l1x .header-stripchat.scrolled {
    box-shadow: var(--l1x-sombra);
}

.tema-l1x .sidebar-trigger {
    border-right-color: var(--l1x-borde);
    color: var(--l1x-texto);
}

.tema-l1x .sidebar-trigger:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .sidebar-trigger:focus-visible,
.tema-l1x .btn-notification-compact:focus-visible,
.tema-l1x .user-menu-toggle:focus-visible,
.tema-l1x .btn-login-compact:focus-visible,
.tema-l1x .btn-register-compact:focus-visible,
.tema-l1x .btn-tokens-compact:focus-visible,
.tema-l1x .logo-compact:focus-visible {
    outline: 2px solid var(--l1x-oro-texto);
    outline-offset: 2px;
}

.tema-l1x .header-stripchat .logo-text {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--l1x-texto);
    font-family: var(--l1x-fuente-titulos);
    font-weight: 600;
    letter-spacing: 0;
}

/* Botones: dorado sólido con texto #111, nunca blanco sobre dorado. */
.tema-l1x .btn-register-compact,
.tema-l1x .btn-tokens-compact {
    background: var(--l1x-oro);
    color: var(--l1x-texto);
    box-shadow: none;
}

.tema-l1x .btn-register-compact:hover,
.tema-l1x .btn-tokens-compact:hover {
    background: var(--l1x-oro-hover);
    color: var(--l1x-texto);
    box-shadow: none;
    transform: none;
}

.tema-l1x .btn-login-compact {
    background: transparent;
    border-color: var(--l1x-texto);
    color: var(--l1x-texto);
}

.tema-l1x .btn-login-compact:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .btn-notification-compact {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
    color: var(--l1x-texto);
}

.tema-l1x .btn-notification-compact:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .notification-count {
    background: var(--l1x-envivo-etiqueta);
    border-color: var(--l1x-superficie);
}

.tema-l1x .user-menu-toggle:hover {
    background: var(--l1x-chip-hover);
    border-color: var(--l1x-borde);
}

.tema-l1x .avatar-placeholder-compact,
.tema-l1x .avatar-placeholder-large {
    background: var(--l1x-oro);
    color: var(--l1x-texto);
}

/* Desplegables de usuario y notificaciones */
.tema-l1x .user-menu-dropdown {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
    box-shadow: var(--l1x-sombra-elevada);
    color: var(--l1x-texto);
}

.tema-l1x .user-menu-dropdown .user-name,
.tema-l1x .user-menu-dropdown .dropdown-header span[style] {
    color: var(--l1x-texto) !important;
}

.tema-l1x .user-menu-dropdown .dropdown-header button[style],
.tema-l1x .user-menu-dropdown a.dropdown-item[style*="center"] {
    color: var(--l1x-oro-texto) !important;
}

.tema-l1x .user-menu-dropdown .dropdown-item div[style*="color: #fff"] {
    color: var(--l1x-texto) !important;
}

.tema-l1x .user-menu-dropdown .dropdown-item div[style*="rgba(255,255,255"],
.tema-l1x .user-menu-dropdown .dropdown-items > div[style] {
    color: var(--l1x-texto-secundario) !important;
}

.tema-l1x .user-menu-dropdown .dropdown-item div[style*="border-radius: 50%"] {
    background: var(--l1x-chip-hover) !important;
    color: var(--l1x-oro-texto) !important;
}

.tema-l1x .user-menu-dropdown .dropdown-item[style*="rgba(212, 175, 55"] {
    background: rgb(var(--l1x-oro-rgb) / .12) !important;
}

.tema-l1x .user-role-badge,
.tema-l1x .dropdown-balance {
    background: rgb(var(--l1x-oro-rgb) / .15);
    color: var(--l1x-oro-texto);
}

.tema-l1x .dropdown-divider {
    background: var(--l1x-borde);
}

.tema-l1x .dropdown-item {
    color: var(--l1x-texto);
}

.tema-l1x .dropdown-item:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .dropdown-item.logout,
.tema-l1x .dropdown-item.logout:hover {
    color: #B42318;
}

/* Buscador de la cabecera (components/search-models, sh-search-premium.css) */
.tema-l1x .header-stripchat .sh-search-input-group {
    background: var(--l1x-superficie) !important;
    border-color: var(--l1x-borde-control) !important;
}

.tema-l1x .header-stripchat .sh-search-input-group:focus-within {
    outline: 2px solid var(--l1x-oro-texto);
    outline-offset: 1px;
}

.tema-l1x .sh-search-input-field {
    color: var(--l1x-texto) !important;
}

.tema-l1x .sh-search-input-field::placeholder {
    color: var(--l1x-texto-secundario);
}

.tema-l1x .sh-search-icon-gold {
    color: var(--l1x-oro-texto);
}

.tema-l1x .sh-search-divider {
    background: var(--l1x-borde);
}

.tema-l1x .sh-search-btn-filters {
    background: rgb(var(--l1x-oro-rgb) / .18);
    color: var(--l1x-oro-texto);
}

.tema-l1x .sh-search-btn-filters:hover {
    background: var(--l1x-oro);
    color: var(--l1x-texto);
}

.tema-l1x .sh-search-btn-clear {
    color: var(--l1x-texto-secundario);
}

/* Panel de filtros avanzados del buscador */
.tema-l1x .sh-search-window {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
    box-shadow: var(--l1x-sombra-elevada);
    color: var(--l1x-texto);
}

.tema-l1x .sh-search-window-header,
.tema-l1x .sh-search-window-footer {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
}

.tema-l1x .sh-search-window-title h3 {
    color: var(--l1x-texto);
}

.tema-l1x .sh-search-window-close {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .sh-search-section-label {
    color: var(--l1x-oro-texto);
}

.tema-l1x .sh-search-pill {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
    color: var(--l1x-texto);
}

.tema-l1x .sh-search-pill:hover {
    background: var(--l1x-chip-hover);
    border-color: var(--l1x-borde);
    color: var(--l1x-texto);
}

.tema-l1x .sh-search-pill.active {
    background: var(--l1x-chip-activo);
    color: var(--l1x-chip-activo-texto);
}

.tema-l1x .sh-search-checkmark {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde-control);
}

.tema-l1x .sh-search-custom-cb input:checked ~ .sh-search-checkmark {
    background: var(--l1x-oro);
    border-color: var(--l1x-oro);
}

.tema-l1x .sh-search-checkmark:after {
    border-color: var(--l1x-texto);
}

.tema-l1x .sh-search-label-text,
.tema-l1x .sh-search-custom-cb input:checked ~ .sh-search-label-text {
    color: var(--l1x-texto);
}

.tema-l1x .sh-search-btn-reset {
    color: var(--l1x-texto-secundario);
}

.tema-l1x .sh-search-btn-reset:hover {
    color: var(--l1x-oro-texto);
}

.tema-l1x .sh-search-btn-apply {
    background: var(--l1x-oro);
    color: var(--l1x-texto);
}

/* Selector de idioma de la cabecera (partials/selector-idioma-cabecera) */
.tema-l1x .idioma-cabecera__boton {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde-control);
    color: var(--l1x-texto);
}

.tema-l1x .idioma-cabecera__boton:hover,
.tema-l1x .idioma-cabecera[open] .idioma-cabecera__boton {
    background: var(--l1x-chip-hover);
    border-color: var(--l1x-texto);
    color: var(--l1x-texto);
}

.tema-l1x .idioma-cabecera__boton:focus-visible,
.tema-l1x .idioma-cabecera__opcion:focus-visible {
    outline-color: var(--l1x-oro-texto);
}

.tema-l1x .idioma-cabecera__lista {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
    box-shadow: var(--l1x-sombra-elevada);
}

.tema-l1x .idioma-cabecera__opcion {
    color: var(--l1x-texto);
}

.tema-l1x .idioma-cabecera__opcion:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .idioma-cabecera__opcion.es-actual {
    color: var(--l1x-oro-texto);
}

/* ========== Barra lateral (components/sidebar-premium) ========== */

.tema-l1x .sidebar-v2 {
    background: var(--l1x-superficie);
    border-right: 0;
    box-shadow: var(--l1x-sombra-lateral);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tema-l1x .sidebar-v2 .nav-section-title {
    color: var(--l1x-texto-secundario);
    font-family: var(--l1x-fuente-cuerpo);
    font-weight: 600;
}

.tema-l1x .sidebar-v2 .nav-icon-wrapper {
    background: var(--l1x-fondo);
    border-color: var(--l1x-borde);
}

.tema-l1x .sidebar-v2 .nav-item,
.tema-l1x .sidebar-v2 .filter-toggle {
    color: var(--l1x-texto);
}

.tema-l1x .sidebar-v2 .nav-item:hover,
.tema-l1x .sidebar-v2 .filter-toggle:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
    transform: none;
}

.tema-l1x .sidebar-v2 .nav-item:hover .nav-icon-wrapper {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde-control);
    color: var(--l1x-texto);
    box-shadow: none;
    transform: none;
}

.tema-l1x .sidebar-v2 .nav-item.active {
    background: var(--l1x-chip-activo);
    color: var(--l1x-chip-activo-texto);
}

.tema-l1x .sidebar-v2 .nav-item.active::before {
    display: none;
}

.tema-l1x .sidebar-v2 .nav-item.active .nav-icon-wrapper {
    background: var(--l1x-oro);
    border-color: var(--l1x-oro);
    color: var(--l1x-texto);
    box-shadow: none;
}

.tema-l1x .sidebar-v2 .filter-toggle .chevron {
    color: var(--l1x-texto-secundario);
}

.tema-l1x .sidebar-v2 .filter-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 12px;
}

.tema-l1x .sidebar-v2 .filter-group.active .filter-items {
    padding-bottom: 8px;
}

/* Los filtros, como chips */
.tema-l1x .sidebar-v2 .filter-item,
.tema-l1x .l1x-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--l1x-borde);
    border-radius: var(--l1x-radio-chip);
    background: var(--l1x-superficie);
    color: var(--l1x-texto);
    font-family: var(--l1x-fuente-cuerpo);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--l1x-dur-rapida) var(--l1x-curva),
        border-color var(--l1x-dur-rapida) var(--l1x-curva);
}

.tema-l1x .sidebar-v2 .filter-item:hover,
.tema-l1x .l1x-chip:hover {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .sidebar-v2 .filter-item.active,
.tema-l1x .l1x-chip.active {
    background: var(--l1x-chip-activo);
    border-color: var(--l1x-chip-activo);
    color: var(--l1x-chip-activo-texto);
}

.tema-l1x .sidebar-v2 .filter-item:focus-visible,
.tema-l1x .sidebar-v2 .nav-item:focus-visible,
.tema-l1x .sidebar-v2 .filter-toggle:focus-visible,
.tema-l1x .l1x-chip:focus-visible {
    outline: 2px solid var(--l1x-oro-texto);
    outline-offset: 2px;
}

.tema-l1x .l1x-chip[hidden] {
    display: none;
}

.tema-l1x .sidebar-v2 .sidebar-footer {
    border-top-color: var(--l1x-borde);
}

.tema-l1x .sidebar-v2 .sidebar-footer-links a,
.tema-l1x .sidebar-v2 .sidebar-footer-copy {
    color: var(--l1x-texto-secundario);
}

.tema-l1x .sidebar-v2 .sidebar-footer-links a:hover {
    color: var(--l1x-oro-texto);
}

/* Progreso del fan y etiqueta de "sin verificar" */
.tema-l1x .sidebar-v2 .sidebar-user-progress {
    background: var(--l1x-fondo);
    border-color: var(--l1x-borde);
}

.tema-l1x .sidebar-v2 .lvl-number {
    color: var(--l1x-oro-texto);
}

.tema-l1x .sidebar-v2 .xp-text {
    color: var(--l1x-texto-secundario) !important;
}

.tema-l1x .sidebar-v2 .progress-bar-mini {
    background: var(--l1x-borde);
}

.tema-l1x .sidebar-v2 .etiqueta-sin-verificar {
    background: #FFF6DB;
    border-color: #D9B64E;
    color: #5C4708;
}

.tema-l1x .sidebar-v2 .etiqueta-sin-verificar .etiqueta-accion {
    color: var(--l1x-oro-texto);
}

/* Barra de chips de la cabecera de los listados: en móvil se desliza en
   horizontal, sin barra visible. */
.tema-l1x .l1x-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .tema-l1x .l1x-chips {
        flex-wrap: nowrap;
        margin-inline: calc(var(--l1x-espacio-lateral) * -1);
        padding-inline: var(--l1x-espacio-lateral);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .tema-l1x .l1x-chips::-webkit-scrollbar {
        display: none;
    }

    .tema-l1x .l1x-chips .l1x-chip {
        flex: none;
        scroll-snap-align: start;
    }
}

/* ========== Búsqueda y filtros móviles (components/mobile-search-filters) ==========
   Solo el aspecto: su lógica sigue siendo una maqueta (fuera de este punto). */

.tema-l1x .mobile-search-bar,
.tema-l1x .mobile-search-panel,
.tema-l1x .mobile-filters-panel,
.tema-l1x .search-panel-header,
.tema-l1x .filters-panel-header,
.tema-l1x .filters-panel-footer {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
    color: var(--l1x-texto);
}

.tema-l1x .search-toggle,
.tema-l1x .filter-toggle-btn,
.tema-l1x .search-input,
.tema-l1x .filter-search {
    background: var(--l1x-superficie);
    border: 1px solid var(--l1x-borde-control);
    color: var(--l1x-texto);
}

.tema-l1x .filter-search input,
.tema-l1x .search-input {
    color: var(--l1x-texto);
}

.tema-l1x .search-input::placeholder,
.tema-l1x .filter-search input::placeholder {
    color: var(--l1x-texto-secundario);
}

.tema-l1x .search-toggle i,
.tema-l1x .filter-toggle-btn i,
.tema-l1x .filter-search i,
.tema-l1x .filters-panel-header .highlight,
.tema-l1x .search-section-title,
.tema-l1x .filter-category-title {
    color: var(--l1x-oro-texto);
}

.tema-l1x .filters-panel-header h3,
.tema-l1x .filter-label,
.tema-l1x .recent-search-item,
.tema-l1x .tag-item {
    color: var(--l1x-texto);
}

.tema-l1x .search-close,
.tema-l1x .filters-close {
    background: var(--l1x-chip-hover);
    color: var(--l1x-texto);
}

.tema-l1x .recent-search-item,
.tema-l1x .tag-item,
.tema-l1x .filter-checkbox {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde);
}

.tema-l1x .filter-count,
.tema-l1x .tag-count,
.tema-l1x .recent-search-item i {
    color: var(--l1x-texto-secundario);
}

.tema-l1x .checkbox-custom {
    background: var(--l1x-superficie);
    border-color: var(--l1x-borde-control);
}

.tema-l1x .filter-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--l1x-oro);
    border-color: var(--l1x-oro);
}

.tema-l1x .btn-apply-filters {
    background: var(--l1x-oro);
    color: var(--l1x-texto);
    box-shadow: none;
}

/* ========== Movimiento reducido ==========
   Al final para que gane a todo lo anterior. Sin escalas, desplazamientos ni
   brillos: el contenido aparece directamente. */

@media (prefers-reduced-motion: reduce) {
    .tema-l1x *,
    .tema-l1x *::before,
    .tema-l1x *::after {
        animation: none !important;
        transition-duration: 0ms !important;
    }

    .tema-l1x .l1x-aparecer {
        opacity: 1 !important;
        transform: none !important;
    }

    .tema-l1x .l1x-tarjeta:hover,
    .tema-l1x .l1x-tarjeta:focus-visible {
        transform: none;
        box-shadow: var(--l1x-sombra);
    }
}