/* ============================================================
   posgrados-rediseno.css
   Estilos exclusivos de la vista posgrados_re.blade.php.
   Cargar DESPUÉS de online-redi.css: la regla base de
   .section-banner .container-title usa !important, así que aquí
   igualamos selector + especificidad para poder sobreescribirla
   solo en esta vista sin tocar el archivo compartido.
   ============================================================ */

.section-banner .container-title {
    max-width: 648px !important;
}

/* Checkbox personalizado de los filtros de Oferta (Área del Programa / Modalidad).
   El color de relleno al marcarse se define por elemento vía --chk-color inline,
   así una misma clase soporta color sólido o degradado (ej. "Todos" en Modalidad). */
.posgrado-check {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #d8d8d8;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.posgrado-check:checked {
    border-color: transparent;
    background: var(--chk-color, #922CEC);
}

.posgrado-check:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hover de los pills de "Oferta" (Todos / Maestrías / Doctorados / Especialidades):
   lavanda claro con texto morado oscuro. No aplica al pill activo (bg-uvp-morado),
   que mantiene su color sólido al pasar el mouse. */

/* border-image no respeta border-radius (rounded-full), por eso el degradado
   no se veía como en la maqueta: se dibujaba recto, ignorando la forma de pill.
   Se usa la técnica de doble fondo (padding-box + border-box) en su lugar. */
#posgrado-nivel-pills .posgrado-nivel-pill:not(.bg-uvp-morado) {
    border: 1px solid #D8D8D8;
    color: #515151;
}

#posgrado-nivel-pills .posgrado-nivel-pill:not(.bg-uvp-morado):hover {
    background: #D4ACF7;
    border-color: transparent;
    color: #500096;
    font-weight: 600;
}

#posgrado-nivel-pills .posgrado-nivel-pill.bg-uvp-morado {
    background-color: #922CEC !important;
    color: #EBD8FB !important;
    font-size: 600;
}

/* Filtros colapsables: Área del Programa / Tipo de Modalidad.
   Mismo truco de grid-template-rows 0fr->1fr que el acordeón de FAQ,
   para colapsar a una altura exacta de 0 sin saltos. */
.filtro-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.filtro-body>div {
    overflow: hidden;
    min-height: 0;
}

.filtro-item[data-open="1"] .filtro-body {
    grid-template-rows: 1fr;
}

.filtro-chevron {
    transition: transform 0.25s ease;
}

.filtro-item[data-open="0"] .filtro-chevron {
    transform: rotate(180deg);
}

/* El "+" gira 45deg y se convierte visualmente en una "x" al abrir el panel */
#posgrado-filtros-toggle[data-open="1"] #posgrado-filtros-plus {
    transform: rotate(45deg);
}

/* ============================================================
   Menú flotante de filtros en móvil (≤900px).
   #posgrado-filtros-panel = backdrop oscuro de pantalla completa.
   #posgrado-filtros-sheet = hoja blanca con esquinas redondeadas arriba.
   En escritorio ambos ids son divs "normales" sin estilo especial:
   el panel se ve siempre embebido en el sidebar oscuro, como antes.
   ============================================================ */
@media (max-width: 900px) {
    #posgrado-filtros-panel[data-mobile-open="0"] {
        display: none;
    }

    #posgrado-filtros-panel[data-mobile-open="1"] {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.55);
        padding: 16px;
    }

    #posgrado-filtros-sheet {
        background: #fff;
        width: 100%;
        max-width: 400px;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 24px;
        padding: 32px 24px;
    }

    #posgrado-filtros-sheet-header {
        display: flex;
    }

    /* Dentro del menú flotante no hay acordeón: los títulos van en negro y
       sin flecha, todas las secciones se muestran siempre expandidas. */
    #posgrado-filtros-sheet .filtro-header {
        color: #1c1c1c;
        cursor: default;
    }

    #posgrado-filtros-sheet .filtro-chevron {
        display: none;
    }

    /* Pills de "Oferta" inactivos: texto gris oscuro en vez del muted de fondo oscuro */
    #posgrado-filtros-sheet .posgrado-nivel-pill:not(.active) {
        color: #515151;
    }

    /* Labels de los checks (Área del Programa / Modalidad) en gris oscuro */
    #posgrado-filtros-sheet .filtro-body span {
        color: #515151;
    }
}

/* Estado "Click" de los botones de paginación (Figma node 655:4292):
   el borde degradado acompaña al glow morado, igual que en hover.
   - Anterior/Siguiente: se activa con :active nativo (mientras se mantiene el clic).
   - Números de página: se fija con .pagina-activa mientras esa página esté seleccionada. */
#posgrado-paginacion .border-gradiente:active::before,
#posgrado-paginas .border-gradiente.pagina-activa::before {
    background: linear-gradient(135deg,
        rgba(173, 81, 255, 0.80) 0%,
        rgba(173, 81, 255, 0.10) 38%,
        rgba(173, 81, 255, 0.10) 62%,
        rgba(173, 81, 255, 0.60) 100%
    );
}
}