/* ════════════════════════════════════════════════════════════════════════
   _block-accordion.css
   Estilos del Element landing-accordion.php (acordeón Bootstrap 5 Collapse)
   Cargado vía $this->Landing->css('accordion') → css/landing/blocks/_block-accordion.css

   ÍNDICE
   ───────────────────────────────────────────────────────────────────────
   1. Base compartida — reset de Bootstrap, aplica a los 4 styles
   2. style="default"   — círculo numerado, borde inferior grueso al abrir
   3. style="flush"     — sin bordes, item abierto se eleva con sombra
   4. style="cards"     — tarjetas independientes, número cuadrado,
                           indicador +/− en círculo a la derecha
   5. style="icon-left" — sin número, indicador +/− al inicio del título
   ════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────
   1. BASE COMPARTIDA
   Neutraliza el color/fondo "activo" y el halo de foco de Bootstrap.
   El resto de la apariencia la define cada style más abajo.
   ──────────────────────────────────────────────────────────────────────── */

.landing-accordion-block {
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: inherit;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-color: inherit;
}

.landing-accordion-block .accordion-button {
    display: flex;
    align-items: center;
    color: inherit;
    background-color: transparent;
    box-shadow: none;
}

.landing-accordion-block .accordion-button:not(.collapsed) {
    color: inherit;
    background-color: transparent;
    box-shadow: none;
}

.landing-accordion-block .accordion-button:focus,
.landing-accordion-block .accordion-button:focus-visible {
    box-shadow: none;
    border-color: inherit;
    outline: none;
}

.landing-accordion-block .accordion-body {
    padding-top: 1rem;
}


/* ────────────────────────────────────────────────────────────────────────
   2. STYLE: default
   Círculo numerado en negro + chevron estándar. El único indicador de
   apertura es el grosor del borde inferior (sin cambio de color/halo).
   ──────────────────────────────────────────────────────────────────────── */

.landing-accordion-block.style-default .accordion-number,
.landing-accordion-block:not([class*="style-"]) .accordion-number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.landing-accordion-block.style-default .accordion-item {
    border-bottom: 1px solid var(--bs-accordion-border-color, #dee2e6);
}

.landing-accordion-block.style-default .accordion-button {
    /* Borde reservado desde el principio (transparente) para que no haya
       salto de layout al pasar de 1px a 3px al togglear. */
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
}

.landing-accordion-block.style-default .accordion-button[aria-expanded="true"] {
    border-bottom-color: #000;
}


/* ────────────────────────────────────────────────────────────────────────
   3. STYLE: flush
   Sin bordes ni fondos entre items — solo separación vertical. El item
   abierto se distingue elevándose con una sombra sutil de tarjeta
   flotante, igual que hace Bootstrap con .accordion-flush pero remarcado.
   ──────────────────────────────────────────────────────────────────────── */

.landing-accordion-block.style-flush .accordion-number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.landing-accordion-block.style-flush .accordion-item {
    margin-bottom: 0.75rem;
    border: none;
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

.landing-accordion-block.style-flush .accordion-item:last-child {
    margin-bottom: 0;
}

.landing-accordion-block.style-flush .accordion-button {
    padding: 1rem 1.25rem;
}

/* Item con contenido visible → se eleva con sombra.
   :has() es progresivo: en navegadores sin soporte el acordeón sigue
   funcionando igual, simplemente sin el efecto de elevación. */
.landing-accordion-block.style-flush .accordion-item:has(.accordion-collapse.show) {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.landing-accordion-block.style-flush .accordion-collapse {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* ────────────────────────────────────────────────────────────────────────
   4. STYLE: cards
   Cada item es una tarjeta independiente (fondo gris claro, radio,
   separación entre tarjetas). Número en cuadrado en vez de círculo.
   El indicador de apertura es un +/− dentro de un círculo, a la derecha.
   ──────────────────────────────────────────────────────────────────────── */

.landing-accordion-block.style-cards .accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.landing-accordion-block.style-cards .accordion-item {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f2f2f3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.landing-accordion-block.style-cards .accordion-item:has(.accordion-collapse.show) {
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.landing-accordion-block.style-cards .accordion-button {
    padding: 1.1rem 1.25rem;
}

.landing-accordion-block.style-cards .accordion-number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 16px;
    border-radius: 6px;
    background-color: #000;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

/* Reemplaza el chevron de Bootstrap por un +/− dentro de un círculo,
   siempre al final (derecha) del botón. */
.landing-accordion-block.style-cards .accordion-button::after {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-left: auto;
    background-image: none;
    border: 1.5px solid #000;
    border-radius: 50%;
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: #000;
    transform: none;
    transition: none;
}

.landing-accordion-block.style-cards .accordion-button:not(.collapsed)::after {
    content: "\2212"; /* − */
}


/* ────────────────────────────────────────────────────────────────────────
   5. STYLE: icon-left
   Sin numeración. El indicador +/− se sitúa al principio del título
   (antes del texto) dentro de un círculo negro. Se logra reordenando
   con flexbox el ::after que Bootstrap ya genera — no requiere tocar
   el markup del Element.
   ──────────────────────────────────────────────────────────────────────── */

.landing-accordion-block.style-icon-left .accordion-number {
    display: none;
}

.landing-accordion-block.style-icon-left .accordion-item {
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 6px;
    background-color: #f2f2f3;
}

.landing-accordion-block.style-icon-left .accordion-item:last-child {
    margin-bottom: 0;
}

.landing-accordion-block.style-icon-left .accordion-item:has(.accordion-collapse.show) {
    background-color: #000;
    color: #fff;
}

.landing-accordion-block.style-icon-left .accordion-button {
    padding: 0.9rem 1.25rem;
}

.landing-accordion-block.style-icon-left .accordion-button::after {
    order: -1;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 14px;
    margin-left: 0;
    background-image: none;
    background-color: #000;
    border-radius: 50%;
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    transform: none;
    transition: none;
}

.landing-accordion-block.style-icon-left .accordion-item:has(.accordion-collapse.show) .accordion-button::after {
    background-color: #fff;
    color: #000;
    content: "\2212"; /* − */
}