/* ==========================================================
   BUSCADOR DE SOLARES - LOS SIMS 4
   STYLE.CSS
   PARTE 1
========================================================== */


/* ==========================================================
   VARIABLES GLOBALES
========================================================== */

:root {

    /* ========= COLORES ========= */

    --color-principal: #D9D9D9;

    --color-secundario: #B5B5B5;

    --color-advertencia: #FFD54A;

    --color-error: #E53935;

    --color-resaltado: #2ECC71;
    --color-resaltado-rgb: 46, 204, 113;
    --color-resaltado-dia: #2ECC71;
    --color-resaltado-dia-rgb: 46, 204, 113;
    --color-resaltado-noche: #2ECC71;
    --color-resaltado-noche-rgb: 46, 204, 113;

    --color-fondo: #0D3B66;

    --color-tarjeta: rgba(255, 255, 255, .50);

    --superficie-bg: var(--color-tarjeta);

    --superficie-carril: rgba(255, 255, 255, .15);

    --superficie-indicador: rgba(255, 255, 255, .45);

    --superficie-indicador-hover: rgba(255, 255, 255, .65);

    --color-texto: #2B2B2B;

    --color-texto-secundario: #444444;

    /* ========= FOOTER ========= */

    --footer-fondo: #555555;

    --footer-texto: #FFFFFF;

    /* ========= FONDO ========= */

    --imagen-fondo: none;

    /* ========= BORDES ========= */

    --borde: rgba(255, 255, 255, .35);

    /* ========= RADIOS ========= */

    --radio-pequeño: 10px;

    --radio-normal: 14px;

    --radio-grande: 22px;

    --radio-circulo: 50%;

    /* ========= SOMBRAS ========= */

    --sombra-suave:
        0 8px 20px rgba(0, 0, 0, .18);

    --sombra-normal:
        0 12px 35px rgba(0, 0, 0, .25);

    --sombra-fuerte:
        0 20px 45px rgba(0, 0, 0, .35);

    /* ========= GLASS ========= */

    --blur: 18px;

    /* ========= TRANSICIONES ========= */

    --transicion: .25s;

    /* ========= TÍTULO ========= */

    --color-titulo: #000000;

    /* ========= MÁRGENES EDITORIALES (LOT-LAB CMS) ========= */
    --margen-superior: 20px;
    --margen-inferior: 35px;
    --margen-izquierdo: 25px;
    --margen-derecho: 25px;

}


/* ==========================================================
   MODO DÍA / MODO NOCHE
========================================================== */

body.modo-dia {

    --imagen-fondo: url('../img/fondos/Fondo_dia.webp');

    --color-fondo: #F3EEE3;

    --color-titulo: #000000;

    --superficie-bg: var(--color-tarjeta);

    --borde: rgba(0, 0, 0, .22);

}

.submenuOpcion {
    border: 1px solid var(--borde);
}

/* Suprimir transiciones durante activaciones programáticas (botones principales) */
body.sin-transicion-nav,
body.sin-transicion-nav *,
body.sin-transicion-nav *::before,
body.sin-transicion-nav *::after {
    transition: none !important;
    animation-duration: 0.001s !important;
}

/* ── Submenús / Popovers flotantes en Opciones del Reto ── */
.submenuOpcion.popoverFlotante {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(320px, 92vw);
    background: var(--color-tarjeta, rgba(25, 25, 35, 0.96)) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1.5px solid var(--color-resaltado, #2ecc71);
    border-radius: var(--radio-normal, 12px);
    padding: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
    animation: animPopoverRetos 0.22s ease-out;
}

body.modo-dia .submenuOpcion.popoverFlotante {
    background: rgba(250, 246, 238, 0.98) !important;
    border-color: var(--color-resaltado, #27ae60);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    color: #2b2b2b;
}

@keyframes animPopoverRetos {
    from {
        opacity: 0;
        transform: translate(-50%, -8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.btnAceptarPopover {
    background: var(--color-resaltado, #2ecc71);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 0.88rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--sombra-suave);
    transition: transform 0.15s, background 0.15s;
}

.btnAceptarPopover:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-resaltado, #27ae60) 85%, black);
}

.btnDesmarcarPopover {
    background: rgba(229, 57, 53, 0.18);
    color: #e53935;
    border: 1px solid rgba(229, 57, 53, 0.35);
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 0.88rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.btnDesmarcarPopover:hover {
    transform: translateY(-1px);
    background: rgba(229, 57, 53, 0.28);
}

/* Opciones de lista dentro del submenú Tipo de Solar */
.opcionSubmenuTipoSolar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radio-pequeño, 8px);
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid var(--borde);
    color: var(--color-texto);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

body.modo-dia .opcionSubmenuTipoSolar {
    background: rgba(0, 0, 0, 0.05);
}

.opcionSubmenuTipoSolar:hover:not(.deshabilitado) {
    transform: translateY(-1px);
    border-color: var(--color-secundario);
}

.opcionSubmenuTipoSolar.seleccionada {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.22) !important;
    border-color: var(--color-resaltado, #2ecc71) !important;
    color: inherit !important;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25);
}

body.modo-dia .opcionSubmenuTipoSolar.seleccionada {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25) !important;
    border-color: var(--color-resaltado, #27ae60) !important;
    color: var(--color-resaltado, #1e8449) !important;
}

.opcionSubmenuTipoSolar.deshabilitado {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

body.modo-dia .btnDesmarcarPopover {
    background: rgba(229, 57, 53, 0.12);
    color: #c62828;
    border-color: rgba(229, 57, 53, 0.3);
}


body.modo-noche {

    --imagen-fondo: url('../img/fondos/Fondo_noche.webp');

    --color-fondo: #242868;

    --color-titulo: #EDEDED;

    --color-texto: #EDEDED;

    --color-principal: #3A3A3A;

    --color-secundario: #4A4A4A;

    --color-tarjeta: rgba(25, 25, 25, .75);

    --superficie-bg: var(--color-tarjeta);

    --borde: rgba(255, 255, 255, .12);

}


/* ==========================================================
   FUENTES
========================================================== */

@font-face {
    font-family: 'The Sims Sans SC Bold';
    src: url('../font/The Sims Sans SC Bold.ttf') format('truetype'),
         url('/web/font/The Sims Sans SC Bold.ttf') format('truetype'),
         url('/font/The Sims Sans SC Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'The Sims Sans SC Bold';
    src: url('../font/The Sims Sans SC Bold.ttf') format('truetype'),
         url('/web/font/The Sims Sans SC Bold.ttf') format('truetype'),
         url('/font/The Sims Sans SC Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


/* ==========================================================
   RESET
========================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    min-height: 100%;

}


body {

    position: relative;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    font-family: "The Sims Sans SC Bold", Arial, sans-serif;

    color: var(--color-texto);

    background-color: var(--color-fondo-tema, var(--color-fondo));

    background-image: var(--imagen-fondo);

    background-repeat: repeat;

    background-position: top center;

    background-size: 100% auto;

    background-attachment: scroll;

}


main {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 20px;

}

#app {

    flex: 1;

}


/* ==========================================================
   TITULOS
========================================================== */

/* ==========================================================
   CABECERA PRINCIPAL
========================================================== */

header {
    width: 100%;
    margin-top: 0;
    margin-bottom: 35px;
    padding: 25px 20px;
    background: var(--superficie-bg, var(--color-tarjeta));
    backdrop-filter: blur(var(--barra-header-blur, var(--blur)));
    -webkit-backdrop-filter: blur(var(--barra-header-blur, var(--blur)));
    border-bottom: 1px solid var(--borde);
    color: var(--color-texto);
    text-align: center;
    box-shadow: var(--sombra-normal);

    /* Cabecera general de LOT-LAB */
    position: relative;
    z-index: 50;
    transition: padding 0.3s ease, margin 0.3s ease;
}

header h1 {
    color: var(--color-titulo);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .20);
    transition: font-size 0.3s ease, margin 0.3s ease;
}

header p {
    color: var(--color-titulo);
    font-size: 1.05rem;
    opacity: .90;
    transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.3s ease;
    max-height: 80px;
    overflow: hidden;
}

/* ==========================================================
   NUEVO SISTEMA DE NAVEGACIÓN (CLÁSICA Y EXPERIMENTAL)
========================================================== */

.menu-principal {
    max-width: 1260px;
    margin: 0 auto 25px auto;
    position: sticky;
    top: 10px;
    z-index: 900;
    padding: 14px 20px;
    border-radius: var(--radio-grande);
    background: var(--superficie-bg, var(--color-tarjeta));
    backdrop-filter: blur(var(--barra-nav-blur, var(--blur)));
    -webkit-backdrop-filter: blur(var(--barra-nav-blur, var(--blur)));
    border: 1px solid var(--borde);
    box-shadow: var(--sombra-normal);
    transition: padding .25s ease, border-radius .25s ease, box-shadow .25s ease, max-width .25s ease;
}

/* ─── NAVEGACIÓN CLÁSICA ────────────────────────────────── */
.barra-navegacion-clasica {
    width: 100%;
    position: relative;
}

.categorias-nav-clasica {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(6px, 0.8vw, 10px);
    justify-content: center;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px 14px 8px;
    margin: -2px 0 -8px 0;
}

.categorias-nav-clasica::-webkit-scrollbar {
    display: none;
}

.btn-categoria-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: var(--radio-normal);
    background: rgba(255, 255, 255, 0.65);
    color: var(--color-texto);
    border: 1px solid var(--borde);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--sombra-suave);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-family: inherit;
}

body.modo-noche .btn-categoria-nav {
    background: rgba(58, 58, 58, 0.70);
}

.btn-categoria-nav:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25);
    border-color: var(--color-resaltado);
}

body.modo-noche .btn-categoria-nav:hover {
    background: rgba(75, 75, 75, 0.85);
}

.btn-categoria-nav.activa {
    background: var(--color-resaltado) !important;
    color: #ffffff !important;
    border-color: var(--color-resaltado) !important;
    box-shadow: 0 4px 16px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.5) !important;
    transform: translateY(-2px);
}

.icono-cat-nav {
    font-size: 1.15rem;
    line-height: 1;
}

/* Dropdown aero/glass inmediatamente asociado */
.dropdown-nav-clasica {
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.52);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-normal);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 16px;
    animation: animEntradaDropdown 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.modo-noche .dropdown-nav-clasica {
    background: rgba(20, 20, 28, 0.65);
    box-shadow: var(--sombra-fuerte);
}

@keyframes animEntradaDropdown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-header-categoria {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-resaltado);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--borde);
}

.dropdown-herramientas-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.btn-dropdown-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radio-pequeno);
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.10);
    color: var(--color-texto);
    border: 1.5px solid rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.28);
    box-shadow: 0 2px 8px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.08);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    font-family: inherit;
}

body.modo-noche .btn-dropdown-tool {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.12);
    border-color: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.38);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.btn-dropdown-tool:hover:not(.deshabilitado) {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.22);
    border-color: var(--color-resaltado);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25);
}

.btn-dropdown-tool.deshabilitado {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.dropdown-tool-icono {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.dropdown-tool-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-tool-nombre {
    font-size: 0.92rem;
    font-weight: 700;
}

.dropdown-tool-desc {
    font-size: 0.76rem;
    opacity: 0.75;
    line-height: 1.25;
}

/* ─── NAVEGACIÓN EXPERIMENTAL (LAUNCHER) ─────────────────── */
/* ─── NAVEGACIÓN EXPERIMENTAL (LAUNCHER HERO) ─────────────────── */
body.modo-nav-experimental .menu-principal {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-width: 1280px;
    padding: 0;
    margin: 0 auto;
}

.launcher-experimental {
    width: 100%;
    min-height: calc(100vh - 270px);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 14px 40px 14px;
    box-sizing: border-box;
}

.exp-nivel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Nivel 1: Cuadrícula principal 2 x 4 */
.exp-titulo-principal {
    text-align: center;
    font-size: clamp(2.1rem, 3.8vw, 3rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 36px 0;
    color: var(--color-titulo);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.exp-circulos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.exp-categoria-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 160px;
    padding: 28px 16px;
    border-radius: var(--radio-grande, 16px);
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1.5px solid var(--borde);
    box-shadow: var(--sombra-normal);
    color: var(--color-texto);
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    box-sizing: border-box;
}

.exp-categoria-card:hover {
    background: var(--color-secundario);
    border-color: var(--color-resaltado);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 0 18px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.22);
}

.exp-cat-card-icono {
    font-size: 3.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.exp-cat-card-nombre {
    font-size: 1.18rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
    .exp-categoria-card:hover {
        transform: none !important;
    }
}

/* Nivel 2: Vista de Categoría más grande y centrada */
.exp-nivel2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto 36px auto;
    padding: 0 12px;
    box-sizing: border-box;
    gap: 20px;
}

.exp-btn-volver {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--radio-normal);
    background: var(--color-principal);
    color: var(--color-texto);
    border: 1.5px solid var(--borde);
    font-weight: 700;
    font-size: 0.96rem;
    cursor: pointer;
    box-shadow: var(--sombra-suave);
    transition: all var(--transicion);
    font-family: inherit;
}

.exp-btn-volver:hover {
    background: var(--color-secundario);
    border-color: var(--color-resaltado);
    transform: translateY(-2px);
}

.exp-categoria-titulo {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    color: var(--color-titulo);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.exp-herramientas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 350px));
    justify-content: center;
    gap: 24px;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.exp-herramienta-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    min-height: 100px;
    border-radius: var(--radio-grande, 14px);
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    color: var(--color-texto);
    border: 1.5px solid var(--borde);
    cursor: pointer;
    transition: all 0.22s ease;
    text-align: left;
    box-shadow: var(--sombra-suave);
    font-family: inherit;
    box-sizing: border-box;
}

.exp-herramienta-card:hover:not(.deshabilitada) {
    border-color: var(--color-resaltado);
    background: var(--color-secundario);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25);
}

.exp-herramienta-card.deshabilitada {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.exp-herramienta-icono {
    font-size: 2.6rem;
    flex-shrink: 0;
}

.exp-herramienta-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exp-herramienta-nombre {
    font-size: 1.12rem;
    font-weight: 800;
}

.exp-herramienta-desc {
    font-size: 0.85rem;
    opacity: 0.8;
    line-height: 1.35;
}

/* En modo normal (no experimental), el botón cerrar de Acerca de se mantiene oculto */
body:not(.modo-nav-experimental) #ventanaAcercaDe .cerrar {
    display: none !important;
}

/* ─── POPOVERS DEL FOOTER (SONIDO Y SELECTOR DE MODO) ───── */
.controlSonidoWrapper,
.selectorModoNavWrapper {
    position: relative;
    display: inline-flex;
}

.botonModoNavBtn {
    /* Mantiene las dimensiones circulares de .toggleModo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.botonModoNavBtn .icono-modo-nav {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.botonModoNavBtn:hover .icono-modo-nav {
    transform: none;
}

.popoverSonido,
.popoverModoNav,
.popoverTemas {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    width: max-content;
    min-width: 260px;
    border-radius: var(--radio-normal);
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1.5px solid var(--borde);
    box-shadow: var(--sombra-fuerte);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 950;
}

.popoverSonido.abierto,
.popoverModoNav.abierto,
.popoverTemas.abierto {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {

    .controlSonidoWrapper,
    .selectorModoNavWrapper {
        position: static;
    }

    .popoverSonido,
    .popoverModoNav {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 84px;
        transform: translateX(-50%) translateY(12px);
        width: min(calc(100vw - 32px), 340px);
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
        z-index: 10002;
        margin: 0;
    }

    .popoverSonido.abierto,
    .popoverModoNav.abierto {
        transform: translateX(-50%) translateY(0);
    }
}

.popoverModoNavHeader,
.popoverSonidoHeader {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--borde);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popoverModoNav {
    min-width: 200px;
}

.opcionModoNav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radio-pequeño);
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-texto);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

body.modo-dia .opcionModoNav {
    background: rgba(0, 0, 0, 0.04);
}

.opcionModoNav:hover:not(.activa) {
    background: rgba(var(--color-resaltado-rgb), 0.12);
    color: var(--color-resaltado);
    box-shadow: inset 0 0 0 1.5px rgba(var(--color-resaltado-rgb), 0.3);
}

.opcionModoNav.activa {
    color: #ffffff !important;
    font-weight: 700;
    background: var(--color-resaltado) !important;
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb), 0.45);
    border-color: rgba(255, 255, 255, 0.3);
}

.opcionModoIcono {
    font-size: 1.15rem;
    line-height: 1;
}

.opcionModoTexto {
    flex: 1;
}

/* Filas e interruptores de Sonido */
.popoverSonidoFila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.popoverSonidoInfo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.popoverSonidoIcono {
    font-size: 1.25rem;
}

.popoverSonidoTexto {
    display: flex;
    flex-direction: column;
}

.popoverSonidoTitulo {
    font-size: 0.88rem;
    font-weight: 700;
}

.popoverSonidoDesc {
    font-size: 0.72rem;
    opacity: 0.75;
}

.popoverSonidoSeparador {
    height: 1px;
    background: var(--borde);
    margin: 2px 0;
}

/* Estado visual atenuado con Maestro OFF: 100% interactivo (sin pointer-events: none) */
.popoverSonido.maestro-apagado .filaSecundaria {
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

/* Switch toggle styling */
.switchSonido {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.switchSonido input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sliderSwitch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid var(--borde);
    border-radius: 24px;
    transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.modo-dia .sliderSwitch {
    background-color: rgba(0, 0, 0, 0.18);
}

.sliderSwitch:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.switchSonido input:checked+.sliderSwitch {
    background-color: var(--color-resaltado);
    border-color: var(--color-resaltado);
}

.switchSonido input:checked+.sliderSwitch:before {
    transform: translateX(20px);
}

.cerrarPequeno {
    background: transparent;
    border: none;
    color: var(--color-texto);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.cerrarPequeno:hover {
    opacity: 1;
}

/* Adaptación responsive para móvil */
@media (max-width: 768px) {
    .menu-principal {
        padding: 14px 12px;
        margin-bottom: 18px;
    }

    .categorias-nav-clasica {
        justify-content: flex-start;
        gap: 8px;
    }

    .btn-categoria-nav {
        padding: 9px 14px;
        font-size: 0.88rem;
    }

    .dropdown-herramientas-lista {
        grid-template-columns: 1fr;
    }

    .exp-circulos-grid {
        gap: 16px 12px;
    }

    .exp-circulo {
        width: 82px;
    }

    .exp-circulo-burbuja {
        width: 68px;
        height: 68px;
    }

    .exp-herramientas-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   MENÚ PRINCIPAL FLOTANTE (SE ACTIVA AL TAPARLO EL SCROLL)
========================================================== */

#sentinelMenuPrincipal {
    width: 100%;
    height: 1px;
}

@keyframes animEntradaMenuFlotante {
    from {
        opacity: 0.88;
        transform: translate(-50%, -6px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.menu-principal.menuFlotante {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 850;
    width: calc(100% - 30px);
    max-width: 1150px;
    margin: 0;
    padding: clamp(8px, 2vw, 12px) clamp(38px, 10vw, 50px);
    border-radius: var(--radio-normal);
    box-shadow: var(--sombra-fuerte);
    animation: animEntradaMenuFlotante 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    transition: top 0.2s ease, padding .25s ease, border-radius .25s ease, box-shadow .25s ease, max-width .25s ease;
}

.menu-principal.menuFlotante .menu-principal-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: clamp(6px, 2vw, 10px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.menu-principal.menuFlotante .menu-principal-track::-webkit-scrollbar {
    display: none;
}

.menu-principal.menuFlotante button {
    white-space: nowrap;
    font-size: clamp(.78rem, 2.2vw, .95rem);
    padding: clamp(7px, 1.8vw, 10px) clamp(10px, 3vw, 16px);
}

/* Flechas de navegación (solo visibles si hay más botones de los que caben) */
.flechaMenu {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(26px, 6vw, 36px);
    height: clamp(26px, 6vw, 36px);
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-principal);
    color: var(--color-texto);
    font-size: clamp(1rem, 3vw, 1.4rem);
    cursor: pointer;
    z-index: 5;
    box-shadow: var(--sombra-suave);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

@keyframes flechaMenuZoom {
    0% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.22);
    }

    100% {
        transform: translateY(-50%) scale(1);
    }
}

.flechaMenu:hover {
    background: var(--color-resaltado);
    color: white;
    transform: translateY(-50%);
    box-shadow:
        0 0 8px rgba(46, 204, 113, .60),
        0 0 18px rgba(46, 204, 113, .45),
        0 0 30px rgba(46, 204, 113, .25);
    animation: flechaMenuZoom .4s ease;
}

.flechaMenuIzq {
    left: 8px;
}

.flechaMenuDer {
    right: 8px;
}



/* ==========================================================
   VENTANAS
========================================================== */

.ventana {

    display: none;

    position: relative;

    margin: 30px auto 70px auto;

    padding: 25px 25px 50px 25px;

    width: min(92%, 1150px);

    border-radius: var(--radio-grande);

    background: var(--superficie-bg, var(--color-tarjeta));

    backdrop-filter: blur(var(--ventana-blur, var(--blur)));

    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur)));

    border: 1px solid var(--borde);

    box-shadow: var(--sombra-normal);

}

.ventana h2,
.ventana h3 {

    text-align: center;

    margin-bottom: 20px;

}


/* ==========================================================
   MÁRGENES CONFIGURABLES Y ADAPTABLES DEL CONTENIDO EDITORIAL
   ========================================================== */
#acercaDeContenido,
.cuerpoVentana.contenidoPaginaEditable,
.contenedor-margenes-editorial {
    box-sizing: border-box;
    /* Neutralizar el padding base de .ventana (25px lateral, 50px inferior) y el margin de cabecera */
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: -50px;
    margin-top: -20px;
    padding-top: var(--margen-superior, 20px);
    padding-bottom: var(--margen-inferior, 35px);
    padding-left: var(--margen-izquierdo, 25px);
    padding-right: var(--margen-derecho, 25px);
    width: auto;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    #acercaDeContenido,
    .cuerpoVentana.contenidoPaginaEditable,
    .contenedor-margenes-editorial {
        margin-left: -18px;
        margin-right: -18px;
        margin-bottom: -40px;
        margin-top: -18px;
        padding-top: min(var(--margen-superior, 20px), 24px);
        padding-bottom: max(var(--margen-inferior, 35px), 28px);
        padding-left: clamp(12px, var(--margen-izquierdo, 25px), 4vw);
        padding-right: clamp(12px, var(--margen-derecho, 25px), 4vw);
    }
}

@media (max-width: 480px) {
    #acercaDeContenido,
    .cuerpoVentana.contenidoPaginaEditable,
    .contenedor-margenes-editorial {
        margin-left: -14px;
        margin-right: -14px;
        margin-bottom: -36px;
        margin-top: -14px;
        padding-top: min(var(--margen-superior, 20px), 18px);
        padding-bottom: max(var(--margen-inferior, 35px), 24px);
        padding-left: clamp(10px, var(--margen-izquierdo, 25px), 3.5vw);
        padding-right: clamp(10px, var(--margen-derecho, 25px), 3.5vw);
    }
}

.ventanaPequena {
    max-width: 600px;
}

/* Estas ventanas se muestran con display: flex desde JS, así que podemos usar flex layout directamente */
#ventanaTemporizador,
#ventanaTiempoAgotado {
    flex-direction: column;
    align-items: center;
}

#ventanaTemporizador>*,
#ventanaTiempoAgotado>* {
    width: 100%;
    box-sizing: border-box;
}

/* La cabecera en el temporizador debe cuadrar con el marco completo de la ventana */
#ventanaTemporizador>.cabeceraVentana,
#ventanaTiempoAgotado>.cabeceraVentana {
    width: calc(100% + 50px);
    align-self: stretch;
    margin: -25px -25px 20px -25px;
}

@media (max-width: 700px) {

    #ventanaTemporizador>.cabeceraVentana,
    #ventanaTiempoAgotado>.cabeceraVentana {
        width: calc(100% + 36px);
        margin: -18px -18px 18px -18px;
    }
}

#ventanaBuscador {
    max-width: 980px;
    padding-bottom: 35px;
}

#ventanaRetosOpciones {
    max-width: 920px;
    padding-bottom: 35px;
}

#ventanaRetoResultado {
    max-width: 750px;
    padding-bottom: 35px;
}

#ventanaRuletaDesastres {
    max-width: 860px;
    padding-bottom: 35px;
}

#ventanaHabilidadesGenerador,
#ventanaPacksGenerador,
#ventanaMundosGenerador {
    max-width: 680px;
    padding-bottom: 35px;
}

.popoverFlotante input[type="range"] {
    display: block;
    margin: 0 auto;
}

/* Modo paralelo para Retos / Ruleta Desastres + Temporizador (Navegador normal) */
#composicionRetoTemporizador {
    display: contents;
}

body:not(.modo-obs) #app.modo-paralelo #composicionRetoTemporizador {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

body:not(.modo-obs) #app.modo-paralelo #ventanaRetoResultado,
body:not(.modo-obs) #app.modo-paralelo #ventanaRuletaDesastres,
body:not(.modo-obs) #app.modo-paralelo #ventanaTemporizador {
    margin: 30px 0 70px 0;
    width: 100%;
    isolation: isolate;
    contain: layout style;
}

body:not(.modo-obs) #app.modo-paralelo #ventanaRetoResultado,
body:not(.modo-obs) #app.modo-paralelo #ventanaRuletaDesastres {
    order: 1 !important;
    max-width: 680px;
    flex: 1;
}

body:not(.modo-obs) #app.modo-paralelo #ventanaTemporizador {
    order: 2 !important;
    max-width: 480px;
    flex: 1;
}

@media (max-width: 850px) {
    body:not(.modo-obs) #app.modo-paralelo #composicionRetoTemporizador {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    body:not(.modo-obs) #app.modo-paralelo #ventanaRetoResultado,
    body:not(.modo-obs) #app.modo-paralelo #ventanaRuletaDesastres,
    body:not(.modo-obs) #app.modo-paralelo #ventanaTemporizador {
        margin: 15px auto;
        max-width: 96%;
    }
}

button.deshabilitado,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}


.cabeceraVentana {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 12px;

    position: relative;

    /* Extend full-width by compensating ventana padding (25px) */
    margin: -25px -25px 20px -25px;

    padding: 14px 20px;

    border-bottom: 1px solid var(--borde);

    background: rgba(0, 0, 0, 0.15);

    border-radius: var(--radio-grande) var(--radio-grande) 0 0;

    flex-shrink: 0;

    min-height: 42px;

    box-sizing: border-box;

}

body.modo-dia .cabeceraVentana {
    background: rgba(0, 0, 0, 0.04);
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

/* Proteger cabeceraAgradecimientos para que permanezca idéntica */
.cabeceraAgradecimientos .cabeceraVentana {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: auto !important;
}

/* Título centrado dentro de cabeceraVentana (mismo concepto visual que Agradecimientos) */
.cabeceraVentana>h2,
.cabeceraVentana>h3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 1.35rem;
    font-weight: bold;
    color: var(--color-titulo, var(--color-texto));
    text-align: center;
    white-space: nowrap;
    max-width: calc(100% - 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    user-select: none;
    line-height: 1.2;
}

/* Responsive: móvil y tablet */
@media (max-width: 768px) {

    .cabeceraVentana>h2,
    .cabeceraVentana>h3 {
        font-size: 1.15rem;
        max-width: calc(100% - 180px);
    }
}

/* Fix: título de ruletaColorTitulo dentro de cabeceraVentana usa la variable de color estándar */
.cabeceraVentana>h2.ruletaColorTitulo {
    color: var(--color-titulo, var(--color-texto));
    font-size: 1.35rem;
    font-weight: bold;
    display: flex;
    gap: 8px;
}

/* Adaptación fluida del título y cabecera de Acerca de (Fase 2.8E) */
#ventanaAcercaDe .cabeceraVentana {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
    height: auto;
    padding: 16px 48px;
    position: relative;
}

