/**
 * Innovafest B10 — [innovafest_historia] (v0.16.0).
 *
 * Franja azul noche del Innovafest (los colores del contador) con la línea de
 * tiempo de las ediciones y la ficha de la elegida; debajo, la sección de
 * [innovafest_ganadores] (ganadores.css). Se adapta al ancho del widget
 * (container queries). Variables sobrescribibles desde Elementor: --ifbh-*.
 */
.ifb-hist {
    --ifbh-noche: #020836;
    --ifbh-azul: #00145b;
    --ifbh-cian: #16edf6;
    --ifbh-celeste: #3bb5e8;
    --ifbh-indigo: #2a388f;
    --ifbh-suave: #c4ecff;
    --ifbh-radio: 20px;
    container-type: inline-size;
    box-sizing: border-box;
}

.ifb-hist *,
.ifb-hist *::before,
.ifb-hist *::after {
    box-sizing: border-box;
}

.ifb-hist__banda {
    padding: 24px 24px 22px;
    border-radius: var(--ifbh-radio);
    background: var(--ifbh-noche);
    color: #fff;
}

.ifb-hist .ifb-hist__titulo {
    margin: 0 0 18px;
    padding: 0;
    color: var(--ifbh-cian);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.ifb-hist__titulo span {
    color: var(--ifbh-suave);
    font-weight: 400;
}

/* ---------- Línea de tiempo ---------- */

.ifb-hist__linea {
    margin: 0 -8px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ifbh-indigo) transparent;
}

.ifb-hist .ifb-hist__linea ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--ifb-hist-n, 6), minmax(96px, 1fr));
    margin: 0;
    padding: 10px 8px 6px;
    list-style: none;
}

/* La línea pasa por el centro de los nodos, del primero al último. */
.ifb-hist .ifb-hist__linea ol::before {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(8px + (100% - 16px) / var(--ifb-hist-n, 6) / 2);
    right: calc(8px + (100% - 16px) / var(--ifb-hist-n, 6) / 2);
    height: 2px;
    background: var(--ifbh-indigo);
}

.ifb-hist .ifb-hist__linea li {
    margin: 0;
    padding: 0;
}

.ifb-hist .ifb-hist__ed {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 6px 4px;
    border-radius: 12px;
    color: var(--ifbh-suave) !important;
    text-align: center;
    text-decoration: none !important;
}

.ifb-hist__ed:focus-visible {
    outline: 2px solid var(--ifbh-cian);
    outline-offset: 2px;
}

.ifb-hist__nodo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 0 8px;
    border: 2px solid var(--ifbh-celeste);
    border-radius: 50%;
    background: var(--ifbh-noche);
    color: var(--ifbh-suave);
    font-size: 14px;
    font-weight: 700;
    transition: transform .15s ease, background-color .15s ease;
}

.ifb-hist__ed:hover .ifb-hist__nodo {
    transform: scale(1.08);
}

.ifb-hist__ed.is-activa .ifb-hist__nodo {
    border-color: var(--ifbh-cian);
    background: var(--ifbh-cian);
    box-shadow: 0 0 0 5px rgba(22, 237, 246, .18);
    color: var(--ifbh-noche);
    transform: scale(1.12);
}

.ifb-hist__anio {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.ifb-hist__lema {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ifb-hist__ed.is-activa .ifb-hist__lema {
    color: #fff;
}

.ifb-hist__borrador {
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff8e5;
    color: #6b4d00;
    font-size: 11px;
    font-weight: 600;
}

.ifb-hist__ed.is-borrador .ifb-hist__nodo {
    border-style: dashed;
}

/* ---------- Ficha de la edición elegida ---------- */

.ifb-hist__ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--ifbh-azul);
}

.ifb-hist__ficha[hidden] {
    display: none;
}

.ifb-hist__logo {
    flex: none;
    display: flex;
    align-items: center;
}

.ifb-hist .ifb-hist__logo-img {
    display: block;
    width: auto;
    max-width: 140px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.ifb-hist__ficha-texto {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ifb-hist__sup {
    color: var(--ifbh-cian);
    font-size: 13px;
    font-weight: 600;
}

.ifb-hist__nombre {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.ifb-hist__ficha-lema {
    color: var(--ifbh-suave);
    font-size: 15px;
}

.ifb-hist .ifb-hist__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ifb-hist .ifb-hist__cifras li {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--ifbh-suave);
    font-size: 12px;
    line-height: 1.3;
}

.ifb-hist__cifras strong {
    color: var(--ifbh-cian);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

.ifb-hist .ifb-hist__pagina {
    padding: 7px 14px;
    border: 1px solid var(--ifbh-celeste);
    border-radius: 999px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.ifb-hist .ifb-hist__pagina:hover {
    background: rgba(59, 181, 232, .18);
}

/* ---------- Ganadores de la elegida ---------- */

.ifb-hist__ganadores {
    margin-top: 20px;
}

.ifb-hist__panel[hidden] {
    display: none;
}

/* ---------- Anchos angostos ---------- */

@container (max-width: 560px) {
    .ifb-hist__banda {
        padding: 18px 14px 16px;
    }

    .ifb-hist .ifb-hist__linea ol {
        grid-template-columns: repeat(var(--ifb-hist-n, 6), minmax(84px, 1fr));
    }

    .ifb-hist__ficha {
        padding: 14px;
    }

    .ifb-hist__nombre {
        font-size: 18px;
    }

    .ifb-hist .ifb-hist__cifras {
        gap: 8px 20px;
    }

    .ifb-hist__cifras strong {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ifb-hist__nodo {
        transition: none;
    }

    .ifb-hist__ed:hover .ifb-hist__nodo,
    .ifb-hist__ed.is-activa .ifb-hist__nodo {
        transform: none;
    }
}