/* ===========================================================================
   ESTILOS RESPONSIVE - IE PAZ Y AMOR MANUEL RODRÍGUEZ
   =========================================================================== */

/* ==========================================
   TABLET (768px - 1023px)
   ========================================== */
@media screen and (max-width: 1023px) {
  /* HEADER */
  .header-top {
    display: none;
  }
  
  .logo-text h1,
  .logo-text .logo-title {
    /* Obs. 6 (tanda 2-B): única escala del nombre del colegio. Base 1.15rem en
       css/components.css; aquí solo baja por breakpoint, igual para TODAS las
       páginas públicas. Nunca se corta ni se ponen puntos suspensivos. */
    font-size: 1.05rem;
  }
  
  .nav-menu a {
    padding: 6px 10px;
    /* Tamaño del menú unificado con el resto del sitio (0.95rem). Antes esta
       banda lo bajaba a 0.8rem y solo la sufrían las tres páginas que no
       cargan demo-premium.css (aviso-privacidad, faq y pqrs). */
    font-size: 0.95rem;
  }
  
  /* HERO SLIDER.
     Tanda 2-E: aquí había `height: 400px` y era una de las TRES alturas fijas
     que peleaban por el hero (560px en css/demo-premium.css, 400/300/250px
     aquí, 420px en la portada). Un hero con `height` fija no se adapta y en
     móvil dejaba la foto en 250px, imposible de apreciar. Ahora la altura es
     UNA y fluida —`clamp(520px, 68vh, 780px)` en css/demo-premium.css, con los
     escalones de móvil (60vh) y móvil apaisado (62vh) en
     pages/home-institucion.php— y no se vuelve a fijar por banda. */
  .slide-content {
    bottom: 30px;
    padding: 20px;
    width: 90%;
  }
  
  .slide-content h2 {
    font-size: 1.8rem;
  }
  
  .slider-prev,
  .slider-next {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  /* INFO CARDS */
  .info-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* NEWS & EVENTS */
  .news-grid,
  .calendar-widget {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .news-card,
  .event-card {
    min-height: 380px;
  }
  
  /* Obs. 5.b (tanda 2-B): aquí se forzaba `min-height: 180px; max-height: 250px`
     sobre las imágenes de tarjeta, lo que rompía el marco 3/2 y volvía a
     recortar. El marco (aspect-ratio 3/2 + object-fit: contain) vive en un solo
     lugar: css/components.css (.news-card img, .event-card img). No reponer
     alturas fijas aquí. */
  
  /* PROGRAMAS */
  .programas-grid {
    grid-template-columns: 1fr;
  }
  
  /* CONTACTO */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  /* PORTAL */
  .portal-dashboard {
    grid-template-columns: 1fr;
  }
  
  .profile-container {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   MÓVIL (max-width: 767px)
   ========================================== */
@media screen and (max-width: 767px) {
  /* HEADER */
  .mobile-menu-toggle {
    display: flex !important;
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--color-azul-oscuro);
    flex-direction: column;
    padding: 80px 20px 20px;
    transition: right var(--transition-fast);
    z-index: 999;
  }
  
  .nav-menu.active {
    right: 0;
  }
  
  .nav-menu a {
    padding: 15px;
    margin-bottom: 5px;
    font-size: 1rem;
  }
  
  .logo img {
    width: 50px;
    height: 50px;
  }
  
  .logo-text h1,
  .logo-text .logo-title {
    /* Obs. 6 (tanda 2-B): segundo escalón de la escala única del nombre. */
    font-size: 1rem;
    line-height: 1.2;
  }
  
  /* HERO SLIDER.
     Tanda 2-E: `height: 300px` eliminada (misma razón que en la banda de
     tablet, arriba). El alto lo decide la única regla fluida. */
  .slide-content {
    bottom: 20px;
    padding: 15px;
    width: 95%;
  }
  
  .slide-content h2 {
    font-size: 1.3rem;
  }
  
  .slide-content p {
    font-size: 1rem;
  }
  
  /* INFO CARDS */
  .info-cards {
    grid-template-columns: 1fr;
  }
  
  .info-card {
    padding: 30px 20px;
  }
  
  /* NEWS & EVENTS - CORREGIDO PARA MÓVIL */
  .news-grid,
  .calendar-widget {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .news-card,
  .event-card {
    margin: 0 auto;
    max-width: 100%;
    min-height: 350px;
  }
  
  /* Obs. 5.b (tanda 2-B): se eliminaron `height: 180px !important` +
     `object-fit: cover !important` (+ min/max-height) sobre las imágenes de
     tarjeta. El marco 3/2 con `contain` de css/components.css ya escala solo:
     en móvil la caja mide 2/3 del ancho (~215px a 320px de ancho), así que no
     queda ni gigante ni diminuta, y la foto se ve entera. */
  
  .news-card-content,
  .event-card-content {
    padding: 20px;
  }
  
  .news-card h3,
  .event-card h3 {
    font-size: 1.1rem;
  }
  
  /* PROGRAMAS */
  .programas-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .programa-card {
    margin: 0;
  }
  
  /* ADMISIONES */
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .documents-grid {
    grid-template-columns: 1fr;
  }
  
  /* BIBLIOTECA */
  .biblioteca-categorias {
    flex-direction: column;
    align-items: center;
  }
  
  .biblioteca-categorias button {
    width: 200px;
  }
  
  /* CALENDARIO */
  .calendar-grid {
    gap: 2px;
  }
  
  .calendar-header-cell {
    padding: 10px 2px;
    font-size: 0.8rem;
  }
  
  .calendar-day {
    font-size: 0.9rem;
    min-height: 40px;
  }
  
  /* CONTACTO */
  .contact-method {
    flex-direction: column;
    text-align: center;
  }
  
  .method-icon {
    margin: 0 auto var(--spacing-md);
  }
  
  /* PORTAL */
  .login-tabs {
    flex-direction: column;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .schedule-controls {
    flex-direction: column;
  }
  
  .schedule-grid {
    grid-template-columns: 1fr;
  }
  
  .schedule-hour {
    display: none;
  }
  
  /* FAQ */
  .faq-item summary {
    padding: 15px;
    font-size: 1rem;
  }
  
  /* PÁGINAS INTERNAS */
  .page-banner {
    padding: var(--spacing-lg) 0 var(--spacing-md);
  }
  
  .page-banner h1 {
    font-size: 1.8rem;
  }
  
  .breadcrumb {
    font-size: 0.9rem;
  }
  
  .mission-vision {
    grid-template-columns: 1fr;
  }
  
  .history-content {
    grid-template-columns: 1fr;
  }
  
  .history-gallery {
    order: -1;
  }
  
  .mvv-grid {
    grid-template-columns: 1fr;
  }
  
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .objectives-grid {
    grid-template-columns: 1fr;
  }
  
  .testimonials-slider {
    padding: 0 var(--spacing-md);
  }
  
  .testimonial-content {
    padding: var(--spacing-lg);
  }
  
  .quote {
    font-size: 1rem;
  }
  
  /* DOCUMENTOS */
  .documents-grid {
    grid-template-columns: 1fr;
  }
  
  .document-card {
    padding: var(--spacing-lg);
  }
  
  /* NOTICIAS */
  .news-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .news-filters {
    width: 100%;
    flex-direction: column;
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .event-item {
    grid-template-columns: 1fr;
    text-align: center;
    margin: 0 var(--spacing-md);
  }
  
  /* NEWSLETTER */
  .subscribe-form {
    flex-direction: column;
  }
  
  .subscribe-form input {
    width: 100%;
  }
}

/* ==========================================
   CORRECCIONES DE ESTILOS PARA NOTICIAS/EVENTOS
   ========================================== */

/* Forzar visibilidad de imágenes en móviles */
@media screen and (max-width: 767px) {
  .news-grid,
  .calendar-widget {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .news-card,
  .event-card {
    margin: 0 auto;
    max-width: 100%;
  }
  
  /* Obs. 5.b (tanda 2-B): otro bloque duplicado con `height: 180px !important`
     + `object-fit: cover !important`. Retirado: el marco único de
     css/components.css se encarga (3/2 + contain). */
}

/* Corrección para tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .news-grid,
  .calendar-widget {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

/* Corrección de alturas mínimas */
.news-card,
.event-card {
  min-height: 380px;
}

/* Obs. 5.b (tanda 2-B): el bloque global `.news-card img, .event-card img
   { min-height: 180px; max-height: 250px }` se eliminó porque contradecía el
   marco 3/2 (a 480px de ancho la caja pide 320px y el max-height la volvía a
   recortar). Marco único: css/components.css. */

/* ==========================================
   PEQUEÑOS DISPOSITIVOS (max-width: 480px)
   ========================================== */
@media screen and (max-width: 480px) {
  /* HEADER */
  .logo-text h1,
  .logo-text .logo-title {
    /* Obs. 6 (tanda 2-B): tercer escalón de la escala única del nombre
       (0.95rem ≈ 15,2px, igual que el menú, para que nada quede por debajo). */
    font-size: 0.95rem;
    line-height: 1.2;
  }
  
  .logo-text h1 span,
  .logo-text .logo-title span {
    font-size: 1rem;
  }
  
  /* HERO SLIDER.
     Tanda 2-E: `height: 250px` eliminada. Era la altura más corta de todas y
     dejaba la foto del hero prácticamente en una franja; el suelo del
     `clamp()` (tanda 2-F: 420px en móvil vertical, 380px en móvil apaisado)
     garantiza que en móvil la imagen se aprecie. */
  .slide-content h2 {
    font-size: 1.1rem;
  }
  
  .slide-content p {
    font-size: 0.9rem;
  }
  
  /* INFO CARDS */
  .info-card {
    padding: 20px 15px;
  }
  
  .card-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  /* NEWS & EVENTS */
  /* Obs. 5.b (tanda 2-B): se eliminaron `height/min-height/max-height: 150px
     !important` sobre las imágenes de tarjeta. En un móvil de 320px de ancho el
     marco 3/2 da ~213px de alto (antes 150px, que dejaba la foto diminuta) y la
     imagen se ve completa con `contain`. No reponer alturas fijas. */
  
  .news-card-content,
  .event-card-content {
    padding: 15px;
  }
  
  .news-card h3,
  .event-card h3 {
    font-size: 1rem;
  }
  
  .news-card p,
  .event-card p {
    font-size: 0.9rem;
  }
  
  /* FOOTER */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-section {
    text-align: center;
  }
  
  /* FORMULARIOS */
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* ==========================================
   ORIENTACIÓN HORIZONTAL EN MÓVILES
   ========================================== */
@media screen and (max-width: 767px) and (orientation: landscape) {
  /* Tanda 2-E: aquí vivía la CUARTA altura fija del hero (`height: 350px`).
     Se elimina sin sustituto a propósito: el alto del hero queda en la única
     regla fluida (tanda 2-F: clamp(520px, 68vh, 780px), css/demo-premium.css:146
     y pages/home-institucion.php), y el único caso que necesita un suelo más
     bajo —móvil apaisado, donde 420px no caben— se resuelve dentro de la
     propia portada (pages/home-institucion.php, bloque <style>, última
     @media), que es donde el requisito se pidió. Así las internas no cambian
     de comportamiento por una decisión de la portada. */
  .slide-content {
    bottom: 30px;
  }
  
  .nav-menu {
    padding-top: 60px;
  }
  
  .nav-menu a {
    padding: 10px;
    margin-bottom: 2px;
  }
}

/* ==========================================
   ALTO CONTRASTE Y ACCESIBILIDAD
   ========================================== */
@media (prefers-contrast: high) {
  :root {
    --color-azul-oscuro: #000080;
    --color-verde: #008000;
    --color-amarillo: #FFD700;
    --color-texto: #000000;
    --color-fondo: #FFFFFF;
  }
  
  .news-card,
  .event-card {
    border: 2px solid var(--color-texto);
  }
}

/* ==========================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}