#ventanaAcercaDe .cabeceraVentana > h2 {
    position: static;
    transform: none;
    max-width: 100%;
    width: auto;
    height: auto;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.3;
    pointer-events: auto;
    user-select: text;
    text-align: center;
}

#ventanaAcercaDe .cabeceraVentana .cerrar {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 700px) {
    .cabeceraVentana {
        margin: -18px -18px 18px -18px;
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .cabeceraVentana {
        /* Sincronizado con ventana padding: 14px en ≤480px */
        margin: -14px -14px 16px -14px;
        padding: 10px 12px;
    }
}

@media (max-width: 500px) {
    .cabeceraVentana {
        gap: 8px;
        padding: 10px 14px;
    }

    .cabeceraVentana>h2,
    .cabeceraVentana>h3 {
        font-size: 0.95rem;
        left: 14px;
        transform: translateY(-50%);
        text-align: left;
        max-width: calc(100% - 150px);
    }
}

.cabeceraVentana button {

    width: 42px;

    height: 42px;

    min-width: 42px;

    min-height: 42px;

    padding: 0 !important;

    border-radius: 50% !important;

    aspect-ratio: 1 / 1;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

}

.compartir,
.captura,
.compartirSeccion {

    width: 42px !important;

    height: 42px !important;

    min-width: 42px !important;

    min-height: 42px !important;

    padding: 0 !important;

    display: inline-flex !important;

    justify-content: center !important;

    align-items: center !important;

    border: none !important;

    border-radius: 50% !important;

    aspect-ratio: 1 / 1 !important;

    background: transparent;

    color: var(--color-texto);

    cursor: pointer;

    transition: all .25s;

    flex-shrink: 0;

}

.compartir svg,
.captura svg,
.compartirSeccion svg {
    width: 22px !important;
    height: 22px !important;
    fill: currentColor;
    display: block;
}

.compartir:hover {

    background: rgba(46, 204, 113, 0.85) !important;

    color: white !important;

    box-shadow:

        0 0 8px rgba(46, 204, 113, .65),

        0 0 18px rgba(46, 204, 113, .45),

        0 0 30px rgba(46, 204, 113, .25) !important;

    transform: scale(1.10);

}

.captura:hover,
.compartirSeccion:hover {

    background: rgba(33, 150, 243, 0.85) !important;

    color: white !important;

    box-shadow:

        0 0 8px rgba(33, 150, 243, .65),

        0 0 18px rgba(33, 150, 243, .45),

        0 0 30px rgba(33, 150, 243, .25) !important;

    transform: scale(1.10);

}



/* Cabeceras de sección con botón de compartir inline */
.estatSeccionCabecera {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 8px;
}

.estatSeccionCabecera h2 {
    margin: 0;
}

.estatSeccionCabecera .compartirSeccion {
    position: absolute;
    right: 0;
}

.estatToggleVistaWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 16px 0;
}

.estatToggleVistaWrap .estatToggleVista {
    margin-bottom: 0;
}

.estatToggleVistaWrap .compartirSeccion {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


/* ==========================================================
   BOTÓN CERRAR
========================================================== */

.cerrar {


    left: auto;

    width: 42px !important;

    height: 42px !important;

    min-width: 42px !important;

    min-height: 42px !important;

    padding: 0 !important;

    display: inline-flex !important;

    justify-content: center !important;

    align-items: center !important;

    border: none !important;

    border-radius: 50% !important;

    aspect-ratio: 1 / 1 !important;

    background: transparent;

    color: var(--color-texto);

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    transition: all .25s;

    flex-shrink: 0;

    user-select: none;

    z-index: 100;

}

.cerrar:hover {

    background: rgba(229, 57, 53, 0.85) !important;

    color: white !important;

    box-shadow:

        0 0 8px rgba(229, 57, 53, .65),

        0 0 18px rgba(229, 57, 53, .45),

        0 0 30px rgba(229, 57, 53, .25) !important;

    transform: scale(1.10);

}

/* ==========================================================
   BOTONES GENERALES
========================================================== */

button {

    font-family: inherit;

}


button:not(.cerrar) {

    padding: 12px 18px;

    border: none;

    border-radius: var(--radio-normal);

    cursor: pointer;

    transition: var(--transicion);

}


button:hover {

    transform: translateY(-2px);

}


/* ==========================================================
   BOTONES PRINCIPALES
========================================================== */

#botonBuscador,
#botonAleatorio,
#botonRetos,
#botonListado,
#buscarSolares,
#aceptarPacksRetos,
#generarRetoBtn,
#confirmarFiltro,
#confirmarBorrar,
#cerrarAvisoFiltros,
#cerrarAvisoDificultadReto,
#cerrarAvisoDesastres,
#volverOpcionesBtn,
#toggleTemporizadorRetoBtn,
#botonTemporizador,
#iniciarTemporizador,
#cerrarTiempoAgotado,
#botonRuletaDesastres,
#botonTirarDados,
#botonHabilidades,
#botonPacks,
#botonMundos,
#botonEstadisticas,
#botonModsSimfile,
#botonAcercaDe {

    background: var(--color-principal);

    color: var(--color-texto);

    box-shadow: var(--sombra-suave);

}

.menu-principal button.deshabilitado,
button.deshabilitado {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

.menu-principal button.deshabilitado:hover,
button.deshabilitado:hover {
    transform: none !important;
    background: var(--color-principal) !important;
    box-shadow: var(--sombra-suave) !important;
}

#retoAleatorioBtn,
#eliminarFiltro,
#cancelarBorrar {
    background: var(--color-secundario);
    color: var(--color-texto);
    box-shadow: var(--sombra-suave);
}


#botonBuscador:hover,
#botonAleatorio:hover,
#botonRetos:hover,
#botonListado:hover,
#buscarSolares:hover,
#volverOpcionesBtn:hover,
#toggleTemporizadorRetoBtn:hover,
#botonTemporizador:hover,
#iniciarTemporizador:hover,
#botonRuletaDesastres:hover,
#botonTirarDados:hover,
#botonHabilidades:hover,
#botonPacks:hover,
#botonMundos:hover,
#botonEstadisticas:hover,
#botonAcercaDe:hover {

    background: var(--color-secundario);

}


/* ==========================================================
   BOTONES VERDES
========================================================== */

.botonSolar {

    width: 90%;

    margin: 8px auto;

    display: block;

    background: var(--color-resaltado);

    color: white;

    font-size: 16px;

    border-radius: var(--radio-normal);

    box-shadow: var(--sombra-suave);

}


.botonSolar:hover {

    filter: brightness(1.08);

}


/* ==========================================================
   BOTONES FILTROS
========================================================== */

.botonFiltro {

    position: relative;

    margin: 6px;

    padding: 12px 18px;

    border-radius: var(--radio-normal);

    background: var(--color-principal);

    color: var(--color-texto);

    border: none;

    box-shadow: var(--sombra-suave);

}


.botonFiltro:hover {

    background: var(--color-secundario);

}


.botonFiltro.activo {

    background: var(--color-resaltado);

    color: white;

}

/* ==========================================================
   FILTRADOR
========================================================== */

#botonesFiltros {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;

    margin-bottom: 25px;

}


#panelFiltro {

    margin-top: 25px;

}


/* ==========================================================
   INPUTS
========================================================== */

input[type="number"] {
    background: transparent;
    color: var(--color-texto);
    font-family: inherit;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    /* Firefox */
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"]:focus {
    border-color: var(--color-principal) !important;
}

/* ==========================================================
   DESLIZADORES (RANGE SLIDERS) ADAPTATIVOS AL TEMA
   ========================================================== */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}

input[type="range"]:focus {
    outline: none;
}

/* Track en WebKit con relleno progresivo del color de tema */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: linear-gradient(
        to right,
        var(--color-resaltado, #2ecc71) 0%,
        var(--color-resaltado, #2ecc71) var(--progreso-slider, 0%),
        rgba(255, 255, 255, 0.22) var(--progreso-slider, 0%),
        rgba(255, 255, 255, 0.22) 100%
    );
    border-radius: 6px;
    border: none;
    transition: none;
}

body.modo-dia input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--color-resaltado, #2ecc71) 0%,
        var(--color-resaltado, #2ecc71) var(--progreso-slider, 0%),
        rgba(0, 0, 0, 0.16) var(--progreso-slider, 0%),
        rgba(0, 0, 0, 0.16) 100%
    );
}

/* Thumb en WebKit (centrado vertical matemático: (6px track - 18px thumb) / 2 = -6px) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-resaltado, #2ecc71);
    border: 2px solid #ffffff;
    margin-top: -6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 8px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.75);
}

input[type="range"]:focus::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.4), 0 0 14px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.8);
}

/* Track en Firefox */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    border: none;
    transition: background 0.2s ease;
}

body.modo-dia input[type="range"]::-moz-range-track {
    background: rgba(0, 0, 0, 0.16);
}

/* Relleno progresivo en Firefox */
input[type="range"]::-moz-range-progress {
    height: 6px;
    background: var(--color-resaltado, #2ecc71);
    border-radius: 6px 0 0 6px;
}

/* Thumb en Firefox (Firefox centra el thumb de forma nativa sobre el track) */
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-resaltado, #2ecc71);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 8px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

input[type="range"]:hover::-moz-range-thumb {
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.75);
}

input[type="range"]:focus::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.4), 0 0 14px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.8);
}

/* ==========================================================
   CONTENIDO DEL PANEL
========================================================== */

.contenidoFiltro {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


/* ==========================================================
   LISTA OPCIONES
========================================================== */

.listaOpciones {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    justify-content: center;

}


/* ==========================================================
   OPCIONES
========================================================== */

.opcionFiltro {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 65px;

    padding: 12px;

    border-radius: var(--radio-normal);

    background: var(--color-principal);

    color: var(--color-texto);

    cursor: pointer;

    transition: var(--transicion);

    text-align: center;

    box-shadow: var(--sombra-suave);

}


.opcionFiltro:hover {

    background: var(--color-secundario);

    transform: translateY(-3px);

}


.opcionFiltro.seleccionada {

    background: var(--color-resaltado);

    color: white;

}


.opcionFiltro.deshabilitado {

    opacity: 0.5;

    cursor: not-allowed;

    background: rgba(255, 255, 255, 0.05);

    pointer-events: none;

}


/* ==========================================================
   ICONOS FUTUROS
========================================================== */

.opcionFiltro .icono {

    width: 38px;

    height: 38px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

}


.opcionFiltro span {

    flex: 1;

}


/* ==========================================================
   BOTONES DEL PANEL
========================================================== */

.botonesPanelFiltro {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

}


.botonesPanelFiltro button {

    min-width: 180px;

}


/* ==========================================================
   BOTÓN BORRAR FILTROS
========================================================== */

#zonaBorrarFiltros {

    margin: 0;

    display: flex;

    align-items: center;

}

#borrarFiltros {

    background: var(--color-advertencia);

    color: #2B2B2B;

    justify-content: center;

    align-items: center;

}

#borrarFiltros:hover {

    filter: brightness(.95);

}


/* ==========================================================
   TOOLTIPS
========================================================== */

.tooltipFiltro,
#tooltipFiltro,
#tooltipSolar {
    position: fixed;
    display: none;
    max-width: 320px;
    padding: 14px 16px;
    border-radius: var(--radio-normal);
    background: rgba(20, 24, 33, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    text-align: left;
    line-height: 1.5;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 99999;
}

body.modo-dia .tooltipFiltro,
body.modo-dia #tooltipFiltro,
body.modo-dia #tooltipSolar {
    background: rgba(255, 255, 255, 0.96);
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.tooltipFiltro hr,
#tooltipFiltro hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 8px 0;
}

body.modo-dia .tooltipFiltro hr,
body.modo-dia #tooltipFiltro hr {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.tooltipFiltro h4 {
    margin-bottom: 8px;
    font-size: 15px;
}

.tooltipFiltro p {
    margin: 6px 0;
}

#tooltipFiltro strong,
#tooltipSolar strong {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}


/* ==========================================================
   RESULTADOS
========================================================== */

#listaResultados {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


#listaCompletaSolares {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* ==========================================================
   BOTONES SCROLL (SUBIR / BAJAR)
========================================================== */

#subirResultados,
#bajarResultados {

    position: fixed;

    right: 25px;

    width: 58px;

    height: 58px;

    display: none;

    justify-content: center;

    align-items: center;

    border: none;

    border-radius: 50%;

    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), .55);

    color: white;

    font-size: 26px;

    font-weight: bold;

    cursor: pointer;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow:

        var(--sombra-normal),

        inset 0 0 12px rgba(255, 255, 255, .18);

    transition: var(--transicion);

    z-index: 9999;

}

#subirResultados {

    bottom: 95px;

}

#bajarResultados {

    bottom: 25px;

}


#subirResultados:hover,
#bajarResultados:hover {

    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), .80);

    transform:

        translateY(-5px) scale(1.08);

}

#subirResultados:focus-visible,
#bajarResultados:focus-visible {

    outline: 2px solid var(--color-resaltado, #2ecc71);

    outline-offset: 3px;

}


/* ==========================================================
   FICHAS
========================================================== */

.fichaSolar {

    width: 100%;

    padding: 18px;

    border-radius: var(--radio-normal);

    background: rgba(255, 255, 255, .35);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    box-shadow: var(--sombra-suave);

}


.fichaSolar hr {

    display: none;

}


/* ==========================================================
   FOOTER
========================================================== */

.footer {
    position: relative;
    z-index: 920;
    width: 100%;

    margin-top: auto;

    padding: 30px 20px;

    background: var(--superficie-bg, var(--color-tarjeta));

    backdrop-filter: blur(var(--barra-footer-blur, var(--blur)));

    -webkit-backdrop-filter: blur(var(--barra-footer-blur, var(--blur)));

    border-top: 1px solid var(--borde);

    color: var(--color-texto);

    text-align: center;

    box-shadow: var(--sombra-normal);

}

.footer-contenido {

    max-width: 1000px;

    margin: auto;

}

.footer-contenido p {

    margin: 10px 0;

}


/* ==========================================================
   REDES SOCIALES
========================================================== */

.redes {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 20px;

}


.icono-red {

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    text-decoration: none;

    transition: var(--transicion);

}


.icono-red:hover {

    transform:

        translateY(-5px) scale(1.08);

}


.icono-red svg {

    width: 26px;

    height: 26px;

    fill: white;

}


.icono-red.x {

    background: #000;

}


.icono-red.youtube {

    background: #FF0000;

}


.icono-red.twitch {

    background: #9146FF;

}


.icono-red.patreon {

    background: #FF424D;

}


/* ==========================================================
   UTILIDADES
========================================================== */

.oculto {

    display: none !important;

}


.centrado {

    text-align: center;

}


.flex {

    display: flex;

}


.grid {

    display: grid;

}


/* ==========================================================
   SCROLL (RECUPERADO: GROSOR Y BORDES ORIGINALES, SIN FLECHAS)
   Sincronizado con el color de superficie de «Temas y fondos»
========================================================== */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
    background: var(--superficie-carril, rgba(255, 255, 255, .15));
    border-radius: 20px;
}

::-webkit-scrollbar-thumb {
    background: var(--superficie-indicador, var(--superficie-bg, rgba(255, 255, 255, .45)));
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--superficie-indicador-hover, var(--superficie-bg, rgba(255, 255, 255, .65)));
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:700px) {

    .ventana {

        width: 96%;

        padding: 18px;

    }

    .listaOpciones {

        grid-template-columns: 1fr;

    }

    .botonSolar {

        width: 100%;

    }

    #subirResultados,
    #bajarResultados {

        display: none !important;

    }

    .accionesBuscador {

        flex-wrap: wrap;

        gap: 14px;

    }

    .accionesBuscador button {

        min-width: 0;

        width: 100%;

    }




}

@media(min-width:1400px) {

    .ventana {

        width: min(75%, 1350px);

    }

}

.compartir svg,
.captura svg {

    width: 22px;

    height: 22px;

    fill: currentColor;

}

/* ==========================================================
   ACCIONES DEL BUSCADOR
========================================================== */

.accionesBuscador {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 28px;

    margin-top: 35px;

}

.accionesBuscador button {

    min-width: 180px;

}

/* ==========================================================
   BOTÓN MODO DÍA / NOCHE
========================================================== */

.toggleModo {

    width: 56px;

    height: 56px;

    min-width: 56px;

    min-height: 56px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 18px;

    border: none;

    padding: 0 !important;

    border-radius: 50% !important;

    aspect-ratio: 1 / 1;

    background: var(--color-advertencia);

    color: #2B2B2B;

    cursor: pointer;

    font-size: 0.95rem;

    font-weight: 700;

    transition: all .25s;

}

.toggleModo svg {

    width: 30px;

    height: 30px;

    fill: currentColor;

}

.toggleModo .icono-luna {

    display: none;

}

.toggleModo:hover {

    background: rgba(255, 213, 74, .75);

    box-shadow:

        0 0 8px rgba(255, 213, 74, .60),

        0 0 18px rgba(255, 213, 74, .45),

        0 0 30px rgba(255, 213, 74, .25);

    transform: scale(1.10);

}

body.modo-noche .toggleModo {

    background: #6A5ACD;

    color: #EDEDED;

}

body.modo-noche .toggleModo .icono-sol {

    display: none;

}

body.modo-noche .toggleModo .icono-luna {

    display: flex;

}

body.modo-noche .toggleModo:hover {

    background: rgba(106, 90, 205, .75);

    box-shadow:

        0 0 8px rgba(106, 90, 205, .60),

        0 0 18px rgba(106, 90, 205, .45),

        0 0 30px rgba(106, 90, 205, .25);

    transform: scale(1.10);

}

/* ==========================================================
   BOTÓN DE SILENCIO (#botonSonido)
   Sigue el mismo estilo visual que .toggleModo
   ========================================================== */

/* Oculta/muestra el SVG correcto según el estado */
.oculto-sonido {
    display: none !important;
}

/* Cuando está silenciado: color rojo suave para avisar al usuario */
#botonSonido.silenciado {
    background: #c0392b !important;
    color: #fff !important;
}

#botonSonido.silenciado:hover {
    background: rgba(192, 57, 43, 0.80) !important;
    box-shadow:
        0 0 8px rgba(192, 57, 43, 0.60),
        0 0 18px rgba(192, 57, 43, 0.45),
        0 0 30px rgba(192, 57, 43, 0.25) !important;
}

/* ==========================================================
   LISTADO AGRUPADO POR MUNDO
========================================================== */

#listaCompletaSolares {

    gap: 14px;

}

.grupoMundo {

    border-radius: var(--radio-normal);

    overflow: hidden;

    box-shadow: var(--sombra-suave);

    width: 92%;

    margin: 0 auto 14px auto;

}

.tituloMundo {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 18px;

    background: var(--color-principal);

    color: var(--color-texto);

    border: none;

    border-radius: var(--radio-normal);

    cursor: pointer;

    font-size: 16px;

    font-weight: bold;

    text-align: left;

    transition: var(--transicion);

}

.tituloMundo:hover {

    background: var(--color-secundario);

}

.ladoDerechoMundo {

    display: flex;

    align-items: center;

    gap: 12px;

}

.contadorMundo {

    background: var(--color-resaltado);

    color: white;

    border-radius: 50px;

    padding: 2px 12px;

    font-size: 13px;

    font-weight: bold;

}

.flechaMundo {

    font-size: 12px;

    transition: transform .25s;

}

.tituloMundo.abierto .flechaMundo {

    transform: rotate(180deg);

}

.contenidoMundo {

    display: none;

    flex-direction: column;

    gap: 10px;

    padding: 14px;

}

.contenidoMundo.abierto {

    display: flex;

}

/* ── Icono del mundo en la cabecera del acordeón ── */

.nombreMundoConIcono {
    display: flex;
    align-items: center;
    gap: 10px;
}

.iconoMundo {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.iconoMundoFallback {
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ── Sub-acordeón de barrio ─────────────────────── */

.grupoBarrio {
    border-radius: calc(var(--radio-normal) - 2px);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
    margin-bottom: 8px;
}

.tituloBarrio {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-secundario);
    color: var(--color-texto);
    border: none;
    border-radius: calc(var(--radio-normal) - 2px);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: var(--transicion);
}

.tituloBarrio:hover {
    background: color-mix(in srgb, var(--color-secundario) 80%, var(--color-resaltado) 20%);
}

.nombreBarrioConIcono {
    display: flex;
    align-items: center;
    gap: 10px;
}

.iconoBarrio {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.iconoBarrioFallback {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ladoDerechoBarrio {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contadorBarrio {
    background: rgba(46, 204, 113, 0.22);
    color: var(--color-resaltado);
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 50px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: bold;
}

body.modo-dia .contadorBarrio {
    background: #27ae60;
    color: #ffffff;
    border-color: #219653;
}

.flechaBarrio {
    font-size: 10px;
    transition: transform .25s;
}

.tituloBarrio.abierto .flechaBarrio {
    transform: rotate(180deg);
}

.contenidoBarrio {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    justify-content: center;
}

/* .contenidoBarrio.abierto: la regla de display:grid está definida en la sección TARJETAS DE SOLAR (GRID) */


/* ==========================================================
   FICHA DE SOLAR
========================================================== */

#ventanaFichaSolar {

    max-width: 650px;

}

#contenidoFichaSolar {

    text-align: center;

    font-size: 1.15rem;

    margin-top: 35px;

}

#contenidoFichaSolar p {

    margin: 14px 0;

}

#contenidoFichaSolar h3 {

    font-size: 1.6rem;

    margin-bottom: 24px;

}

/* ==========================================================
   VENTANA AVISO FILTROS
========================================================== */

#ventanaAvisoFiltros,
#ventanaAvisoDificultadReto,
#ventanaAvisoDesastres {
    text-align: center;
}

#ventanaAvisoFiltros p,
#ventanaAvisoDificultadReto p,
#ventanaAvisoDesastres p {
    margin-bottom: 12px;
}

#cerrarAvisoFiltros,
#cerrarAvisoDificultadReto,
#cerrarAvisoDesastres {
    display: block;
    margin: 24px auto 0 auto;
}

/* ==========================================================
   VENTANA CONFIRMAR BORRADO
========================================================== */

#ventanaConfirmarBorrar {
    text-align: center;
}

#ventanaConfirmarBorrar p {
    margin-bottom: 12px;
}

#ventanaConfirmarBorrar button {
    display: inline-block;
    margin: 24px 8px 0 8px;
}

/* ==========================================================
   BOTONES DE RETOS
========================================================== */

.botonReto {
    position: relative;
    margin: 6px;
    padding: 12px 18px;
    border-radius: var(--radio-normal);
    background: var(--color-principal);
    color: var(--color-texto);
    border: none;
    box-shadow: var(--sombra-suave);
    cursor: pointer;
}

.botonReto:hover {
    background: var(--color-secundario);
}

/* ==========================================================
   TOOLTIPS
========================================================== */
.tooltip {
    position: fixed;
    background: rgba(20, 24, 33, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: var(--radio-pequeño, 8px);
    font-size: 0.84rem;
    font-family: inherit;
    max-width: 250px;
    pointer-events: none;
    z-index: 100000;
    display: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -120%);
    white-space: normal;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    /* Promover a capa de composición propia para evitar repaints cruzados */
    will-change: transform;
    isolation: isolate;
}

body.modo-dia .tooltip {
    background: rgba(255, 255, 255, 0.96);
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ==========================================================
   RESULTADO DE RETOS Y REROLLS
   ========================================================== */

.btnReroll {
    background: var(--color-resaltado);
    color: white;
    border: none;
    border-radius: var(--radio-pequeño);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: bold;
    transition: var(--transicion);
    box-shadow: var(--sombra-suave);
}

.btnReroll:hover:not(:disabled) {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

.btnReroll.deshabilitado,
.btnReroll:disabled {
    background: #888888 !important;
    color: #DDDDDD !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.7;
}

.badgeTipoReto {
    display: inline-block;
    background: var(--color-resaltado, var(--color-principal));
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.3);
}

body.modo-dia .badgeTipoReto {
    background: var(--color-resaltado, #16763F);
    color: #ffffff;
}

.tarjetaCategoriaReto {
    transition: var(--transicion);
}

.tarjetaCategoriaReto:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: var(--sombra-suave);
}

/* ==========================================================
   TEMPORIZADOR
========================================================== */

.tiempoAgotadoTexto {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    color: red;
    margin: 40px 0;
    text-transform: uppercase;
    animation: pulsoRojo 1s infinite alternate;
}

@keyframes pulsoRojo {
    0% {
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.5);
        transform: scale(1);
    }

    100% {
        text-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 40px rgba(255, 0, 0, 1), 0 0 60px rgba(255, 0, 0, 1);
        transform: scale(1.05);
    }
}

/* ==========================================================
   ACERCA DE Y CARRUSEL YOUTUBE
========================================================== */

.carrusel-videos-wrapper {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    padding: 10px 0;
    cursor: ew-resize;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radio-normal);
    margin-top: 20px;
    touch-action: pan-y;
}

.carrusel-videos-track {
    display: inline-flex;
    gap: 15px;
    padding: 0 15px;
    will-change: transform;
}

.video-item {
    position: relative;
    display: inline-block;
    width: 250px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radio-normal);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.video-item:hover {
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.video-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-item .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(229, 57, 53, 0.8);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    padding-left: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.video-item:hover .play-icon {
    opacity: 1;
}


/* ==========================================================
   ICONOS DE PACKS
========================================================== */

/* Botón de pack con icono (selector de packs del reto, mundos, barrios) */
.btnPackIcono,
.btnPackIcono:hover,
.btnPackIcono:focus,
.btnPackIcono:focus-visible,
.btnPackIcono.seleccionada,
.btnPackIcono.activo,
.btnPackIcono.seleccionada:hover,
.btnPackIcono.seleccionada:focus,
.btnPackIcono.seleccionada:focus-visible {
    width: 88px;
    height: 88px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    overflow: visible;
    transition: transform 0.18s, filter 0.18s !important;
}

.btnPackIcono img.iconoPack {
    width: 82px;
    height: 82px;
    object-fit: contain;
    border-radius: 10px;
    pointer-events: none;
    display: block;
    transition: filter 0.18s, transform 0.18s;
}

/* Desmarcado: gris y opaco */
.btnPackIcono:not(.seleccionada) img.iconoPack {
    filter: grayscale(1) opacity(0.35);
}

/* Seleccionado: icono con halo brillante */
.btnPackIcono.seleccionada img.iconoPack {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}

.btnPackIcono:hover {
    transform: translateY(-4px) scale(1.14) !important;
    box-shadow: none !important;
    background: transparent !important;
    z-index: 2;
}

.btnPackIcono:hover img.iconoPack {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.btnPackIcono.seleccionada:hover img.iconoPack {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

/* Accesibilidad en foco de teclado: drop-shadow en el contorno del icono, sin marco rectangular */
.btnPackIcono:focus-visible img.iconoPack {
    filter: drop-shadow(0 0 6px var(--color-resaltado, #2ecc71)) drop-shadow(0 0 12px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.5));
}

.btnPackIcono.seleccionada:focus-visible img.iconoPack {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 14px var(--color-resaltado, #2ecc71));
}

/* Tooltip del nombre al hacer hover */
.btnPackIcono::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.95);
    color: #fff;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
    max-width: 180px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.btnPackIcono:hover::after {
    opacity: 1;
}

/* Chip de icono de pack en resultados del reto */
.chipIconoPack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: transparent;
    border: none;
    transition: transform 0.15s;
    cursor: default;
    position: relative;
}

.chipIconoPack img.iconoPack {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.chipIconoPack::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.95);
    color: #fff;
    font-size: 0.72rem;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}

.chipIconoPack:hover::after {
    opacity: 1;
}

.chipIconoPack:hover {
    transform: scale(1.15);
}

.chipPackTexto {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Contenedor de chips de iconos en el resultado del reto */
.tiraIconosPacks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

/* ==========================================================
   TARJETAS DE SOLAR (GRID)
========================================================== */

#listaResultados {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));

    gap: 18px;

    justify-content: center;

}

/* Grid de tarjetas por barrio: minmax igual que #listaResultados para que
   las tarjetas de Juego Base (sección full-width) y de Expansión/Contenido
   (columnas ~50%) tengan exactamente el mismo tamaño de celda. */
.contenidoBarrio.abierto {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));

    gap: 18px;

    justify-content: center;

    padding: 14px;

}

/* La ventana de resultados se adapta al número de solares:
   si hay pocos, la ventana se hace más estrecha en vez de
   dejar un hueco vacío a la derecha. */
#ventanaResultados {
    max-width: min(92%, 1150px);
}

