/**
 * Laracha Inscripciones - Frontend Stylesheet
 *
 * Public-facing styles for the activity registration system.
 * Municipality of Laracha.
 *
 * Color palette (WordPress admin):
 *   Primary:    #0073aa
 *   Success:    #00a32a
 *   Danger:     #d63638
 *   Warning:    #dba617
 *   Text:       #1d2327
 *   Text muted: #50575e
 *   Border:     #c3c4c7
 *   Background: #f0f0f1
 */

/* ==========================================================================
   1. PORTADA - Activity Listing
   ========================================================================== */

.laracha-portada {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.laracha-portada h2 {
    font-size: 2.5em;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    letter-spacing: -0.02em;
}

/* Estado vacío: campaña sin actividades */
.laracha-portada__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 520px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
}

.laracha-portada__empty-icon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block;
    animation: laracha-empty-float 3s ease-in-out infinite;
}

@keyframes laracha-empty-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.laracha-portada__empty-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.laracha-portada__empty-text {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .laracha-portada__empty-icon { animation: none; }
}

/* Hero de portada de campaña */
.laracha-campaign-hero {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 5;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.laracha-campaign-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.laracha-campaign-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.25rem;
    padding: 2rem 2.5rem;
    /* El velo cubre el banner entero y se aclara solo arriba: así el texto
       siempre tiene fondo, mande lo que mande la foto. */
    background: linear-gradient(
        to top,
        rgba(0,0,0,var(--camp-overlay-alpha, 0.5)) 0%,
        rgba(0,0,0,calc(var(--camp-overlay-alpha, 0.5) * 0.75)) 45%,
        rgba(0,0,0,calc(var(--camp-overlay-alpha, 0.5) * 0.25)) 100%
    );
}

.laracha-campaign-hero__texto {
    margin-top: auto;
}

/* Oculto a la vista pero legible por lectores de pantalla: se usa cuando el
   cartel ya trae el nombre rotulado y repetirlo encima sobraría. */
.laracha-solo-lectores {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El nombre de la campaña va con el peso del antiguo subtítulo: sin titular
   gigante, que tapaba media foto. */
.laracha-campaign-hero__title,
.laracha-portada .laracha-campaign-hero__title {
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.35;
    color: #fff;
    margin: 0;
    padding-bottom: 0;
    opacity: 0.95;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    -webkit-text-fill-color: #fff;
    background: none;
    background-clip: unset;
    -webkit-background-clip: unset;
}

/* Pie del banner: periodo a la izquierda, botón a la derecha. */
.laracha-campaign-hero__pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.laracha-campaign-hero__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    text-shadow: 0 1px 5px rgba(0,0,0,0.45);
}

.laracha-campaign-hero__icono {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.laracha-campaign-hero__mas {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.7rem 1.15rem;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 8px;
    background: rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: inherit;
    font: inherit;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.laracha-campaign-hero__mas:hover,
.laracha-campaign-hero__mas:focus-visible {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.75);
    transform: translateY(-1px);
}

/* ---------- Ventana con la descripción completa ---------- */

.laracha-campaign-modal[hidden] {
    display: none;
}

.laracha-campaign-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.laracha-campaign-modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
}

.laracha-campaign-modal__caja {
    position: relative;
    width: min(760px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: 2.25rem 2.5rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}

.laracha-campaign-modal__cerrar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.laracha-campaign-modal__cerrar:hover,
.laracha-campaign-modal__cerrar:focus-visible {
    background: #f1f5f9;
    color: #0f172a;
}

.laracha-campaign-modal__cerrar svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
}

.laracha-campaign-modal__titulo {
    margin: 0 2.5rem 0.35rem 0;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.25;
    color: #1A5A9E;
}

.laracha-campaign-modal__meta {
    margin: 0 0 1.5rem;
    font-size: 0.95em;
    color: #64748b;
}

.laracha-campaign-modal__texto {
    font-size: 1.02em;
    line-height: 1.7;
    color: #334155;
}

@media (max-width: 768px) {
    .laracha-campaign-modal__caja {
        padding: 1.75rem 1.25rem;
    }

    .laracha-campaign-modal__titulo {
        font-size: 1.25em;
    }
}

.laracha-campaign-hero__desc {
    font-size: 1.05em;
    margin: 0.5rem 0 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

@media (max-width: 768px) {
    /* En mobile dejamos de superponer texto sobre imagen: la imagen
     * actúa como banner arriba (altura fija) y el título + descripción
     * van debajo en su propio bloque, así el texto siempre se lee bien
     * y nunca se desborda sobre fondos abigarrados. */
    .laracha-campaign-hero {
        aspect-ratio: auto;
        height: auto;
        border-radius: 12px;
        background: #f1f5f9;
        overflow: hidden;
    }

    .laracha-campaign-hero__img {
        height: 140px;
        border-radius: 0;
    }

    .laracha-campaign-hero__overlay {
        position: static;
        padding: 0.875rem 1rem 1rem;
        background: transparent;
    }

    /* El color blanco original no contrasta sobre el fondo claro del
     * bloque inferior — forzamos colores legibles ignorando el inline
     * `style="color:..."` que renderiza PHP. */
    .laracha-campaign-hero__title,
    .laracha-portada .laracha-campaign-hero__title {
        font-size: 1.1em;
        font-weight: 600;
        color: #1d2327 !important;
        -webkit-text-fill-color: #1d2327 !important;
        text-shadow: none;
    }

    .laracha-campaign-hero__meta {
        color: #475569 !important;
        text-shadow: none;
        opacity: 1;
    }

    .laracha-campaign-hero__pie {
        align-items: stretch;
        gap: 0.75rem;
    }

    /* Sin imagen detrás, el botón translúcido no se vería: pasa a botón sólido. */
    .laracha-campaign-hero__mas {
        margin-left: 0;
        justify-content: center;
        background: #1A5A9E;
        border-color: #1A5A9E;
        color: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .laracha-campaign-hero__mas:hover,
    .laracha-campaign-hero__mas:focus-visible {
        background: #0F4C81;
        border-color: #0F4C81;
    }

    .laracha-campaign-hero__desc {
        color: #475569 !important;
        opacity: 1 !important;
        font-size: 0.95em;
        line-height: 1.5;
        text-shadow: none;
        margin-top: 0.35rem;
    }
}

/* Selector de campaña */
/* Campaign tabs */
.laracha-campaign-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 2.5rem;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.laracha-campaign-tabs::-webkit-scrollbar {
    display: none;
}

.laracha-campaign-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.95rem 1.85rem;
    border-radius: 12px;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.18s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.laracha-campaign-tabs__item:hover {
    color: #1A5A9E;
    background: rgba(26, 90, 158, 0.10);
    transform: translateY(-1px);
}

.laracha-campaign-tabs__item--active,
.laracha-campaign-tabs__item--active:hover {
    background: #1A5A9E;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(26, 90, 158, 0.28), 0 2px 4px rgba(15, 23, 42, 0.08);
    transform: translateY(0);
}

.laracha-campaign-tabs__item--active .laracha-campaign-tabs__year {
    color: #cfe1f6;
    opacity: 1;
}

.laracha-campaign-tabs__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}

.laracha-campaign-tabs__item--active .laracha-campaign-tabs__dot {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32);
}

.laracha-campaign-tabs__year {
    font-weight: 500;
    opacity: 0.7;
    font-size: 0.9em;
}

/* Desktop estricto (>1024px): stack vertical de pills a ancho completo
 * (en filas), sea cual sea el número de campañas. Así los nombres largos
 * caben en una sola línea sin truncarse incluso cuando solo hay dos.
 * En tablet/mobile (≤1024px) se muestra el dropdown custom (ver bloque
 * inmediatamente debajo).
 */
@media (min-width: 1025px) {
    .laracha-campaign-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        overflow-x: visible;
    }

    .laracha-campaign-tabs .laracha-campaign-tabs__item {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
        font-size: 1.25em;
        padding: 1rem 1.5rem;
    }

    .laracha-campaign-tabs .laracha-campaign-tabs__item--active::after {
        content: '\2713';
        margin-left: auto;
        padding-left: 1rem;
        font-size: 1.05em;
        font-weight: 700;
    }
}

/* Selector de campaña como dropdown custom: se usa en tablet y mobile
 * (≤1024px) cuando hay 2+ campañas. En desktop estricto (>1024px) se
 * oculta y se muestran los tabs (horizontales con 2, verticales con 3+).
 * El cambio de visibilidad por viewport está en el bloque
 * @media (max-width: 1024px) que sigue al final del dropdown. */
.laracha-campaign-dropdown {
    display: none;
    position: relative;
    margin: 0 auto 2rem;
    max-width: 460px;
    font-family: inherit;
}

.laracha-campaign-dropdown__label {
    display: block;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.4rem;
    padding-left: 2px;
}

.laracha-campaign-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 60px;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
    color: #1d2327;
    font-size: 1.1em;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}

.laracha-campaign-dropdown__trigger:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.laracha-campaign-dropdown__trigger:focus-visible {
    outline: none;
    border-color: #1A5A9E;
    box-shadow: 0 0 0 4px rgba(26, 90, 158, 0.18);
}

.laracha-campaign-dropdown.is-open .laracha-campaign-dropdown__trigger {
    border-color: #1A5A9E;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.laracha-campaign-dropdown__current {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.laracha-campaign-dropdown__current-name {
    overflow: visible;
    white-space: normal;
    line-height: 1.25;
    word-break: break-word;
}

.laracha-campaign-dropdown__chevron {
    width: 18px;
    height: 18px;
    color: #1A5A9E;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.laracha-campaign-dropdown.is-open .laracha-campaign-dropdown__chevron {
    transform: rotate(180deg);
}

.laracha-campaign-dropdown__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.laracha-campaign-dropdown__dot--inactive {
    background: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.4);
}

.laracha-campaign-dropdown__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 2px solid #1A5A9E;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15), 0 4px 8px rgba(15, 23, 42, 0.08);
    max-height: 320px;
    overflow-y: auto;
    animation: laracha-campaign-dropdown-in 0.18s ease-out;
}

@keyframes laracha-campaign-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.laracha-campaign-dropdown__list[hidden] {
    display: none;
}

.laracha-campaign-dropdown__list li {
    margin: 0;
    padding: 0;
}

.laracha-campaign-dropdown__list li + li {
    margin-top: 2px;
}

.laracha-campaign-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    color: #1d2327;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.12s, color 0.12s;
}

.laracha-campaign-dropdown__item:hover,
.laracha-campaign-dropdown__item:focus-visible {
    background: #f1f5f9;
    color: #0f4c81;
    outline: none;
}

.laracha-campaign-dropdown__item.is-current {
    background: rgba(26, 90, 158, 0.08);
    color: #0f4c81;
    font-weight: 700;
}

.laracha-campaign-dropdown__item.is-current:hover {
    background: rgba(26, 90, 158, 0.12);
}

.laracha-campaign-dropdown__name {
    flex: 1 1 auto;
    overflow: visible;
    white-space: normal;
    line-height: 1.3;
    word-break: break-word;
}

