/* ==========================================================================
   HOJA RESPONSIVE CENTRALIZADA (v2) - IESTP Carlos Salazar Romero
   Aplica a: estilos.css + programasestudios.css

   Breakpoints:
   - 1100px: tablet grande (nav → hamburguesa, grid 3)
   - 992px:  tablet (grid 2, postula 1 columna, sidebar carril)
   - 900px:  móvil grande (form 1 columna, tipografías +)
   - 768px:  móvil (footer 1 col, flotantes pequeños)
   - 640px:  móvil (grid 1 columna, cards y botones grandes)
   - 480px:  móvil pequeño
   ========================================================================== */

/* ==========================================================================
   TABLET GRANDE (max-width: 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
    /* Cabecera: oculta nav escritorio, muestra hamburguesa */
    .csr-mainnav { display: none !important; }
    .csr-hamburger { display: flex !important; }
    .csr-logo__unit, .csr-logo__divider { display: none; }

    /* Programas: 3 cards por fila */
    .csr-programs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.3rem;
    }
}

/* ==========================================================================
   TABLET (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
    .csr-quicklinks { display: none; }
    .csr-topbar__hide-mobile { display: none; }

    /* Comité: columna + sidebar carril deslizable */
    .csr-committee { flex-direction: column; gap: 1.5rem; }

    .csr-sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 0.5rem;
        padding: 0.2rem 0.2rem 0.9rem;
        scrollbar-width: thin;
        scrollbar-color: var(--csr-color-primary) var(--csr-color-lighter);
    }

    .csr-sidebar::-webkit-scrollbar { height: 6px; }
    .csr-sidebar::-webkit-scrollbar-track { background: var(--csr-color-lighter); border-radius: 3px; }
    .csr-sidebar::-webkit-scrollbar-thumb { background: var(--csr-color-primary); border-radius: 3px; }

    .csr-sidebar__item {
        white-space: nowrap;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .csr-sidebar__item:hover { transform: none; }

    .csr-footer__grid { grid-template-columns: repeat(2, 1fr); }

    /* Programas: 2 cards por fila */
    .csr-programs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    /* Postula: 1 columna, formulario primero */
    .csr-postula-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .csr-postula-form { order: 1; }
    .csr-postula-aside { order: 2; }
}

/* ==========================================================================
   MÓVIL GRANDE (max-width: 900px) — el formulario se apila ANTES
   ========================================================================== */
@media (max-width: 900px) {
    /* Campos del formulario en 1 columna */
    .csr-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Tipografías y controles más legibles */
    .csr-section__title { font-size: 1.7rem; }
    .csr-section__intro { font-size: 1rem; }

    .csr-form__group label { font-size: 0.95rem; }

    /* 16px evita el zoom automático de iOS y se ve proporcionado */
    .csr-form__group input,
    .csr-form__group select {
        font-size: 1rem;
        padding: 0.9rem 1.1rem;
    }

    .csr-btn {
        font-size: 1rem;
        padding: 0.85rem 1.6rem;
    }

    .csr-postula-form { padding: 1.8rem; }
    .csr-postula-form__title { font-size: 1.15rem; }
    .csr-postula-aside__card { padding: 1.6rem; }
    .csr-postula-aside__card h3 { font-size: 1.15rem; }
    .csr-postula-aside__card ul li { font-size: 0.95rem; }
}

/* ==========================================================================
   MÓVIL (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .csr-section { padding: 3.5rem 0; }

    /* Banner y lema */
    .csr-banner__bg { height: 320px; }

    .csr-slogan {
        margin-top: -50px;
        max-width: 100%;
        border-radius: var(--csr-radius-lg);
        padding: 1.5rem;
        text-align: center;
    }

    /* Footer 1 columna centrado */
    .csr-footer__grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .csr-footer__col h4::after { left: 50%; transform: translateX(-50%); }
    .csr-footer__logo { justify-content: center; }
    .csr-footer__col--wide { max-width: 100%; }

    /* Flotantes pequeños y sin tooltip */
    .csr-float-btn { width: 50px; height: 50px; }
    .csr-float-btn--whatsapp { bottom: 1.2rem; right: 1.2rem; }
    .csr-float-btn--top { bottom: 5rem; right: 1.2rem; }
    .csr-float-btn__tooltip { display: none; }

    /* Comité */
    .csr-intro-box { flex-direction: column; align-items: center; text-align: center; }
    .csr-flow__step { gap: 0.8rem; }
    .csr-flow__icon { width: 48px; height: 48px; font-size: 1.1rem; }
    .csr-flow__step:not(:last-child)::after { left: 23px; top: 50px; }
}