@media(max-width:700px) {
    #ventanaResultados {
        width: 96% !important;
        max-width: 96%;
    }
}

.contenidoMundo {

    display: none;

}

#resultadoAleatorio {

    display: flex;

    justify-content: center;

}

.tarjetaSolar {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    max-width: 250px;

    margin: 0 auto;

    padding: 12px 12px 14px 12px;

    border-radius: var(--radio-normal);

    background: var(--color-tarjeta);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border: 1px solid var(--borde);

    box-shadow: var(--sombra-suave);

    cursor: pointer;

    transition: var(--transicion);

    text-align: center;

    box-sizing: border-box;

}

.tarjetaSolar:hover,
.tarjetaSolar.tarjetaSolarActiva {

    transform: translateY(-4px);

    box-shadow: var(--sombra-normal);

    border-color: rgba(255, 255, 255, .5);

}

.iconoTarjetaSolar {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    min-height: 110px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    overflow: hidden;

    background: rgba(0, 0, 0, 0.08);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}

body.modo-noche .iconoTarjetaSolar {

    background: rgba(255, 255, 255, 0.04);

}

/* Foto de fondo: siempre presente, muy difuminada en reposo y nítida en hover */
.tarjetaSolarFoto {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    display: block;

    filter: blur(8px) brightness(0.52);

    transform: scale(1.08);

    transition: filter 0.3s ease, transform 0.3s ease;

    z-index: 0;

}

/* Modo día: placeholder más claro y luminoso (mismo blur, sin oscurecer la imagen) */
body.modo-dia .tarjetaSolarFoto {

    filter: blur(8px) brightness(2.0);

}

.tarjetaSolar:hover .tarjetaSolarFoto,
.tarjetaSolar.tarjetaSolarActiva .tarjetaSolarFoto {

    filter: blur(0px) brightness(1);

    transform: scale(1);

}

/* Capa de Reposo: Marco rectangular con Mundo en centro, Pack abajo izq, Tipo abajo der */
.tarjetaSolarCapaReposo {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: opacity .25s ease;

}

.tarjetaSolarMundoCenter {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

}

.tarjetaSolarMundoImg,
.iconoTarjetaSolar .iconoPackImg,
.iconoTarjetaSolar .iconoMundoImg {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 10px;

    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));

    display: block;

}

.tarjetaSolarMundoFallback,
.iconoTarjetaSolarFallback {

    font-size: 2.4rem;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

}

.tarjetaSolarPackBadge {

    position: absolute;

    bottom: 8px;

    left: 8px;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

    pointer-events: none;

}

.tarjetaSolarPackBadge .iconoPackMini {

    width: 25px;

    height: 25px;

    object-fit: contain;

    display: block;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));

}

.tarjetaSolarPackBadge .iconoPackMini.fallback {

    font-size: 1.15rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

.tarjetaSolarTipoBadge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    overflow: hidden;
}

.tarjetaSolarTipoBadge .tarjetaSolarTipoIcono {
    width: 25px;
    height: 25px;
}

.tarjetaSolarTipoBadge .tarjetaSolarTipoFallback {

    font-size: 1.15rem;

    line-height: 1;

    display: inline-flex;

    align-items: center;

}

/* Capa de Hover / Pulsación: Última foto disponible en formato rectangular */
.tarjetaSolarCapaHover {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    pointer-events: none;

    transition: opacity .25s ease;

    border-radius: 10px;

    overflow: hidden;

}

.tarjetaSolarFotoHover {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 10px;

}

/* Transición entre reposo y hover */
.tarjetaSolar:hover .tarjetaSolarCapaReposo,
.tarjetaSolar.tarjetaSolarActiva .tarjetaSolarCapaReposo {

    opacity: 0;

}

.tarjetaSolar:hover .tarjetaSolarCapaHover,
.tarjetaSolar.tarjetaSolarActiva .tarjetaSolarCapaHover {

    opacity: 1;

    pointer-events: auto;

}

/* Esquina inferior izquierda sobre la foto: Mundo arriba, Pack debajo (columna vertical) */
.tarjetaSolarFotoStackIzq {

    position: absolute;

    bottom: 8px;

    left: 8px;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    pointer-events: none;

}

/* Esquina inferior derecha sobre la foto: Tipo de solar */
.tarjetaSolarFotoDer {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

/* Iconos sobre la foto: sin cajas, sin bordes, con drop-shadow nítido */
.tarjetaSolarFotoMiniIcono {
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
}

.tarjetaSolarFotoMiniFallback {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}

/* Tratamiento día/noche para icono de tipo de solar con el color de resaltado del tema */
.tarjetaSolarTipoIcono {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    object-fit: contain;
    display: block;
    position: relative;
    left: -60px;
    filter: drop-shadow(60px 0 0 var(--color-resaltado));
    transition: filter var(--transicion, 0.25s ease);
}

/* Tamaño fijo del tipo icono dentro de la capa hover: nunca debe crecer */
.tarjetaSolarFotoDer .tarjetaSolarTipoIcono {
    width: 25px !important;
    height: 25px !important;
    flex-shrink: 0;
    transform: none !important;
}

/* Modo Día: icono con el color de resaltado del tema y sombra suave de contraste */
body.modo-dia .tarjetaSolarTipoIcono {
    filter: drop-shadow(60px 0 0 var(--color-resaltado)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Modo Noche: icono con el color de resaltado del tema y resplandor luminoso sobre fondo oscuro */
body.modo-noche .tarjetaSolarTipoIcono {
    filter: drop-shadow(60px 0 0 var(--color-resaltado)) drop-shadow(0 0 4px var(--color-resaltado)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

/* Resplandor del tipo icono SOLO durante hover/pulsación — sobre la foto nítida */

/* Modo Día → resplandor temático con halo blanco suave */
body.modo-dia .tarjetaSolar:hover .tarjetaSolarFotoDer .tarjetaSolarTipoIcono,
body.modo-dia .tarjetaSolar.tarjetaSolarActiva .tarjetaSolarFotoDer .tarjetaSolarTipoIcono {
    filter: drop-shadow(60px 0 0 var(--color-resaltado)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px var(--color-resaltado));
}

/* Modo Noche → resplandor temático intenso y halo oscuro */
body.modo-noche .tarjetaSolar:hover .tarjetaSolarFotoDer .tarjetaSolarTipoIcono,
body.modo-noche .tarjetaSolar.tarjetaSolarActiva .tarjetaSolarFotoDer .tarjetaSolarTipoIcono {
    filter: drop-shadow(60px 0 0 var(--color-resaltado)) drop-shadow(0 0 4px var(--color-resaltado)) drop-shadow(0 0 8px var(--color-resaltado)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.9));
}

/* Nombre del solar debajo del área visual: limpio y centrado */
.nombreTarjetaSolar {

    font-weight: bold;

    font-size: .95rem;

    line-height: 1.3;

    color: var(--color-texto);

    display: block;

    text-align: center;

    width: 100%;

    word-break: break-word;

    padding: 0 4px;

}

@media(max-width:700px) {

    #listaResultados,
    .contenidoBarrio.abierto {

        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

        gap: 12px;

    }

    .tarjetaSolar {

        max-width: none;

        padding: 10px 8px 12px 8px;

    }

    .iconoTarjetaSolar {

        min-height: 85px;

    }

    .tarjetaSolarMundoCenter {

        width: 52px;

        height: 52px;

    }

    .tarjetaSolarPackBadge {

        bottom: 6px;

        left: 6px;

    }

    .tarjetaSolarTipoBadge {

        bottom: 6px;

        right: 6px;

    }

    .tarjetaSolarFotoStackIzq {

        bottom: 6px;

        left: 6px;

        gap: 3px;

    }

    .tarjetaSolarFotoDer {

        bottom: 6px;

        right: 6px;

    }

    .tarjetaSolarFotoMiniIcono,
    .tarjetaSolarPackBadge .iconoPackMini,
    .tarjetaSolarTipoBadge .tarjetaSolarTipoIcono,
    .tarjetaSolarTipoIcono {

        width: 21px;

        height: 21px;

    }

    /* Tamaño fijo del tipo icono en hover: nunca debe crecer en móvil */
    .tarjetaSolarFotoDer .tarjetaSolarTipoIcono {

        width: 21px !important;

        height: 21px !important;

    }

}


/* ==========================================================
   GRID SECCIONES DE PACKS (RETOS)
========================================================== */

.gridPacksRetos {

    display: grid;

    grid-template-columns: 1fr;

    column-gap: 40px;

}

@media(min-width:701px) {

    .gridPacksRetos {

        grid-template-columns: 1fr 1fr;

    }

}

/* ==========================================================
   PANTALLA DE CARGA INICIAL
========================================================== */

#pantallaCarga {
    --color-barra-carga: var(--color-resaltado, #2ECC71);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 999999;

    background-color: var(--color-fondo-carga, #0b1d33);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    padding: 40px 20px 6vh 20px;

    transition: opacity .5s ease, background-color .3s ease;

    overflow: hidden;

}

#pantallaCargaFondo {

    position: absolute;

    top: -5%;

    left: -5%;

    width: 110%;

    height: 110%;

    /* La imagen se aplica dinámicamente desde loading.js según el modo día/noche.
       Esta URL actúa solo como fallback por si el JS aún no ha actuado. */
    background-image: var(--imagen-fondo-carga, none);


    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    filter: blur(var(--pixel-blur, 25px)) contrast(var(--pixel-contrast, 135%));

    transform: scale(1.05);

    transition: filter 0.12s linear;

    z-index: -1;

    pointer-events: none;

}

#pantallaCarga.oculta {

    opacity: 0;

    pointer-events: none;

}

@media (prefers-reduced-motion: reduce) {
    #pantallaCarga {
        transition: opacity 0.15s ease !important;
    }
    #pantallaCargaFondo {
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
}

.pantallaCargaCentro {

    margin: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 45px 65px;

    background: var(--superficie-bg, rgba(0, 0, 0, 0.50));

    backdrop-filter: blur(var(--ventana-blur, var(--blur)));

    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur)));

    border-radius: var(--radio-grande);

    border: 1px solid var(--borde);

    box-shadow: var(--sombra-fuerte);

    max-width: min(92%, 1050px);

}

.pantallaCargaHeader {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

}

.pantallaCargaLogo1 {

    width: 140px;

    height: 140px;

    object-fit: contain;

    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));

}

.pantallaCargaTexto {

    text-align: center;

}

.pantallaCargaTexto h1 {

    font-size: 3.8rem;

    font-weight: 700;

    color: #EDEDED;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);

    margin-bottom: 10px;

}

.pantallaCargaTexto p {

    font-size: 1.25rem;

    color: #E0E0E0;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);

    line-height: 1.45;

}

.pantallaCargaBy {

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--color-resaltado);

    margin: 25px 0 16px 0;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);

    letter-spacing: 1.5px;

}

.pantallaCargaLogo2 {

    width: 110px;

    height: 110px;

    object-fit: cover;

    border-radius: 50%;

    border: 3px solid rgba(255, 255, 255, 0.85);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);

}

/* ── Modo noche (default): textos claros ── */
body.modo-noche .pantallaCargaTexto h1 {
    color: #EDEDED;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

body.modo-noche .pantallaCargaTexto p {
    color: #D5D5D5;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

body.modo-noche .pantallaCargaBy {
    color: var(--color-resaltado);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

body.modo-noche .fraseCarga {
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* ── Modo día: textos oscuros ── */
body.modo-dia .pantallaCargaCentro {
    border-color: rgba(0, 0, 0, 0.15);
}

body.modo-dia .pantallaCargaTexto h1 {
    color: #1A1A2E;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);
}

body.modo-dia .pantallaCargaTexto p {
    color: #2B2B2B;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
}

body.modo-dia .pantallaCargaBy {
    color: var(--color-barra-carga, var(--color-resaltado, #16763F));
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
}

body.modo-dia .fraseCarga {
    color: #1A1A2E;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
}

body.modo-dia .pantallaCargaLogo2 {
    border-color: rgba(0, 0, 0, 0.3);
}

.pantallaCargaInferior {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    margin-bottom: 5vh;

}

.fraseCargaContenedor {

    width: min(90%, 750px);

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.fraseCarga {

    color: white;

    font-size: 1.3rem;

    font-weight: bold;

    text-align: center;

    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);

    display: inline-block;

    opacity: 0;

    transform: translateX(50px);

    transition: transform .35s ease, opacity .35s ease;

}

.fraseCarga.fraseCargaVisible {

    opacity: 1;

    transform: translateX(0);

}

.barraCargaContenedor {

    width: min(90%, 750px);

    height: 28px;

    background: rgba(255, 255, 255, .25);

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .4);

    box-shadow: var(--sombra-suave);

}

.barraCargaProgreso {

    height: 100%;

    width: 0%;

    background: var(--color-barra-carga, var(--color-resaltado, #2ECC71));

    border-radius: 20px;

    transition: width .15s linear;

}

@media(max-width:700px) {

    #pantallaCarga {

        padding: 20px 15px 4vh 15px;

    }

    .pantallaCargaCentro {

        padding: 20px 15px;

    }

    .pantallaCargaHeader {

        gap: 15px;

    }

    .pantallaCargaLogo1 {

        width: 75px;

        height: 75px;

    }

    .pantallaCargaTexto h1 {

        font-size: 2.1rem;

    }

    .pantallaCargaTexto p {

        font-size: 0.9rem;

    }

    .pantallaCargaBy {

        margin: 14px 0 10px 0;

        font-size: 1.1rem;

    }

    .pantallaCargaLogo2 {

        width: 70px;

        height: 70px;

    }

    .pantallaCargaInferior {

        margin-bottom: 2vh;

        gap: 10px;

    }

    .fraseCargaContenedor,

    .barraCargaContenedor {

        width: 88%;

    }

    .fraseCargaContenedor {

        height: 28px;

    }

    .barraCargaContenedor {

        height: 22px;

    }

    .fraseCarga {

        font-size: .95rem;

    }

}

/* ==========================================================
   LOGO EN CABECERA
========================================================== */

.header-contenido {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    transition: gap 0.3s ease;
}

.header-texto {

    text-align: center;

}

.header-logo {
    position: relative;
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: width 0.3s ease, height 0.3s ease;
}

/* ── Modo Compacto (se activa cuando el menú se convierte en barra al hacer scroll) ── */
header.headerCompacto {
    padding: 8px 20px;
    margin-bottom: 15px;
}

header.headerCompacto h1 {
    font-size: 1.75rem;
    margin-bottom: 0;
}

header.headerCompacto p {
    max-height: 0;
    opacity: 0;
    margin: 0;
    font-size: 0;
}

header.headerCompacto .header-logo {
    width: 55px;
    height: 55px;
}

header.headerCompacto .header-contenido {
    gap: 12px;
}

.logoImg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));

    transition: opacity .25s;

}

.logoImg2 {

    opacity: 0;

}

.header-logo:hover .logoImg1,
.header-logo:active .logoImg1 {

    opacity: 0;

}

.header-logo:hover .logoImg2,
.header-logo:active .logoImg2 {

    opacity: 1;

}

.header-logo:hover img {

    transform: scale(1.05);

}

@media(max-width:700px) {

    header {
        padding: 14px 15px;
    }

    header h1 {
        font-size: 1.8rem;
        margin-bottom: 6px;
    }

    header p {
        font-size: .85rem;
    }

    .header-contenido {
        gap: 12px;
    }

    .header-logo {

        width: 55px;

        height: 55px;

    }

    header.headerCompacto {
        padding: 6px 12px;
    }

    header.headerCompacto h1 {
        font-size: 1.25rem;
    }

    header.headerCompacto .header-logo {
        width: 38px;
        height: 38px;
    }

    .menu-principal.menuFlotante {
        top: 58px;
    }

}

/* ==========================================================
   GALERÍA DE FOTOS EN FICHA DE SOLAR
========================================================== */

.galeriaFichaSolarWrapper {

    margin-top: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

}

.galeriaCargando,
.galeriaNoDisponible {

    padding: 30px;

    text-align: center;

    font-weight: bold;

    opacity: .85;

    background: var(--color-tarjeta);

    border-radius: var(--radio-normal);

    border: 1px solid var(--borde);

    width: 100%;

    max-width: 500px;

}

.galeriaNoDisponible {

    color: var(--color-error);

}

.galeriaSolar {

    width: 100%;

    max-width: 520px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}

.galeriaImagenContenedor {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    /* Sin fondo ni borde cuando hay fotos: la propia imagen llena el espacio */
    background: transparent;

    border-radius: var(--radio-normal);

    overflow: hidden;

    box-shadow: none;

    border: none;

}

.galeriaImagenActual {

    width: 100%;

    height: 100%;

    object-fit: cover;

    cursor: zoom-in;

    display: block;

    border-radius: var(--radio-normal);

    transition: opacity .25s;

}

.galeriaFlecha {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: none;

    background: rgba(0, 0, 0, .45);

    color: white;

    font-size: 1.6rem;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: var(--transicion);

    z-index: 5;

}

.galeriaFlecha:hover {

    background: rgba(0, 0, 0, .7);

}

.galeriaFlechaIzq {

    left: 10px;

}

.galeriaFlechaDer {

    right: 10px;

}

.galeriaPuntos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    min-height: 16px !important;
}

/* Puntos circulares geométricamente perfectos (Fase de Corrección) */
.puntoGaleria {
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 11px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: center !important;
    background: var(--color-secundario, rgba(255, 255, 255, 0.4)) !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    transform: none;
    transform-origin: center center !important;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease !important;
}

.puntoGaleria.activo {
    background: var(--color-resaltado, #ffd54a) !important;
    transform: scale(1.25) !important;
    transform-origin: center center !important;
}

/* Puntos de borde en sliding window: indican que hay más fotos fuera de la vista */
.puntoGaleria.borde {
    opacity: 0.45 !important;
    transform: scale(0.75) !important;
    transform-origin: center center !important;
}

.puntoGaleria.borde:hover {
    opacity: 0.8 !important;
}

.galeriaContador {

    font-weight: bold;

    font-size: .95rem;

    opacity: .85;

}

.galeriaBackdrop {

    display: none;

    /* Posicionamiento fixed para que cubra TODA la web */
    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    /* Oscurece de forma suave */
    background: rgba(0, 0, 0, .5);

    z-index: 1500;

    cursor: zoom-out;

    cursor: zoom-out;

}

.galeriaBackdrop.activo {

    display: block;

}

/* Al estar activa la galería, quitamos el filtro de la ventana
   para evitar que bloquee y corte el posicionamiento 'fixed' a toda la pantalla */
body.galeria-ampliada .ventana {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.galeriaImagenActual.ampliada {

    position: fixed;

    /* Centrado vertical */
    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: auto;

    height: auto;

    /* Se amplía más (casi todo el viewport) */
    max-width: 95vw;

    max-height: 90vh;

    z-index: 1501;

    cursor: zoom-out;

    border-radius: var(--radio-normal);

    box-shadow: 0 8px 40px rgba(0, 0, 0, .7);

    object-fit: contain;

}

@media(max-width:700px) {

    .galeriaFlecha {

        width: 34px;

        height: 34px;

        font-size: 1.3rem;

    }

}

/* ==========================================================
   SELECTOR DE IDIOMA
========================================================== */

.footer-controles {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 18px;
}

.footer-controles .toggleModo {
    margin: 0;
}

.selectorIdioma {
    position: relative;
}

/* No se define color propio: al llevar la clase .toggleModo,
   el botón de idioma ya respeta automáticamente los colores
   de modo día / modo noche, igual que el botón de sol/luna. */
.botonIdiomaBtn {
    overflow: hidden;
}

.banderaImg {
    width: 28px;
    height: 21px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.listaIdiomas {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px;
    width: max-content;
    border-radius: var(--radio-normal);
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borde);
    box-shadow: var(--sombra-normal);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 500;
}

.listaIdiomas.abierta {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .listaIdiomas {
        left: auto;
        right: 0;
        transform: translateY(8px);
    }

    .listaIdiomas.abierta {
        transform: translateY(0);
    }
}

.opcionIdioma {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-principal);
    cursor: pointer;
    transition: var(--transicion);
}

.opcionIdioma:hover {
    background: var(--color-secundario);
    transform: translateY(-3px);
}

.opcionIdioma.activo {
    background: var(--color-resaltado);
}

/* ── Evitar que Google Translate rompa el diseño ── */

html body {
    top: 0px !important;
    position: relative !important;
}

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
body>.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

#google_translate_element {
    display: none !important;
}

/* ==========================================================
   RULETA DE COLORES
========================================================== */

#botonRuletaColor {
    background: var(--color-principal);
    color: var(--color-texto);
    box-shadow: var(--sombra-suave);
}

#botonRuletaColor:hover {
    background: var(--color-secundario);
}

.ventanaEstrecha {
    max-width: 640px;
}

.ruletaColorControles {
    text-align: center;
    margin-bottom: 20px;
}

.ruletaColorControles label {
    font-weight: bold;
    margin-right: 8px;
}

#inputTiradasRuleta,
#inputTiradasDados {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--borde);
    width: 70px;
    text-align: center;
    font-size: 1rem;
    background: transparent;
    color: var(--color-texto);
}

.ruletaColorAyuda {
    font-size: 0.92rem;
    opacity: 0.8;
    margin-top: 8px;
}

.ruletaColorPuntero {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 22px solid var(--color-resaltado);
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.btnGirarRuleta,
#botonGirarRuleta,
.btnGirarRuleta:hover,
#botonGirarRuleta:hover,
.btnGirarRuleta:focus,
#botonGirarRuleta:focus,
.btnGirarRuleta:active,
#botonGirarRuleta:active {
    position: absolute !important;
    top: calc(50% - 32px) !important;
    left: calc(50% - 32px) !important;
    transform: none !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 3.5px solid #ffffff !important;
    border-color: #ffffff !important;
    background: var(--color-resaltado) !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .35) !important;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s, box-shadow .25s, transform .15s;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.btnGirarRuleta:hover:not(:disabled),
#botonGirarRuleta:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-resaltado) 88%, white) !important;
    color: #ffffff !important;
    border: 3.5px solid #ffffff !important;
    border-color: #ffffff !important;
    box-shadow:
        0 0 12px rgba(var(--color-resaltado-rgb), .65),
        0 0 24px rgba(var(--color-resaltado-rgb), .45),
        0 4px 14px rgba(0, 0, 0, .35),
        inset 0 0 0 1.5px rgba(255, 255, 255, .5) !important;
    transform: scale(1.04) !important;
}

.btnGirarRuleta:active:not(:disabled),
#botonGirarRuleta:active:not(:disabled) {
    transform: scale(0.96) !important;
}

.btnGirarRuleta:disabled,
#botonGirarRuleta:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
}


.ruletaColorMensaje {
    text-align: center;
    margin: 10px 0 20px 0;
    font-weight: bold;
}

.ruletaColorResultados {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.chipColorRuleta__muestra {
    display: inline-block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: var(--sombra-suave);
    cursor: pointer;
    transition: transform .2s;
}

.chipColorRuleta__muestra:hover {
    transform: scale(1.15);
}

@media(max-width:700px) {
    .ruletaColorWheelWrapper {
        width: 220px !important;
        height: 220px !important;
    }

    .btnGirarRuleta,
    #botonGirarRuleta {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        font-size: .85rem;
        top: calc(50% - 27px) !important;
        left: calc(50% - 27px) !important;
        padding: 0 !important;
    }
}

.ruletaColorWheel {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    display: block;
}

.ruletaColorWheel svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================
   RULETA DE COLORES — MEJORAS ESTÉTICAS (ventanaRuletaColorModerna)
   Usa exclusivamente variables CSS globales para soporte día/noche.
   No modifica las reglas funcionales existentes arriba.
   ========================================================== */

/* Encabezado de sección */
.ruletaColorHeader {
    text-align: center;
    margin-bottom: 18px;
}

.ruletaColorTitulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    color: #ffffff;
    background: none;
    -webkit-text-fill-color: initial;
}

.ruletaColorIcono {
    display: inline-flex;
    align-items: center;
    font-size: 1.5rem;
    line-height: 1;
}

/* Controles modernos: agrupación del input */
.ruletaColorControlesModerna {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 14px 20px;
    border-radius: var(--radio-normal, 12px);
    background: var(--fondo-tarjeta, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--borde);
}

.ruletaColorInputGroup {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ruletaColorLabel {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-texto);
    letter-spacing: 0.01em;
}

.ruletaColorInput {
    padding: 8px 12px;
    border-radius: var(--radio-normal, 10px);
    border: 2px solid var(--borde);
    width: 72px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--fondo-secundario, transparent);
    color: var(--color-texto);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.ruletaColorInput:focus {
    outline: none;
    border-color: var(--color-resaltado);
    box-shadow: 0 0 0 3px rgba(var(--color-resaltado-rgb), 0.18);
}

/* Contenedor de la rueda con halo luminoso posterior */
.ruletaColorWheelWrapperModerna {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
    transition: filter var(--transicion);
}

/* Halo luminoso circular detrás de la rueda (z-index 0) — tamaño proporcional al disco SVG (89.5%) */
.ruletaColorWheelWrapperModerna::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 89.5%;
    height: 89.5%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.35s ease, box-shadow 0.35s ease;
}

/* Rueda SVG sobre el halo */
.ruletaColorWheel {
    position: relative;
    z-index: 2;
}

/* Halo temático: giro normal */
.ruletaColorWheelWrapperModerna.ruletaColorWheelWrapper--girando::before {
    opacity: 1;
    box-shadow:
        0 0 16px rgba(var(--color-resaltado-rgb), 0.50),
        0 0 35px rgba(var(--color-resaltado-rgb), 0.28);
    animation: haloPulsoTema 1.8s ease-in-out infinite alternate;
}

/* Halo naranja: giro acelerado */
.ruletaColorWheelWrapperModerna.ruletaColorWheelWrapper--acelerado::before {
    opacity: 1;
    box-shadow:
        0 0 20px rgba(230, 126, 34, 0.65),
        0 0 45px rgba(230, 126, 34, 0.35);
    animation: haloPulsoNaranja 0.75s ease-in-out infinite alternate;
}

@keyframes haloPulsoTema {
    from {
        box-shadow: 0 0 14px rgba(var(--color-resaltado-rgb), 0.40), 0 0 28px rgba(var(--color-resaltado-rgb), 0.20);
    }

    to {
        box-shadow: 0 0 22px rgba(var(--color-resaltado-rgb), 0.60), 0 0 44px rgba(var(--color-resaltado-rgb), 0.32);
    }
}

@keyframes haloPulsoVerde {
    from {
        box-shadow: 0 0 14px rgba(var(--color-resaltado-rgb), 0.40), 0 0 28px rgba(var(--color-resaltado-rgb), 0.20);
    }

    to {
        box-shadow: 0 0 22px rgba(var(--color-resaltado-rgb), 0.60), 0 0 44px rgba(var(--color-resaltado-rgb), 0.32);
    }
}

@keyframes haloPulsoNaranja {
    from {
        box-shadow: 0 0 18px rgba(230, 126, 34, 0.55), 0 0 36px rgba(230, 126, 34, 0.28);
    }

    to {
        box-shadow: 0 0 26px rgba(230, 126, 34, 0.78), 0 0 54px rgba(230, 126, 34, 0.42);
    }
}