.laracha-campaign-dropdown__year {
    font-size: 0.8em;
    font-weight: 500;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.laracha-campaign-dropdown__item.is-current .laracha-campaign-dropdown__year {
    background: rgba(26, 90, 158, 0.15);
    color: #0f4c81;
}

.laracha-campaign-dropdown__check {
    width: 16px;
    height: 16px;
    color: #1A5A9E;
    flex-shrink: 0;
}

/* Tablet y mobile (≤1024px): forzar dropdown en lugar de tabs cuando
 * hay 2+ campañas. Los tabs se ocultan via :has(+ .dropdown).
 * Colocado después de los estilos base del dropdown para que el
 * `display: block` de aquí gane el cascade frente al `display: none` base.
 * El styling fino touch (min-height, font-size) sigue en
 * @media ≤768px más abajo. */
@media (max-width: 1024px) {
    .laracha-campaign-tabs:has(+ .laracha-campaign-dropdown) {
        display: none;
    }

    .laracha-campaign-dropdown {
        display: block;
        max-width: 100%;
    }
}

.laracha-category-group {
    margin-bottom: 4rem;
}

.laracha-category-group h3 {
    font-size: 1.75em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 1.5rem;
    padding-left: 1rem;
    border-left: 5px solid #1A5A9E;
    letter-spacing: -0.01em;
}

/* Barra de herramientas: filtro de categoría (izq.) + orden (der.) */
.laracha-activities-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

/* Filtro por categoría */
.laracha-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 2.5rem;
    padding: 0.5rem 0;
}

/* Dentro de la barra de herramientas el margen lo aporta el contenedor. */
.laracha-activities-toolbar .laracha-category-filter {
    margin-bottom: 0;
    flex: 1 1 auto;
}

/* Selector de orden, alineado a la derecha de la barra. */
.laracha-sort-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.5rem 0;
}

.laracha-sort-filter__label {
    font-size: 0.9em;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
}

.laracha-sort-filter__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    max-width: 100%;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A5A9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding: 0.55rem 2.5rem 0.55rem 1.25rem;
    color: #4a5568;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.25s ease;
}

.laracha-sort-filter__select:hover {
    border-color: #1A5A9E;
    color: #1A5A9E;
}

.laracha-sort-filter__select:focus {
    outline: none;
    border-color: #1A5A9E;
    box-shadow: 0 0 0 3px rgba(26, 90, 158, 0.15);
}

.laracha-category-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    background: #ffffff;
    color: #4a5568;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;

    /* Antes era `nowrap`: una categoría larga («Actividades para adultos ( a
       partir de 15 años)») no cabía en la pantalla de un móvil y se salía por
       el lado derecho, arrastrando la página entera. Se deja partir en dos
       líneas y no puede pasar del ancho disponible. */
    white-space: normal;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
    border-radius: 22px;
}

/* El recuento va pegado al texto y nunca se parte ni cae solo a otra línea. */
.laracha-category-filter__btn .laracha-category-filter__count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.laracha-category-filter__btn:hover {
    border-color: #1A5A9E;
    color: #1A5A9E;
    background: rgba(26, 90, 158, 0.04);
}

.laracha-category-filter__btn.is-active {
    background: #1A5A9E;
    border-color: #1A5A9E;
    color: #ffffff;
}

.laracha-category-filter__btn.is-active .laracha-category-filter__count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.laracha-category-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.4em;
    border-radius: 50px;
    background: #edf2f7;
    color: #718096;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
}

.laracha-category-group.is-hidden {
    display: none;
}

/* Badges container en detalle actividad */
.laracha-actividad__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.laracha-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.laracha-activity-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: block;
    position: relative;
}

.laracha-activity-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 90, 158, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.laracha-activity-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.laracha-activity-card:hover::before {
    opacity: 1;
}

.laracha-activity-card__image {
    aspect-ratio: 16 / 10;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
}

.laracha-activity-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.laracha-activity-card:hover .laracha-activity-card__image img {
    transform: scale(1.05);
}

.laracha-activity-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.laracha-activity-card__image--placeholder span {
    font-size: 4em;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.laracha-activity-card__body {
    padding: 1.5rem;
    position: relative;
    z-index: 2;
}

.laracha-activity-card__title {
    font-size: 1.35em;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #2d3748;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.laracha-activity-card__price {
    display: inline-block;
    font-size: 1.5em;
    font-weight: 800;
    color: #1A5A9E;
    margin-bottom: 0.5rem;
}

.laracha-activity-card__sorteo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.72em;
    font-weight: 700;
    color: #7c3aed;
    background: rgba(237, 233, 254, 0.95);
    border: 1px solid #c4b5fd;
    border-radius: 20px;
    padding: 3px 10px;
    backdrop-filter: blur(4px);
    z-index: 1;
}

.laracha-activity-card__slots {
    display: block;
    font-size: 0.9em;
    color: #718096;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
    margin-top: 0.75rem;
}

