/**
 * Widget "Legal · Índice de documentos".
 *
 * Navegación vertical entre documentos legales. El ítem activo se resalta con
 * barra roja izquierda + fondo rosa + texto rojo negrita. El `border-left` de
 * 3px existe SIEMPRE (transparente en inactivos) para que el texto NO salte al
 * activarse. Sin fondo/borde/padding/sombra propios: vive dentro del container.
 *
 * Paleta configurable por variables (control de Estilo del widget); los
 * fallbacks son el design system FANOR.
 */

.fnr-legal-index {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fnr-legal-index__title {
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--fnr-legal-title, #999999);
    margin-bottom: 14px;
}

.fnr-legal-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fnr-legal-index__item {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-left: 3px solid transparent; /* siempre presente → no salta */
    font-family: var(--fanor-font-body);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--fnr-legal-text, #444444);
    text-decoration: none;
    transition: all 0.15s;
}

/* Hover/focus explícitos y con especificidad (via .__list) para que NO se cuele
   el a:hover rosa del tema/Elementor. El activo conserva su rojo al pasar. */
.fnr-legal-index__list .fnr-legal-index__item:hover,
.fnr-legal-index__list .fnr-legal-index__item:focus {
    background: var(--fnr-legal-hover-bg, #FAFAFA);
    color: var(--fnr-legal-text, #444444);
    text-decoration: none;
}

.fnr-legal-index__item.is-active {
    border-left-color: var(--fnr-legal-red, #CC0000);
    background: var(--fnr-legal-active-bg, #FCEAEA);
    color: var(--fnr-legal-red, #CC0000);
    font-weight: 600;
}

.fnr-legal-index__list .fnr-legal-index__item.is-active:hover,
.fnr-legal-index__list .fnr-legal-index__item.is-active:focus {
    background: var(--fnr-legal-active-bg, #FCEAEA);
    color: var(--fnr-legal-red, #CC0000);
}

/* ===== Móvil/tablet (≤768px): selector desplegable flotante ===== */
/* Oculto en escritorio; el interruptor escritorio/móvil es puro CSS. */
.fnr-legal-select {
    display: none;
    position: relative; /* ancla el panel flotante */
    width: 100%;
}

.fnr-legal-select__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--fanor-font-body);
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
    text-align: left;
}

/* El botón no debe tomar el hover del tema (fondo/color propios). */
.fnr-legal-select__btn:hover,
.fnr-legal-select__btn:focus {
    background: #fff;
    color: #1A1A1A;
}

.fnr-legal-select__chev {
    flex-shrink: 0;
    color: var(--fnr-legal-red, #CC0000); /* stroke=currentColor → respeta el control */
    transition: transform 0.2s;
}

.fnr-legal-select[data-open="true"] .fnr-legal-select__chev {
    transform: rotate(180deg);
}

/* Panel flotante: position absolute → no empuja el contenido. */
.fnr-legal-select__panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.fnr-legal-select[data-open="true"] .fnr-legal-select__panel {
    display: block;
}

.fnr-legal-select__item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-left: 3px solid transparent; /* permanente → no salta */
    border-bottom: 1px solid #F4F4F4;
    font-family: var(--fanor-font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--fnr-legal-text, #444444);
    text-decoration: none;
}

.fnr-legal-select__item.is-active {
    border-left-color: var(--fnr-legal-red, #CC0000);
    background: var(--fnr-legal-active-bg, #FCEAEA);
    color: var(--fnr-legal-red, #CC0000);
    font-weight: 600;
}

/* Hover/focus explícitos y con especificidad (via .__panel) para que NO se cuele
   el a:hover rosa del tema/Elementor en el panel móvil. El activo mantiene su rojo. */
.fnr-legal-select__panel .fnr-legal-select__item:hover,
.fnr-legal-select__panel .fnr-legal-select__item:focus {
    background: transparent;
    color: var(--fnr-legal-text, #444444);
    text-decoration: none;
}

.fnr-legal-select__panel .fnr-legal-select__item.is-active:hover,
.fnr-legal-select__panel .fnr-legal-select__item.is-active:focus {
    background: var(--fnr-legal-active-bg, #FCEAEA);
    color: var(--fnr-legal-red, #CC0000);
}

@media (max-width: 768px) {
    .fnr-legal-index {
        display: none;
    }
    .fnr-legal-select {
        display: block;
    }
}