/* Área de resultados */
.ruletaColorResultadosModerna {
    padding: 10px 0;
}

/* Modo día: ajustes de contraste */
body.modo-dia .ruletaColorTitulo {
    color: var(--color-titulo, #000000);
    background: none;
    -webkit-text-fill-color: initial;
}

body.modo-dia .ruletaColorControlesModerna {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

body.modo-dia .ruletaColorInput {
    background: rgba(0, 0, 0, 0.04);
}

body.modo-dia .ruletaColorWheelWrapperModerna.ruletaColorWheelWrapper--girando::before {
    box-shadow:
        0 0 14px rgba(var(--color-resaltado-rgb), 0.40),
        0 0 28px rgba(var(--color-resaltado-rgb), 0.22);
}

body.modo-dia .ruletaColorWheelWrapperModerna.ruletaColorWheelWrapper--acelerado::before {
    box-shadow:
        0 0 16px rgba(211, 84, 0, 0.50),
        0 0 35px rgba(211, 84, 0, 0.28);
}

/* ==========================================================
   TIRADOR DE DADOS
========================================================== */

#botonDados {
    background: var(--color-principal);
    color: var(--color-texto);
    box-shadow: var(--sombra-suave);
}

#botonDados:hover {
    background: var(--color-secundario);
}

.resultadoDadosContenedor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.resultadoDadosContenedor.dosColumnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    justify-items: center;
}

@media(max-width:500px) {
    .resultadoDadosContenedor.dosColumnas {
        grid-template-columns: 1fr;
    }
}

.filaTiradaDados {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: center;
    background: var(--color-tarjeta);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-grande, 20px);
    padding: 20px 28px;
    box-shadow: var(--sombra-suave);
    box-sizing: border-box;
}

.filaTiradaDados .dadosEnFila {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dadoCara {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    line-height: 1;
    color: var(--color-texto);
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    transition: transform .15s ease;
    user-select: none;
}

.dadoCara.rodando {
    filter: blur(.6px);
    transform: scale(1.08) rotate(4deg);
}

.etiquetaTiradaDados {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-texto);
    text-align: center;
    width: 100%;
    margin-top: 6px;
    letter-spacing: 0.01em;
}

@media(max-width:700px) {
    .dadoCara {
        font-size: 4rem;
    }
    .filaTiradaDados {
        padding: 16px 20px;
    }
}


/* ==========================================================
   FIX SCROLL ANCHORING (GLOBAL)
   Desactivamos el ajuste automático de scroll del navegador
   en toda la página. Este mecanismo intenta "anclar" el
   scroll cuando detecta cambios de altura en cualquier punto
   del documento (por ejemplo, al abrir paneles de filtro
   grandes como "Nombre del pack" o "Mundo"), y puede entrar
   en conflicto con nuestro propio cálculo del menú flotante,
   causando saltos al hacer scroll lento hacia arriba.
========================================================== */

html {
    overflow-anchor: none;
}


/* ==========================================================
   FICHA DE SOLAR - INFO EN DOS COLUMNAS CON ICONOS
========================================================== */

.fichaSolarInfoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 24px;
    margin-top: 10px;
}

.fichaSolarColumna {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.fichaSolarItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.fichaSolarIconoWrap {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fichaSolarIcono {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.fichaSolarIconoFallback {
    font-size: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(max-width:600px) {
    .fichaSolarInfoGrid {
        grid-template-columns: 1fr;
    }
}

.fichaSolarColumnaIzquierda {
    margin-top: 2px;
}

.fichaSolarColumnaDerecha {
    margin-top: 2px;
}

.fichaSolarIconoWrapBarrio {
    width: 62px;
    height: 62px;
}

.fichaSolarIconoBarrio {
    width: 62px;
    height: 62px;
}

/* Icono de Tipo de solar en la Ficha del Solar (Modo Día / Modo Noche reactivo) */
.fichaSolarIconoWrapTipoSolar,
.fichaSolarIconoWrap:has(.fichaSolarIconoTipoSolar) {
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}

.fichaSolarIconoTipoSolar {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain;
    display: block;
    position: relative;
    left: -80px;
    filter: drop-shadow(80px 0 0 var(--color-resaltado));
    transition: filter var(--transicion, 0.25s ease);
}

body.modo-dia .fichaSolarIconoTipoSolar {
    filter: drop-shadow(80px 0 0 var(--color-resaltado)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

body.modo-noche .fichaSolarIconoTipoSolar {
    filter: drop-shadow(80px 0 0 var(--color-resaltado)) drop-shadow(0 0 6px var(--color-resaltado));
}


/* ==========================================================
   BUSCADOR DE SOLAR POR NOMBRE
========================================================== */

.buscadorNombreWrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

#inputBuscarNombreSolar {
    width: min(100%, 440px);
    padding: 12px 22px;
    border-radius: var(--radio-grande, 22px);
    border: 1.5px solid var(--borde);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    color: var(--color-texto);
    font-family: inherit;
    font-size: 1rem;
    box-shadow: var(--sombra-suave);
    outline: none;
    transition: all 0.25s ease;
}

body.modo-dia #inputBuscarNombreSolar {
    background: rgba(255, 255, 255, 0.75);
}

#inputBuscarNombreSolar::placeholder {
    color: var(--color-subtexto, inherit);
    opacity: 0.65;
}

body.modo-dia #inputBuscarNombreSolar::placeholder {
    color: var(--color-texto-secundario, #555555);
    opacity: 0.65;
}

#inputBuscarNombreSolar:focus {
    border-color: var(--color-resaltado);
    box-shadow: 0 0 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
    background: rgba(0, 0, 0, 0.32);
}

body.modo-dia #inputBuscarNombreSolar:focus {
    background: rgba(255, 255, 255, 0.92);
}

.botonFiltro.filtroBloqueado {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================
   ETAPAS DE VIDA (COMPOSICIÓN DE LA VIVIENDA EN RETOS)
========================================================== */

.tiraIconosEtapas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.chipIconoEtapa {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borde);
    transition: transform 0.15s;
}

.chipIconoEtapa:hover {
    transform: scale(1.1);
}

.iconoEtapa {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.chipIconoEtapaCantidad {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: var(--color-resaltado);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-suave);
}

.chipEtapaTexto {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 4px 8px;
}


/* ==========================================================
   LIMITANTES EXTRA (CONSTRUIR / COMPRAR)
========================================================== */

.tiraLimitantes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.chipLimitante {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borde);
    overflow: hidden;
    transition: transform 0.15s;
}

.chipLimitante:hover {
    transform: scale(1.08);
}

.iconoLimitante {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chipLimitanteFallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.62rem;
    line-height: 1.15;
    padding: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: white;
}

.chipLimitanteTexto {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 6px 10px;
}

/* ==========================================================
   TRUCOS
========================================================== */

.truco-copiable {
    color: var(--color-resaltado);
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    transition: filter 0.2s;
}

.truco-copiable:hover {
    filter: brightness(1.15);
}

.contenidoTrucos {
    max-width: 700px;
    margin: 0 auto;
}

.contenidoTrucos h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    text-align: left;
}

.contenidoTrucos h4 {
    margin-top: 20px;
    margin-bottom: 8px;
    color: var(--color-titulo);
}

.contenidoTrucos p {
    margin-bottom: 10px;
    line-height: 1.6;
}


/* ==========================================================
   BOTONES DE TRUCOS Y MENÚ (RESPETAN MODO DÍA/NOCHE)
========================================================== */

#botonEstadisticas,
#botonTrucos,
#botonTrucosConstruir,
#botonTrucosCAS,
#botonTrucosVivir,
#botonTrucosPacks,
.botonVolverTrucos {
    background: var(--color-principal);
    color: var(--color-texto);
    box-shadow: var(--sombra-suave);
}

#botonEstadisticas:hover,
#botonTrucos:hover,
#botonTrucosConstruir:hover,
#botonTrucosCAS:hover,
#botonTrucosVivir:hover,
#botonTrucosPacks:hover,
.botonVolverTrucos:hover {
    background: var(--color-secundario);
}


/* ==========================================================
   ESTADÍSTICAS SIMS 4
========================================================== */

.estatSubtitulo {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 10px 0 14px;
    color: var(--color-titulo);
    opacity: 0.9;
}

/* ── Cards de resumen superior ─────────────────────────── */
.estadisticasResumen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0 18px;
}

@media (max-width: 680px) {
    .estadisticasResumen {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 380px) {
    .estadisticasResumen {
        grid-template-columns: 1fr;
    }
}

.estadResumenCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px 14px;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    box-shadow: var(--sombra-suave);
    transition: transform var(--transicion), box-shadow var(--transicion);
    text-align: center;
    min-width: 0;
    cursor: help;
}

.estadResumenCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-normal);
}

.estatCardTiempoClickable {
    cursor: pointer;
    border-color: var(--color-resaltado);
    background: linear-gradient(135deg, var(--color-tarjeta), rgba(var(--resaltado-rgb, 52, 152, 219), 0.08));
}

.estatCardTiempoClickable:hover {
    border-color: var(--color-resaltado);
    box-shadow: 0 0 14px rgba(var(--resaltado-rgb, 52, 152, 219), 0.3), var(--sombra-normal);
}

.estatCardTiempoHint {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 2px;
}

.estatResumenIcono {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 2px;
}

.estatResumenValor {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--color-resaltado);
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estatResumenLabel {
    font-size: 0.75rem;
    opacity: 0.72;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Panel de tiempo por pack ───────────────────────── */
.estatTiempoPanel {
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--color-resaltado);
    border-radius: var(--radio-grande);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(var(--resaltado-rgb, 52, 152, 219), 0.15);
    margin-bottom: 18px;
    overflow: hidden;
    animation: estatPanelIn 0.28s cubic-bezier(.23, 1, .32, 1);
}

@keyframes estatPanelIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.estatTiempoPanelCabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--borde);
    background: rgba(var(--resaltado-rgb, 52, 152, 219), 0.07);
}

.estatTiempoPanelTitulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-titulo);
}

.estatTiempoPanelCerrar {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--color-texto);
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: var(--radio-pequeño, 8px);
}

.estatTiempoPanelCerrar:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.estatTiempoPanelCuerpo {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Grupos de tipo de pack (acordeón) */
.estatTiempoPorTipo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.estatTipoGrupo {
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    overflow: hidden;
}

.estatTipoGrupoHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.08);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-titulo);
    user-select: none;
    transition: background 0.2s;
}

.estatTipoGrupoHeader:hover {
    background: rgba(var(--resaltado-rgb, 52, 152, 219), 0.12);
}

.estatTipoGrupoChevron {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.25s;
    opacity: 0.6;
}

.estatTipoGrupo.abierto .estatTipoGrupoChevron {
    transform: rotate(180deg);
}

.estatTipoGrupoBadge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(var(--resaltado-rgb, 52, 152, 219), 0.18);
    color: var(--color-resaltado);
}




/* Estilo de marco de ventana para bloques compartibles */
.estatBloqueVentana {
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande, 16px);
    padding: 22px 24px;
    margin: 22px 0;
    box-shadow: var(--sombra-suave);
    position: relative;
    box-sizing: border-box;
    transition: box-shadow var(--transicion), border-color var(--transicion);
}

.estatPackIconoBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.estatPackIconoImg {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
    opacity: 0.85;
    transition: filter 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
}

.estatPackIconoBtn:hover img.estatPackIconoImg {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    transform: translateY(-3px) scale(1.12);
    opacity: 1;
}

/* Pack Seleccionado: Destello brillante (halo aura) sin marco cuadrado */
.estatPackIconoBtn.seleccionado img.estatPackIconoImg {
    filter: drop-shadow(0 0 8px var(--color-resaltado)) drop-shadow(0 0 16px rgba(52, 152, 219, 0.85)) drop-shadow(0 0 24px rgba(52, 152, 219, 0.5));
    transform: scale(1.16);
    opacity: 1;
}

.estatPackIconoBtn.seleccionado:hover img.estatPackIconoImg {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 18px var(--color-resaltado)) drop-shadow(0 0 26px rgba(52, 152, 219, 0.6));
    transform: scale(1.18);
}

/* Grid más compacto sin nombres */
.estatTipoIconoGrid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.04);
}

.estatTipoGrupo.abierto .estatTipoIconoGrid {
    display: grid;
    animation: estatGridIn 0.2s ease;
}

/* Cabecera del resultado: icono del pack + nombre/fecha a la derecha */
.estatTiempoPackCabecera {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.estatTiempoPackImg {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px var(--color-resaltado)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.estatTiempoPackTexto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    min-width: 0;
}

/* Resultado del tiempo calculado */
.estatTiempoResultado {
    padding: 16px 20px;
    background: rgba(var(--resaltado-rgb, 52, 152, 219), 0.07);
    border: 1px solid rgba(var(--resaltado-rgb, 52, 152, 219), 0.25);
    border-radius: var(--radio-normal);
    text-align: center;
    animation: estatPanelIn 0.25s ease;
}

.estatTiempoPackNombre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-titulo);
    margin-bottom: 3px;
}

.estatTiempoFechaLanzamiento {
    font-size: 0.78rem;
    opacity: 0.65;
    margin-bottom: 14px;
}

.estatTiempoContadores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.estatTiempoContadorItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.estatTiempoNum {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-resaltado);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.estatTiempoUni {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
}

.estatTiempoContadorSep {
    font-size: 1.6rem;
    opacity: 0.3;
    font-weight: 300;
    align-self: flex-start;
    padding-top: 6px;
}

/* ==========================================================
   ESTADÍSTICAS SIMS 4
========================================================== */

#ventanaEstadisticas {
    max-width: 1100px;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.estatSubtitulo {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 10px 0 14px;
    color: var(--color-titulo);
    opacity: 0.9;
}



/* ── Controles de filtro ───────────────────────────────── */
.estadisticasControles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 18px 20px;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    margin-bottom: 16px;
    box-shadow: var(--sombra-suave);
    /* Z-index alto para que el dropdown quede por encima de las tarjetas de la lista */
    position: relative;
    z-index: 100;
}

.estatControlBusqueda {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 220px;
    background: rgba(0, 0, 0, 0.25);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-grande, 16px);
    padding: 8px 16px;
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    transition: all 0.3s ease;
    box-shadow: var(--sombra-suave);
    box-sizing: border-box;
}

body.modo-dia .estatControlBusqueda {
    background: rgba(255, 255, 255, 0.65);
    border-color: var(--borde);
}

.estatControlBusqueda:hover {
    border-color: var(--color-resaltado);
}

.estatControlBusqueda:focus-within {
    border-color: var(--color-resaltado);
    box-shadow: 0 0 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
    background: rgba(0, 0, 0, 0.32);
}

body.modo-dia .estatControlBusqueda:focus-within {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--color-resaltado);
    box-shadow: 0 0 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
}

.estatBusquedaIcono {
    font-size: 1.15rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.estatControlBusqueda input,
#estatBuscarTexto {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 1rem;
    color: var(--color-texto);
    font-family: inherit;
    padding: 4px 0;
}

.estatControlBusqueda input::placeholder,
#estatBuscarTexto::placeholder {
    color: var(--color-subtexto, inherit);
    opacity: 0.65;
}

body.modo-dia .estatControlBusqueda input::placeholder,
body.modo-dia #estatBuscarTexto::placeholder {
    color: var(--color-texto-secundario, #555555);
    opacity: 0.65;
}

.estatControlGrupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 1 auto;
}

.estatLabel {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* ── Trigger Buttons Personalizados (Fecha y Select) ──── */
.estatCustomTriggerBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    height: 38px;
    box-sizing: border-box;
    border-radius: var(--radio-pequeño);
    font-size: 0.88rem;
    font-family: inherit;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: all var(--transicion);
    min-width: 130px;
}

body.modo-noche .estatCustomTriggerBtn,
body.modo-noche .estatInputPrecio {
    background: rgba(55, 55, 65, 0.85);
    color: #ebebeb;
    border: 1px solid var(--borde);
}

body.modo-dia .estatCustomTriggerBtn,
body.modo-dia .estatInputPrecio {
    background: rgba(255, 255, 255, 0.9);
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.22);
}

.estatCustomTriggerBtn:hover {
    border-color: var(--color-resaltado);
    box-shadow: 0 2px 8px rgba(var(--color-resaltado-rgb), 0.2);
}

.estatTriggerArrow {
    font-size: 0.68rem;
    opacity: 0.6;
    transition: transform var(--transicion);
}

.estatCustomTriggerBtn.abierto .estatTriggerArrow {
    transform: rotate(180deg);
}

.estatInputPrecio {
    padding: 8px 12px;
    border-radius: var(--radio-pequeño);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    width: 80px;
    /* Misma altura que los trigger buttons: se estira automáticamente */
    height: 38px;
    box-sizing: border-box;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.estatInputPrecio:focus {
    border-color: var(--color-resaltado);
    box-shadow: 0 0 0 2px rgba(var(--color-resaltado-rgb), 0.25);
}

.estatSeparador {
    opacity: 0.5;
    font-weight: bold;
}

/* ── Menú Desplegable Personalizado (Tipo de Pack) ──── */
.estatCustomDropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    border-radius: var(--radio-normal);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: var(--sombra-normal);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: estatPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes estatPopIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.modo-noche .estatCustomDropdown {
    background: rgba(35, 37, 45, 0.95);
    border: 1px solid var(--borde);
}

body.modo-dia .estatCustomDropdown {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.18);
}

.estatDropdownItem {
    padding: 8px 12px;
    border-radius: var(--radio-pequeño);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion);
    color: var(--color-texto);
    display: flex;
    align-items: center;
    gap: 8px;
}

.estatDropdownItem:hover {
    background: rgba(var(--color-resaltado-rgb), 0.18);
    color: var(--color-resaltado);
}

.estatDropdownItem.activa {
    background: var(--color-resaltado);
    color: #ffffff !important;
    font-weight: 700;
}

/* ── Modal Selector de Fecha Paso a Paso ─────────────── */
.estatDatePickerModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.estatDatePickerOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.estatDatePickerCard {
    position: relative;
    width: 90%;
    max-width: 420px;
    border-radius: var(--radio-grande);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: var(--sombra-fuerte);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 2;
    animation: estatModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes estatModalPop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

body.modo-noche .estatDatePickerCard {
    background: rgba(30, 32, 40, 0.95);
    border: 1px solid var(--borde);
    color: #ffffff;
}

body.modo-dia .estatDatePickerCard {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #111111;
}

.estatDatePickerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.estatDatePickerTitle {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-titulo);
}

.estatDatePickerClose {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-texto);
    opacity: 0.6;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: opacity var(--transicion);
}

.estatDatePickerClose:hover {
    opacity: 1;
}

.estatDatePickerBreadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--radio-pequeño);
}

body.modo-dia .estatDatePickerBreadcrumbs {
    background: rgba(0, 0, 0, 0.04);
}

.estatStepItem {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transicion), color var(--transicion);
}

.estatStepItem.activa {
    opacity: 1;
    color: var(--color-resaltado);
    font-weight: 800;
}

.estatStepSep {
    opacity: 0.4;
}

.estatDatePickerBody {
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Grillas por tipo de paso */
.estatGridYears {
    grid-template-columns: repeat(3, 1fr);
}

.estatGridMonths {
    grid-template-columns: repeat(3, 1fr);
}

.estatGridDays {
    grid-template-columns: repeat(7, 1fr);
}

.estatPickerBtn {
    padding: 10px 6px;
    border-radius: var(--radio-pequeño);
    border: 1px solid var(--borde);
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-texto);
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicion);
    text-align: center;
}

body.modo-noche .estatPickerBtn {
    background: rgba(255, 255, 255, 0.06);
}

.estatPickerBtn:hover {
    background: var(--color-resaltado);
    color: #ffffff !important;
    border-color: var(--color-resaltado);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(var(--color-resaltado-rgb), 0.3);
}

.estatPickerBtnDayHeader {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    opacity: 0.5;
    padding: 4px 0;
    text-transform: uppercase;
}

.estatDatePickerFooter {
    display: flex;
    justify-content: flex-end;
}

.estatBtnSecundario {
    padding: 8px 14px;
    border-radius: var(--radio-pequeño);
    border: 1px solid var(--borde);
    background: transparent;
    color: var(--color-texto);
    font-size: 0.84rem;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transicion);
}

.estatBtnSecundario:hover {
    opacity: 1;
}

/* ── Barras deslizadoras Aero / Chrome ─────────────────── */
.graficoScrollHoriz::-webkit-scrollbar,
.estatDatePickerBody::-webkit-scrollbar,
#ventanaEstadisticas::-webkit-scrollbar {
    height: 9px;
    width: 8px;
}

.graficoScrollHoriz::-webkit-scrollbar-track,
.estatDatePickerBody::-webkit-scrollbar-track,
#ventanaEstadisticas::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}

body.modo-noche .graficoScrollHoriz::-webkit-scrollbar-track,
body.modo-noche .estatDatePickerBody::-webkit-scrollbar-track,
body.modo-noche #ventanaEstadisticas::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}

.graficoScrollHoriz::-webkit-scrollbar-thumb,
.estatDatePickerBody::-webkit-scrollbar-thumb,
#ventanaEstadisticas::-webkit-scrollbar-thumb {
    background: var(--superficie-indicador, rgba(var(--color-resaltado-rgb), 0.45));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

.graficoScrollHoriz::-webkit-scrollbar-thumb:hover,
.estatDatePickerBody::-webkit-scrollbar-thumb:hover,
#ventanaEstadisticas::-webkit-scrollbar-thumb:hover {
    background: var(--superficie-indicador-hover, var(--color-resaltado));
}

.estatBtnBorrar {
    padding: 8px 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeño);
    background: rgba(229, 57, 53, 0.18);
    color: var(--color-texto);
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: background var(--transicion), transform var(--transicion);
    align-self: flex-end;
    white-space: nowrap;
}

.estatBtnBorrar:hover {
    background: rgba(229, 57, 53, 0.32);
    transform: scale(1.03);
}

/* ── Contador ──────────────────────────────────────────── */
.estatContador {
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.75;
    margin: 6px 0 12px;
    font-style: italic;
}

/* ── Toggle Lista / Gráficos ───────────────────────────── */
.estatToggleVista {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}

.estatBtnVista {
    padding: 9px 24px;
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-grande);
    background: transparent;
    color: var(--color-texto);
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicion);
    opacity: 0.75;
}

.estatBtnVista:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.estatBtnVista.activa {
    background: var(--color-resaltado);
    color: #ffffff !important;
    border-color: var(--color-resaltado);
    opacity: 1;
    box-shadow: 0 4px 15px rgba(var(--color-resaltado-rgb), 0.35);
}

/* ── Vista Lista ───────────────────────────────────────── */
.estatVistaLista {
    width: 100%;
}

#estatListaPacks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 30px;
}

.packCardEstat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    box-shadow: var(--sombra-suave);
    transition: transform var(--transicion), box-shadow var(--transicion);
    animation: estatFadeIn 0.3s ease forwards;
}

@keyframes estatFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.packCardEstat:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-normal);
}

.packCardImgWrap {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.packIconoEstat {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    transition: transform var(--transicion), filter var(--transicion);
}

.packCardEstat:hover .packIconoEstat {
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.packIconoFallback {
    font-size: 1.8rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.packCardInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.packCardCabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ID Badge a color con tooltip */
.packBadgeId {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.05em;
    cursor: help;
    font-family: monospace, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.packNombreEstat {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-texto);
}

.packBadges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.packBadgeTipo {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-block;
}

.packNotaGratis {
    font-size: 0.8rem;
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    width: fit-content;
}

.packCardDatos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.packFechaEstat {
    font-size: 0.84rem;
    opacity: 0.75;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .packFechaEstat {
        min-width: 0;
        white-space: normal;
        flex-shrink: 1;
    }
}

.packPrecioWrap {
    display: flex;
    align-items: center;
    min-width: 85px;
    flex-shrink: 0;
}

.packPrecio {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-advertencia);
    background: rgba(255, 213, 74, 0.14);
    padding: 2px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 213, 74, 0.3);
}

.packPrecioGratis {
    color: #10B981;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.3);
}

.packObjetos {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid var(--borde);
    padding: 3px 10px;
    border-radius: 100px;
}

body.modo-dia .packObjetos {
    background: rgba(0, 0, 0, 0.04);
}

.packObjetosIcono {
    font-size: 0.9rem;
}

.packObjetosNum {
    font-weight: 800;
    color: var(--color-resaltado);
}

.packObjetosLabel {
    opacity: 0.7;
}

.packObjetosNA {
    opacity: 0.6;
    font-style: italic;
}

.packSolares {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid var(--borde);
    padding: 3px 10px;
    border-radius: 100px;
}

body.modo-dia .packSolares {
    background: rgba(0, 0, 0, 0.04);
}

.packSolaresIcono {
    font-size: 0.9rem;
}

.packSolaresNum {
    font-weight: 800;
    color: var(--color-resaltado);
}

.packSolaresLabel {
    opacity: 0.7;
}

/* ── Vista Gráficos ────────────────────────────────────── */
.estatVistaGraficos {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.estatInstruccionesGraficos {
    background: rgba(var(--color-resaltado-rgb), 0.12);
    border: 1px solid rgba(var(--color-resaltado-rgb), 0.3);
    border-radius: var(--radio-pequeño);
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 0.86rem;
    text-align: center;
    color: var(--color-texto);
}

.estatInstruccionesGraficos kbd {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borde);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
}

body.modo-dia .estatInstruccionesGraficos kbd {
    background: rgba(255, 255, 255, 0.7);
}

.graficosGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .graficosGrid {
        grid-template-columns: 1fr;
    }
}

.graficoBloque {
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    box-shadow: var(--sombra-suave);
    padding: 16px 16px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow var(--transicion);
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.graficoBloqueAncho {
    grid-column: 1 / -1;
}

.graficoBloque:hover {
    box-shadow: var(--sombra-normal);
}

/* ── Panel Desplegable de Detalle de Lanzamientos (Mes / Día) ── */
.estatDetalleGraficoPanel {
    margin-top: 14px;
    padding: 16px;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    box-shadow: var(--sombra-suave);
    animation: estatSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
}

@keyframes estatSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.estatDetalleHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borde);
}

.estatDetalleTituloWrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.estatDetalleTitulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-texto);
}

.estatDetalleBadgeCount {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--color-primario, #2563EB);
    border: 1px solid rgba(37, 99, 235, 0.28);
}

body.modo-noche .estatDetalleBadgeCount {
    background: rgba(58, 237, 237, 0.15);
    color: #3aeded;
    border-color: rgba(58, 237, 237, 0.35);
}

.estatDetalleBtnCerrar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-texto);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

body.modo-noche .estatDetalleBtnCerrar {
    background: rgba(255, 255, 255, 0.08);
}

.estatDetalleBtnCerrar:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    transform: scale(1.08);
}

.estatDetalleLista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 440px;
    overflow-y: auto;
    padding-right: 4px;
}

.estatDetallePackCard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
    box-sizing: border-box;
}

body.modo-noche .estatDetallePackCard {
    background: rgba(255, 255, 255, 0.03);
}

.estatDetallePackCard:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.06);
    box-shadow: var(--sombra-suave);
}

body.modo-noche .estatDetallePackCard:hover {
    background: rgba(255, 255, 255, 0.07);
}

.estatDetallePackImgWrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.estatDetallePackImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.estatDetallePackInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.estatDetallePackRowTop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.estatDetallePackNombre {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-texto);
}

.estatDetallePackRowBottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.estatDetallePackFecha {
    font-size: 0.82rem;
    opacity: 0.75;
    white-space: nowrap;
}

.estatDetalleVacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    text-align: center;
    gap: 6px;
    opacity: 0.85;
    font-size: 0.92rem;
}

.graficoCabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.graficoCabeceraConControles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.graficoTitulo {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    opacity: 0.92;
    margin: 0;
}

/* .graficoBtnCompartir: idéntico en apariencia y hover al botón .compartir de ventana */
.graficoBtnCompartir {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent;
    color: var(--color-texto);
    cursor: pointer;
    transition: all .25s;
    flex-shrink: 0;
}

.graficoBtnCompartir:hover {
    background: rgba(33, 150, 243, 0.85) !important;
    color: white !important;
    box-shadow:
        0 0 8px rgba(33, 150, 243, .65),
        0 0 18px rgba(33, 150, 243, .45),
        0 0 30px rgba(33, 150, 243, .25) !important;
    transform: scale(1.10);
}

.graficoBtnCompartir svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
    pointer-events: none;
}

.graficoContainerNoScroll {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.graficoScrollHoriz {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    /* Scrollbar Aero: gris traslúcido (Chrome 121+, Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 120, 0.40) transparent;
    padding-bottom: 10px;
    position: relative;
    cursor: grab;
    user-select: none;
    border-radius: 6px;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}

body.modo-noche .graficoScrollHoriz {
    scrollbar-color: rgba(200, 200, 200, 0.28) transparent;
}

.graficoScrollHoriz:active {
    cursor: grabbing;
}

/* ── Barras deslizadoras Aero (gris traslúcido estilo Chrome) ── */
.graficoScrollHoriz::-webkit-scrollbar {
    height: 8px;
}

.graficoScrollHoriz::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

/* ── Tooltip flotante para gráficos ────────────────── */
.estatGraficoTooltip {
    position: fixed;
    z-index: 100000;
    padding: 8px 14px;
    background: rgba(20, 24, 33, 0.94);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radio-pequeño);
    font-size: 0.84rem;
    font-family: inherit;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translate(-50%, -120%);
    transition: opacity 0.12s ease;
    white-space: nowrap;
    text-align: center;
    line-height: 1.35;
}

body.modo-dia .estatGraficoTooltip {
    background: rgba(255, 255, 255, 0.96);
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.graficoScrollHoriz::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.68);
    background-clip: padding-box;
}

body.modo-noche .graficoScrollHoriz::-webkit-scrollbar-thumb {
    background: rgba(200, 200, 200, 0.25);
    border: 2px solid transparent;
    background-clip: padding-box;
}

body.modo-noche .graficoScrollHoriz::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 200, 200, 0.50);
    background-clip: padding-box;
}

.graficoCanvas {
    height: 320px;
    display: block;
    border-radius: 6px;
    max-height: 320px;
}

/* Banner de precio total en gráficos */
.estatPrecioTotalBanner {
    text-align: center;
    padding: 10px 16px;
    background: rgba(var(--color-resaltado-rgb), 0.12);
    border: 1px solid rgba(var(--color-resaltado-rgb), 0.3);
    border-radius: var(--radio-pequeño);
    font-size: 0.95rem;
    color: var(--color-texto);
}

.estatPrecioTotalBanner strong {
    color: var(--color-resaltado);
    font-size: 1.1rem;
}

/* Controles de líneas para gráfico temporal */
.estatControlesLineas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.estatBtnLinea {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1.5px solid var(--borde);
    background: transparent;
    color: var(--color-texto);
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicion);
    opacity: 0.5;
}

.estatBtnLinea.activa {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.modo-dia .estatBtnLinea.activa {
    background: rgba(0, 0, 0, 0.06);
}

.estatColorDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Estados cargando / sin resultados ─────────────────── */
.estatCargando,
.estatSinResultados,
.estatError {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 50px 20px;
    text-align: center;
    opacity: 0.75;
}

.estatSpinner {
    width: 38px;
    height: 38px;
    border: 3px solid var(--borde);
    border-top-color: var(--color-resaltado);
    border-radius: 50%;
    animation: statSpin 0.8s linear infinite;
}

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

/* ── Modal Flotante de Selector de Packs por Categoría ── */
.modalPacksFlotante {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.modalPacksFlotante.activo {
    display: flex !important;
}

.overlayPacksFlotante {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.modo-dia .overlayPacksFlotante {
    background: rgba(0, 0, 0, 0.25);
}

.cardPacksFlotante {
    position: relative;
    z-index: 2;
    width: 92%;
    max-width: 680px;
    max-height: 85vh;
    background: var(--superficie-bg, var(--color-tarjeta));
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande, 20px);
    box-shadow: var(--sombra-fuerte, 0 20px 50px rgba(0, 0, 0, 0.35));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: animModalPacks 0.25s ease-out;
    color: var(--color-texto);
    backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px)));
    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px)));
}

body.modo-dia .cardPacksFlotante {
    background: var(--superficie-bg, var(--color-tarjeta));
    border-color: var(--borde);
    box-shadow: var(--sombra-fuerte, 0 20px 50px rgba(0, 0, 0, 0.15));
    color: var(--color-texto);
    backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px)));
    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px)));
}

.headerPacksFlotante {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borde);
    background: rgba(0, 0, 0, 0.15);
}

body.modo-dia .headerPacksFlotante {
    background: rgba(0, 0, 0, 0.04);
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

.headerPacksFlotante h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-titulo);
}

.headerPacksFlotante .cerrar {
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--color-texto);
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px;
    line-height: 1;
    transition: all 0.25s ease;
    user-select: none;
}

.headerPacksFlotante .cerrar:hover {
    background: rgba(229, 57, 53, 0.85) !important;
    color: white !important;
    box-shadow:
        0 0 8px rgba(229, 57, 53, .65),
        0 0 18px rgba(229, 57, 53, .45),
        0 0 30px rgba(229, 57, 53, .25) !important;
    transform: scale(1.10);
}

body.modo-dia .headerPacksFlotante .cerrar:hover {
    background: rgba(229, 57, 53, 0.85) !important;
    color: white !important;
}

.accionesPacksFlotante {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid var(--borde);
}

body.modo-dia .accionesPacksFlotante {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

#cuerpoModalPacks {
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.footerPacksFlotante {
    padding: 14px 20px;
    border-top: 1px solid var(--borde);
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.12);
}

body.modo-dia .footerPacksFlotante {
    background: rgba(0, 0, 0, 0.04);
    border-top-color: rgba(0, 0, 0, 0.12);
}

#listoModalPacksBtn {
    font-size: 1rem;
    padding: 10px 30px;
    background: var(--color-resaltado, #2ecc71);
    color: #ffffff;
    border: none;
    border-radius: var(--radio-normal);
    cursor: pointer;
    font-weight: bold;
    box-shadow: var(--sombra-suave);
    transition: transform 0.2s, background 0.2s;
}

#listoModalPacksBtn:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--color-resaltado) 85%, white 15%);
}

@keyframes animModalPacks {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Tarjetas de Categoría en Modo Desplegable */
.gridCategoriasDesplegables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 25px 0;
}

@media (max-width: 480px) {
    .gridCategoriasDesplegables {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .btnCategoriaDesplegable {
        padding: 16px 10px;
        font-size: 0.95rem;
    }
}

@media (max-width: 340px) {
    .gridCategoriasDesplegables {
        grid-template-columns: 1fr;
    }
}

/* Organización en dos filas para Packs al Azar en Modo Desplegable */
.gridCategoriasDesplegablesAzar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 25px 0;
}

.gridCategoriasDesplegablesAzar .filaCategoriasDesplegables {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 680px) {
    .gridCategoriasDesplegablesAzar .filaCategoriasDesplegables {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .gridCategoriasDesplegablesAzar .filaCategoriasDesplegables {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Colores de sección según Estadísticas Sims 4 gráficos */
.btnCategoriaDesplegable[data-cat="exp"] {
    --color-cat: #3aeded;
}

.btnCategoriaDesplegable[data-cat="cont"] {
    --color-cat: #2563EB;
}

.btnCategoriaDesplegable[data-cat="acc"] {
    --color-cat: #18d906;
}

.btnCategoriaDesplegable[data-cat="kits"] {
    --color-cat: #9c0cc0;
}

.btnCategoriaDesplegable[data-cat="kits-construir"] {
    --color-cat: #9c0cc0;
}

.btnCategoriaDesplegable[data-cat="kits-cas"] {
    --color-cat: #d946ef;
}

.btnCategoriaDesplegable[data-cat="kits-especiales"] {
    --color-cat: #9c0cc0;
}

.btnCategoriaDesplegable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 16px;
    background: color-mix(in srgb, var(--color-cat, white) 12%, rgba(255, 255, 255, 0.05));
    border: 2px solid color-mix(in srgb, var(--color-cat, var(--borde)) 50%, transparent);
    border-radius: var(--radio-normal, 12px);
    color: var(--color-texto);
    font-weight: bold;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-cat, transparent) 18%, transparent);
}

body.modo-dia .btnCategoriaDesplegable {
    background: color-mix(in srgb, var(--color-cat, white) 14%, rgba(255, 255, 255, 0.88));
    border: 2px solid color-mix(in srgb, var(--color-cat, black) 40%, transparent);
    color: #1f2937;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-cat, transparent) 15%, transparent);
}

.btnCategoriaDesplegable:hover {
    transform: translateY(-3px);
    border-color: var(--color-cat, var(--color-resaltado));
    background: color-mix(in srgb, var(--color-cat, white) 24%, rgba(255, 255, 255, 0.09));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-cat, #2ecc71) 45%, transparent);
}

body.modo-dia .btnCategoriaDesplegable:hover {
    background: color-mix(in srgb, var(--color-cat, white) 28%, rgba(255, 255, 255, 0.95));
    border-color: var(--color-cat, #27ae60);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-cat, #27ae60) 35%, transparent);
}

.btnCategoriaDesplegable .badgeConteoPacks {
    font-size: 0.85rem;
    font-weight: normal;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid color-mix(in srgb, var(--color-cat, var(--borde)) 40%, transparent);
    color: var(--color-subtexto, inherit);
}

body.modo-dia .btnCategoriaDesplegable .badgeConteoPacks {
    background: rgba(0, 0, 0, 0.08);
    border-color: color-mix(in srgb, var(--color-cat, rgba(0,0,0,0.15)) 40%, transparent);
    color: #444444;
}

/* ── Switch Modo Vista Packs ── */
.switchModoVista {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    user-select: none;
}

.switchModoVista .sliderSwitch {
    position: relative;
    width: 48px;
    height: 26px;
    background: rgba(0, 0, 0, 0.22);
    border: 1.5px solid var(--borde);
    border-radius: 20px;
    transition: background 0.3s ease, border-color 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
}

.switchModoVista .thumbSwitch {
    position: absolute;
    top: 2.5px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--color-resaltado, #3498db);
    border-radius: 50%;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Cuando el switch está en modo "lista" (checked) */
.switchModoVista input:checked~.sliderSwitch .thumbSwitch {
    left: 25px;
}

.switchModoVista input:checked~.sliderSwitch {
    background: rgba(var(--color-resaltado-rgb, 52, 152, 219), 0.3);
    border-color: var(--color-resaltado);
}

/* Anular el ::before global de .sliderSwitch — este switch usa .thumbSwitch en el DOM,
   no el pseudo-elemento. Sin esto aparece un círculo blanco fijo extra. */
.switchModoVista .sliderSwitch:before {
    display: none;
    content: none;
}

/* Switch Permitir Kits CAS (Modo Retos y Ruleta Desastres) */
.switchModoVista .sliderSwitchCAS {
    position: relative;
    width: 48px;
    height: 26px;
    background: rgba(0, 0, 0, 0.22);
    border: 1.5px solid var(--borde);
    border-radius: 20px;
    transition: background 0.3s ease, border-color 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
}

.switchModoVista .thumbSwitchCAS {
    position: absolute;
    top: 2.5px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #d946ef;
    border-radius: 50%;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.switchModoVista .sliderSwitchCAS:before {
    display: none;
    content: none;
}

body.modo-dia .switchModoVista .sliderSwitchCAS {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

/* =========================================================
   SECCIÓN TRUCOS Y BUSCADOR DE TRUCOS
   ========================================================= */

.contenedorBuscadorTrucos {
    position: relative;
    max-width: 680px;
    margin: 18px auto 26px auto;
    width: 100%;
}

.cajaEntradaBuscadorTrucos {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-grande, 16px);
    padding: 8px 16px;
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    transition: all 0.3s ease;
    box-shadow: var(--sombra-suave);
}

body.modo-dia .cajaEntradaBuscadorTrucos {
    background: rgba(255, 255, 255, 0.65);
    border-color: var(--borde);
}

.cajaEntradaBuscadorTrucos:focus-within {
    border-color: var(--color-resaltado);
    box-shadow: 0 0 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
    background: rgba(0, 0, 0, 0.32);
}

body.modo-dia .cajaEntradaBuscadorTrucos:focus-within {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--color-resaltado);
    box-shadow: 0 0 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
}

.iconoLupaBuscadorTrucos {
    font-size: 1.2rem;
    margin-right: 12px;
    opacity: 0.8;
}

.inputBuscadorTrucos,
#inputBuscadorTrucos {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-texto);
    font-size: 1rem;
    font-family: inherit;
    padding: 6px 0;
}

.inputBuscadorTrucos::placeholder,
#inputBuscadorTrucos::placeholder {
    color: var(--color-subtexto, inherit);
    opacity: 0.65;
}

body.modo-dia .inputBuscadorTrucos::placeholder,
body.modo-dia #inputBuscadorTrucos::placeholder {
    color: var(--color-texto-secundario, #555555);
    opacity: 0.65;
}

.btnLimpiarBuscador {
    background: transparent;
    border: none;
    color: var(--color-texto);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.btnLimpiarBuscador:hover {
    opacity: 1;
}

/* Desplegable de resultados de búsqueda de trucos */
.desplegableResultadosTrucos {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--color-tarjeta);
    border: 1.5px solid var(--color-resaltado);
    border-radius: var(--radio-normal, 12px);
    max-height: 380px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.modo-dia .desplegableResultadosTrucos {
    background: rgba(255, 252, 245, 0.98);
    border-color: #27ae60;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.itemResultadoTruco {
    padding: 12px 18px;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.itemResultadoTruco:last-child {
    border-bottom: none;
}

.itemResultadoTruco:hover,
.itemResultadoTruco.activoTeclado {
    background: rgba(52, 152, 219, 0.18);
}

body.modo-dia .itemResultadoTruco:hover,
body.modo-dia .itemResultadoTruco.activoTeclado {
    background: rgba(39, 174, 96, 0.14);
}

.infoResultadoTruco {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.tituloResultadoTruco {
    font-weight: bold;
    font-size: 0.98rem;
    color: var(--color-titulo);
    display: flex;
    align-items: center;
    gap: 8px;
}

.badgeCategoriaTruco {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--borde);
    font-weight: normal;
    color: var(--color-subtexto, inherit);
}

body.modo-dia .badgeCategoriaTruco {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: #444444;
}

.codigoResultadoTruco {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--color-resaltado);
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    display: inline-block;
}

body.modo-dia .codigoResultadoTruco {
    background: rgba(39, 174, 96, 0.15);
    color: #219653;
}

.descResultadoTruco {
    font-size: 0.85rem;
    opacity: 0.8;
    line-height: 1.3;
}

.flechaResultadoTruco {
    font-size: 1.1rem;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.itemResultadoTruco:hover .flechaResultadoTruco {
    transform: translateX(4px);
    opacity: 1;
}

/* ── Estilos de Trucos Copiables ── */
.truco-copiable {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.15);
    border: 1.5px dashed var(--color-resaltado, #2ecc71);
    color: var(--color-resaltado, #2ecc71);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-block;
    user-select: all;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.truco-copiable:hover {
    background: var(--color-resaltado, #2ecc71);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.45);
    border-style: solid;
}

.truco-copiable:focus,
.truco-copiable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
}

.truco-copiable:active {
    transform: translateY(0);
}

/* ── Animación de Resaltado al Redirigir a un Truco ── */
@keyframes efectoFlashTruco {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.8);
        background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
        transform: scale(1.02);
    }

    50% {
        box-shadow: 0 0 25px 8px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.6);
        background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.45);
        transform: scale(1.03);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--color-resaltado-rgb, 46, 204, 113), 0);
        background: transparent;
        transform: scale(1);
    }
}

.resaltado-truco-flash {
    animation: efectoFlashTruco 2.5s ease-out forwards;
    border-radius: 8px;
    padding: 6px 12px;
}

/* ==========================================================
   VENTANA RETOS OPCIONES - Rediseño estilo Ruleta de Desastres
   ========================================================== */

#ventanaRetosOpciones .subtituloVentana {
    text-align: center;
    margin: 0 auto 24px auto;
    max-width: 680px;
}

/* Grid de opciones rediseñado */
.gridOpcionesReto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.gridOpcionesRetoExtra {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* El contenedor flotante (Colores, Límite de Packs, Tamaño Solar)
   debe ocupar exactamente 1 celda del grid como el resto de botones */
.gridOpcionesReto .contenedorOpcionFlotante {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
}

/* El botón dentro del contenedor flotante ocupa 100% del alto y ancho de la celda */
.gridOpcionesReto .contenedorOpcionFlotante>.opcionFiltroReto {
    width: 100%;
    height: 100%;
    flex: 1;
}

/* Layout 2 columnas: Tipo de Reto + Limitantes Extra en pantallas anchas */
.seccionesRetoPequenas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 700px) {
    .seccionesRetoPequenas {
        grid-template-columns: 1fr;
    }
}

/* Botones toggle para opciones de reto */
.opcionFiltroReto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    min-height: 80px;
    border-radius: var(--radio-normal);
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid var(--borde);
    color: var(--color-texto);
    cursor: pointer;
    transition: var(--transicion);
    text-align: center;
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: var(--sombra-suave);
}

body.modo-dia .opcionFiltroReto {
    background: rgba(0, 0, 0, 0.05);
}

.opcionFiltroReto:hover {
    transform: translateY(-2px);
    opacity: 0.95;
    border-color: var(--color-secundario);
}

.opcionFiltroReto.seleccionada {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.22) !important;
    border-color: var(--color-resaltado, #2ecc71) !important;
    color: inherit !important;
    opacity: 1 !important;
    font-weight: bold;
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25);
}

body.modo-dia .opcionFiltroReto.seleccionada {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25) !important;
    border-color: var(--color-resaltado, #27ae60) !important;
    color: var(--color-resaltado, #1e8449) !important;
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 39, 174, 96), 0.2);
}

.iconoOpcionReto {
    font-size: 1.5rem;
    line-height: 1;
}

/* Contador de dificultad */
.contadorDificultadUI {
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
    font-size: 1.15rem;
    color: var(--color-secundario);
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
}

body.modo-dia .contadorDificultadUI {
    background: rgba(255, 255, 255, 0.4);
}

/* Submenús inline dentro de las secciones */
.submenuLimitanteInline {
    margin-top: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.12);
    padding: 16px;
    border-radius: var(--radio-normal);
    border: 1px solid var(--borde);
}

body.modo-dia .submenuLimitanteInline {
    background: rgba(255, 255, 255, 0.35);
}

/* ==========================================================
   RULETA DE DESASTRES (Estilos Verdes y Centrados)
   ========================================================== */

#botonRuletaDesastres {
    background: var(--color-principal);
    color: var(--color-texto);
    box-shadow: var(--sombra-suave);
}

#botonRuletaDesastres:hover {
    background: var(--color-secundario);
}

#ventanaRuletaDesastres .subtituloVentana {
    text-align: center;
    margin: 0 auto 24px auto;
    max-width: 680px;
}

.seccionConfigDesastres {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    padding: 20px 24px;
    margin-bottom: 20px;
}

body.modo-dia .seccionConfigDesastres {
    background: rgba(255, 255, 255, 0.45);
}

.seccionConfigDesastres h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.descripcionConfig {
    font-size: 0.92rem;
    opacity: 0.85;
    margin-bottom: 16px;
}

/* Botones Toggle de Categorías (Sin checkboxes ticks) */
.gridCheckboxesDesastres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

@media (max-width: 520px) {
    .gridCheckboxesDesastres {
        grid-template-columns: 1fr;
    }
}

.botonDesastreToggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-pequeño);
    padding: 12px 16px;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    user-select: none;
    opacity: 0.75;
}

body.modo-dia .botonDesastreToggle {
    background: rgba(0, 0, 0, 0.05);
}

.botonDesastreToggle:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.botonDesastreToggle.activo {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.22) !important;
    border-color: var(--color-resaltado, #2ecc71) !important;
    color: inherit !important;
    opacity: 1 !important;
    font-weight: bold;
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25);
}

body.modo-dia .botonDesastreToggle.activo {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25) !important;
    border-color: var(--color-resaltado, #27ae60) !important;
    color: var(--color-resaltado, #1e8449) !important;
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 39, 174, 96), 0.2);
}

.botonDesastreToggle .iconoDesastre {
    font-size: 1.25rem;
}

/* Campos de Formulario (Dinero e Intervalo) */
.formRowDinero,
.formRowIntervalo {
    display: flex;
    gap: 16px 24px;
    flex-wrap: wrap;
    align-items: center;
}

.formCampo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
}

.formCampo label {
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
}

.formCampo input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeño);
    color: inherit;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100px;
    max-width: 120px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

body.modo-dia .formCampo input {
    background: rgba(255, 255, 255, 0.75);
    color: #222;
}

.selectorModoRuleta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radioModoItem {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
}

.radioModoItem input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-resaltado, #2ecc71);
    cursor: pointer;
}

.accionesRuletaDesastres {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.btnGirarDestacado {
    background: linear-gradient(135deg, var(--color-resaltado, #2ecc71), color-mix(in srgb, var(--color-resaltado, #2ecc71) 75%, black)) !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    padding: 14px 30px !important;
    border-radius: 30px !important;
    box-shadow: 0 6px 20px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35) !important;
    border: none !important;
    cursor: pointer;
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.btnGirarDestacado:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.5) !important;
}

/* Adaptación responsive para los botones de Opciones de Reto en móvil */
@media (max-width: 700px) {
    #ventanaRetosOpciones .accionesRuletaDesastres {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #ventanaRetosOpciones .accionesRuletaDesastres .botonReto {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.95rem;
        padding: 12px 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* Generar Reto en posición destacada */
    #ventanaRetosOpciones #generarRetoBtn {
        font-size: 1.15rem !important;
        padding: 14px 22px !important;
        border-radius: 30px !important;
    }
}

/* Pantalla de Juego y Resultado (Centrada) */
.cabeceraJuegoDesastres {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.cuentaAtrasContenedor {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.15);
    border: 1px solid rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.4);
    border-radius: 20px;
    padding: 8px 18px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.cuentaAtrasContenedor.pausado {
    background: rgba(230, 126, 34, 0.15) !important;
    border-color: rgba(230, 126, 34, 0.6) !important;
    color: #e67e22 !important;
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.3) !important;
}

.timerDigits {
    font-family: monospace;
    font-size: 1.3rem;
    color: var(--color-resaltado, #2ecc71);
    transition: color 0.3s ease;
}

.cuentaAtrasContenedor.pausado .timerDigits {
    color: #e67e22 !important;
}

body.modo-dia .timerDigits {
    color: var(--color-resaltado, #27ae60);
}

/* ==========================================================
   ANIMACIÓN RULETA DE DESASTRES (SLOT VERTICAL TAMAÑO FIJO)
========================================================== */
.desastreVisorWrap {
    width: 100%;
    max-width: 620px;
    height: 270px;
    margin: 20px auto 25px auto;
    position: relative;
    box-sizing: border-box;
}

/* CUADRO DE BIENVENIDA INICIAL (OCUPA EL MISMO ESPACIO Y TAMAÑO EXACTO) */
.desastreBienvenida {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 24px;
    box-sizing: border-box;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 2px solid var(--borde);
    border-radius: var(--radio-grande, 20px);
    box-shadow: var(--sombra-fuerte), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/* CONTENEDOR DE ANIMACIÓN VERTICAL */
.desastreAnimacion {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 2px solid var(--borde);
    border-radius: var(--radio-grande, 20px);
    padding: 0;
    box-shadow: var(--sombra-fuerte), inset 0 0 20px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* DEGRADADOS SUPERIOR E INFERIOR PARA ENMASCARAR EN VERTICAL (DESTELLOS COLOR RESALTADO) */
.desastreAnimacion::before,
.desastreAnimacion::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 65px;
    z-index: 5;
    pointer-events: none;
}

.desastreAnimacion::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.85), transparent);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-resaltado, #2ECC71) 85%, transparent), transparent);
}