.laracha-badge-libre {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    background: #48bb78;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.laracha-badge-completa {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    background: #f56565;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   2. FICHA DE ACTIVIDAD - Activity Detail
   ========================================================================== */

.laracha-actividad {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.laracha-actividad__header {
    text-align: center;
    margin-bottom: 3rem;
}

.laracha-actividad__image {
    width: 100%;
    max-width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.laracha-actividad__title {
    font-size: 2.5em;
    font-weight: 800;
    color: #2d3748;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.laracha-actividad__category {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #ffffff;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.laracha-actividad__sorteo-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: #ede9fe;
    color: #7c3aed;
    border: 1px solid #c4b5fd;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.88em;
}

.laracha-actividad__description {
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    font-size: 1.05em;
    line-height: 1.8;
    color: #4a5568;
}

.laracha-actividad__age-range {
    background: #f7fafc;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border-left: 4px solid #1A5A9E;
    font-size: 1.05em;
}

.laracha-actividad__turnos {
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.laracha-actividad__turnos h3 {
    font-size: 1.75em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 1.5rem;
    letter-spacing: -0.01em;
}

.laracha-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0;
}

.laracha-table th,
.laracha-table td {
    padding: 1rem;
    text-align: left;
}

.laracha-table th {
    background: #f7fafc;
    font-weight: 700;
    color: #2d3748;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.laracha-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s ease;
}

.laracha-table tbody tr:hover {
    background: #f7fafc;
}

.laracha-table tbody tr:last-child {
    border-bottom: none;
}

/* Mapa de ubicación */
.laracha-actividad__mapa {
    margin-top: 1.5rem !important;
}

.laracha-actividad__mapa iframe {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}

/* Mapa de OpenStreetMap: contenedor que RECORTA la franja de atribución que va
 * dentro del iframe (no se puede ocultar por CSS al ser de otro dominio). El
 * iframe se hace más alto que el contenedor y la barra inferior queda fuera de
 * vista. La atribución se conserva, discreta, bajo el mapa (licencia ODbL). */
.laracha-mapa-osm {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.laracha-mapa-osm iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 286px !important; /* > 250px: recorta ~36px (la barra de atribución) */
    border: 0 !important;
    border-radius: 0 !important;
}

.laracha-actividad__pricing {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    color: #ffffff;
}

.laracha-actividad__pricing h3,
.laracha-actividad__pricing h4 {
    color: #ffffff;
    margin-top: 0;
}

.laracha-actividad__price {
    font-size: 1.1em;
    margin-bottom: 1rem;
}

.laracha-actividad__discounts {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.laracha-actividad__discounts li {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    backdrop-filter: blur(10px);
}

.laracha-actividad__dates,
.laracha-actividad__conditions {
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.laracha-actividad__dates h3,
.laracha-actividad__conditions h3 {
    font-size: 1.5em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 1rem;
}

.laracha-actividad__actions {
    text-align: center;
    padding: 2rem 0;
}

.laracha-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.laracha-btn--primary {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(26, 90, 158, 0.3);
}

.laracha-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(26, 90, 158, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.laracha-btn--secondary {
    background: #ffffff;
    color: #1A5A9E;
    border: 2px solid #1A5A9E;
}

.laracha-btn--secondary:hover {
    background: #f7fafc;
    transform: translateY(-2px);
    color: #1A5A9E;
    text-decoration: none;
}

.laracha-btn--disabled {
    background: #cbd5e0;
    color: #a0aec0;
    cursor: not-allowed;
    pointer-events: none;
}

.laracha-notice {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin: 1rem 0;
    font-weight: 500;
}

.laracha-notice--warning {
    background: #fef5e7;
    color: #d68910;
    border-left: 4px solid #d68910;
}

/* ==========================================================================
   3. FORMULARIO DE INSCRIPCION - Registration Form
   ========================================================================== */

.laracha-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.laracha-form-title {
    font-size: 2em;
    font-weight: 800;
    color: #2d3748;
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: -0.02em;
}

/* Progress Steps */
.laracha-form-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    position: relative;
    padding: 0 1rem;
}

.laracha-form-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 15%;
    right: 15%;
    height: 3px;
    background: #e2e8f0;
    z-index: 0;
}

.laracha-form-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.laracha-form-step__number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #a0aec0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.laracha-form-step--active .laracha-form-step__number {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 4px 6px rgba(26, 90, 158, 0.4);
}

.laracha-form-step__label {
    font-size: 0.85em;
    color: #718096;
    font-weight: 500;
    text-align: center;
}

.laracha-form-step--active .laracha-form-step__label {
    color: #2d3748;
    font-weight: 700;
}

/* Panels */
.laracha-form-panel {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    margin-bottom: 2rem;
}

.laracha-form-panel__title {
    font-size: 1.5em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.laracha-form-subtitle {
    font-size: 1.2em;
    font-weight: 600;
    color: #4a5568;
    margin: 1.5rem 0 1rem;
}

/* Radio buttons */
.laracha-form-radio {
    display: block;
    position: relative;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.laracha-form-radio:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.laracha-form-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.laracha-form-radio input[type="radio"]:checked + .laracha-form-radio__label {
    color: #1A5A9E;
    font-weight: 700;
}

.laracha-form-radio input[type="radio"]:checked ~ .laracha-form-radio {
    background: #f0f4ff;
    border-color: #1A5A9E;
    box-shadow: 0 4px 6px rgba(26, 90, 158, 0.2);
}

.laracha-form-radio__label {
    font-size: 1.05em;
    color: #2d3748;
    transition: all 0.3s ease;
    padding-left: 2rem;
    position: relative;
}

.laracha-form-radio__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    background: #ffffff;
    transition: all 0.3s ease;
}

.laracha-form-radio input[type="radio"]:checked + .laracha-form-radio__label::before {
    border-color: #1A5A9E;
    background: #1A5A9E;
    box-shadow: inset 0 0 0 4px #ffffff;
}

/* Form fields */
.laracha-form-field {
    margin-bottom: 1.5rem;
}

.laracha-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.laracha-form-field--half {
    grid-column: span 1;
}

.laracha-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3748;
    font-size: 0.95em;
}

.laracha-form-required {
    color: #f56565;
    margin-left: 0.25rem;
}

.laracha-form-hint {
    font-size: 0.85em;
    color: #718096;
    font-weight: 400;
    margin-left: 0.5rem;
}

.laracha-form-input,
.laracha-form-select,
.laracha-form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1em;
    color: #2d3748 !important;
    background: #ffffff !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-family: inherit;
}

.laracha-form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232d3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em;
    background-color: #ffffff !important;
    padding-right: 2.5rem;
}

/* ==========================================
 * TARJETAS DE PARTICIPANTES EXISTENTES
 * ========================================== */

.laracha-participantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.laracha-participante-card {
    position: relative;
    display: block;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.laracha-participante-card:hover {
    border-color: #1A5A9E;
    box-shadow: 0 4px 12px rgba(26, 90, 158, 0.15);
    transform: translateY(-2px);
}

.laracha-participante-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.laracha-participante-card__content {
    padding-right: 2.5rem;
}

.laracha-participante-card__name {
    font-weight: 700;
    font-size: 1.05em;
    color: #2d3748;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.laracha-participante-card__nif {
    font-size: 0.9em;
    color: #718096;
    margin-bottom: 0.25rem;
}

.laracha-participante-card__edad {
    font-size: 0.85em;
    color: #a0aec0;
    font-weight: 500;
}

.laracha-participante-card__check {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 24px;
    height: 24px;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.3s ease;
    color: #ffffff;
}

.laracha-participante-radio:checked + .laracha-participante-card__content ~ .laracha-participante-card__check {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    border-color: #1A5A9E;
}

.laracha-participante-radio:checked ~ .laracha-participante-card__content {
    /* Keep same */
}

/* Estado seleccionado de la tarjeta completa */
.laracha-participante-radio:checked ~ * {
    /* Aplicar a todo el contenido */
}

.laracha-participante-card:has(.laracha-participante-radio:checked) {
    border-color: #1A5A9E;
    background: linear-gradient(135deg, rgba(26, 90, 158, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    box-shadow: 0 4px 16px rgba(26, 90, 158, 0.25);
}

.laracha-participante-card:has(.laracha-participante-radio:checked) .laracha-participante-card__name {
    color: #1A5A9E;
}

/* ==========================================
 * TARJETAS DE TURNOS
 * ========================================== */

.laracha-form-turnos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.laracha-form-turno {
    position: relative;
}

.laracha-form-turno__radio {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

.laracha-form-turno__radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.laracha-form-turno__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.25rem 4rem;
    transition: all 0.3s ease;
    position: relative;
}

/* Radio button visible personalizado */
.laracha-form-turno__info::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    background: #ffffff;
    transition: all 0.3s ease;
}

/* Checkmark interno */
.laracha-form-turno__info::after {
    content: '';
    position: absolute;
    left: calc(1.25rem + 6px);
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    transition: all 0.3s ease;
}

/* Hover en turno disponible */
.laracha-form-turno .laracha-form-turno__radio:hover .laracha-form-turno__info {
    border-color: #1A5A9E;
    box-shadow: 0 4px 12px rgba(26, 90, 158, 0.15);
    transform: translateY(-2px);
}

.laracha-form-turno .laracha-form-turno__radio:hover .laracha-form-turno__info::before {
    border-color: #1A5A9E;
}

/* Estado seleccionado */
.laracha-form-turno__radio input[type="radio"]:checked ~ .laracha-form-turno__info {
    border-color: #1A5A9E;
    background: linear-gradient(135deg, rgba(26, 90, 158, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    box-shadow: 0 4px 16px rgba(26, 90, 158, 0.25);
}

.laracha-form-turno__radio input[type="radio"]:checked ~ .laracha-form-turno__info::before {
    border-color: #1A5A9E;
    background: #ffffff;
}

.laracha-form-turno__radio input[type="radio"]:checked ~ .laracha-form-turno__info::after {
    transform: translateY(-50%) scale(1);
}

/* Turnos en lista de espera */
.laracha-form-turno--espera .laracha-form-turno__info {
    background: #fffbeb;
    border-color: #f59e0b;
    border-style: dashed;
}

/* Estilos de contenido del turno */
.laracha-form-turno__nombre {
    font-weight: 700;
    font-size: 1.05em;
    color: #2d3748;
    display: block;
}

.laracha-form-turno__radio input[type="radio"]:checked ~ .laracha-form-turno__info .laracha-form-turno__nombre {
    color: #1A5A9E;
}

.laracha-form-turno__horario,
.laracha-form-turno__ubicacion {
    font-size: 0.9em;
    color: #718096;
    display: block;
}

.laracha-form-turno__plazas {
    font-size: 0.875em;
    color: #48bb78;
    font-weight: 600;
    display: block;
    margin-top: 0.25rem;
}

.laracha-form-turno__plazas--espera {
    color: #d97706;
}

/* Franjas del horario de un turno: cuando se imparte dos días a horas
   distintas, cada una en su línea para que se lean sin esfuerzo. */
.laracha-form-turno__franja {
    display: block;
}

/* Precio de la modalidad: pastilla compacta, no una franja a todo el ancho */
.laracha-form-modalidad__precio {
    align-self: flex-start;
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.25rem 0.75rem;
    background: rgba(26, 90, 158, 0.08);
    color: #1A5A9E;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.2;
    border-radius: 999px;
}

/* Al seleccionar la modalidad, la pastilla se rellena con el color de marca */
.laracha-form-turno__radio input[type="radio"]:checked ~ .laracha-form-turno__info .laracha-form-modalidad__precio {
    background: #1A5A9E;
    color: #ffffff;
}

.laracha-form-input:focus,
.laracha-form-select:focus,
.laracha-form-textarea:focus {
    border-color: #1A5A9E;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 90, 158, 0.1);
}

/* Resaltado de campos obligatorios sin rellenar */
.laracha-form-input--error,
.laracha-form-input.laracha-form-input--error {
    border-color: #d63638 !important;
    background-color: #fff5f5;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.12);
}
.laracha-form-input--error:focus {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.2);
}

/* Casillas con etiqueta: separación entre el checkbox y su texto. Base para los
 * formularios de participante (nuevo/editar) que no están dentro de
 * .laracha-auth-form. Las reglas más específicas (auth-form, vía de contacto)
 * la sobrescriben donde ya definen su propio espaciado. */
.laracha-form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.laracha-form-checkbox input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

/* Resaltado de checkboxes obligatorios sin marcar (envuelve la label). */
.laracha-form-checkbox--error,
label.laracha-form-checkbox--error {
    background-color: #fff5f5;
    border-radius: 6px;
    padding: 8px 10px;
    margin: -8px -10px;
    box-shadow: 0 0 0 1px #d63638, 0 0 0 4px rgba(214, 54, 56, 0.12);
}
.laracha-form-checkbox--error input[type="checkbox"] {
    accent-color: #d63638;
    outline: 2px solid #d63638;
    outline-offset: 2px;
}

.laracha-form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Textareas que reutilizan la clase de input (alergias/observaciones): altura
 * mínima de ~3 líneas por defecto y redimensionable verticalmente. Aplica a
 * todos los formularios (registro, participantes, edición). */
textarea.laracha-form-input {
    min-height: 96px;
    line-height: 1.5;
    resize: vertical;
}

/* Participant card */
.laracha-form-participant-card {
    background: #f7fafc;
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    margin-bottom: 1rem;
}

.laracha-form-participant-card__name {
    font-size: 1.15em;
    margin: 0 0 0.5rem;
}

.laracha-form-participant-card__email,
.laracha-form-participant-card__nif {
    margin: 0.25rem 0;
    color: #718096;
    font-size: 0.95em;
}

/* Separator */
.laracha-form-separator {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.laracha-form-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e2e8f0;
}

.laracha-form-separator span {
    background: #ffffff;
    padding: 0 1rem;
    position: relative;
    color: #a0aec0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

/* Price preview */
.laracha-precio-preview {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border: 2px solid #1A5A9E;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.laracha-precio-desglose {
    width: 100%;
    border-collapse: collapse;
}

.laracha-precio-desglose td {
    padding: 0.75rem 0;
    color: #2d3748;
    font-size: 1.05em;
}

.laracha-precio-desglose td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.laracha-precio-desglose tr:last-child td {
    padding-top: 1rem;
    border-top: 2px solid #1A5A9E;
    font-weight: 800;
    font-size: 1.3em;
    color: #1A5A9E;
}

/* Actions */
.laracha-form-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.laracha-form-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.laracha-form-btn--primary {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(26, 90, 158, 0.3);
}

.laracha-form-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(26, 90, 158, 0.4);
}

.laracha-form-btn--secondary {
    background: #ffffff;
    color: #1A5A9E;
    border: 2px solid #1A5A9E;
}

.laracha-form-btn--secondary:hover {
    background: #f7fafc;
    transform: translateY(-2px);
}

.laracha-form-btn--outline {
    background: #ffffff;
    color: #64748b;
    border: 2px solid #cbd5e1;
}

.laracha-form-btn--outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #475569;
    transform: translateY(-2px);
}

.laracha-form-btn--success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(22, 163, 74, 0.3);
}

.laracha-form-btn--success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(22, 163, 74, 0.4);
}

.laracha-form-btn--success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Messages */
.laracha-form-notice,
.laracha-mensaje-estado {
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin: 1.5rem 0;
    font-size: 1em;
    line-height: 1.6;
    font-weight: 500;
}

.laracha-form-notice--success,
.laracha-mensaje-success {
    background: #d1f4e0;
    color: #0f5132;
    border-left: 4px solid #48bb78;
}

.laracha-form-notice--warning,
.laracha-mensaje-warning {
    background: #fef5e7;
    color: #d68910;
    border-left: 4px solid #f59e0b;
}

.laracha-form-notice--error,
.laracha-mensaje-error {
    background: #fee;
    color: #c53030;
    border-left: 4px solid #f56565;
}

.laracha-form-notice--info {
    background: #e6f3ff;
    color: #0c5a9e;
    border-left: 4px solid #3182ce;
}

.laracha-form-notice--sorteo {
    background: #f5f3ff;
    color: #6d28d9;
    border-left: 4px solid #7c3aed;
}

/* ==========================================================================
   4. MI CUENTA - Account Panel
   ========================================================================== */

.laracha-mi-cuenta {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Reduce el spacer de Gutenberg que precede a los shortcodes de la zona
 * de cuenta (Mi Cuenta, Editar perfil, Editar participante) — el bloque
 * trae style="height:50px" inline. Se acerca la primera card al header. */
.wp-block-spacer:has(+ .laracha-mi-cuenta),
.wp-block-spacer:has(+ .laracha-auth-wrapper) {
    height: 24px !important;
}

/* En la página de Editar participante no hay spacer en el contenido,
 * así que añadimos el mismo aire (24px) sólo cuando el wrapper es el
 * primer hijo del contenido — evita doblar el margen donde sí hay spacer. */
.entry-content > .laracha-auth-wrapper:first-child {
    margin-top: 24px;
}

.laracha-mi-cuenta__section {
    margin-bottom: 2rem;
    padding: 2rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.laracha-mi-cuenta__section h2 {
    margin: 0 0 1.5rem;
    font-size: 1.75em;
    font-weight: 700;
    color: #2d3748;
    padding-bottom: 1rem;
    border-bottom: 3px solid #1A5A9E;
    letter-spacing: -0.01em;
}

.laracha-mi-cuenta__hint {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: #f0f6ff;
    border-left: 4px solid #1A5A9E;
    border-radius: 0 6px 6px 0;
    font-size: 0.875rem;
    color: #2d3748;
    line-height: 1.5;
}

.laracha-situacion-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
}

.laracha-table--details {
    width: 100%;
}

.laracha-table--details th {
    font-weight: 600;
    color: #718096;
    padding: 0.75rem 1rem;
    text-align: left;
    width: 30%;
}

.laracha-table--details td {
    padding: 0.75rem 1rem;
    color: #2d3748;
}

.laracha-inscripciones-list {
    display: grid;
    gap: 1.5rem;
}

.laracha-inscription-card {
    background: #f7fafc;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.laracha-inscription-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Resaltado al llegar desde el botón de pago del email (?laracha_insc=ID). */
.laracha-inscription-card.is-highlighted {
    border-color: #1A5A9E;
    box-shadow: 0 0 0 3px rgba(26, 90, 158, 0.35);
    animation: laracha-card-pulse 1.2s ease-in-out 2;
}
@keyframes laracha-card-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(26, 90, 158, 0.15); }
    50%      { box-shadow: 0 0 0 6px rgba(26, 90, 158, 0.45); }
}

/* Banner de resultado de pago (al volver de la pasarela). */
.laracha-pago-result {
    text-align: center;
    padding: 1.5rem 1.25rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    border: 2px solid transparent;
}
.laracha-pago-result--ok   { background: linear-gradient(135deg, #d1f4e0, #eafaf0); border-color: #16a34a; }
.laracha-pago-result--warn { background: #fffbeb; border-color: #f59e0b; }
.laracha-pago-result--err  { background: #fef2f2; border-color: #dc2626; }
.laracha-pago-result__icon {
    width: 52px; height: 52px; margin: 0 auto .5rem; border-radius: 50%;
    background: #16a34a; color: #fff; font-size: 30px; line-height: 52px; font-weight: 700;
}
.laracha-pago-result__title { font-size: 1.25rem; font-weight: 800; color: #0f5132; margin: 0 0 .75rem; }
.laracha-pago-result--warn .laracha-pago-result__title { color: #92400e; }
.laracha-pago-result--err .laracha-pago-result__title  { color: #991b1b; }
.laracha-pago-result__btn {
    display: inline-block; padding: 12px 26px; border-radius: 8px;
    background: #16a34a; color: #fff !important; font-weight: 700; font-size: 1rem;
    text-decoration: none; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
    transition: background .15s ease, transform .15s ease;
}
.laracha-pago-result__btn:hover { background: #15803d; transform: translateY(-1px); }
.laracha-pago-result__hint { font-size: .85rem; color: #166534; margin: .6rem 0 0; opacity: .9; }

/* Aviso destacado de "revisa tu correo de activación" tras registrarse. */
.laracha-activation-alert {
    text-align: center;
    padding: 1.75rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff8e1, #fef3c7);
    border: 2px solid #f59e0b;
    margin-bottom: 1.25rem;
}
.laracha-activation-alert__icon {
    font-size: 3.2rem; line-height: 1; margin-bottom: .4rem; color: #d97706;
    animation: laracha-mail-pulse 1.6s ease-in-out infinite;
}
.laracha-activation-alert__title {
    font-size: 1.5rem; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase; color: #b45309; margin: 0 0 .5rem;
}
.laracha-activation-alert__lead { font-size: 1.05rem; font-weight: 700; color: #7c2d12; margin: 0 0 .4rem; }
.laracha-activation-alert__hint { font-size: .88rem; color: #92400e; margin: 0; }
@keyframes laracha-mail-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

.laracha-inscription-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.laracha-inscription-card__header strong {
    font-size: 1.15em;
    color: #2d3748;
}

.laracha-inscription-card__body {
    padding: 1.5rem;
}

.laracha-inscription-card__body p {
    margin: 0.5rem 0;
    color: #4a5568;
}

.laracha-inscription-card__actions {
    padding: 1rem 1.5rem;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.laracha-btn--small {
    padding: 0.5rem 1.25rem;
    font-size: 0.9em;
}

.laracha-btn--danger {
    background: #f56565;
    color: #ffffff;
}

.laracha-btn--danger:hover {
    background: #e53e3e;
    color: #ffffff;
    transform: translateY(-2px);
}

.laracha-btn--outline-danger {
    background: transparent;
    color: #e53e3e;
    border: 1px solid #e53e3e;
}

.laracha-btn--outline-danger:hover {
    background: #fef2f2;
    color: #c53030;
    border-color: #c53030;
}

/* Estado badges */
.laracha-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.laracha-badge--success {
    background: #48bb78;
    color: #ffffff;
}

/* ==========================================================================
   5. RECIBO - Receipt
   ========================================================================== */

.laracha-recibo {
    max-width: 700px;
    margin: 1.25rem auto;
    padding: 2.5rem;
    border: 1px solid #ddd;
    background: #fff;
}

.laracha-recibo-header {
    text-align: center;
    border-bottom: 2px solid #1d2327;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}

.laracha-recibo-header h1 {
    font-size: 1.5em;
    color: #1d2327;
    margin: 0 0 0.5rem;
}

.laracha-recibo-header p {
    color: #50575e;
    margin: 0.25rem 0;
}

.laracha-recibo-body table {
    width: 100%;
    border-collapse: collapse;
}

.laracha-recibo-body td {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
    color: #1d2327;
}

.laracha-recibo-total {
    font-size: 1.2em;
    font-weight: 700;
}

.laracha-recibo-footer {
    margin-top: 1.875rem;
    text-align: center;
    color: #8c8f94;
    font-size: 0.85em;
    line-height: 1.5;
}

.laracha-btn-print {
    display: inline-block;
    background: #1d2327;
    color: #fff;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    margin-top: 1rem;
}

.laracha-btn-print:hover,
.laracha-btn-print:focus {
    background: #50575e;
    color: #fff;
}

/* ----- Receipt Modal Overlay ----- */

/* Lock de scroll del fondo mientras el modal del recibo está abierto. */
html.laracha-modal-open,
html.laracha-modal-open body {
    overflow: hidden;
    overscroll-behavior: contain;
}

/* ==========================================================================
   Modal de aviso (LarachaAlert) — reemplazo del alert() nativo en frontend
   ========================================================================== */
.laracha-aviso-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: laracha-modal-in 0.18s ease-out;
}

/* Mismo aspecto que el modal «Elegir idioma» del panel: tarjeta centrada, aspa
   roja arriba a la derecha, icono en círculo sobre el título y botones al pie
   en el centro. Antes el icono iba en línea con el título y los botones a la
   derecha, así que las dos pantallas no se parecían en nada. */
.laracha-aviso {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
    overflow: hidden;
    text-align: center;
    animation: laracha-modal-in 0.22s ease-out;
}

.laracha-aviso__close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 0;
    padding: 4px;
    line-height: 1;
    color: #d63638;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.laracha-aviso__close svg {
    width: 20px;
    height: 20px;
}

.laracha-aviso__close:hover,
.laracha-aviso__close:focus-visible {
    background: #fee2e2;
    color: #991b1b;
    outline: none;
}

.laracha-aviso__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 24px 10px;
}

.laracha-aviso__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.laracha-aviso__icon svg {
    width: 28px;
    height: 28px;
}

.laracha-aviso--info .laracha-aviso__icon    { background: #dbeafe; color: #1d4ed8; }
.laracha-aviso--warning .laracha-aviso__icon { background: #fef3c7; color: #92400e; }
.laracha-aviso--error .laracha-aviso__icon   { background: #fee2e2; color: #b91c1c; }
.laracha-aviso--success .laracha-aviso__icon { background: #dcfce7; color: #15803d; }

.laracha-aviso__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.laracha-aviso__body {
    padding: 0 26px 4px;
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
}

.laracha-aviso__footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px 24px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .laracha-aviso__footer {
        flex-direction: column-reverse;
    }
    .laracha-aviso__footer .laracha-aviso__btn {
        width: 100%;
    }
}

.laracha-aviso__btn {
    padding: 9px 22px;
    border: 0;
    border-radius: 8px;
    background: #1A5A9E;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.laracha-aviso__btn:hover,
.laracha-aviso__btn:focus-visible {
    background: #144777;
    outline: none;
    box-shadow: 0 0 0 4px rgba(26, 90, 158, 0.18);
}

/* Secundario («Cancelar»). Va DESPUÉS del primario a propósito: las dos reglas
   tienen la misma especificidad, así que decide el orden. Puesto antes, el
   hover del primario le pintaba el fondo azul y el texto gris se volvía
   ilegible. El contorno va por dentro con box-shadow y no con border, para que
   los dos botones midan igual sin tocar el primario. */
.laracha-aviso__btn--ghost {
    background: #ffffff;
    color: #4b5563;
    box-shadow: inset 0 0 0 2px #d1d5db;
}

.laracha-aviso__btn--ghost:hover,
.laracha-aviso__btn--ghost:focus-visible {
    background: #f3f4f6;
    color: #374151;
    outline: none;
    box-shadow: inset 0 0 0 2px #9ca3af, 0 0 0 4px rgba(107, 114, 128, 0.16);
}

.laracha-recibo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.laracha-recibo-modal {
    background: #fff;
    border-radius: 10px;
    max-width: 650px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: laracha-modal-in 0.25s ease-out;
}

@keyframes laracha-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.laracha-recibo-modal__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.laracha-recibo-modal__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.laracha-recibo-modal__btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.laracha-recibo-modal__btn svg {
    flex-shrink: 0;
}

.laracha-recibo-modal__close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 6px;
    transition: color 0.15s;
}

.laracha-recibo-modal__close:hover {
    color: #dc2626;
}

.laracha-recibo-modal__content {
    padding: 32px;
    flex: 1;
}

.laracha-recibo-modal__content .laracha-recibo__header {
    text-align: center;
    border-bottom: 2px solid #1d2327;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.laracha-recibo-modal__content .laracha-recibo__header h1 {
    font-size: 1.4em;
    color: #1d2327;
    margin: 0 0 4px;
}

.laracha-recibo-modal__content .laracha-recibo__header h2 {
    font-size: 1.1em;
    color: #50575e;
    font-weight: 400;
    margin: 0 0 8px;
}

.laracha-recibo-modal__content .laracha-recibo__ref {
    color: #6b7280;
    font-size: 0.9em;
    margin: 0;
}

.laracha-recibo-modal__content .laracha-recibo__section {
    margin-bottom: 20px;
}

.laracha-recibo-modal__content .laracha-recibo__section h3 {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f3f4f6;
}

.laracha-recibo-modal__content .laracha-recibo__section p {
    margin: 4px 0;
    color: #1d2327;
}

.laracha-recibo-modal__content .laracha-recibo__breakdown {
    width: 100%;
    border-collapse: collapse;
}

.laracha-recibo-modal__content .laracha-recibo__breakdown td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
}

.laracha-recibo-modal__content .laracha-recibo__amount {
    text-align: right;
    font-weight: 500;
}

.laracha-recibo-modal__content .laracha-recibo__amount--discount {
    color: #059669;
}

.laracha-recibo-modal__content .laracha-recibo__total td {
    border-top: 2px solid #1d2327;
    border-bottom: none;
    font-size: 1.1em;
}

.laracha-recibo-modal__content .laracha-table--details {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.laracha-recibo-modal__content .laracha-table--details th,
.laracha-recibo-modal__content .laracha-table--details td {
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}

.laracha-recibo-modal__content .laracha-table--details th {
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    width: 40%;
    background: #f9fafb;
}

.laracha-recibo-modal__content .laracha-table--details tr:last-child th,
.laracha-recibo-modal__content .laracha-table--details tr:last-child td {
    border-bottom: none;
}

/* Recibo modal en mobile: card contenida, overlay con blur claro (sin
 * la franja oscura), botones Imprimir/Guardar PDF del mismo tamaño y
 * tabla "Datos del pago" sin desbordes. */
@media (max-width: 640px) {
    .laracha-recibo-modal-overlay {
        padding: 0;
        background: transparent;
    }

    .laracha-recibo-modal {
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    }

    .laracha-recibo-modal__toolbar {
        padding: 10px 12px;
        gap: 6px;
    }

    .laracha-recibo-modal__btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .laracha-recibo-modal__close {
        flex-shrink: 0;
        margin-left: 4px;
        padding: 0 4px;
    }

    .laracha-recibo-modal__content {
        padding: 16px 14px;
    }

    .laracha-recibo-modal__content .laracha-recibo__header h1 {
        font-size: 1.2em;
    }

    .laracha-recibo-modal__content .laracha-recibo__header h2 {
        font-size: 1em;
    }

    .laracha-recibo-modal__content .laracha-recibo__section {
        margin-bottom: 16px;
    }

    .laracha-recibo-modal__content .laracha-recibo__breakdown td {
        padding: 8px 6px;
    }

    .laracha-recibo-modal__content .laracha-table--details th,
    .laracha-recibo-modal__content .laracha-table--details td {
        padding: 8px 10px;
        font-size: 0.9em;
        word-break: break-word;
    }

    .laracha-recibo-modal__content .laracha-table--details th {
        width: 38%;
        text-transform: none;
        letter-spacing: 0;
    }

    .laracha-recibo-modal__content .laracha-badge {
        padding: 0.3rem 0.7rem;
        font-size: 0.75em;
        letter-spacing: 0.03em;
    }
}

/* ==========================================================================
   6. GENERAL UTILITY CLASSES
   ========================================================================== */

.laracha-no-results {
    text-align: center;
    padding: 2.5rem;
    color: #50575e;
    font-size: 1.05em;
}

.laracha-login-notice {
    background: #f0f6fc;
    padding: 1rem;
    border-left: 4px solid #0073aa;
    margin: 1rem 0;
    color: #1d2327;
    line-height: 1.5;
}

.laracha-login-notice a {
    color: #0073aa;
    font-weight: 600;
}

.laracha-login-notice a:hover {
    color: #005177;
}

/* Loading spinner */
.laracha-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.laracha-loading::after {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    border: 3px solid #c3c4c7;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: laracha-spin 0.8s linear infinite;
}

@keyframes laracha-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   RESPONSIVE - Tablet (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .laracha-activity-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .laracha-portada h2 {
        font-size: 2em;
    }

    .laracha-category-group h3 {
        font-size: 1.5em;
    }

    .laracha-actividad__title {
        font-size: 2em;
    }
}

/* ==========================================================================
   LOGIN PROMPT - Vista no logueado
   ========================================================================== */

.laracha-login-prompt {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 55vh;
    padding: 3rem 1.5rem;
}

.laracha-login-prompt__card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 3rem 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
}

.laracha-login-prompt__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.laracha-login-prompt__icon svg {
    width: 38px;
    height: 38px;
    color: #ffffff;
}

.laracha-login-prompt__card h2 {
    font-size: 1.6em;
    font-weight: 800;
    color: #2d3748;
    margin: 0 0 0.75rem;
}

.laracha-login-prompt__card > p {
    font-size: 1em;
    color: #718096;
    line-height: 1.6;
    margin: 0 0 2rem;
}

.laracha-login-prompt__btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(26, 90, 158, 0.3);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.laracha-login-prompt__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(26, 90, 158, 0.4);
    color: #fff;
    text-decoration: none;
}

.laracha-login-prompt__register {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
    font-size: 0.9em !important;
    color: #a0aec0 !important;
}

.laracha-login-prompt__register a {
    color: #1A5A9E;
    font-weight: 600;
    text-decoration: none;
}

.laracha-login-prompt__register a:hover {
    text-decoration: underline;
    color: #0F4C81;
}

/* ==========================================================================
   CONTACTO - Página de contacto
   ========================================================================== */

.laracha-contacto {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.laracha-contacto__header {
    text-align: center;
    margin-bottom: 3rem;
}

.laracha-contacto__header h1 {
    font-size: 2.5em;
    font-weight: 800;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.75rem;
}

.laracha-contacto__header p {
    font-size: 1.1em;
    color: #718096;
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
}

.laracha-contacto__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.laracha-contacto__card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    text-align: center;
}

.laracha-contacto__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.laracha-contacto__card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.laracha-contacto__card-icon svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.laracha-contacto__card h3 {
    font-size: 1.15em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.75rem;
}

.laracha-contacto__card p {
    font-size: 0.95em;
    color: #4a5568;
    margin: 0.2rem 0;
    line-height: 1.5;
}

.laracha-contacto__card a {
    color: #1A5A9E;
    text-decoration: none;
    font-weight: 600;
}

.laracha-contacto__card a:hover {
    text-decoration: underline;
    color: #0F4C81;
}

.laracha-contacto__detail {
    font-size: 0.85em !important;
    color: #a0aec0 !important;
    margin-top: 0.5rem !important;
}

.laracha-contacto__map {
    position: relative;
    height: 350px; /* altura fija: con overflow hidden recorta la franja de OSM */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.laracha-contacto__map iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 386px !important; /* > 350px: la barra de atribución de OSM queda fuera */
    border: 0 !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   LEGAL - Política de Privacidad y páginas legales
   ========================================================================== */

.laracha-legal {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.laracha-legal__header {
    text-align: center;
    margin-bottom: 3rem;
}

.laracha-legal__header h1 {
    font-size: 2.5em;
    font-weight: 800;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.laracha-legal__updated {
    font-size: 0.9em;
    color: #94a3b8;
    font-style: italic;
}

.laracha-legal__content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Secciones numeradas */
.laracha-legal__section {
    position: relative;
    padding: 2rem 0 2rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.laracha-legal__section:last-child {
    border-bottom: none;
}

.laracha-legal__section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #fff;
    font-size: 0.9em;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.laracha-legal__section h2 {
    font-size: 1.4em;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
}

.laracha-legal__section > p {
    font-size: 0.95em;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.laracha-legal__section > p:last-child {
    margin-bottom: 0;
}

/* Info box */
.laracha-legal__info-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid #1A5A9E;
}

.laracha-legal__info-box p {
    font-size: 0.95em;
    color: #475569;
    line-height: 1.6;
    margin: 0.25rem 0;
}

.laracha-legal__info-box a {
    color: #1A5A9E;
    text-decoration: none;
    font-weight: 600;
}

.laracha-legal__info-box a:hover {
    text-decoration: underline;
}

/* Listas */
.laracha-legal__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.laracha-legal__list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.5rem;
    font-size: 0.95em;
    color: #475569;
    line-height: 1.6;
}

.laracha-legal__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
}

/* Bloques de tratamiento (RGPD) */
.laracha-legal__tratamiento {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid #1A5A9E;
}

.laracha-legal__tratamiento h4 {
    font-size: 1.05em;
    font-weight: 700;
    color: #1A5A9E;
    margin-bottom: 0.75rem;
}

.laracha-legal__tratamiento .laracha-legal__list {
    margin-bottom: 0;
}

/* Grid de derechos */
.laracha-legal__derechos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.laracha-legal__derecho {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
}

.laracha-legal__derecho:hover {
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.laracha-legal__derecho svg {
    width: 22px;
    height: 22px;
    stroke: #1A5A9E;
    flex-shrink: 0;
    margin-top: 2px;
}

.laracha-legal__derecho strong {
    display: block;
    font-size: 0.95em;
    color: #1e293b;
    margin-bottom: 0.15rem;
}

.laracha-legal__derecho span {
    font-size: 0.85em;
    color: #64748b;
    line-height: 1.4;
}

/* ==========================================================================
   FORMAS DE PAGO
   ========================================================================== */

.laracha-formas-pago {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.laracha-formas-pago__header {
    text-align: center;
    margin-bottom: 3rem;
}

.laracha-formas-pago__header h1 {
    font-size: 2.5em;
    font-weight: 800;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.laracha-formas-pago__header p {
    font-size: 1.15em;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid de métodos de pago */
.laracha-formas-pago__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.laracha-formas-pago__card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.laracha-formas-pago__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.laracha-formas-pago__card--destacado {
    border-color: #1A5A9E;
}

.laracha-formas-pago__card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 16px;
    border-radius: 50px;
    white-space: nowrap;
}

.laracha-formas-pago__card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.laracha-formas-pago__card-icon svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.laracha-formas-pago__card h3 {
    font-size: 1.2em;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    text-align: center;
}

.laracha-formas-pago__card > p {
    font-size: 0.95em;
    color: #64748b;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Lista de ventajas */
.laracha-formas-pago__ventajas {
    list-style: none;
    padding: 0;
    margin: 0;
}

.laracha-formas-pago__ventajas li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9em;
    color: #475569;
    padding: 0.4rem 0;
    line-height: 1.4;
}

.laracha-formas-pago__ventajas li svg {
    width: 18px;
    height: 18px;
    stroke: #1A5A9E;
    flex-shrink: 0;
}

/* Banner de seguridad */
.laracha-formas-pago__seguridad {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(26, 90, 158, 0.15);
}

.laracha-formas-pago__seguridad-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.laracha-formas-pago__seguridad-icon svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.laracha-formas-pago__seguridad-content h3 {
    font-size: 1.15em;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.4rem;
}

.laracha-formas-pago__seguridad-content p {
    font-size: 0.95em;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* Preguntas frecuentes */
.laracha-formas-pago__faq {
    margin-bottom: 2rem;
}

.laracha-formas-pago__faq h2 {
    font-size: 1.8em;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
    margin-bottom: 2rem;
}

.laracha-formas-pago__faq-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #1A5A9E;
}

.laracha-formas-pago__faq-item h4 {
    font-size: 1.05em;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.laracha-formas-pago__faq-item p {
    font-size: 0.95em;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   INICIO - Homepage Landing Page
   ========================================================================== */

.laracha-inicio {
    max-width: 100%;
}

/* Forzar ancho completo para hero y CTA rompiendo el contenedor */
.laracha-inicio__hero,
.laracha-inicio__cta-final {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    box-sizing: border-box;
}

/* ---------- Hero ---------- */

.laracha-inicio__hero {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    /* Romper contenedor Blocksy (.ct-container + .entry-content) */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    box-sizing: border-box;
}

.laracha-inicio__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 76, 129, var(--hero-overlay-alpha, 0.5));
    pointer-events: none;
}

.laracha-inicio__hero-content {
    position: relative;
    z-index: 1;
    max-width: 750px;
}

.laracha-inicio__hero h1 {
    font-size: 3em;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.laracha-inicio__hero-subtitle {
    font-size: 1.3em;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2.5rem;
    font-weight: 400;
    line-height: 1.5;
}

.laracha-inicio__hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Documentos descargables del hero ---------- */
/* Se pintan sobre la imagen de fondo: el color lo hereda del hero (configurable)
   y el fondo translúcido + desenfoque garantizan la legibilidad sea cual sea la
   foto. Si no hay documentos cargados, la sección entera no se imprime. */

.laracha-inicio__hero-docs {
    margin-top: 2.5rem;
}

.laracha-inicio__hero-docs-title {
    margin: 0 0 0.85rem;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

.laracha-inicio__hero-docs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.laracha-inicio__hero-doc {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 100%;
    padding: 0.6rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.laracha-inicio__hero-doc:hover,
.laracha-inicio__hero-doc:focus {
    background: rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
    text-decoration: none;
}

.laracha-inicio__hero-doc-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.laracha-inicio__hero-doc-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.laracha-inicio__hero-doc-name {
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.laracha-inicio__hero-doc-meta {
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

/* ---------- Buttons ---------- */

.laracha-inicio__btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid transparent;
}

.laracha-inicio__btn--white {
    background: #ffffff;
    color: #1A5A9E;
    border-color: #ffffff;
}

.laracha-inicio__btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    color: #0F4C81;
}

.laracha-inicio__btn--outline {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.laracha-inicio__btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
    color: #ffffff;
}

.laracha-inicio__btn--secondary {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(26, 90, 158, 0.3);
}

.laracha-inicio__btn--secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(26, 90, 158, 0.4);
    color: #ffffff;
}

/* ---------- Section Title ---------- */

.laracha-inicio__section-title {
    font-size: 2.5em;
    font-weight: 800;
    text-align: center;
    margin: 0 0 3rem;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* ---------- Features ---------- */

/* Nota informativa destacada (entre el banner y las características) */
.laracha-inicio__nota {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 0;
}

.laracha-inicio__nota-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 10px 28px rgba(15, 76, 129, 0.25);
}

.laracha-inicio__nota-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: #ffffff;
}

.laracha-inicio__nota-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.laracha-inicio__nota-text {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.65;
    color: #ffffff;
}

.laracha-inicio__features {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem;
}

.laracha-inicio__features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.laracha-inicio__feature-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.laracha-inicio__feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.laracha-inicio__feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.laracha-inicio__feature-icon svg {
    width: 32px;
    height: 32px;
    color: #ffffff;
}

.laracha-inicio__feature-card h3 {
    font-size: 1.2em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.75rem;
}

.laracha-inicio__feature-card p {
    font-size: 0.95em;
    color: #718096;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Steps (Cómo funciona) ---------- */

.laracha-inicio__steps {
    background: #f7fafc;
    padding: 5rem 2rem;
}

.laracha-inicio__steps-row {
    display: flex;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.laracha-inicio__step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 1rem;
}

/* Línea conectora entre pasos */
.laracha-inicio__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    right: -1rem;
    width: calc(100% - 60px);
    border-top: 2px dashed #cbd5e0;
    transform: translateX(50%);
}

.laracha-inicio__step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 1;
}

.laracha-inicio__step h3 {
    font-size: 1.15em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.5rem;
}

.laracha-inicio__step p {
    font-size: 0.95em;
    color: #718096;
    line-height: 1.5;
    margin: 0;
}

/* ---------- Actividades Preview ---------- */

.laracha-inicio__actividades {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem;
}

.laracha-inicio__actividades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.laracha-inicio__act-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.laracha-inicio__act-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    color: inherit;
}

.laracha-inicio__act-image {
    height: 160px;
    overflow: hidden;
}

.laracha-inicio__act-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.laracha-inicio__act-image--placeholder {
    background: linear-gradient(135deg, #e2e8f0 0%, #edf2f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.laracha-inicio__act-image--placeholder span {
    font-size: 3em;
    font-weight: 800;
    color: #a0aec0;
}

.laracha-inicio__act-body {
    padding: 1.25rem 1.5rem;
}

.laracha-inicio__act-badge {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.laracha-inicio__act-badge--infantil {
    background: #e9d8fd;
    color: #6b46c1;
}

.laracha-inicio__act-badge--juvenil {
    background: #bee3f8;
    color: #2b6cb0;
}

.laracha-inicio__act-badge--adultos {
    background: #c6f6d5;
    color: #276749;
}

.laracha-inicio__act-body h4 {
    font-size: 1.1em;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.laracha-inicio__act-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.laracha-inicio__act-price {
    font-size: 1.15em;
    font-weight: 700;
    color: #1A5A9E;
}

.laracha-inicio__act-status {
    font-size: 0.8em;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.laracha-inicio__act-status--libre {
    background: #c6f6d5;
    color: #276749;
}

.laracha-inicio__act-status--completa {
    background: #fed7d7;
    color: #c53030;
}

.laracha-inicio__actividades-link {
    text-align: center;
    margin-top: 3rem;
}

.laracha-inicio__no-activities {
    text-align: center;
    font-size: 1.1em;
    color: #718096;
    padding: 3rem 0;
}

/* ---------- CTA Final ---------- */

.laracha-inicio__cta-final {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    text-align: center;
    padding: 5rem 2rem;
    margin: 0 2rem 2rem;
    border-radius: 20px;
    position: relative;
}

.laracha-inicio__cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
    pointer-events: none;
}

.laracha-inicio__cta-final h2 {
    font-size: 2.5em;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1rem;
    position: relative;
    z-index: 1;
}

.laracha-inicio__cta-final p {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

.laracha-inicio__cta-final .laracha-inicio__btn {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   RESPONSIVE - Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    .laracha-portada {
        padding: 1.5rem 1rem;
    }

    .laracha-portada h2 {
        font-size: 1.75em;
    }

    /* Selector de campaña en mobile (con máximo 2 tabs caben de sobra
     * en una sola fila; con 3+ se renderiza como dropdown desde PHP). */
    .laracha-campaign-tabs {
        gap: 0.5rem;
        padding: 8px;
        margin: 0 0 1.75rem;
    }

    .laracha-campaign-tabs__item {
        padding: 0.75rem 1.25rem;
        font-size: 1em;
        font-weight: 700;
        box-sizing: border-box;
    }

    /* Mobile con >=3 campañas: ocultamos los tabs y mostramos el
     * dropdown custom (renderizado por PHP cuando hay >2 campañas). */
    .laracha-campaign-tabs:has(+ .laracha-campaign-dropdown) {
        display: none;
    }

    .laracha-campaign-dropdown {
        display: block;
        max-width: 100%;
    }

    .laracha-campaign-dropdown__trigger {
        min-height: 58px;
        font-size: 1.05em;
        font-weight: 700;
    }

    .laracha-campaign-dropdown__list {
        max-height: 60vh;
    }

    .laracha-category-filter {
        gap: 0.5rem;
    }

    .laracha-category-filter__btn {
        padding: 0.5rem 1rem;
        font-size: 0.85em;
    }

    /* En móvil el orden pasa a su propia fila, alineado a la izquierda. */
    .laracha-sort-filter {
        margin-left: 0;
        flex: 1 1 100%;
    }

    .laracha-sort-filter__select {
        flex: 1 1 auto;
    }

    .laracha-category-group {
        margin-bottom: 2.5rem;
    }

    .laracha-activity-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* En móvil se apilan tres contenedores (página > bloque > tarjeta) y sus
       márgenes se suman: con los valores de escritorio quedaban unos 56 px por
       lado y el contenido caía a menos de la mitad del ancho. */
    .laracha-actividad {
        padding: 1.25rem 0.75rem;
    }

    .laracha-actividad__title {
        font-size: 1.75em;
    }

    .laracha-actividad__description,
    .laracha-actividad__turnos,
    .laracha-actividad__pricing,
    .laracha-actividad__dates,
    .laracha-actividad__conditions {
        padding: 1.25rem 1rem;
    }

    .laracha-table th,
    .laracha-table td {
        padding: 0.75rem;
        font-size: 0.9em;
    }

    /* Tabla de turnos como tarjetas en mobile */
    .laracha-actividad__turnos .laracha-table {
        display: block;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
    }

    .laracha-actividad__turnos .laracha-table thead {
        display: none;
    }

    .laracha-actividad__turnos .laracha-table tbody {
        display: block;
        border: none !important;
        box-shadow: none !important;
    }

    .laracha-actividad__turnos .laracha-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        background: #f7fafc;
        border: none !important;
        border-radius: 12px;
        padding: 0.875rem 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .laracha-actividad__turnos .laracha-table tbody tr:hover {
        background: #f7fafc;
        box-shadow: 0 4px 8px rgba(26, 90, 158, 0.3);
    }

    /* La etiqueta iba flotada al 50 % del ancho: en un móvil eso dejaba el dato
       en unos 130 px y «Coiro (escola do Rapadoiro)» se partía en tres líneas.
       Puesta encima y en pequeño, el valor dispone de la tarjeta entera. */
    .laracha-actividad__turnos .laracha-table tbody td {
        display: block;
        text-align: left;
        padding: 0.45rem 0;
        border: none;
        position: static;
        padding-left: 0;
        white-space: normal;
    }

    .laracha-actividad__turnos .laracha-table tbody td + td {
        border-top: 1px solid #e8edf3;
    }

    .laracha-actividad__turnos .laracha-table tbody td::before {
        content: attr(data-label);
        display: block;
        position: static;
        width: auto;
        margin-bottom: 0.15rem;
        padding-right: 0;
        font-size: 0.75em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #718096;
    }

    /* La primera celda es el nombre del turno: hace de título de la tarjeta. */
    .laracha-actividad__turnos .laracha-table tbody td:first-child {
        padding-top: 0;
        font-size: 1.1em;
        font-weight: 700;
        line-height: 1.35;
        color: #1A5A9E;
    }

    .laracha-actividad__turnos .laracha-table tbody td:first-child::before {
        display: none;
    }

    .laracha-mi-cuenta {
        padding: 1rem 0;
    }

    .laracha-mi-cuenta__section {
        padding: 1.25rem 0.5rem;
        border-radius: 10px;
    }

    .laracha-mi-cuenta__section h2 {
        font-size: 1.35em;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    /* Tabla "Mis datos": evitar que valores largos (emails, etc.) desborden
     * la card en mobile. */
    .laracha-mi-cuenta__section .laracha-table--details {
        table-layout: fixed;
    }

    .laracha-mi-cuenta__section .laracha-table--details th,
    .laracha-mi-cuenta__section .laracha-table--details td {
        padding: 0.625rem 0.625rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .laracha-mi-cuenta__section .laracha-table--details th {
        width: 32%;
        font-size: 0.85em;
    }

    /* Tabla participantes: card layout en mobile */
    .laracha-table--participantes {
        display: block;
        width: 100%;
        border: none;
    }

    .laracha-table--participantes thead {
        display: none;
    }

    .laracha-table--participantes tbody {
        display: block;
    }

    .laracha-table--participantes tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 0.75rem 1rem;
    }

    .laracha-table--participantes tbody td {
        display: block;
        text-align: left;
        padding: 0.3rem 0;
        border: none;
        position: relative;
    }

    .laracha-table--participantes tbody td:first-child {
        font-weight: 700;
        font-size: 1.05em;
        color: #2d3748;
        padding-bottom: 0.4rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .laracha-table--participantes tbody td:not(:first-child):not(:last-child) {
        padding-left: 0;
        font-size: 0.92em;
        color: #4a5568;
    }

    .laracha-table--participantes tbody td:not(:first-child):not(:last-child)::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #718096;
    }

    .laracha-table--participantes tbody td:last-child {
        padding-top: 0.5rem;
    }

    .laracha-table--participantes tbody td:last-child .laracha-btn--small {
        width: auto;
        display: inline-block;
    }

    /* Tabla detalles (Mis datos) */
    .laracha-table--details th,
    .laracha-table--details td {
        padding: 0.5rem 0.6rem;
        font-size: 0.92em;
    }

    .laracha-table--details th {
        width: 35%;
    }

    /* Inscription cards */
    .laracha-inscription-card__header,
    .laracha-inscription-card__body,
    .laracha-inscription-card__actions {
        padding: 0.85rem 1rem;
    }

    .laracha-inscription-card__header strong {
        font-size: 1em;
    }

    .laracha-inscription-card__body p {
        margin: 0.3rem 0;
        font-size: 0.92em;
    }

    .laracha-inscription-card__actions {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
    }

    .laracha-inscription-card__actions .laracha-btn,
    .laracha-inscription-card__actions .laracha-btn--small {
        flex: 1;
        text-align: center;
        padding: 0.4rem 0.5rem;
        font-size: 0.72em;
        border-radius: 8px;
        letter-spacing: 0;
        font-weight: 600;
        box-shadow: none;
    }

    /* Form responsive */
    /* Mismo criterio que la ficha de actividad: página y panel se anidan y sus
       márgenes se suman, dejando el contenido en poco más de la mitad del ancho. */
    .laracha-form-wrapper {
        padding: 1.25rem 0.75rem;
    }

    .laracha-form-title {
        font-size: 1.5em;
    }

    .laracha-form-steps {
        padding: 0;
        margin-bottom: 2rem;
    }

    .laracha-form-steps::before {
        left: 10%;
        right: 10%;
    }

    .laracha-form-step__number {
        width: 35px;
        height: 35px;
        font-size: 1em;
    }

    .laracha-form-step__label {
        font-size: 0.75em;
    }

    .laracha-form-panel {
        padding: 1.25rem 0.75rem;
    }

    /* En móvil se apilan tres rellenos —página, panel y aviso— y entre los tres
       se comían unos 90 px de los 390 del teléfono: casi una cuarta parte de la
       pantalla en aire. Se recortan los tres, no uno, porque el problema es la
       suma. */
    .laracha-form-notice--carrito {
        padding: 1rem 0.875rem;
    }

    /* «PAGAR TODO (1) — 40,00 €» no cabía en una línea: el botón ocupa todo el
       ancho pero traía 2,5rem de relleno a cada lado, mayúsculas y espaciado
       entre letras. Se ajustan los tres y se prohíbe el corte, que en un botón
       de pago se lee fatal. */
    .laracha-form-notice--carrito .laracha-btn {
        padding: 0.875rem 1rem;
        font-size: 0.95em;
        letter-spacing: 0;
        white-space: nowrap;
    }

    /* Tablas de los pasos (desglose de precio): la celda del importe se queda
       sin sitio porque el concepto se lleva todo el ancho, y «40,00 €» se parte
       en dos líneas. Se ajusta al contenido y no se rompe nunca. */
    .laracha-form-panel .laracha-table th,
    .laracha-form-panel .laracha-table td {
        padding: 0.65rem 0.5rem;
    }

    .laracha-form-panel .laracha-table td:last-child {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }

    /* El concepto sí puede partirse: es texto largo («- DESEMPLEADOS (Toda la
       unidad familiar)») y es preferible a que empuje al importe. */
    .laracha-form-panel .laracha-table td:first-child {
        word-break: break-word;
    }

    .laracha-form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Tarjetas de participantes en mobile */
    .laracha-participantes-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .laracha-participante-card {
        padding: 1rem;
    }

    .laracha-participante-card__name {
        font-size: 1em;
    }

    /* Tarjetas de turnos en mobile */
    .laracha-form-turnos {
        gap: 0.875rem;
    }

    .laracha-form-turno__info {
        padding: 1rem 1rem 1rem 3.5rem;
    }

    .laracha-form-turno__info::before {
        left: 1rem;
        width: 20px;
        height: 20px;
    }

    .laracha-form-turno__info::after {
        left: calc(1rem + 5px);
        width: 10px;
        height: 10px;
    }

    .laracha-form-turno__nombre {
        font-size: 1em;
    }

    .laracha-form-actions {
        flex-direction: column;
    }

    .laracha-form-btn,
    .laracha-btn {
        width: 100%;
        text-align: center;
    }

    /* ---------- Contacto responsive ---------- */

    .laracha-contacto {
        padding: 2rem 1.25rem;
    }

    .laracha-contacto__header h1 {
        font-size: 1.75em;
    }

    .laracha-contacto__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .laracha-contacto__map {
        height: 250px;
    }

    .laracha-contacto__map iframe {
        height: 286px !important; /* > 250px: recorta la franja de atribución */
    }

    /* ---------- Legal (privacidad) responsive ---------- */

    .laracha-legal {
        padding: 2rem 1rem;
    }

    .laracha-legal__header h1 {
        font-size: 1.75em;
    }

    .laracha-legal__derechos-grid {
        grid-template-columns: 1fr;
    }

    .laracha-legal__section {
        padding: 1.5rem 0;
    }

    /* ---------- Formas de pago responsive ---------- */

    .laracha-formas-pago {
        padding: 2rem 1rem;
    }

    .laracha-formas-pago__header h1 {
        font-size: 1.75em;
    }

    .laracha-formas-pago__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .laracha-formas-pago__seguridad {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .laracha-formas-pago__faq-item {
        padding: 1.25rem 1.5rem;
    }

    /* ---------- Inicio responsive ---------- */

    .laracha-inicio__hero {
        min-height: 50vh;
        padding: 3rem 1.5rem;
    }

    .laracha-inicio__hero h1 {
        font-size: 2em;
    }

    .laracha-inicio__hero-subtitle {
        font-size: 1.1em;
    }

    .laracha-inicio__hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .laracha-inicio__hero-buttons .laracha-inicio__btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .laracha-inicio__hero-docs {
        margin-top: 1.75rem;
    }

    .laracha-inicio__hero-doc {
        width: 100%;
        max-width: 280px;
    }

    .laracha-inicio__hero-doc-name {
        max-width: 190px;
    }

    .laracha-inicio__section-title {
        font-size: 1.75em;
        margin-bottom: 2rem;
    }

    .laracha-inicio__nota {
        padding: 2rem 1.25rem 0;
    }

    .laracha-inicio__nota-box {
        padding: 1.25rem 1.25rem;
    }

    .laracha-inicio__features {
        padding: 3rem 1.25rem;
    }

    .laracha-inicio__features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .laracha-inicio__feature-card {
        padding: 1.5rem 1rem;
    }

    .laracha-inicio__feature-icon {
        width: 56px;
        height: 56px;
    }

    .laracha-inicio__feature-icon svg {
        width: 26px;
        height: 26px;
    }

    .laracha-inicio__steps {
        padding: 3rem 1.25rem;
    }

    .laracha-inicio__steps-row {
        flex-direction: column;
        gap: 2rem;
    }

    .laracha-inicio__step:not(:last-child)::after {
        display: none;
    }

    .laracha-inicio__actividades {
        padding: 3rem 1.25rem;
    }

    .laracha-inicio__actividades-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .laracha-inicio__cta-final {
        margin: 0 1rem 1rem;
        padding: 3rem 1.5rem;
    }

    .laracha-inicio__cta-final h2 {
        font-size: 1.75em;
    }

    .laracha-inicio__cta-final p {
        font-size: 1.05em;
    }
}

/* ==========================================================================
   RESPONSIVE - Small Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .laracha-portada h2 {
        font-size: 1.5em;
    }

    .laracha-category-group h3 {
        font-size: 1.25em;
    }

    .laracha-activity-card__title {
        font-size: 1.15em;
    }

    .laracha-activity-card__price {
        font-size: 1.25em;
    }

    .laracha-actividad__title {
        font-size: 1.5em;
    }

    .laracha-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1em;
    }

    /* Inicio small mobile */
    .laracha-inicio__features-grid {
        grid-template-columns: 1fr;
    }

    .laracha-inicio__hero h1 {
        font-size: 1.75em;
    }
}

/* ==========================================================================
   AUTH - Login & Registration Forms
   ========================================================================== */

.laracha-auth-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
}

.laracha-auth-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
}

.laracha-auth-card--wide {
    max-width: 620px;
}

/* Variante "info" para mensajes de estado (ya logueado, ya registrado, etc.) */
.laracha-auth-card--info {
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
}

.laracha-auth-card__icon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block;
    animation: laracha-empty-float 3s ease-in-out infinite;
}

.laracha-auth-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.laracha-auth-card__text {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 1.5rem;
}

/* Página 404 */
.laracha-404-card {
    max-width: 540px;
    padding: 3rem 2rem;
}

.laracha-404-card .laracha-auth-card__title {
    font-size: 1.6rem;
    line-height: 1.3;
}

.laracha-404-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.laracha-auth-btn--ghost,
.laracha-auth-btn--ghost:hover,
.laracha-auth-btn--ghost:focus,
.laracha-auth-btn--ghost:active,
.laracha-auth-btn--ghost:visited {
    color: #1A5A9E;
}

.laracha-auth-btn--ghost {
    background: transparent;
    border: 2px solid #1A5A9E;
}

.laracha-auth-btn--ghost:hover {
    background: rgba(26, 90, 158, 0.08);
    transform: translateY(-1px);
}

.laracha-auth-title {
    font-size: 1.75em;
    font-weight: 800;
    margin: 0 0 0.25rem;
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

.laracha-auth-subtitle {
    color: #50575e;
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: 0.95em;
}

.laracha-auth-section-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #1d2327;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f1;
}

.laracha-auth-hint {
    color: #50575e;
    font-size: 0.85em;
    margin: -0.25rem 0 1rem;
}

.laracha-auth-form .laracha-form-field {
    margin-bottom: 1rem;
}

.laracha-auth-form .laracha-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.9em;
    color: #1d2327;
}

.laracha-auth-form .laracha-form-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #c3c4c7;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    box-sizing: border-box;
}

.laracha-auth-form .laracha-form-input:focus {
    border-color: #1A5A9E;
    box-shadow: 0 0 0 3px rgba(26, 90, 158, 0.15);
    outline: none;
}

.laracha-auth-form .laracha-form-hint {
    display: block;
    font-size: 0.8em;
    color: #50575e;
    margin-top: 0.25rem;
}

.laracha-auth-form .laracha-form-required {
    color: #d63638;
}

.laracha-auth-form .laracha-form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.laracha-auth-form .laracha-form-field--half {
    flex: 1;
    min-width: 200px;
}

.laracha-auth-form .laracha-form-field--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.laracha-auth-form .laracha-form-row--checkboxes {
    flex-direction: column;
    gap: 0.5rem;
}

.laracha-auth-form .laracha-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9em;
}

.laracha-auth-form .laracha-form-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #1A5A9E;
    flex-shrink: 0;
}

.laracha-auth-btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.laracha-auth-btn--primary,
.laracha-auth-btn--primary:hover,
.laracha-auth-btn--primary:focus,
.laracha-auth-btn--primary:active,
.laracha-auth-btn--primary:visited {
    color: #fff;
}

.laracha-auth-btn--primary {
    background: linear-gradient(135deg, #1A5A9E 0%, #0F4C81 100%);
}

.laracha-auth-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(26, 90, 158, 0.4);
}

.laracha-auth-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.laracha-auth-link {
    color: #1A5A9E;
    text-decoration: none;
    font-size: 0.9em;
}

.laracha-auth-link:hover {
    text-decoration: underline;
}

.laracha-auth-link--bold {
    font-weight: 700;
}

.laracha-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f1;
}

.laracha-auth-footer p {
    margin: 0;
    color: #50575e;
    font-size: 0.95em;
}

@media (max-width: 640px) {
    .laracha-auth-wrapper {
        padding: 1rem 0;
    }

    .laracha-auth-card {
        padding: 1.25rem 0.5rem;
        border-radius: 10px;
    }

    .laracha-auth-card--wide {
        max-width: 100%;
    }

    .laracha-auth-form .laracha-form-row {
        flex-direction: column;
        gap: 0;
    }

    .laracha-auth-form .laracha-form-field--half {
        min-width: 100%;
    }
}

.laracha-auth-detail {
    margin: 0.5rem 0 0.25rem 1.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-left: 3px solid #1A5A9E;
    border-radius: 0 6px 6px 0;
}

.laracha-auth-detail .laracha-form-label {
    font-size: 0.8em;
    margin-bottom: 0.25rem;
}

.laracha-auth-detail .laracha-form-input {
    font-size: 0.9em;
    padding: 0.5rem 0.7rem;
}

/* Password visibility toggle */
.laracha-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.laracha-password-wrapper .laracha-form-input {
    padding-right: 2.75rem;
}

.laracha-password-toggle {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #a0aec0;
    line-height: 0;
    transition: color 0.2s;
    outline: none;
}

.laracha-password-toggle:hover,
.laracha-password-toggle:focus {
    color: #1A5A9E;
}

/* ==========================================================================
   EDITAR PARTICIPANTE - File uploads & detail panels
   ========================================================================== */

.laracha-detail-panel {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-left: 3px solid #1A5A9E;
    border-radius: 0 6px 6px 0;
}

.laracha-detail-panel .laracha-form-field {
    margin-bottom: 0.75rem;
}

.laracha-detail-panel .laracha-form-field:last-child {
    margin-bottom: 0;
}

.laracha-form-input-file {
    font-size: 0.9em;
    padding: 0.5rem;
    border: 1.5px dashed #c3c4c7;
    border-radius: 6px;
    background: #fff;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.laracha-form-input-file:hover {
    border-color: #1A5A9E;
    background: #f7fafc;
}

.laracha-file-selected {
    display: block;
    font-size: 0.85em;
    color: #50575e;
    margin-top: 4px;
}

.laracha-detail-panel .laracha-auth-hint a {
    color: #1A5A9E;
    text-decoration: underline;
}

.laracha-detail-panel .laracha-auth-hint a:hover {
    color: #0F4C81;
}

/* ==========================================================================
   Footer widgets: normalizar alineación vertical entre columnas
   ========================================================================== */

/* Fuerza que todos los bloques/widgets del footer arranquen a la misma altura,
   aunque internamente sean de tipos distintos (Navigation block, Page List,
   Párrafo, etc.). Algunos temas dejan márgenes por defecto diferentes en el
   primer hijo del contenido del widget, lo que produce un desalineo visual
   cuando las columnas tienen longitudes de texto distintas (típico en ES↔GL). */

.site-footer .widget > *:first-child,
.site-footer .widget-title + *,
footer.ct-footer .widget > *:first-child,
footer.ct-footer .widget-title + *,
[class*="footer"] .widget > ul:first-child,
[class*="footer"] .widget > p:first-child,
[class*="footer"] .wp-block-group > *:first-child,
[class*="footer"] .wp-block-column > ul:first-child,
[class*="footer"] .wp-block-column > p:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Asegura que las listas dentro del footer no tengan padding-left que
   desplaza el primer enlace respecto de otras columnas. */

[class*="footer"] .widget ul,
[class*="footer"] .wp-block-list,
[class*="footer"] .wp-block-page-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

[class*="footer"] .widget ul > li:first-child,
[class*="footer"] .wp-block-list > li:first-child,
[class*="footer"] .wp-block-page-list > li:first-child {
    margin-top: 0 !important;
}

/* ==========================================================================
   Footer Blocksy: columnas con múltiples widgets apilados
   ========================================================================== */

/* Blocksy aplica `margin-top: var(--widgets-gap, 40px)` a todos los
   widgets no-primeros del footer. Cuando una columna tiene el heading
   separado del contenido (dos .ct-widget en el mismo data-column),
   ese hueco de 40px empuja el contenido hacia abajo y rompe la
   alineación con las otras columnas que tienen un único widget. */

.ct-footer [data-column] > .ct-widget:not(:first-child),
.ct-footer [data-column] > .ct-widget + .ct-widget,
footer [data-column] > .ct-widget:not(:first-child) {
    /* Mantiene el mismo espacio que el margin-bottom del heading en las
       columnas de un único widget (~16px). Si en tu setup queda corto o
       largo, ajusta este valor. */
    margin-top: 1em !important;
}

/* Oculta párrafos completamente vacíos que algunos temas inyectan como
   widget intermedio (visible en el inspector como <p></p> dentro de
   .widget_text) y que añaden altura innecesaria. */

.ct-footer .ct-widget > p:empty,
.ct-footer .ct-widget .wp-block-paragraph:empty {
    display: none !important;
}

/* Control custom de subida de archivos: input nativo oculto + botón
 * (label) + nombre del archivo seleccionado, traducible vía PHP.
 * Sustituye al input file nativo cuyo texto "Ningún archivo seleccionado"
 * lo pinta el navegador en su propio idioma. */
.laracha-file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.laracha-file-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.laracha-file-upload__btn {
    display: inline-block;
    padding: 8px 14px;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.2;
}

.laracha-file-upload__btn:hover {
    background: #e2e8f0;
    border-color: #1A5A9E;
}

.laracha-file-upload__input:focus + .laracha-file-upload__btn {
    outline: 2px solid #1A5A9E;
    outline-offset: 2px;
}

.laracha-file-upload__name {
    font-size: 0.85em;
    color: #64748b;
    word-break: break-all;
    flex: 1 1 100%;
    min-width: 0;
    margin-top: 2px;
}

.laracha-file-upload__name.is-selected {
    color: #1e293b;
    font-weight: 500;
}

.laracha-file-upload__clear {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: #b32d2e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.laracha-file-upload__clear svg {
    width: 18px;
    height: 18px;
    display: block;
}

.laracha-file-upload__clear:hover {
    background: #fbeaea;
}

.laracha-file-upload__clear:focus {
    outline: 2px solid #b32d2e;
    outline-offset: 1px;
}

.laracha-file-upload__clear[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .laracha-file-upload {
        gap: 6px;
    }

    .laracha-file-upload__btn {
        padding: 6px 10px;
        font-size: 0.85em;
    }

    .laracha-file-upload__name {
        font-size: 0.8em;
    }
}


/* ── «Mis participantes»: columna Acciones ─────────────────────────────
   Editar es un <a> y Quitar el <button> de un formulario. Sin una clase
   común cada uno tomaba su estilo por defecto (el botón salía como pastilla
   azul del tema) y la columna quedaba descuadrada. */
.laracha-acciones-part {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.laracha-acciones-part__form {
    display: inline-flex;
    margin: 0;
}

.laracha-acciones-part .laracha-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.35rem 1.1rem;
    border: 2px solid transparent;
    border-radius: 50px;
    background: #ffffff;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.laracha-acciones-part .laracha-accion--editar {
    color: #1A5A9E;
    border-color: #1A5A9E;
}

.laracha-acciones-part .laracha-accion--editar:hover,
.laracha-acciones-part .laracha-accion--editar:focus {
    background: #f0f6fc;
    color: #1A5A9E;
    text-decoration: none;
}

.laracha-acciones-part .laracha-accion--quitar {
    color: #b91c1c;
    border-color: #e7c3c3;
}

.laracha-acciones-part .laracha-accion--quitar:hover,
.laracha-acciones-part .laracha-accion--quitar:focus {
    background: #fef2f2;
    border-color: #b91c1c;
    color: #991b1b;
}

/* Bloqueado: apagado, pero se puede pulsar para que cuente el motivo. */
.laracha-acciones-part .laracha-accion--off {
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: help;
    font-family: inherit;
}

.laracha-acciones-part .laracha-accion--off:hover,
.laracha-acciones-part .laracha-accion--off:focus {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #6b7280;
}

@media (max-width: 782px) {
    .laracha-acciones-part {
        justify-content: flex-end;
    }
    .laracha-acciones-part .laracha-accion {
        flex: 0 0 auto;
    }
}

/* Aviso «Añadido al carrito». El relleno lo ponía el JS en línea, así que no
   había forma de ajustarlo en móvil; aquí sí se puede. */
.laracha-form-notice--carrito {
    padding: 20px;
}