/* Fondo replicando el del tracking */
.page-shell--productos-ranking {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.page-shell--productos-ranking .page-background {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.page-shell--productos-ranking .page-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("analisis-de-datos-empresariales.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1.08) translateY(10%);
    filter: blur(1.5px) brightness(0.7) contrast(0.75) saturate(0.9);
}

.page-shell--productos-ranking .page-background::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(130deg, var(--tracking-overlay-start), var(--tracking-overlay-end)); */
}

.page-shell--productos-ranking .navbar,
.page-shell--productos-ranking #page-content-dash,
.page-shell--productos-ranking .footer {
    position: relative;
}

.page-shell--productos-ranking .navbar {
    z-index: 1;
}

/* Contenedor central */
.productos-ranking-container {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--navbar-height) - var(--footer-height));
    height: calc(100dvh - var(--navbar-height) - var(--footer-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
    min-height: calc(100dvh - var(--navbar-height) - var(--footer-height));
}

/* Frame/panel reutiliza tracking-hero-panel */
.tracking-hero-panel.productos-ranking-frame {
    max-width: 640px;
    width: 100%;
    min-height: min(640px, calc(100vh - var(--navbar-height) - var(--footer-height) - 48px));
    min-height: min(640px, calc(100dvh - var(--navbar-height) - var(--footer-height) - 48px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 60px 48px;
    gap: 36px;
}

/* Títulos con más peso y tamaño para esta vista */
.productos-ranking-frame .tracking-hero-title {
     font-size: clamp(4rem, 7vw, 6rem); 
    font-weight: 600;
    text-align: center;
}

.productos-ranking-frame .tracking-hero-subtitle {
    font-size: clamp(2.5rem, 3.5vw, 3.8rem);
    font-weight: 500;
    margin-top: 0;
    text-align: center;
}

/* Wrapper que provee referencia de ancho correcta al dropdown de Dash */
/* Wrapper centrado con ancho explícito como referencia del dropdown */
.ranking-search-wrapper {
    width: 90%;
    margin: 0 auto;
}

/* Forzar ancho solo en contenedores estructurales de dcc.Dropdown */
.ranking-search-wrapper > div,
.ranking-search-wrapper .ranking-search-dropdown,
.ranking-search-wrapper .ranking-search-dropdown .Select,
.ranking-search-wrapper .ranking-search-dropdown .Select-control,
.ranking-search-wrapper .ranking-search-dropdown .Select-value,
.ranking-search-wrapper .ranking-search-dropdown .Select-multi-value-wrapper {
    width: 100% !important;
}

.ranking-search-dropdown .Select-control {
    background-color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    box-shadow: 0 8px 22px rgba(16, 24, 32, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    height: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.ranking-search-dropdown .Select-control:hover {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.78);
}

.ranking-search-dropdown .Select-control.is-focused {
    background-color: rgba(255, 255, 255, 0.94);
    border-color: rgba(98, 108, 119, 0.45);
    box-shadow: 0 0 0 2px rgba(98, 108, 119, 0.2);
}

.ranking-search-dropdown .Select-placeholder,
.ranking-search-dropdown .Select-value-label {
    color: rgba(33, 37, 41, 0.62);
    font-size: 18px;
    display: flex;
    align-items: center;
}

.ranking-search-dropdown .Select-value {
    line-height: 50px;
    color: rgba(33, 37, 41, 0.88);
}

.ranking-search-dropdown .Select-input {
    color: rgba(33, 37, 41, 0.88);
}

.ranking-search-dropdown .Select-input input {
    background-color: transparent;
    color: rgba(33, 37, 41, 0.88);
}

.ranking-search-dropdown .Select-input input::placeholder {
    color: rgba(33, 37, 41, 0.62);
}

/* Arrow simplificado */
.ranking-search-dropdown .Select-arrow {
    border-top-color: rgba(33, 37, 41, 0.64);
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 6px;
}

.ranking-search-dropdown .Select-arrow-zone {
    width: auto !important;
    padding-right: 8px;
}

/* Menu de opciones */
 .ranking-search-dropdown .Select-menu-outer {
    background-color: rgba(252, 253, 255, 0.96);
    color: rgba(33, 37, 41, 0.88) !important;
    border: 1px solid rgba(122, 130, 140, 0.24);
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


@media (max-width: 960px) {
    .productos-ranking-container {
        height: calc(100vh - var(--navbar-height) - var(--footer-height));
        height: calc(100dvh - var(--navbar-height) - var(--footer-height));
        min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
        min-height: calc(100dvh - var(--navbar-height) - var(--footer-height));
        padding: 16px;
    }

    .tracking-hero-panel.productos-ranking-frame {
        max-width: 100%;
        min-height: min(560px, calc(100vh - var(--navbar-height) - var(--footer-height) - 32px));
        min-height: min(560px, calc(100dvh - var(--navbar-height) - var(--footer-height) - 32px));
        padding: 40px 28px;
        gap: 28px;
    }

    .ranking-search-wrapper .ranking-search-dropdown {
        width: 100%;
    }

    .ranking-search-dropdown .Select-control {
        height: 44px;
        min-height: 44px;
    }

    .ranking-search-dropdown .Select-placeholder {
        font-size: 16px;
    }

    .productos-ranking-container {
        height: calc(100vh - var(--navbar-height) - var(--footer-height));
        height: calc(100dvh - var(--navbar-height) - var(--footer-height));
        min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
        min-height: calc(100dvh - var(--navbar-height) - var(--footer-height));
    }

    .tracking-hero-panel.productos-ranking-frame {
        min-height: min(500px, calc(100vh - var(--navbar-height) - var(--footer-height) - 28px));
        min-height: min(500px, calc(100dvh - var(--navbar-height) - var(--footer-height) - 28px));
        padding: 20px 13px;
        gap: 20px;
    }

    .ranking-search-wrapper .ranking-search-dropdown {
        width: 100%;
    }

    .productos-ranking-frame .tracking-hero-title {
        font-size: clamp(3rem, 10vw, 4rem)!important;
    }

    .productos-ranking-frame .tracking-hero-subtitle {
        font-size: clamp(1.8rem, 5vw, 2.5rem)!important;
    }
}