.desastreAnimacion::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.85), transparent);
    background: linear-gradient(to top, color-mix(in srgb, var(--color-resaltado, #2ECC71) 85%, transparent), transparent);
}

body.modo-dia .desastreAnimacion::before {
    background: linear-gradient(to bottom, rgba(var(--color-resaltado-dia-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-resaltado-dia, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

body.modo-dia .desastreAnimacion::after {
    background: linear-gradient(to top, rgba(var(--color-resaltado-dia-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to top, color-mix(in srgb, var(--color-resaltado-dia, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

body.modo-noche .desastreAnimacion::before {
    background: linear-gradient(to bottom, rgba(var(--color-resaltado-noche-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-resaltado-noche, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

body.modo-noche .desastreAnimacion::after {
    background: linear-gradient(to top, rgba(var(--color-resaltado-noche-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to top, color-mix(in srgb, var(--color-resaltado-noche, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

/* MARCO / SELECTOR VERDE CENTRAL FIJO (ENFOQUE VERTICAL) */
.desastreSelectorCentral {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 24px);
    max-width: 580px;
    height: 124px;
    border: 3px solid var(--color-resaltado, #2ECC71);
    border-radius: var(--radio-normal, 14px);
    box-shadow: 0 0 25px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.45), inset 0 0 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.2);
    pointer-events: none;
    z-index: 10;
    box-sizing: border-box;
}

/* PUNTEROS LATERALES (IZQUIERDA Y DERECHA) APUNTANDO HACIA EL CENTRO */
.desastreSelectorPunteroIzq,
.desastreSelectorPunteroDer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.desastreSelectorPunteroIzq {
    left: -12px;
    border-left: 12px solid var(--color-resaltado, #2ECC71);
    filter: drop-shadow(-2px 0 4px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.6));
}

.desastreSelectorPunteroDer {
    right: -12px;
    border-right: 12px solid var(--color-resaltado, #2ECC71);
    filter: drop-shadow(2px 0 4px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.6));
}

/* PISTA DE DESASTRES VERTICAL */
.desastreAnimacionPista {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    will-change: transform;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* TARJETA INDIVIDUAL DE DESASTRE EN LA PISTA VERTICAL */
.desastreAnim-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: calc(100% - 24px);
    max-width: 580px;
    height: 124px;
    min-height: 124px;
    max-height: 124px;
    padding: 10px 18px;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-normal, 14px);
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.modo-dia .desastreAnim-item {
    background: rgba(255, 255, 255, 0.88);
}

.desastreAnim-item--elegida {
    border-color: var(--color-resaltado) !important;
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.18) !important;
    box-shadow: 0 0 22px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.55) !important;
}

body.modo-dia .desastreAnim-item--elegida {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.22) !important;
}

.desastreItemIcono {
    font-size: 2.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 50px;
}

.desastreItemIcono img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.desastreItemContenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.desastreItemTitulo {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-resaltado);
    margin-bottom: 3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.modo-dia .desastreItemTitulo {
    color: var(--color-resaltado, #27ae60);
}

.desastreItemDesc {
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--color-texto);
    margin-bottom: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.desastreItemDetalle {
    font-size: 0.76rem;
    opacity: 0.75;
    font-style: italic;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accionesJuegoDesastres {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
}

/* Historial de Desastres */
.seccionHistorialDesastres {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal);
    padding: 20px;
}

body.modo-dia .seccionHistorialDesastres {
    background: rgba(255, 255, 255, 0.4);
}

.cabeceraHistorial {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cabeceraHistorial h3 {
    margin: 0;
    font-size: 1.1rem;
}

.botonSecundario {
    background: transparent;
    border: 1px solid var(--borde);
    color: inherit;
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transicion);
}

.botonSecundario:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.modo-dia .botonSecundario:hover {
    background: rgba(0, 0, 0, 0.08);
}

.listaHistorialDesastres {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 5px;
}

.itemHistorialDesastre {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radio-pequeño);
    padding: 10px 15px;
    font-size: 0.95rem;
}

body.modo-dia .itemHistorialDesastre {
    background: rgba(255, 255, 255, 0.6);
}

.horaHistorial {
    font-family: monospace;
    opacity: 0.65;
    font-size: 0.85rem;
}

.iconoHistorial {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iconoHistorial img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
}

.iconoPackResultado {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.textoHistorial {
    flex: 1;
}

.historialVacio {
    text-align: center;
    opacity: 0.6;
    padding: 20px;
    font-style: italic;
}

/* ==========================================================
   ESTILOS PREMIUM PARA TEMPORIZADOR DE RETOS
   ========================================================== */

/* Contenedor selector de minutos */
.controlMinutosWrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 16px;
    border-radius: var(--radio-normal);
    border: 1.5px solid var(--borde);
    box-shadow: var(--sombra-suave);
}

body.modo-dia .controlMinutosWrapper {
    background: rgba(255, 255, 255, 0.5);
}

.btnAjusteMinutos {
    background: var(--color-principal);
    color: var(--color-texto);
    border: 1px solid var(--borde);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion);
    user-select: none;
}

.btnAjusteMinutos:hover {
    background: var(--color-secundario);
    transform: scale(1.1);
}

#inputMinutosTemporizador {
    background: transparent;
    border: none !important;
    color: var(--color-texto);
    width: 90px;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 800;
    font-family: inherit;
    outline: none;
}

#inputMinutosTemporizador::-webkit-inner-spin-button,
#inputMinutosTemporizador::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#inputMinutosTemporizador {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Display digital de cuenta atrás */
.displayTemporizadorDigital {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 3.6rem;
    font-weight: 800;
    font-family: 'Courier New', Courier, monospace;
    color: #2ecc71;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(46, 204, 113, 0.5);
    border-radius: var(--radio-normal);
    padding: 16px 28px;
    margin: 24px auto;
    max-width: 320px;
    box-shadow: 0 0 24px rgba(46, 204, 113, 0.25);
    letter-spacing: 3px;
    transition: all 0.3s ease;
}

body.modo-dia .displayTemporizadorDigital {
    background: rgba(0, 0, 0, 0.04);
    color: #27ae60;
    border-color: rgba(39, 174, 96, 0.45);
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.displayTemporizadorDigital.pausado {
    color: #cf7017 !important;
    border-color: rgba(207, 112, 23, 0.6) !important;
    box-shadow: 0 0 24px rgba(207, 112, 23, 0.25) !important;
}

.iconoRelojDigital {
    font-size: 2.2rem;
}

/* Botones de acción en curso (Pausar y Detener) */
.accionesTemporizadorGrid {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.btnTimerAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 1.05rem;
    font-weight: bold;
    border-radius: var(--radio-normal);
    border: 1.5px solid var(--borde);
    cursor: pointer;
    transition: var(--transicion);
    box-shadow: var(--sombra-suave);
    min-width: 135px;
}

@media (max-width: 360px) {
    .accionesTemporizadorGrid {
        gap: 10px;
    }

    .btnTimerAction {
        min-width: 0;
        flex: 1;
        padding: 10px 12px;
        font-size: 0.92rem;
    }
}

/* Botón Pausar (estado normal/en marcha) -> NARANJA en Modo Día y Modo Noche */
#pausarTemporizador,
.btnTimerPause,
body.modo-dia #pausarTemporizador,
body.modo-noche #pausarTemporizador,
body.modo-dia .btnTimerPause,
body.modo-noche .btnTimerPause {
    background: #cf7017 !important;
    border: 3px solid #cf7017 !important;
    border-color: #cf7017 !important;
    color: #ffffff !important;
}

#pausarTemporizador:hover,
.btnTimerPause:hover,
body.modo-dia #pausarTemporizador:hover,
body.modo-noche #pausarTemporizador:hover,
body.modo-dia .btnTimerPause:hover,
body.modo-noche .btnTimerPause:hover {
    background: #e67e22 !important;
    border: 3px solid #e67e22 !important;
    border-color: #e67e22 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(207, 112, 23, 0.6) !important;
}

/* Botón Reanudar (estado en pausa) -> VERDE ELÉCTRICO en Modo Día y Modo Noche */
#pausarTemporizador.enPausa,
.btnTimerPause.enPausa,
body.modo-dia #pausarTemporizador.enPausa,
body.modo-noche #pausarTemporizador.enPausa,
body.modo-dia .btnTimerPause.enPausa,
body.modo-noche .btnTimerPause.enPausa {
    background: #00c853 !important;
    border: 3px solid #00e676 !important;
    border-color: #00e676 !important;
    color: #ffffff !important;
}

#pausarTemporizador.enPausa:hover,
.btnTimerPause.enPausa:hover,
body.modo-dia #pausarTemporizador.enPausa:hover,
body.modo-noche #pausarTemporizador.enPausa:hover,
body.modo-dia .btnTimerPause.enPausa:hover,
body.modo-noche .btnTimerPause.enPausa:hover {
    background: #00e676 !important;
    border: 3px solid #00c853 !important;
    border-color: #00c853 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(0, 230, 118, 0.65) !important;
}

/* Botón Detener -> ROJO en Modo Día y Modo Noche */
#detenerTemporizador,
.btnTimerStop,
body.modo-dia #detenerTemporizador,
body.modo-noche #detenerTemporizador,
body.modo-dia .btnTimerStop,
body.modo-noche .btnTimerStop {
    background: #e60000 !important;
    border: 3px solid #cc2e2e !important;
    border-color: #cc2e2e !important;
    color: #ffffff !important;
}

#detenerTemporizador:hover,
.btnTimerStop:hover,
body.modo-dia #detenerTemporizador:hover,
body.modo-noche #detenerTemporizador:hover,
body.modo-dia .btnTimerStop:hover,
body.modo-noche .btnTimerStop:hover {
    background: #ff1a1a !important;
    border: 3px solid #e60000 !important;
    border-color: #e60000 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(230, 0, 0, 0.6) !important;
}

.iconoTimerAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}

.iconoTimerAction svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* ==========================================================
   RANDOMIZADOR DE HABILIDADES
   ========================================================== */
.habNumeroWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 25px 0 20px;
}

.habNumeroBtn {
    width: 48px;
    height: 48px;
    border-radius: var(--radio-normal, 12px);
    border: 1px solid var(--borde);
    background: var(--color-tarjeta);
    color: var(--color-texto);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transicion);
    box-shadow: var(--sombra-suave);
}

.habNumeroBtn:hover:not(:disabled) {
    border-color: var(--color-resaltado);
    transform: translateY(-2px);
    box-shadow: var(--sombra-normal);
}

.habNumeroBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#ventanaHabilidadesGenerador,
#ventanaPacksGenerador,
#ventanaMundosGenerador {
    max-width: 680px;
    padding-bottom: 35px;
}



.habNumeroDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 2px solid var(--color-resaltado);
    border-radius: var(--radio-normal, 14px);
    padding: 8px 28px;
    min-width: 110px;
    box-shadow: var(--sombra-suave);
    cursor: pointer;
}

.habCantidadInput {
    background: transparent;
    border: none;
    outline: none;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-resaltado);
    text-align: center;
    width: 60px;
    cursor: pointer;
    appearance: textfield;
    -moz-appearance: textfield;
}

.habCantidadInput::-webkit-outer-spin-button,
.habCantidadInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.habNumeroLabel {
    font-size: 0.8rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.habAcciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.habBtnTirar,
#botonTirarDados {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 38px;
    font-size: 1.25rem;
    font-weight: 800;
    border-radius: var(--radio-normal, 14px);
    border: 2px solid var(--color-resaltado);
    background: linear-gradient(135deg, var(--color-resaltado), color-mix(in srgb, var(--color-resaltado) 72%, black));
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(var(--color-resaltado-rgb), 0.35);
    transition: all var(--transicion);
}

.habBtnTirar:hover:not(:disabled),
#botonTirarDados:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 30px rgba(var(--color-resaltado-rgb), 0.5);
    filter: brightness(1.08);
}

.habBtnTirar:disabled,
#botonTirarDados:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-tarjeta);
    color: var(--color-texto);
    border-color: var(--borde);
    box-shadow: none;
}

.habBtnIcono {
    font-size: 1.4rem;
}

.habBtnVolver {
    background: transparent;
    border: none;
    color: var(--color-texto);
    opacity: 0.75;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all var(--transicion);
}

.habBtnVolver:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ÁREA DE ANIMACIÓN DE RULETA / SLOT HORIZONTAL */
.habResultadoWrap {
    margin-top: 20px;
}

.habAnimacion {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 2px solid var(--borde);
    border-radius: var(--radio-grande, 20px);
    padding: 16px 0;
    box-shadow: var(--sombra-fuerte), inset 0 0 20px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.habAnimacion::before,
.habAnimacion::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 75px;
    z-index: 5;
    pointer-events: none;
}

.habAnimacion::before {
    left: 0;
    background: linear-gradient(to right, rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.85), transparent);
    background: linear-gradient(to right, color-mix(in srgb, var(--color-resaltado, #2ECC71) 85%, transparent), transparent);
}

.habAnimacion::after {
    right: 0;
    background: linear-gradient(to left, rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.85), transparent);
    background: linear-gradient(to left, color-mix(in srgb, var(--color-resaltado, #2ECC71) 85%, transparent), transparent);
}

body.modo-dia .habAnimacion::before {
    background: linear-gradient(to right, rgba(var(--color-resaltado-dia-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to right, color-mix(in srgb, var(--color-resaltado-dia, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

body.modo-dia .habAnimacion::after {
    background: linear-gradient(to left, rgba(var(--color-resaltado-dia-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to left, color-mix(in srgb, var(--color-resaltado-dia, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

body.modo-noche .habAnimacion::before {
    background: linear-gradient(to right, rgba(var(--color-resaltado-noche-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to right, color-mix(in srgb, var(--color-resaltado-noche, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

body.modo-noche .habAnimacion::after {
    background: linear-gradient(to left, rgba(var(--color-resaltado-noche-rgb, var(--color-resaltado-rgb, 46, 204, 113)), 0.85), transparent);
    background: linear-gradient(to left, color-mix(in srgb, var(--color-resaltado-noche, var(--color-resaltado, #2ECC71)) 85%, transparent), transparent);
}

/* Selector central fijo adaptado al tema */
.habSelectorCentral {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 114px;
    transform: translateX(-50%);
    border: 3px solid var(--color-resaltado, #2ECC71);
    border-radius: var(--radio-normal, 14px);
    box-shadow: 0 0 22px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.7), inset 0 0 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.25);
    z-index: 6;
    pointer-events: none;
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.08);
    box-sizing: border-box;
}

.habSelectorPunteroTop {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid var(--color-resaltado, #2ECC71);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.habSelectorPunteroBottom {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 9px solid var(--color-resaltado, #2ECC71);
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.5));
}

.habAnimacionPista {
    display: flex;
    align-items: center;
    gap: 14px;
    will-change: transform;
    white-space: nowrap;
    padding: 0 10px;
}

.habAnim-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 104px;
    min-width: 104px;
    height: 100px;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--borde);
    border-radius: var(--radio-normal, 12px);
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.modo-dia .habAnim-item {
    background: rgba(0, 0, 0, 0.04);
}

.habAnim-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.habAnim-item--elegida {
    border-color: var(--color-resaltado) !important;
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.28) !important;
    box-shadow: 0 0 20px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.7) !important;
    transform: scale(1.04);
}

.habAnim-nombre {
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 92px;
    color: var(--color-texto);
}

/* INDICADOR DE SELECCIÓN SECUENCIAL */
.habProgresoSeleccionWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 14px auto;
    text-align: center;
}

.habProgresoSeleccion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 18px;
    margin: 0 auto;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1.5px solid var(--color-resaltado, #2ECC71);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-texto);
    box-shadow: 0 4px 15px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.3);
    animation: pulsoBadgeHab 1.2s ease-in-out infinite alternate;
}

@keyframes pulsoBadgeHab {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.03);
        box-shadow: 0 4px 20px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.55);
    }
}

.habProgresoDot {
    font-size: 0.85rem;
    line-height: 1;
}

/* BOTÓN DE ACELERACIÓN */
.habAcelerarWrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 6px 0;
}

.habBtnAcelerar,
button.habBtnAcelerar,
button:not(.cerrar).habBtnAcelerar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: var(--radio-normal, 12px);
    border: 3px solid #00e676 !important;
    background: #00c853 !important;
    color: #ffffff !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 16px rgba(0, 230, 118, 0.5) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}

.habBtnAcelerar:hover,
button.habBtnAcelerar:hover,
button:not(.cerrar).habBtnAcelerar:hover {
    transform: translateY(-2px) scale(1.03);
    background: #00e676 !important;
    border-color: #00c853 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 230, 118, 0.75) !important;
}

.habBtnAcelerar.habBtnAcelerar--activo,
.habBtnAcelerar.activo,
button.habBtnAcelerar.habBtnAcelerar--activo,
button.habBtnAcelerar.activo,
button:not(.cerrar).habBtnAcelerar.habBtnAcelerar--activo,
button:not(.cerrar).habBtnAcelerar.activo {
    border: 3px solid #e67e22 !important;
    background: #cf7017 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 24px rgba(230, 126, 34, 0.85), 0 0 45px rgba(207, 112, 23, 0.5) !important;
    animation: brilloAceleradoNaranja 0.8s ease-in-out infinite alternate !important;
}

.habBtnAcelerar.habBtnAcelerar--activo:hover,
.habBtnAcelerar.activo:hover,
button.habBtnAcelerar.habBtnAcelerar--activo:hover,
button.habBtnAcelerar.activo:hover {
    background: #e67e22 !important;
    border-color: #cf7017 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 32px rgba(230, 126, 34, 0.95), 0 0 60px rgba(207, 112, 23, 0.65) !important;
}

@keyframes brilloAceleradoNaranja {
    from {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 16px rgba(207, 112, 23, 0.6), 0 0 30px rgba(230, 126, 34, 0.4);
    }

    to {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 30px rgba(230, 126, 34, 0.95), 0 0 55px rgba(207, 112, 23, 0.65);
    }
}

.habIconoRayo {
    font-size: 1.1rem;
}

/* RESULTADO FINAL GRID HORIZONTAL */
.habResultadoFinal {
    margin-top: 20px;
    text-align: center;
}

.habResultadoTitulo {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--color-texto);
}

.habResultadoGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 25px;
}

.habResultadoCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 150px;
    padding: 16px 12px;
    background: var(--color-tarjeta);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1.5px solid var(--color-resaltado);
    border-radius: var(--radio-normal, 14px);
    box-shadow: var(--sombra-normal);
    animation: animCardHab 0.35s cubic-bezier(0.17, 0.67, 0.12, 1) forwards;
    opacity: 0;
    transform: translateY(15px);
}

@keyframes animCardHab {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.habResultadoCardImg {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.habResultadoCardImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.habResultadoCardFallback {
    width: 64px;
    height: 64px;
    font-size: 2.2rem;
    align-items: center;
    justify-content: center;
}

.habResultadoCardNombre {
    margin-top: 12px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-texto);
    text-align: center;
    line-height: 1.25;
}

.habResultadoCardTipo,
.habResultadoCard > .habResultadoCardPack {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-texto-secundario, rgba(255,255,255,0.65));
    margin-top: 4px;
    letter-spacing: 0.03em;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    line-height: 1.4;
    cursor: default;
    position: static;
}

/* Badge con icono en la esquina de la miniatura para Habilidades/Mundos/Retos */
.habResultadoCardImg .habResultadoCardPack {
    position: absolute;
    bottom: -10px;
    left: -12px;
    z-index: 2;
    cursor: default;
}

.habResultadoCardImg .habResultadoCardPack .iconoPackMini {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    cursor: default;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* Ajuste proporcional para tarjetas compactas (Modo Retos) */
.habResultadoCardImg[style*="42px"] .habResultadoCardPack {
    font-size: 0.65rem;
}

.habResultadoCardImg[style*="42px"] .habResultadoCardPack .iconoPackMini {
    width: 20px;
    height: 20px;
}

.habBtnTirarOtraVez {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--radio-normal, 12px);
    border: 1.5px solid var(--color-resaltado);
    background: var(--color-tarjeta);
    color: var(--color-texto);
    cursor: pointer;
    transition: all var(--transicion);
    box-shadow: var(--sombra-suave);
    margin-top: 10px;
}

.habBtnTirarOtraVez:hover {
    background: var(--color-resaltado);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--sombra-normal);
}


/* ==========================================================
   ESTILOS VENTANA 404 (PÁGINA NO ENCONTRADA)
   ========================================================== */

#ventana404 {
    text-align: center;
    padding: 40px 24px;
    margin-top: 35px;
}

.contenido404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px auto;
    max-width: 550px;
}

.icono404 {
    font-size: 4rem;
    line-height: 1;
    animation: flotarIcono404 3s ease-in-out infinite;
}

@keyframes flotarIcono404 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.titulo404 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-texto);
    margin: 0;
    letter-spacing: -0.5px;
}

.descripcion404 {
    font-size: 1.05rem;
    color: var(--color-texto-secundario);
    line-height: 1.6;
    margin: 0;
}

.descripcion404 strong {
    color: #e74c3c;
    word-break: break-all;
}

.acciones404 {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.botonPrincipal404,
.botonSecundario404 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radio-pequeño, 10px);
    cursor: pointer;
    transition: all var(--transicion);
    border: none;
    font-family: inherit;
}

.botonPrincipal404 {
    background: var(--color-principal);
    color: var(--color-texto);
    box-shadow: var(--sombra-suave);
    border: 1.5px solid var(--borde);
}

.botonPrincipal404:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--sombra-normal);
}

.botonSecundario404 {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-texto);
    border: 1.5px solid var(--borde);
}

.botonSecundario404:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}


/* ==========================================================
   ESTILOS Y FUENTE DEL TEMPORIZADOR Y TIEMPO AGOTADO
   ========================================================== */

#ventanaTemporizador,
#ventanaTiempoAgotado,
.displayTemporizadorDigital,
.digitosTiempo,
.tiempoAgotadoTexto {
    font-family: inherit !important;
}

#ventanaTemporizador,
#ventanaTiempoAgotado,
.displayTemporizadorDigital {
    container-type: inline-size;
}

/* Estado por defecto / Pausado: NARANJA */
.displayTemporizadorDigital,
.displayTemporizadorDigital.pausado {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 16px 0;
    padding: 16px 20px;
    background: rgba(207, 112, 23, 0.12);
    border: 1.5px solid rgba(207, 112, 23, 0.7);
    border-radius: var(--radio-normal, 12px);
    box-shadow: 0 4px 16px rgba(207, 112, 23, 0.2);
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Solo animar fondo y borde, NO usar 'all' para evitar repaints cruzados en modo paralelo */
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    /* Aislar los repaints de esta caja al propio elemento */
    contain: layout style;
    will-change: background, border-color;
}

body.modo-dia .displayTemporizadorDigital,
body.modo-dia .displayTemporizadorDigital.pausado {
    background: rgba(207, 112, 23, 0.08);
    border-color: rgba(207, 112, 23, 0.45);
    box-shadow: 0 4px 14px rgba(207, 112, 23, 0.12);
}

.displayTemporizadorDigital .digitosTiempo,
.displayTemporizadorDigital.pausado .digitosTiempo {
    color: #cf7017;
}

/* Estado En Marcha: TEMA ACTIVO */
.displayTemporizadorDigital.enMarcha {
    background: rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.14) !important;
    border: 1.5px solid rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.7) !important;
    box-shadow: 0 4px 16px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.3) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: pulsoTemporizadorEnMarcha 2s ease-in-out infinite alternate;
}

body.modo-dia .displayTemporizadorDigital.enMarcha {
    background: rgba(var(--color-resaltado-rgb, 39, 174, 96), 0.08) !important;
    border-color: rgba(var(--color-resaltado-rgb, 39, 174, 96), 0.5) !important;
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 39, 174, 96), 0.15) !important;
}

.displayTemporizadorDigital.enMarcha .digitosTiempo {
    color: var(--color-resaltado);
    text-shadow: 0 0 12px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.5);
    display: inline-block;
    will-change: transform;
    animation: latidoSutilNumeros 1s ease-in-out infinite;
}

@keyframes latidoSutilNumeros {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.025);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.015);
    }
    56% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulsoTemporizadorEnMarcha {
    from {
        box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb), 0.25);
        border-color: rgba(var(--color-resaltado-rgb), 0.6);
    }
    to {
        box-shadow: 0 4px 22px rgba(var(--color-resaltado-rgb), 0.55), 0 0 10px rgba(var(--color-resaltado-rgb), 0.3);
        border-color: rgba(var(--color-resaltado-rgb), 0.95);
    }
}

/* Estado Tiempo Agotado: ROJO */
.displayTemporizadorDigital.tiempoAgotado {
    background: rgba(231, 76, 60, 0.15);
    border: 1.5px solid rgba(231, 76, 60, 0.7);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.25);
}

.displayTemporizadorDigital.tiempoAgotado .digitosTiempo,
.displayTemporizadorDigital.tiempoAgotado .tiempoAgotadoTexto {
    color: #e74c3c;
    font-size: clamp(0.7rem, 6.5cqi, 1.8rem) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.digitosTiempo {
    font-family: inherit !important;
    font-size: clamp(1.8rem, 12cqi, 3.2rem);
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Texto de tiempo agotado adaptable en una sola línea SIN TRES PUNTOS */
.tiempoAgotadoTexto {
    font-family: inherit !important;
    font-size: clamp(0.7rem, 6.5cqi, 1.8rem) !important;
    font-weight: 800;
    color: #e74c3c;
    text-align: center;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 5px;
    box-sizing: border-box;
    letter-spacing: -0.3px;
    display: block;
}


/* ==========================================================
   ESTILOS BOTÓN OBS Y MODAL OBS OVERLAY
   ========================================================== */

.botonOBSBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid var(--borde);
    color: var(--color-texto);
    transition: all var(--transicion);
}

.botonOBSBtn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Modo día: iguala el color del .toggleModo adyacente */
body.modo-dia .botonOBSBtn {
    background: var(--color-advertencia);
    color: #2B2B2B;
    border-color: transparent;
}

body.modo-dia .botonOBSBtn:hover {
    background: rgba(255, 213, 74, 0.75);
    box-shadow:
        0 0 8px rgba(255, 213, 74, 0.60),
        0 0 18px rgba(255, 213, 74, 0.45),
        0 0 30px rgba(255, 213, 74, 0.25);
    transform: translateY(-2px);
}

/* Modo noche: iguala el color del .toggleModo adyacente */
body.modo-noche .botonOBSBtn {
    background: #6A5ACD;
    color: #EDEDED;
    border-color: transparent;
}

body.modo-noche .botonOBSBtn:hover {
    background: rgba(106, 90, 205, 0.75);
    box-shadow:
        0 0 8px rgba(106, 90, 205, 0.60),
        0 0 18px rgba(106, 90, 205, 0.45),
        0 0 30px rgba(106, 90, 205, 0.25);
    transform: translateY(-2px);
}

.modalOBSCard {
    max-width: 780px !important;
    width: 94% !important;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--superficie-bg, var(--color-tarjeta)) !important;
    backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    border: 1px solid var(--borde) !important;
    border-radius: var(--radio-grande, 20px) !important;
    color: var(--color-texto) !important;
    box-shadow: var(--sombra-fuerte, 0 20px 50px rgba(0, 0, 0, 0.35)) !important;
}

body.modo-dia .modalOBSCard {
    background: var(--superficie-bg, var(--color-tarjeta)) !important;
    backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    border-color: var(--borde) !important;
    color: var(--color-texto) !important;
    box-shadow: var(--sombra-fuerte, 0 20px 50px rgba(0, 0, 0, 0.15)) !important;
}

.modalOBSCard .headerPacksFlotante {
    padding: 18px 32px;
}

.cuerpoModalOBS {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 34px 34px;
}