/* ==========================================================================
   MÓVIL (max-width: 640px) — 1 CARD POR FILA, TODO MÁS GRANDE
   ========================================================================== */
@media (max-width: 640px) {
    .csr-section { padding: 3rem 0; }
    .csr-section__header { margin-bottom: 2rem; }

    /* Grid: 1 card por fila */
    .csr-programs-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    /* Card más alta y con tipografía mayor */
    .csr-program-card__media { height: 220px; }
    .csr-program-card__body { padding: 1.5rem; }
    .csr-program-card__title { font-size: 1.3rem; }
    .csr-program-card__desc { font-size: 1rem; }
    .csr-program-card__meta li { font-size: 0.92rem; }

    /* Botón de la card grande y táctil */
    .csr-program-card__link {
        font-size: 1rem;
        padding: 0.9rem 1.4rem;
    }

    /* Filtros más táctiles */
    .csr-filters { gap: 0.6rem; }
    .csr-filter-btn {
        padding: 0.6rem 1.1rem;
        font-size: 0.88rem;
    }

    /* Formulario: botones apilados y ancho completo */
    .csr-postula-form { padding: 1.5rem; }
    .csr-form__actions { flex-direction: column; }
    .csr-form__actions .csr-btn { width: 100%; }

    /* Éxito y aside */
    .csr-postula-success { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   MÓVIL PEQUEÑO (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .csr-banner__bg { height: 260px; }
    .csr-banner__title { font-size: 1.4rem; }

    .csr-topbar__contact span:not(:first-child) { display: none; }

    .csr-docviewer__toolbar { justify-content: center; }
    .csr-docviewer__zoom { display: none; }

    .csr-section__title { font-size: 1.5rem; }
    .csr-program-card__media { height: 200px; }
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

*:focus-visible {
    outline: 3px solid var(--csr-color-secondary);
    outline-offset: 2px;
}


/* ==========================================================================
   RESPONSIVE — SLIDER (csr-slider) v11
   [FIX-15] En tablet/móvil la imagen llena TODO el alto del slider
            (object-fit: cover). Se eliminan las franjas (contain/blur).
            El alto del slider NO cambia: 540 / 470 / 360 / 320 px.
   ========================================================================== */

/* ---------- Tablet (max-width: 992px) ---------- */
@media (max-width: 992px) {
    .csr-slider { --csr-slider-height: 470px; }

    /* Imagen a todo el alto: cubre el slider, recorta costados, no deforma */
    .csr-slider__media img {
        object-fit: cover;
        object-position: center;
    }

    .csr-slider__content { padding: 2rem 2rem 4.2rem; }
    .csr-slider__arrow { width: 44px; height: 44px; }
    .csr-slider__arrow::after { width: 11px; height: 11px; }
}

/* ---------- Móvil (max-width: 640px) ---------- */
@media (max-width: 640px) {
    .csr-slider { --csr-slider-height: 360px; }

    /* Texto compacto para que quepa sobre la imagen */
    .csr-slider__content { padding: 1.2rem 1rem 2.6rem; }
    .csr-slider__tag {
        font-size: 0.62rem;
        padding: 0.25rem 0.8rem;
        margin-bottom: 0.5rem;
    }
    .csr-slider__title {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }
    .csr-slider__text { display: none; }   /* se oculta el párrafo en móvil */
    .csr-slider__btn {
        padding: 0.45rem 1.1rem;
        font-size: 0.78rem;
        border-radius: 14px;
    }

    .csr-slider__arrow { width: 36px; height: 36px; }
    .csr-slider__arrow--prev { left: 0.5rem; }
    .csr-slider__arrow--next { right: 0.5rem; }
    .csr-slider__arrow::after { width: 9px; height: 9px; border-width: 2px; }

    .csr-slider__dots { bottom: 0.7rem; gap: 0.4rem; }
    .csr-slider__dot { width: 9px; height: 9px; }
    .csr-slider__dot--active { width: 22px; }
}

/* ---------- Móvil pequeño (max-width: 480px) ---------- */
@media (max-width: 480px) {
    .csr-slider { --csr-slider-height: 320px; }
    .csr-slider__title { font-size: 1.05rem; }
}


/* ==========================================================================
   RESPONSIVE — NOTICIAS (csr-news)
   ========================================================================== */

/* ---------- Tablet (max-width: 992px): 2 columnas ---------- */
@media (max-width: 992px) {
    .csr-news__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
    }
}

/* ---------- Móvil (max-width: 640px): 1 columna ---------- */
@media (max-width: 640px) {
    .csr-news {
        padding: 3rem 0;
    }

    .csr-news__header {
        margin-bottom: 1.8rem;
    }

    .csr-news__title {
        font-size: 1.6rem;
    }

    .csr-news__filters {
        gap: 0.5rem;
        margin-bottom: 1.8rem;
    }

    .csr-news__filter-btn {
        padding: 0.5rem 1.05rem;
        font-size: 0.8rem;
    }

    .csr-news__grid {
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }

    .csr-news__card-media {
        height: 210px;
    }
}

/* ---------- Móvil pequeño (max-width: 480px) ---------- */
@media (max-width: 480px) {
    .csr-news__card-body {
        padding: 1.2rem;
    }

    .csr-news__card-title {
        font-size: 1rem;
    }
}




/* ==========================================================================
   RESPONSIVE — CONVENIOS (csr-convenios)
   ========================================================================== */

/* ---------- Tablet grande (max-width: 1100px) ---------- */
@media (max-width: 1100px) {
    .csr-convenios__benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .csr-convenios__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
    }
}

/* ---------- Móvil (max-width: 640px) ---------- */
@media (max-width: 640px) {
    .csr-convenios {
        padding: 3rem 0;
    }

    .csr-convenios__header {
        margin-bottom: 2rem;
    }

    .csr-convenios__title {
        font-size: 1.6rem;
    }

    .csr-convenios__benefits {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .csr-convenios__grid {
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }

    .csr-convenio-card {
        padding: 1.7rem 1.3rem;
    }

    .csr-convenio-card__logo {
        width: 72px;
        height: 72px;
        font-size: 1.3rem;
    }
}



/* ==========================================================================
   RESPONSIVE — ENLACES DE INTERÉS (csr-enlaces)
   ========================================================================== */

/* ---------- Tablet grande (max-width: 1100px): 2 columnas ---------- */
@media (max-width: 1100px) {
    .csr-enlaces__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
    }
}

/* ---------- Móvil (max-width: 640px): 1 columna ---------- */
@media (max-width: 640px) {
    .csr-enlaces {
        padding: 3rem 0;
    }

    .csr-enlaces__header {
        margin-bottom: 2rem;
    }

    .csr-enlaces__title {
        font-size: 1.6rem;
    }

    .csr-enlaces__grid {
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }

    .csr-enlace-card {
        padding: 1.5rem;
    }

    .csr-enlace-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   RESPONSIVE — CENTRO DE DOCUMENTOS (csr-docs)
   ========================================================================== */

/* ---------- Tablet (max-width: 992px) ---------- */
@media (max-width: 992px) {
    .csr-docs__viewer {
        aspect-ratio: 4 / 3;
        min-height: 380px;
    }
}

/* ---------- Móvil (max-width: 640px) ---------- */
@media (max-width: 640px) {
    .csr-docs {
        padding: 3rem 0;
    }

    .csr-docs__header {
        margin-bottom: 1.8rem;
    }

    .csr-docs__title {
        font-size: 1.6rem;
    }

    .csr-docs__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .csr-docs__open {
        justify-content: center;
    }

    .csr-docs__viewer {
        aspect-ratio: 3 / 4;   /* más alto que ancho: cómodo para leer */
        min-height: 360px;
        max-height: 75vh;
        border-radius: var(--csr-radius-lg);
    }

    .csr-docs__foot {
        flex-direction: column;
        align-items: flex-start;
    }

     .csr-docs__viewer {
        aspect-ratio: 3 / 4;      /* se mantiene */
        min-height: 480px;        /* antes 360px: más alto para leer el flujograma */
        max-height: 85vh;
    }
}


/* ==========================================================================
   RESPONSIVE — VENTANA EMERGENTE (csr-modal)
   ========================================================================== */

/* ---------- Móvil (max-width: 640px) ---------- */
@media (max-width: 640px) {
    .csr-modal {
        padding: 0.6rem;
    }

    .csr-modal__dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: var(--csr-radius-lg);
    }

    .csr-modal__figure img {
        max-height: 70vh;
    }

    .csr-modal__close {
        width: 40px;
        height: 40px;
        top: 0.6rem;
        right: 0.6rem;
    }

    .csr-modal__actions {
        padding: 0.7rem 0.8rem;
        gap: 0.5rem;
    }

    .csr-modal__btn {
        flex: 1;
        justify-content: center;
        padding: 0.55rem 0.8rem;
        font-size: 0.82rem;
    }

    .csr-flyer-trigger {
        max-width: 100%;
    }
}