.obsGuiaTexto {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.obsPasosBox {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 12px 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.modo-dia .obsPasosBox {
    background: rgba(0, 0, 0, 0.04);
}

.obsPasosBox ol {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.obsPasosBox code {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

body.modo-dia .obsPasosBox code {
    background: rgba(0, 0, 0, 0.07);
    color: var(--color-texto);
}

.obsMetodosBox {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.obsMetodo {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.modo-dia .obsMetodo {
    background: rgba(0, 0, 0, 0.04);
}

.obsMetodoRecomendado {
    border-color: rgba(46, 204, 113, 0.5);
    background: rgba(46, 204, 113, 0.07);
}

.obsMetodoAlternativo {
    border-color: rgba(255, 165, 0, 0.35);
    background: rgba(255, 165, 0, 0.05);
}

.obsMetodoTitulo {
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.2px;
    opacity: 0.95;
}

.obsMetodo ol {
    margin: 0;
    padding-left: 20px;
    font-size: 0.88rem;
    line-height: 1.65;
}

.obsMetodoNota {
    font-size: 0.82rem;
    opacity: 0.75;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--borde);
}

.obsSeccionOpciones {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.modo-dia .obsSeccionOpciones {
    background: rgba(0, 0, 0, 0.03);
}

.obsSeccionOpciones h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
}

.obsOpcionGrupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.obsOpcionGrupo label {
    font-size: 0.88rem;
    font-weight: 700;
    opacity: 0.9;
}

.obsBtnGroup {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.obsBtnOption {
    flex: 1;
    min-width: 110px;
    padding: 9px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1.5px solid var(--borde);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-texto);
    cursor: pointer;
    transition: all 0.2s ease;
}

body.modo-dia .obsBtnOption {
    background: rgba(0, 0, 0, 0.04);
}

.obsBtnOption:hover {
    background: rgba(255, 255, 255, 0.20);
}

body.modo-dia .obsBtnOption:hover {
    background: rgba(0, 0, 0, 0.08);
}

.obsBtnOption.activo {
    background: var(--color-resaltado, #2ECC71) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
}

/* Control deslizante de Escala de ventanas OBS */
.obsSliderContainer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 8px 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.modo-dia .obsSliderContainer {
    background: rgba(0, 0, 0, 0.04);
}

.obsSliderInput {
    flex: 1;
    cursor: pointer;
    accent-color: var(--color-resaltado, #2ECC71);
}

.obsValorEscala {
    color: var(--color-resaltado, #2ECC71);
    font-weight: bold;
    font-size: 0.95rem;
}

.obsBtnResetEscala {
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid var(--borde);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-texto);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.obsBtnResetEscala:hover {
    background: rgba(255, 255, 255, 0.25);
}

.obsEnlaceBox {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.obsEnlaceBox label {
    font-size: 0.88rem;
    font-weight: 700;
}

.obsInputGroup {
    display: flex;
    gap: 8px;
}

.inputUrlOBS {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--borde);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-resaltado, #2ECC71);
    font-family: monospace;
    box-sizing: border-box;
    transition: border-color 0.2s ease, color 0.2s ease;
}

body.modo-dia .inputUrlOBS {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--color-resaltado, #1e8449);
}

.obsAccionesFooter {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.obsBtnCopiar {
    flex: 1;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-resaltado, #2ECC71);
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 12px 18px;
    border-radius: var(--radio-normal);
    box-shadow: 0 4px 14px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
}

.obsBtnCopiar:hover {
    background: var(--color-resaltado, #2ECC71);
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.45);
}

.obsBtnCopiar:focus-visible {
    outline: 3px solid var(--color-resaltado, #2ECC71);
    outline-offset: 2px;
}

.obsBtnCopiar:active {
    transform: translateY(0);
    filter: brightness(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.obsBtnCopiar.copiado {
    background: var(--color-resaltado, #2ECC71) !important;
    filter: brightness(0.9);
    color: #fff !important;
}

.obsBtnProbar {
    flex: 1;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.obsNotaRealtime {
    font-size: 0.8rem;
    opacity: 0.75;
    margin: 4px 0 0 0;
    text-align: center;
}


/* ==========================================================
   ESTILOS EN MODO OBS OVERLAY (MODO-OBS EN BODY)
   ========================================================== */

html:has(body.modo-obs),
html.modo-obs,
body.modo-obs {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

body.modo-obs main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

body.modo-obs header,
body.modo-obs #menuPrincipal,
body.modo-obs footer,
body.modo-obs #pantallaCarga,
body.modo-obs #placeholderMenuPrincipal,
body.modo-obs #contenedorCapasFondo,
body.modo-obs #contenedorEfectosTema,
body.modo-obs .contenedorCapasFondo,
body.modo-obs .contenedorEfectosTema,
body.modo-obs .capa-fondo,
body.modo-obs #lotlabDockTestTemas {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.modo-obs section#app {
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    box-sizing: border-box !important;
}

/* Alineación de ventanas en OBS */
body.modo-obs.obs-pos-left section#app {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 24px 24px 60px 24px !important;
}

body.modo-obs.obs-pos-right section#app {
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 24px 24px 60px 24px !important;
}

body.modo-obs.obs-pos-center section#app {
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 24px 24px 60px 24px !important;
}

/* Las ventanas activas ocupan su espacio limpio sin márgenes excesivos */
body.modo-obs .ventana {
    margin: 0 !important;
    max-width: 680px !important;
    width: 100% !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}

/* Escalado de ventanas directas de section#app según posición */
body.modo-obs section#app>.ventana {
    transform: scale(var(--escala-obs, 1)) !important;
}

body.modo-obs.obs-pos-left section#app>.ventana {
    transform-origin: top left !important;
}

body.modo-obs.obs-pos-center section#app>.ventana {
    transform-origin: top center !important;
}

body.modo-obs.obs-pos-right section#app>.ventana {
    transform-origin: top right !important;
}

/* Fondo de ventanas según la configuración escogida */
body.modo-obs.obs-bg-transparent .ventana {
    background: var(--superficie-bg, rgba(20, 25, 35, 0.88)) !important;
    backdrop-filter: blur(var(--ventana-blur, 14px)) !important;
    -webkit-backdrop-filter: blur(var(--ventana-blur, 14px)) !important;
}

body.modo-obs.obs-bg-dark .ventana {
    background: #121824 !important;
}

/* Sobrescribir tema Día / Noche independientemente de la web */
body.modo-obs.modo-obs-dia {
    --color-fondo: #F3EEE3;
    --color-tarjeta: var(--superficie-bg, rgba(255, 255, 255, 0.95));
    --color-texto: #2B2B2B;
    --color-texto-secundario: #444444;
    --borde: rgba(0, 0, 0, 0.22);
}

body.modo-obs.modo-obs-dia .ventana {
    color: #2b2b2b !important;
}

body.modo-obs.modo-obs-noche {
    --color-fondo: #0D3B66;
    --color-tarjeta: var(--superficie-bg, rgba(20, 25, 35, 0.9));
    --color-texto: #ffffff;
    --color-texto-secundario: #cccccc;
    --borde: rgba(255, 255, 255, 0.35);
}

body.modo-obs.modo-obs-noche .ventana {
    color: #ffffff !important;
}

/* ─── Modo Normal (No OBS) ────────────────────────────────────────── */
#wrapperPosicionOBS {
    display: contents;
}

/* ─── Animación Ruleta / Slot para Modo Retos ────────────────────────── */
.retoSlotViewport {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    border-radius: var(--radio-pequeno);
    box-sizing: border-box;
    width: 100%;
}

.retoSlotTrack {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
}

.retoSlotItemVisual {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: hidden;
}

/* Solar Slot Viewport */
.retoSolarSlotViewport {
    position: relative;
    height: 220px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    border-radius: var(--radio-normal);
    box-sizing: border-box;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.retoSolarSlotTrack {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    will-change: transform;
}

.retoSolarSlotItemVisual {
    height: 220px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.retoSolarSlotItemVisual .tarjetaSolar {
    margin: 0;
    pointer-events: none;
}

/* ─── Ciclado Visual Rápido de Opciones (Solar, Habilidades, Colores, Packs, Limitantes) ── */
@keyframes retoCicladoFlash {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }

    15% {
        opacity: 1;
        transform: scale(1);
    }

    85% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.97);
    }
}

@keyframes retoCicladoAterrizaje {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    60% {
        opacity: 1;
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.catResultadoSlotWrap {
    /* overflow se controla desde JS: hidden durante animación, vacío en estado normal */
    min-height: 20px;
    position: relative;
}

.solarCardSlotWrap {
    position: relative;
    min-height: 60px;
}

/* Capas de crossfade del ciclado visual */
.retoCicladoCapa {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Texto del carrete vertical: idéntica alineación que el resultado final */
.retoSlotItemVisual .textoResultadoCat {
    text-align: left;
    width: 100%;
}

/* Los chips de color NO deben quedar recortados por overflow del padre */
/* Se garantiza porque .catResultadoSlotWrap no tiene overflow:hidden en estado normal */
.muestrasColores {
    overflow: visible;
}

.chipColor {
    overflow: visible;
}

/* ─── Iconos de Tipo de Solar (Modo Día / Modo Noche reactivo) ─── */
.iconoTipoSolarWrap {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden !important;
    position: relative !important;
}

.iconoTipoSolarReto {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    display: block;
    position: relative;
    left: -80px;
    filter: drop-shadow(80px 0 0 var(--color-resaltado));
    transition: filter var(--transicion, 0.25s ease), transform var(--transicion, 0.25s ease);
}

/* Modo Día y Modo Noche: Los iconos toman el color de resaltado del tema */
body.modo-dia .iconoTipoSolarReto {
    filter: drop-shadow(80px 0 0 var(--color-resaltado)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

body.modo-noche .iconoTipoSolarReto {
    filter: drop-shadow(80px 0 0 var(--color-resaltado)) drop-shadow(0 0 6px var(--color-resaltado));
}

/* ─── Botones de Tipo de Solar en el Filtrador de Solares ─── */
.opcionFiltroConIcono {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
}

.iconoTipoSolarFiltroWrap {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
    overflow: hidden;
    position: relative;
}

.iconoTipoSolarFiltro {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    position: relative;
    left: -60px;
    filter: drop-shadow(60px 0 0 var(--color-resaltado));
    transition: filter var(--transicion, 0.25s ease);
}

/* Modo Día y Modo Noche: Los iconos toman el color de resaltado del tema */
body.modo-dia .iconoTipoSolarFiltro {
    filter: drop-shadow(60px 0 0 var(--color-resaltado));
}

body.modo-noche .iconoTipoSolarFiltro {
    filter: drop-shadow(60px 0 0 var(--color-resaltado));
}

/* Estado Hover: Sutil brillo del color de resaltado al pasar el ratón */
.opcionFiltro:hover:not(.seleccionada) .iconoTipoSolarFiltro {
    filter: drop-shadow(60px 0 0 var(--color-resaltado)) drop-shadow(0 0 3px var(--color-resaltado));
}

/* Estado Seleccionado: Blanco puro para contrastar sobre el fondo resaltado */
.opcionFiltro.seleccionada .iconoTipoSolarFiltro,
body.modo-dia .opcionFiltro.seleccionada .iconoTipoSolarFiltro,
body.modo-noche .opcionFiltro.seleccionada .iconoTipoSolarFiltro {
    filter: drop-shadow(60px 0 0 #ffffff) !important;
}



/* ─── Escalado y Posicionamiento de la Composición en OBS ───────────────
   Separación de responsabilidades:
   1. #wrapperPosicionOBS: Única responsabilidad -> POSICIONAMIENTO puro (left: 24px, right: 24px, 50% con transform: translateX(-50%)).
   2. #composicionRetoTemporizador: Única responsabilidad -> ESCALA pura (transform: scale(S)).
   3. Las ventanas hijas: Tamaño natural, transform: none.
   ─────────────────────────────────────────────────────────────────────── */
body.modo-obs #wrapperPosicionOBS {
    position: absolute !important;
    top: 24px !important;
    width: max-content !important;
    height: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    z-index: 100 !important;
}

body.modo-obs.obs-pos-left #wrapperPosicionOBS {
    left: 24px !important;
    right: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-center #wrapperPosicionOBS {
    left: calc(50% - 340px * var(--escala-obs, 1)) !important;
    right: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-center #app.modo-paralelo #wrapperPosicionOBS,
body.modo-obs.obs-pos-center #wrapperPosicionOBS:has(#ventanaTemporizador:not([style*="display: none"])) {
    left: calc(50% - (580px * var(--escala-obs, 1) + 10px)) !important;
    right: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-center:has(#ventanaRuletaDesastres:not([style*="display: none"])) #wrapperPosicionOBS {
    left: calc(50% - 340px * var(--escala-obs, 1)) !important;
    right: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-center:has(#ventanaRuletaDesastres:not([style*="display: none"])):has(#ventanaTemporizador:not([style*="display: none"])) #wrapperPosicionOBS {
    left: calc(50% - (580px * var(--escala-obs, 1) + 10px)) !important;
    right: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-right #wrapperPosicionOBS {
    right: 24px !important;
    left: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-right #app.modo-paralelo #wrapperPosicionOBS,
body.modo-obs.obs-pos-right #wrapperPosicionOBS:has(#ventanaTemporizador:not([style*="display: none"])) {
    right: 24px !important;
    left: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-right:has(#ventanaRuletaDesastres:not([style*="display: none"])) #wrapperPosicionOBS {
    right: 24px !important;
    left: auto !important;
    transform: none !important;
}

body.modo-obs.obs-pos-right:has(#ventanaRuletaDesastres:not([style*="display: none"])):has(#ventanaTemporizador:not([style*="display: none"])) #wrapperPosicionOBS {
    right: 24px !important;
    left: auto !important;
    transform: none !important;
}

/* El contenedor interno composicionRetoTemporizador solo maneja el layout flex sin scale ni transform-origin */
body.modo-obs #composicionRetoTemporizador {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: max-content !important;
    height: max-content !important;
    transform: none !important;
}

body.modo-obs #ventanaRetoResultado {
    margin: 0 !important;
    width: 680px !important;
    min-width: 680px !important;
    max-width: 680px !important;
    flex: 0 0 680px !important;
    transform-origin: top left !important;
}

body.modo-obs #ventanaRuletaDesastres {
    margin: 0 !important;
    width: 680px !important;
    min-width: 680px !important;
    max-width: 680px !important;
    flex: 0 0 680px !important;
    transform: scale(var(--escala-obs, 1)) !important;
    transform-origin: top left !important;
}

body.modo-obs #ventanaTemporizador {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(20px - 680px * (1 - var(--escala-obs, 1))) !important;
    width: 480px !important;
    min-width: 480px !important;
    max-width: 480px !important;
    flex: 0 0 480px !important;
    transform-origin: top left !important;
    transform: scale(var(--escala-obs, 1)) !important;
}

/* Separación y escala para Ruleta Desastres + Temporizador en OBS */
body.modo-obs:has(#ventanaRuletaDesastres:not([style*="display: none"])) #ventanaTemporizador {
    margin-left: calc(20px - 680px * (1 - var(--escala-obs, 1))) !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 480px !important;
    min-width: 480px !important;
    max-width: 480px !important;
    flex: 0 0 480px !important;
    transform: scale(var(--escala-obs, 1)) !important;
    transform-origin: top left !important;
}

/* Garantizar que los modales flotantes se muestren por encima de las ventanas en OBS */
body.modo-obs .cardPacksFlotante,
body.modo-obs .tooltip,
body.modo-obs .fichaSolarModal {
    z-index: 999999 !important;
}

/* Ocultar botones flotantes de scroll (subir/bajar) exclusivamente en modo OBS */
body.modo-obs #subirResultados,
body.modo-obs #bajarResultados {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================
   MARCA DE AGUA (WATERMARK / BRANDING) EN MODO OBS
   Posicionada respecto a los límites de la ventana activa
   ========================================================== */
.obsBrandingLayer {
    display: none;
}

body.modo-obs .obsBrandingLayer {
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important;
    pointer-events: none !important;
    z-index: 99 !important;
}

body.modo-obs .obsBrandingTextoIzq {
    position: absolute !important;
    bottom: 12px !important;
    left: 15px !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    opacity: 0.75 !important;
    color: var(--color-texto) !important;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

body.modo-obs .obsBrandingTextoDer {
    position: absolute !important;
    bottom: 12px !important;
    right: 15px !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    opacity: 0.75 !important;
    color: var(--color-texto) !important;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* ==========================================================
   ESTILOS VENTANA MODAL Y BOTÓN DE AGRADECIMIENTOS
   ========================================================== */

/* Botón en barra inferior (.footer-controles) */
.botonAgradecimientosBtn .icono-corazon {
    width: 26px;
    height: 26px;
    fill: currentColor !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    display: block;
}

/* Tarjeta del modal */
.modalAgradecimientosCard {
    max-width: 720px !important;
    width: 92% !important;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--superficie-bg, var(--color-tarjeta)) !important;
    backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    border: 1px solid var(--borde) !important;
    border-radius: var(--radio-grande, 20px) !important;
    color: var(--color-texto) !important;
    box-shadow: var(--sombra-fuerte, 0 20px 50px rgba(0, 0, 0, 0.35)) !important;
}

body.modo-dia .modalAgradecimientosCard {
    background: var(--superficie-bg, var(--color-tarjeta)) !important;
    backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    -webkit-backdrop-filter: blur(var(--ventana-blur, var(--blur, 18px))) !important;
    border-color: var(--borde) !important;
    color: var(--color-texto) !important;
    box-shadow: var(--sombra-fuerte, 0 20px 50px rgba(0, 0, 0, 0.15)) !important;
}

/* Cabecera y controles */
.cabeceraAgradecimientos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--borde);
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

body.modo-dia .cabeceraAgradecimientos {
    background: rgba(0, 0, 0, 0.04);
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

.cabeceraAgradecimientos h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-titulo);
}

.controlesModalAgradecimientos {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón Saltar animación */
.btnSaltarAnimacion {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    background: transparent;
    color: var(--color-texto);
    cursor: pointer;
    transition: all .25s;
    flex-shrink: 0;
    user-select: none;
}

.btnSaltarAnimacion svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor;
    display: block;
}

.btnSaltarAnimacion:hover {
    background: rgba(46, 204, 113, 0.85) !important;
    color: white !important;
    box-shadow:
        0 0 8px rgba(46, 204, 113, .65),
        0 0 18px rgba(46, 204, 113, .45),
        0 0 30px rgba(46, 204, 113, .25) !important;
    transform: scale(1.10);
}

body.modo-dia .btnSaltarAnimacion:hover {
    background: rgba(46, 204, 113, 0.85) !important;
    color: white !important;
    box-shadow:
        0 0 8px rgba(46, 204, 113, .65),
        0 0 18px rgba(46, 204, 113, .45),
        0 0 30px rgba(46, 204, 113, .25) !important;
}

/* Cuerpo con scroll independiente */
.cuerpoModalAgradecimientos {
    padding: 24px 28px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(88vh - 72px);
    scrollbar-width: thin;
}

/* Animación cinematográfica de créditos */
.creditosContenido.creditos-animando {
    animation: animacionCreditos 3.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

@keyframes animacionCreditos {
    0% {
        transform: translateY(120px);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.creditosContenido.creditos-estaticos {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Texto introductorio */
.agradecimientosIntro {
    font-size: 0.96rem;
    line-height: 1.6;
    text-align: center;
    max-width: 620px;
    margin: 0 auto 28px auto;
    opacity: 0.92;
    font-style: italic;
    color: var(--color-texto);
}

/* Títulos de sección */
.tituloSeccionAgradecimientos {
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    margin: 24px 0 16px;
    color: var(--color-titulo);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.tituloSeccionAgradecimientos::before,
.tituloSeccionAgradecimientos::after {
    content: "";
    height: 1px;
    background: var(--borde);
    flex: 1;
    max-width: 80px;
    opacity: 0.6;
}

/* Categoría: Aportación especial */
.contenedorAportacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.tarjetaAportacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 20px;
    border-radius: var(--radio-normal, 12px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--borde);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 420px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.modo-dia .tarjetaAportacion {
    background: rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tarjetaAportacion:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.tarjetaAportacion .fotoColaborador {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #6A5ACD;
    box-shadow: 0 4px 14px rgba(106, 90, 205, 0.35);
    display: block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.modo-dia .tarjetaAportacion .fotoColaborador {
    border-color: var(--color-primario, #27ae60);
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35);
}

.tarjetaAportacion .enlaceFotoColaborador:hover .fotoColaborador {
    transform: scale(1.06);
}

.textoAportacion {
    font-size: 0.88rem;
    margin: 8px 0 0 0;
    opacity: 0.85;
    color: var(--color-texto);
    font-weight: 500;
}

/* Categoría: Pioneros */
.gridPioneros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 20px 16px;
    justify-items: center;
    margin-top: 12px;
}

.tarjetaPionero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 150px;
    transition: transform 0.25s ease;
}

.tarjetaPionero:hover {
    transform: translateY(-3px);
}

.tarjetaPionero .fotoColaborador {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--borde);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    display: block;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tarjetaPionero .enlaceFotoColaborador:hover .fotoColaborador {
    transform: scale(1.08);
    border-color: #6A5ACD;
    box-shadow: 0 0 14px rgba(106, 90, 205, 0.45);
}

body.modo-dia .tarjetaPionero .enlaceFotoColaborador:hover .fotoColaborador {
    border-color: var(--color-primario, #27ae60);
    box-shadow: 0 0 14px rgba(39, 174, 96, 0.45);
}

/* Nombres y enlaces */
.nombreColaborador {
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 8px;
    color: var(--color-texto);
    word-break: break-word;
    line-height: 1.3;
}

.enlaceTexto {
    color: var(--color-texto);
    text-decoration: none;
    transition: color 0.2s ease;
}

.enlaceTexto:hover {
    color: #6A5ACD;
    text-decoration: underline;
}

body.modo-dia .enlaceTexto:hover {
    color: var(--color-primario, #27ae60);
}

.enlaceFotoColaborador {
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
}

.wrapperFotoColaborador {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fotoFallback {
    opacity: 0.65;
    background: rgba(128, 128, 128, 0.2);
}

/* Adaptación responsive */
@media (max-width: 600px) {
    .modalOBSCard,
    .modalAgradecimientosCard {
        width: 95% !important;
        max-height: 92vh;
    }

    .modalOBSCard .headerPacksFlotante {
        padding: 14px 18px;
    }

    .cuerpoModalOBS {
        padding: 18px 16px 28px;
    }

    .cuerpoModalAgradecimientos {
        padding: 18px 16px 30px;
    }

    .gridPioneros {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 16px 12px;
    }

    .tarjetaPionero .fotoColaborador {
        width: 70px;
        height: 70px;
    }

    .tarjetaAportacion .fotoColaborador {
        width: 88px;
        height: 88px;
    }
}

/* ==========================================================
   CORRECCIONES MÓVIL — TANDA 2
   Problema A: desastreBienvenida — texto desborda en móvil
   Problema B: modalPacksFlotante — botones sobresalen
   Problema C/D: cabeceraVentana — título se superpone con botones
========================================================== */

/* --- PROBLEMA A: Mensaje inicial de la Ruleta de Desastres --- */
/* El texto descriptivo tiene max-width:480px inline; en pantallas
   más estrechas el contenedor lo desborda si no se permite wrapping */
.desastreBienvenida .desastreItemDesc {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100% !important;
    /* anula el inline max-width:480px */
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .desastreBienvenida {
        padding: 16px 14px;
    }

    .desastreBienvenida .desastreItemDesc {
        font-size: 0.88rem;
    }
}

/* --- PROBLEMA B: Selector de Packs — ventana y categorías desplegables --- */
.btnCategoriaDesplegable {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.btnCategoriaDesplegable span {
    max-width: 100%;
    word-break: break-word;
    text-align: center;
}

.btnCategoriaDesplegable .badgeConteoPacks {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
}

@media (max-width: 480px) {
    .gridCategoriasDesplegables {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .btnCategoriaDesplegable {
        padding: 12px 6px;
        font-size: 0.88rem;
    }

    .btnCategoriaDesplegable .badgeConteoPacks {
        font-size: 0.78rem;
        padding: 3px 8px;
    }

    .accionesPacksFlotante {
        padding: 10px 14px;
    }

    .accionesPacksFlotante .botonReto {
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
        text-align: center;
        white-space: normal;
    }

    #cuerpoModalPacks {
        padding: 10px 8px;
        gap: 8px;
    }

    #cuerpoModalPacks .btnPackIcono {
        width: 70px;
        height: 70px;
    }

    #cuerpoModalPacks .btnPackIcono img.iconoPack {
        width: 64px;
        height: 64px;
    }

    #cuerpoModalPacks .opcionFiltro:not(.btnPackIcono) {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 0.85rem;
        min-height: 46px;
        padding: 8px 10px;
    }

    .footerPacksFlotante {
        padding: 12px 14px;
    }
}

@media (max-width: 360px) {
    .gridCategoriasDesplegables {
        grid-template-columns: 1fr;
    }
}

/* --- ESTADÍSTICAS SIMS 4: Botones Lista / Gráficos / Capturar en la misma fila superior --- */
@media (max-width: 600px) {
    .estatToggleVistaWrap {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
        gap: 8px;
        width: 100%;
        margin: 12px 0;
    }

    .estatToggleVistaWrap .estatToggleVista {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-bottom: 0;
        width: auto;
        justify-content: flex-start;
        flex-shrink: 1;
    }

    .estatToggleVistaWrap .compartirSeccion {
        position: static;
        margin: 0 0 0 auto;
        top: auto;
        transform: none;
        flex-shrink: 0;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .estatBtnVista {
        padding: 7px 12px;
        font-size: 0.82rem;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .estatToggleVistaWrap .estatToggleVista {
        gap: 4px;
    }

    .estatBtnVista {
        padding: 6px 8px;
        font-size: 0.76rem;
    }

    .estatToggleVistaWrap .compartirSeccion {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
}

/* --- ESTADÍSTICAS SIMS 4: Contención de texto/etiqueta 'Packs gratuitos' en móvil --- */
@media (max-width: 480px) {
    .packBadgeTipo {
        font-size: 0.65rem;
        padding: 2px 6px;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    .estatBtnLinea {
        padding: 3px 8px;
        font-size: 0.72rem;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        text-align: center;
        max-width: 100%;
    }

    .estatTipoGrupoHeader {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .estatTipoGrupoHeader>span:first-child {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .estatCustomTriggerBtn {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .estatCustomTriggerBtn span {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* --- PROBLEMA C/D: Cabecera de las ventanas en móvil --- */
/* En móvil:
   Fila 1: Botones arriba alineados a la derecha.
   Fila 2: Título debajo de los botones en línea propia, sin ellipsis, sin solapar.
   Escritorio permanece intacto (>600px). */
@media (max-width: 600px) {
    .cabeceraVentana {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Los botones quedan arriba a la derecha (order: 0) */
    .cabeceraVentana button {
        order: 0;
        flex-shrink: 0;
    }

    /* El título pasa a una segunda fila independiente debajo de los botones */
    .cabeceraVentana>h2,
    .cabeceraVentana>h3 {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        text-overflow: clip;
        text-align: left;
        max-width: 100%;
        width: 100%;
        font-size: 0.95rem;
        line-height: 1.3;
        order: 1;
        padding: 0 2px;
        margin-top: 4px;
        margin-bottom: 2px;
        pointer-events: auto;
        user-select: auto;
    }

    /* Excepción: ventanas pequeñas con un solo botón (cerrar) y título corto
       — ventanaPequena (temporizador, confirmación borrado, avisos) — */
    .ventanaPequena .cabeceraVentana {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .ventanaPequena .cabeceraVentana>h2,
    .ventanaPequena .cabeceraVentana>h3 {
        position: absolute;
        left: calc(50% - 16px);
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        width: auto;
        order: 0;
        font-size: 0.82rem;
        max-width: calc(100% - 60px);
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        user-select: none;
        margin: 0;
        padding: 0;
    }
}


/* ==========================================================
   CORRECCIONES MÓVIL — TANDA FINAL
   Scope: dispositivos ≤ 768px
   Reglas:
     - NO modifica comportamiento de PC (> 768px)
     - NO toca OBS, sonido, ni herramientas internas
     - Cambios quirúrgicos y contenidos
   ========================================================== */

/* ── 1. CONTENCIÓN DE OVERFLOW HORIZONTAL ─────────────────
   Raíz del problema: elementos más anchos que el viewport.
   Se aplica overflow-x: clip al nivel raíz y se garantiza
   que html/body no causen desplazamiento horizontal ni
   rompan el posicionamiento sticky de la navegación.           */
html {
    overflow-x: clip;
    max-width: 100%;
}

body {
    overflow-x: clip;
    max-width: 100%;
}

/* ── 2. MAIN — REDUCIR PADDING LATERAL EN MÓVIL ─────────── */
@media (max-width: 700px) {
    main {
        padding: 12px 10px 20px;
    }
}

@media (max-width: 480px) {
    main {
        padding: 8px 8px 16px;
    }
}

/* ── 3. HEADER — AJUSTES ADICIONALES EN PANTALLAS MUY PEQUEÑAS ─ */
@media (max-width: 480px) {
    header {
        padding: 12px 10px;
        margin-bottom: 16px;
    }

    header h1 {
        font-size: 1.4rem;
        margin-bottom: 4px;
    }

    header p {
        font-size: 0.78rem;
    }

    .header-logo {
        width: 44px;
        height: 44px;
    }

    .header-contenido {
        gap: 8px;
    }
}

/* ── 4. MENÚ PRINCIPAL — CONTENCIÓN Y SCROLL ─────────────── */
@media (max-width: 700px) {
    .menu-principal {
        padding: 10px 10px;
        /* Menú sticky permanente sobre las ventanas */
        position: sticky;
        top: 8px;
        z-index: 900;
        max-width: calc(100vw - 20px);
        box-sizing: border-box;
    }

    .menu-principal.menuFlotante {
        width: calc(100% - 16px);
        padding: 8px 10px;
    }
}

/* ── 5. NAV CLÁSICA — BOTONES EN FILA CON SCROLL HORIZONTAL  */
@media (max-width: 700px) {
    .categorias-nav-clasica {
        /* Ya tiene overflow-x: auto, garantizamos que no desborde y evitamos recortes de sombra */
        max-width: 100%;
        box-sizing: border-box;
        padding-top: 6px;
        padding-bottom: 14px;
        margin: -2px 0 -8px 0;
    }

    .btn-categoria-nav {
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    .dropdown-nav-clasica {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .dropdown-herramientas-lista {
        grid-template-columns: 1fr;
    }
}

/* Clones de navegación clásica (exclusivos para carrusel infinito en móvil) */
@media (min-width: 769px) {
    .cat-nav-clon {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .cat-nav-clon {
        display: inline-flex !important;
    }
}

/* ── 6. LAUNCHER EXPERIMENTAL — GRID DE CATEGORÍAS ────────
   En escritorio: 4 columnas. En móvil: 2 columnas.           */
@media (max-width: 700px) {
    .exp-circulos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 0 6px;
    }

    .exp-categoria-card {
        padding: 20px 10px;
        min-height: 130px;
        gap: 12px;
    }

    .exp-cat-card-icono {
        font-size: 2.6rem;
    }

    .exp-cat-card-nombre {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .exp-circulos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 4px;
    }

    .exp-categoria-card {
        padding: 16px 8px;
        min-height: 110px;
    }

    .exp-cat-card-icono {
        font-size: 2.2rem;
    }

    .exp-cat-card-nombre {
        font-size: 0.88rem;
    }
}

/* ── 7. LAUNCHER EXPERIMENTAL — NIVEL 2 (herramientas) ──── */
@media (max-width: 700px) {
    .exp-herramientas-grid {
        grid-template-columns: 1fr;
        padding: 0 4px;
        gap: 14px;
    }

    .exp-herramienta-card {
        padding: 16px 16px;
        min-height: 80px;
    }

    .exp-nivel2-header {
        padding: 0 6px;
        gap: 14px;
        margin-bottom: 22px;
    }

    .exp-btn-volver {
        padding: 9px 16px;
        font-size: 0.88rem;
    }

    .exp-categoria-titulo {
        font-size: 1.35rem;
        text-align: center;
    }
}

/* ── 8. LAUNCHER EXPERIMENTAL — NIVEL 3 (barra retorno) ─── */
@media (max-width: 700px) {
    .exp-btn-volver-categoria {
        padding: 9px 14px;
        font-size: 0.85rem;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }
}

/* ── 9. VENTANAS — PADDING REDUCIDO EN MÓVIL ─────────────── */
@media (max-width: 700px) {
    .ventana {
        padding: 18px 18px 40px 18px;
        margin: 18px auto 50px auto;
        width: min(96%, 1150px);
    }
}

@media (max-width: 480px) {
    .ventana {
        padding: 14px 14px 36px 14px;
        margin: 12px auto 40px auto;
    }
}

/* ── 10. FOOTER — CONTROLES EN 2 FILAS PROPORCIONALES (3 + 3) ──
   En móvil los 6 botones se distribuyen de forma simétrica:
   Fila 1: Modo tema, Sonido, Modo navegación
   Fila 2: OBS, Agradecimientos, Selector de idioma             */
@media (max-width: 650px) {
    .footer-controles {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        justify-items: center;
        align-items: center;
        gap: 14px 24px;
        margin: 0 auto 18px auto;
        padding: 0 10px;
        box-sizing: border-box;
    }
}

@media (max-width: 360px) {
    .footer-controles {
        gap: 12px 18px;
    }
}

/* ── 11. FOOTER — LISTA DE IDIOMAS NO DESBORDA ───────────── */
@media (max-width: 600px) {
    .listaIdiomas {
        /* En pantallas pequeñas anclar a la derecha del botón */
        left: auto;
        right: 0;
        transform: translateY(8px);
        max-width: calc(100vw - 24px);
    }

    .listaIdiomas.abierta {
        transform: translateY(0);
    }
}

.controlSonidoWrapper:has(.abierto),
.selectorModoNavWrapper:has(.abierto),
.selectorTemasWrapper:has(.abierto),
.controlSonidoWrapper.popover-abierto,
.selectorModoNavWrapper.popover-abierto,
.selectorTemasWrapper.popover-abierto {
    z-index: 10001;
}

@media (max-width: 768px) {

    .controlSonidoWrapper:has(.abierto),
    .selectorModoNavWrapper:has(.abierto),
    .selectorTemasWrapper:has(.abierto),
    .controlSonidoWrapper.popover-abierto,
    .selectorModoNavWrapper.popover-abierto,
    .selectorTemasWrapper.popover-abierto {
        z-index: 10001;
    }

    .popoverSonido,
    .popoverModoNav,
    .popoverTemas {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 84px;
        transform: translateX(-50%) translateY(12px);
        width: min(calc(100vw - 32px), 340px);
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
        z-index: 10002;
        margin: 0;
    }

    .popoverSonido.abierto,
    .popoverModoNav.abierto,
    .popoverTemas.abierto {
        transform: translateX(-50%) translateY(0);
    }
}

/* ── 13. FOOTER — TEXTO Y REDES SOCIALES ─────────────────── */
@media (max-width: 480px) {
    .footer {
        padding: 20px 14px;
    }

    .footer-contenido p {
        font-size: 0.82rem;
    }

    .redes {
        gap: 14px;
    }

    .icono-red {
        width: 44px;
        height: 44px;
    }

    .icono-red svg {
        width: 22px;
        height: 22px;
    }
}

/* ── 14. BARRA SUPERIOR COMPACTA (headerCompacto) EN MÓVIL ─ */
@media (max-width: 480px) {
    header.headerCompacto {
        padding: 4px 10px;
    }

    header.headerCompacto h1 {
        font-size: 1.05rem;
    }

    header.headerCompacto .header-logo {
        width: 30px;
        height: 30px;
    }

    .menu-principal.menuFlotante {
        top: 48px;
    }
}

/* ── 15. BOTÓN OBS — CONTENCIÓN ──────────────────────────── */
@media (max-width: 480px) {
    .botonOBSBtn {
        font-size: 0.82rem;
        padding: 0 10px;
    }
}

/* ── 16. GARANTÍA GLOBAL — ningún elemento directo del body
   supera el ancho del viewport                               */
@media (max-width: 768px) {

    *,
    *::before,
    *::after {
        max-width: 100vw;
        /* solo limitar el box, no el layout interno */
        box-sizing: border-box;
    }

    /* Excepciones: elementos que legítimamente usan posición
       absoluta o fija y pueden superar el viewport */
    .popoverSonido,
    .popoverModoNav,
    .listaIdiomas,
    .submenuOpcion.popoverFlotante,
    .tooltipFlotante,
    #tooltipOpciones {
        max-width: calc(100vw - 16px) !important;
    }
}

/* ── FASE DE CORRECCIÓN: Lightbox y Tablón CMS para Web Pública ── */
.lotlab-lightbox-backdrop {
  cursor: zoom-out !important;
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
/* Botón de cierre eliminado en Fase 2.8M (imitando galería solar: clic en cualquier zona cierra) */
.lotlab-lightbox-close {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: none !important;
}
.lotlab-lightbox-content {
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lotlab-lightbox-img {
  cursor: zoom-out !important;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain !important;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
}
.lotlab-lightbox-caption {
  margin-top: 12px;
  font-size: 0.95rem;
  color: #ffd54a;
  background: rgba(15, 17, 23, 0.85);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 213, 74, 0.3);
  text-align: center;
  max-width: 800px;
}

/* Estilos de Tablón Visual por Filas en Web Pública (Sin recorte de glow) */
.tablon-cms {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  overflow: visible !important;
  width: 100%;
}
.tablon-cms-fila {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: stretch;
  overflow: visible !important;
  box-sizing: border-box;
}
.tablon-cms-cell {
  position: relative;
  overflow: visible !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition: transform 0.2s ease;
}

@media (max-width: 650px) {
  .tablon-cms-fila {
    flex-wrap: wrap !important;
  }
  .tablon-cms-cell {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* Clases retrocompatibles para migraciones transparentes */
.tablon-tamano-compacto .tablon-cms-cell { min-height: 120px; }
.tablon-tamano-normal .tablon-cms-cell { min-height: 180px; }
.tablon-tamano-amplio .tablon-cms-cell { min-height: 250px; }
.ve-tablon-dist-1-col { grid-template-columns: 1fr; }
.ve-tablon-dist-2-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ve-tablon-dist-3-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* Glow verde adaptativo visible en web pública */
.has-hover-glow {
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.has-hover-glow:hover,
.ve-img-frame.has-hover-glow:hover,
a.ve-img-link:hover .ve-img-frame.has-hover-glow {
  box-shadow: 0 0 20px rgba(var(--color-resaltado-rgb), 0.85), 0 0 0 2.5px var(--color-resaltado) !important;
  transform: translateY(-2px);
}

/* Alineaciones del Tablón y Galería */
.ve-tablon-align-center,
.ve-galeria-align-center,
.ve-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  justify-self: center !important;
}
.ve-tablon-align-left,
.ve-galeria-align-left,
.ve-align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
  align-self: flex-start !important;
  justify-self: start !important;
}
.ve-tablon-align-right,
.ve-galeria-align-right,
.ve-align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
  justify-self: end !important;
}

/* ── Lightbox CMS: Botón ✕ eliminado en Fase 2.8M (clic en cualquier zona o imagen cierra) ── */
.lotlab-lightbox-backdrop {
  cursor: zoom-out !important;
}
.lotlab-lightbox-close {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: none !important;
}
.lotlab-lightbox-content,
.lotlab-lightbox-img {
  cursor: zoom-out !important;
}

/* ── Formas de imagen (marco y proporción) ── */
.ve-img-frame.forma-original {
  border-radius: 10px;
}
.ve-img-frame.forma-original img {
  height: auto;
  object-fit: contain;
}
.ve-img-frame.forma-cuadrado {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}
.ve-img-frame.forma-cuadrado img {
  object-fit: cover;
}
.ve-img-frame.forma-redondo {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.ve-img-frame.forma-redondo img {
  object-fit: cover;
}
.ve-img-frame.forma-horizontal {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}
.ve-img-frame.forma-horizontal img {
  object-fit: cover;
}
.ve-img-frame.forma-vertical {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
}
.ve-img-frame.forma-vertical img {
  object-fit: cover;
}

/* ==========================================================
   BOTÓN LOT-LAB (CMS & Web)
========================================================== */
.boton-lotlab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--color-principal);
  color: var(--color-texto);
  box-shadow: var(--sombra-suave);
  border: none;
  border-radius: var(--radio-normal);
  cursor: pointer;
  transition: var(--transicion);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  user-select: none;
  box-sizing: border-box;
}

.boton-lotlab:hover {
  background: var(--color-secundario);
  color: var(--color-texto);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.boton-lotlab:active {
  transform: translateY(0);
}

.boton-lotlab:focus-visible {
  outline: 2px solid var(--color-secundario);
  outline-offset: 2px;
}

.boton-lotlab.btn-block-full {
  width: 100%;
}

/* ==========================================================
   TEMAS ESTACIONALES Y FONDOS MULTICAPA (LOT-LAB CMS)
========================================================== */
.contenedorCapasFondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

body.tema-multicapa-activo {
    background-image: none !important;
}

.capa-fondo {
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.capa-fondo-fija {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-attachment: fixed;
}

.capa-fondo-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
    background-attachment: scroll;
}

/* Botones de control de temas estacionales para visitantes */
.botonTemaEstacional {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.botonTemaEstacional.tema-activo {
    border: 2px solid var(--color-resaltado) !important;
    box-shadow: 0 0 10px rgba(var(--color-resaltado-rgb), 0.45);
}

.botonTemaEstacional.tema-desactivado {
    opacity: 0.5;
    filter: grayscale(0.7);
}

.botonTemaEstacional:hover {
    transform: scale(1.08);
    opacity: 1;
}

/* ── Selector único de temas ── */
.selectorTemasWrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Iguala el espaciado entre botones de «Tema visual» al de «Cambiar modo de navegación» */
#listaTemas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.botonSelectorTemasBtn {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.botonSelectorTemasBtn.tema-activo {
    border: 2px solid var(--color-resaltado) !important;
    box-shadow: 0 0 10px rgba(var(--color-resaltado-rgb), 0.35);
}

.botonSelectorTemasBtn:hover {
    transform: scale(1.08);
}

/* Efectos decorativos temáticos */
.contenedorEfectosTema {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Nieve (Navidad) */
.particula-nieve {
    position: absolute;
    top: -15px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    animation: animacionNieve linear infinite;
}

@keyframes animacionNieve {
    0% {
        transform: translateY(-10px) translateX(0);
    }
    50% {
        transform: translateY(50vh) translateX(25px);
    }
    100% {
        transform: translateY(105vh) translateX(-15px);
    }
}

/* Murciélagos y Bruja (Halloween) - Siluetas vectoriales y vuelo orgánico */
.ente-halloween {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    user-select: none;
}

.murcielago-vuelo {
    width: 56px;
    height: 34px;
}

.bruja-vuelo {
    width: 98px;
    height: 63px;
}

/* Vuelo de murciélagos: orientados según sentido de desplazamiento */
.murcielago-vuelo.izq-a-der.onda-alta {
    animation: vueloMurcielagoIzqDerAlta var(--duracion-vuelo, 10s) linear forwards;
}

.murcielago-vuelo.izq-a-der.onda-baja {
    animation: vueloMurcielagoIzqDerBaja var(--duracion-vuelo, 11s) linear forwards;
}

.murcielago-vuelo.der-a-izq.onda-alta {
    animation: vueloMurcielagoDerIzqAlta var(--duracion-vuelo, 10s) linear forwards;
}

.murcielago-vuelo.der-a-izq.onda-baja {
    animation: vueloMurcielagoDerIzqBaja var(--duracion-vuelo, 11s) linear forwards;
}

.bruja-vuelo.izq-a-der {
    animation: vueloBrujaIzqDer var(--duracion-vuelo, 16s) ease-in-out forwards;
}

.bruja-vuelo.der-a-izq {
    animation: vueloBrujaDerIzq var(--duracion-vuelo, 16s) ease-in-out forwards;
}

/* Trayectorias curvas suaves con micro-ondulaciones de altura */
@keyframes vueloMurcielagoIzqDerAlta {
    0% {
        transform: translate3d(-10vw, 0, 0) scale(var(--escala-vuelo, 1)) rotate(4deg);
    }
    25% {
        transform: translate3d(25vw, -35px, 0) scale(var(--escala-vuelo, 1)) rotate(-6deg);
    }
    50% {
        transform: translate3d(55vw, 20px, 0) scale(var(--escala-vuelo, 1)) rotate(5deg);
    }
    75% {
        transform: translate3d(85vw, -25px, 0) scale(var(--escala-vuelo, 1)) rotate(-4deg);
    }
    100% {
        transform: translate3d(115vw, 15px, 0) scale(var(--escala-vuelo, 1)) rotate(3deg);
    }
}

@keyframes vueloMurcielagoIzqDerBaja {
    0% {
        transform: translate3d(-10vw, 0, 0) scale(var(--escala-vuelo, 1)) rotate(-3deg);
    }
    30% {
        transform: translate3d(30vw, 25px, 0) scale(var(--escala-vuelo, 1)) rotate(4deg);
    }
    60% {
        transform: translate3d(65vw, -30px, 0) scale(var(--escala-vuelo, 1)) rotate(-5deg);
    }
    100% {
        transform: translate3d(115vw, 0px, 0) scale(var(--escala-vuelo, 1)) rotate(2deg);
    }
}

@keyframes vueloMurcielagoDerIzqAlta {
    0% {
        transform: translate3d(115vw, 0, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(-4deg);
    }
    25% {
        transform: translate3d(85vw, -35px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(6deg);
    }
    50% {
        transform: translate3d(50vw, 25px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(-5deg);
    }
    75% {
        transform: translate3d(20vw, -20px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(4deg);
    }
    100% {
        transform: translate3d(-10vw, 10px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(-3deg);
    }
}

@keyframes vueloMurcielagoDerIzqBaja {
    0% {
        transform: translate3d(115vw, 0, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(3deg);
    }
    35% {
        transform: translate3d(70vw, 30px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(-4deg);
    }
    70% {
        transform: translate3d(35vw, -25px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(5deg);
    }
    100% {
        transform: translate3d(-10vw, 5px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(-2deg);
    }
}

/* Vuelo de la bruja: desplazamiento suave y majestuoso */
@keyframes vueloBrujaIzqDer {
    0% {
        transform: translate3d(-15vw, 0, 0) scale(var(--escala-vuelo, 1)) rotate(-2deg);
    }
    30% {
        transform: translate3d(30vw, -22px, 0) scale(var(--escala-vuelo, 1)) rotate(1deg);
    }
    70% {
        transform: translate3d(70vw, 18px, 0) scale(var(--escala-vuelo, 1)) rotate(-1deg);
    }
    100% {
        transform: translate3d(115vw, -10px, 0) scale(var(--escala-vuelo, 1)) rotate(0deg);
    }
}

@keyframes vueloBrujaDerIzq {
    0% {
        transform: translate3d(115vw, 0, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(2deg);
    }
    35% {
        transform: translate3d(65vw, -20px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(-1deg);
    }
    75% {
        transform: translate3d(25vw, 15px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(1deg);
    }
    100% {
        transform: translate3d(-15vw, -8px, 0) scaleX(-1) scale(var(--escala-vuelo, 1)) rotate(0deg);
    }
}

/* Murciélagos: Ciclo anatómico de 6 fases de aleteo quiróptero */
.silueta-svg-murcielago {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.alas-fase-1 { animation: cicloFase1 var(--duracion-aleteo, 0.30s) steps(1) infinite; }
.alas-fase-2 { animation: cicloFase2 var(--duracion-aleteo, 0.30s) steps(1) infinite; }
.alas-fase-3 { animation: cicloFase3 var(--duracion-aleteo, 0.30s) steps(1) infinite; }
.alas-fase-4 { animation: cicloFase4 var(--duracion-aleteo, 0.30s) steps(1) infinite; }
.alas-fase-5 { animation: cicloFase5 var(--duracion-aleteo, 0.30s) steps(1) infinite; }
.alas-fase-6 { animation: cicloFase6 var(--duracion-aleteo, 0.30s) steps(1) infinite; }

@keyframes cicloFase1 {
    0%, 100% { opacity: 1; visibility: visible; }
    16.66% { opacity: 0; visibility: hidden; }
}
@keyframes cicloFase2 {
    0%, 16.66% { opacity: 0; visibility: hidden; }
    16.67%, 33.33% { opacity: 1; visibility: visible; }
    33.34%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes cicloFase3 {
    0%, 33.33% { opacity: 0; visibility: hidden; }
    33.34%, 50.00% { opacity: 1; visibility: visible; }
    50.01%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes cicloFase4 {
    0%, 50.00% { opacity: 0; visibility: hidden; }
    50.01%, 66.66% { opacity: 1; visibility: visible; }
    66.67%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes cicloFase5 {
    0%, 66.66% { opacity: 0; visibility: hidden; }
    66.67%, 83.33% { opacity: 1; visibility: visible; }
    83.34%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes cicloFase6 {
    0%, 83.33% { opacity: 0; visibility: hidden; }
    83.34%, 99.99% { opacity: 1; visibility: visible; }
}

.cuerpo-mamifero,
.cuerpo-murcielago {
    animation: cuerpoBob var(--duracion-aleteo, 0.30s) ease-in-out infinite alternate;
}

@keyframes cuerpoBob {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-1.5px);
    }
}

/* Oscilación suave y majestuosa para la bruja */
.silueta-svg-bruja {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
    animation: oscilacionBruja 2.4s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}

@keyframes oscilacionBruja {
    0% {
        transform: translateY(0px) rotate(-2deg);
    }
    100% {
        transform: translateY(-7px) rotate(2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contenedorEfectosTema,
    .particula-nieve,
    .ente-halloween,
    .murcielago-vuelo,
    .bruja-vuelo,
    .silueta-svg-murcielago,
    .silueta-svg-bruja,
    .alas-fase-1,
    .alas-fase-2,
    .alas-fase-3,
    .alas-fase-4,
    .alas-fase-5,
    .alas-fase-6,
    .cuerpo-mamifero,
    .cuerpo-murcielago {
        display: none !important;
        animation: none !important;
    }
}

/* ==========================================================
   BARRA DE TESTING LOCAL DE TEMAS (SOLO ENTORNO DEV / LOCALHOST)
   ========================================================== */
.lotlab-dock-test-temas {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(18, 20, 30, 0.92);
    border: 1.5px solid var(--color-resaltado, #2ecc71);
    border-radius: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.82rem;
    color: #ffffff;
    user-select: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.lotlab-dock-test-temas .dock-label {
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.72rem;
    opacity: 0.85;
    padding-right: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.lotlab-dock-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.lotlab-dock-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.lotlab-dock-btn.activo {
    background: var(--color-resaltado, #2ecc71);
    color: #ffffff;
    border-color: var(--color-resaltado, #2ecc71);
    box-shadow: 0 0 10px rgba(var(--color-resaltado-rgb, 46, 204, 113), 0.5);
}

.lotlab-dock-btn-reset {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    opacity: 0.8;
}

.lotlab-dock-btn-reset:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.lotlab-dock-btn-cerrar {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 4px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 50%;
    margin-left: 2px;
}

.lotlab-dock-btn-cerrar:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

@media (max-width: 700px) {
    .lotlab-dock-test-temas {
        bottom: 12px;
        left: 12px;
        padding: 6px 10px;
        gap: 6px;
        font-size: 0.75rem;
    }
    .lotlab-dock-btn {
        padding: 4px 8px;
        font-size: 0.72rem;
    }
}

/* ==========================================================
   EFECTO DECORATIVO: GATO NEGRO Y RATÓN EN BARRA INFERIOR
   ========================================================== */
.contenedorGatoNegro {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 44px;
    pointer-events: none;
    overflow: visible;
    z-index: 95;
}

.gato-barra-personaje {
    position: absolute;
    bottom: 0px;
    height: 38px;
    width: 80px;
    pointer-events: none;
    user-select: none;
    will-change: transform, left;
}

.gato-capa {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: auto;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom center;
    pointer-events: none;
}

.gato-capa svg {
    display: block;
    height: 100%;
    width: auto;
    overflow: visible;
}

.gato-capa-caminando {
    height: 38px;
    width: auto;
}

.gato-capa-sentado {
    height: 38px;
    width: auto;
}

.gato-capa-estirado {
    height: 54px;
    width: auto;
}

.gato-estado-caminando .gato-capa-caminando,
.gato-estado-corriendo .gato-capa-caminando {
    opacity: 1;
}

.gato-estado-sentado .gato-capa-sentado {
    opacity: 1;
}

.gato-estado-estirado .gato-capa-estirado {
    opacity: 1;
}

body.modo-dia .gato-barra-personaje svg path {
    fill: #110e17;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}

body:not(.modo-dia) .gato-barra-personaje svg path {
    fill: #110e17;
    filter: drop-shadow(0 0 1.5px rgba(235, 225, 255, 0.65)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.gato-barra-personaje svg .pata-lejana {
    opacity: 0.82;
}

.raton-barra-personaje {
    position: absolute;
    bottom: 0px;
    height: 14px;
    width: auto;
    pointer-events: none;
    user-select: none;
    will-change: transform, left;
    z-index: 94;
}

.raton-barra-personaje svg {
    height: 100%;
    width: auto;
    display: block;
    fill: #110e17;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

body:not(.modo-dia) .raton-barra-personaje svg {
    filter: drop-shadow(0 0 1.5px rgba(235, 225, 255, 0.65)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* ==========================================================
   ANIMACIONES ARTICULADAS: MARCHA Y CARRERA FELINA
   ========================================================== */
.gato-anim-caminando {
    --gato-ciclo-paso: 0.72s;
}

.gato-anim-corriendo {
    --gato-ciclo-paso: 0.28s;
}

/* 1. Cuerpo: sutil oscilación continua ligada al paso */
.gato-anim-caminando .cuerpo-grupo,
.gato-anim-corriendo .cuerpo-grupo {
    animation: marchaCuerpoGato var(--gato-ciclo-paso, 0.72s) ease-in-out infinite;
    transform-origin: 110px 50px;
}

/* 2. Pata delantera cercana (Del-1) */
.gato-anim-caminando .pata-del-1,
.gato-anim-corriendo .pata-del-1 {
    animation: pasoDelantera1Gato var(--gato-ciclo-paso, 0.72s) ease-in-out infinite;
    transform-origin: 154px 62px;
}

/* 3. Pata delantera lejana (Del-2) */
.gato-anim-caminando .pata-del-2,
.gato-anim-corriendo .pata-del-2 {
    animation: pasoDelantera2Gato var(--gato-ciclo-paso, 0.72s) ease-in-out infinite;
    transform-origin: 132px 62px;
}

/* 4. Pata trasera cercana (Tras-1) */
.gato-anim-caminando .pata-tras-1,
.gato-anim-corriendo .pata-tras-1 {
    animation: pasoTrasera1Gato var(--gato-ciclo-paso, 0.72s) ease-in-out infinite;
    transform-origin: 80px 65px;
}

/* 5. Pata trasera lejana (Tras-2) */
.gato-anim-caminando .pata-tras-2,
.gato-anim-corriendo .pata-tras-2 {
    animation: pasoTrasera2Gato var(--gato-ciclo-paso, 0.72s) ease-in-out infinite;
    transform-origin: 52px 60px;
}

/* 6. Cola: balanceo fluido orgánico */
.gato-anim-caminando .cola-grupo,
.gato-anim-corriendo .cola-grupo {
    animation: balanceoColaGato calc(var(--gato-ciclo-paso, 0.72s) * 1.6) ease-in-out infinite alternate;
    transform-origin: 48px 30px;
}

@keyframes marchaCuerpoGato {
    0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
    25%           { transform: translateY(-0.8px) rotate(-0.5deg); }
    75%           { transform: translateY(-0.8px) rotate(0.5deg); }
}

@keyframes pasoDelantera1Gato {
    0%   { transform: rotate(14deg) translateY(0); }
    25%  { transform: rotate(0deg) translateY(0); }
    50%  { transform: rotate(-14deg) translateY(0); }
    60%  { transform: rotate(-8deg) translateY(-6px); }
    75%  { transform: rotate(4deg) translateY(-7.5px); }
    90%  { transform: rotate(15deg) translateY(-2px); }
    100% { transform: rotate(14deg) translateY(0); }
}

@keyframes pasoDelantera2Gato {
    0%   { transform: rotate(-14deg) translateY(0); }
    10%  { transform: rotate(-8deg) translateY(-6px); }
    25%  { transform: rotate(4deg) translateY(-7.5px); }
    40%  { transform: rotate(15deg) translateY(-2px); }
    50%  { transform: rotate(14deg) translateY(0); }
    75%  { transform: rotate(0deg) translateY(0); }
    100% { transform: rotate(-14deg) translateY(0); }
}

@keyframes pasoTrasera1Gato {
    0%   { transform: rotate(-2deg) translateY(0); }
    25%  { transform: rotate(-15deg) translateY(0); }
    35%  { transform: rotate(-6deg) translateY(-7px); }
    50%  { transform: rotate(6deg) translateY(-8px); }
    65%  { transform: rotate(14deg) translateY(-2px); }
    75%  { transform: rotate(13deg) translateY(0); }
    100% { transform: rotate(-2deg) translateY(0); }
}

@keyframes pasoTrasera2Gato {
    0%   { transform: rotate(6deg) translateY(-8px); }
    15%  { transform: rotate(14deg) translateY(-2px); }
    25%  { transform: rotate(13deg) translateY(0); }
    50%  { transform: rotate(-2deg) translateY(0); }
    75%  { transform: rotate(-15deg) translateY(0); }
    85%  { transform: rotate(-6deg) translateY(-7px); }
    100% { transform: rotate(6deg) translateY(-8px); }
}

@keyframes balanceoColaGato {
    0%   { transform: rotate(-8deg); }
    100% { transform: rotate(10deg); }
}

@keyframes respiracionGatoSentado {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.02); }
}

@keyframes carreraRatonPaso {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.2px); }
}

.gato-anim-sentado {
    animation: respiracionGatoSentado 3.2s ease-in-out infinite;
    transform-origin: bottom center;
}

.raton-anim-corriendo {
    animation: carreraRatonPaso 0.10s linear infinite;
    transform-origin: bottom center;
}

@media (prefers-reduced-motion: reduce) {
    .gato-barra-personaje *,
    .raton-barra-personaje * {
        animation: none !important;
        transition: none !important;
    }
}





/* ================================================================
   LOT-LAB — Catálogo de estilos: variables CSS por familia funcional
   Estas variables son sobreescritas por catalogo-estilos.js cuando
   el usuario asigna un estilo del catálogo. Los valores por defecto
   reproducen exactamente el aspecto actual de cada familia.
   ================================================================ */

/* Las variables se definen vacías por defecto.
   catalogo-estilos.js inyecta el valor real cuando hay asignación.
   Si no hay inyección, los botones usan sus estilos CSS originales
   (reglas anteriores en esta hoja de estilos). No se sobreescribe nada. */