/* ==========================================
   ESTILOS POR PÁGINAS - IE PAZ Y AMOR MANUEL RODRÍGUEZ
   ========================================== */

/* ==========================================
   PÁGINA: QUIÉNES SOMOS
   ========================================== */
.institution-history {
  padding: var(--spacing-xl) 0;
  background: var(--color-fondo);
}

.history-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--spacing-xl);
  align-items: start;
}

.history-text h2 {
  font-family: var(--font-titulos);
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-md);
}

.history-text p {
  margin-bottom: var(--spacing-md);
  text-align: justify;
}

.stats-highlight {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.stat-item {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-blanco);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--color-verde);
  font-family: var(--font-titulos);
}

.stat-label {
  color: var(--color-texto-claro);
  font-size: 0.9rem;
}

.history-gallery {
  display: grid;
  gap: var(--spacing-sm);
}

.history-gallery img {
  width: 100%;
  height: auto;
  /* Obs. 5.b (tanda 2-B): 200px fijos + `cover` recortaban las fotos. Mismo
     marco 3/2 y `contain` que el resto de tarjetas (css/components.css). */
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--color-gris-claro);
  border-radius: var(--border-radius);
}

.our-community {
  padding: var(--spacing-xl) 0;
}

.our-community h2 {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.community-card {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.community-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-md);
  background: linear-gradient(135deg, var(--color-verde), var(--color-azul-claro));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-blanco);
}

.community-card h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.community-card ul {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-md);
  text-align: left;
}

.community-card li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-gris-claro);
}

.infrastructure {
  padding: var(--spacing-xl) 0;
  background: var(--color-fondo);
}

.infrastructure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.infrastructure-item {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.infrastructure-item i {
  font-size: 3rem;
  color: var(--color-azul-claro);
  margin-bottom: var(--spacing-sm);
}

.infrastructure-item h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.testimonials {
  padding: var(--spacing-xl) 0;
}

.testimonials h2 {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.testimonials-slider {
  max-width: 800px;
  margin: 0 auto;
}

.testimonial {
  display: none;
  text-align: center;
}

.testimonial.active {
  display: block;
}

.testimonial-content {
  background: var(--color-fondo);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--spacing-md);
}

.quote {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-texto);
  margin-bottom: var(--spacing-md);
}

.author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* Obs. 5.b (tanda 2-B): SE CONSERVA `cover` a propósito: es la foto de perfil
     del autor dentro de un círculo de 50px. Con `contain` la cara quedaría
     diminuta con franjas. No es una «imagen de contenido» (noticias, eventos o
     galería), que sí usan `contain` desde esta tanda. */
  object-fit: cover;
}

.author strong {
  display: block;
}

.author span {
  font-size: 0.9rem;
  color: var(--color-gris-oscuro);
}

/* Responsive */
@media (max-width: 767px) {
  .history-content {
    grid-template-columns: 1fr;
  }
  
  .history-gallery {
    order: -1;
  }
}

/* ==========================================
   PÁGINA: MISIÓN Y VISIÓN
   ========================================== */
.mission-vision-values {
  padding: var(--spacing-xl) 0;
}

.mvv-grid {
  display: grid;
  gap: var(--spacing-xl);
}

.mvv-card {
  background: var(--color-blanco);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.mvv-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto var(--spacing-md);
  background: linear-gradient(135deg, var(--color-verde), var(--color-azul-claro));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--color-blanco);
}

.mvv-card h2 {
  text-align: center;
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-titulos);
}

.mvv-card p {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.value-item {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-fondo);
  border-radius: var(--border-radius);
}

.value-item i {
  font-size: 2rem;
  color: var(--color-verde);
  margin-bottom: var(--spacing-sm);
}

.value-item h4 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-xs);
}

.value-item p {
  font-size: 0.9rem;
}

.principles {
  padding: var(--spacing-xl) 0;
  background: var(--color-fondo);
}

.principles h2 {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.principles-list {
  display: grid;
  gap: var(--spacing-md);
}

.principle-item {
  display: flex;
  gap: var(--spacing-md);
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.principle-item i {
  font-size: 2.5rem;
  color: var(--color-amarillo);
  flex-shrink: 0;
}

.objectives {
  padding: var(--spacing-xl) 0;
}

.objectives h2 {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.objectives-grid {
  display: grid;
  gap: var(--spacing-md);
}

.objective-card {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  border-left: 5px solid var(--color-verde);
  box-shadow: var(--shadow-sm);
}

.objective-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-verde);
  font-family: var(--font-titulos);
}

.objective-card h3 {
  color: var(--color-azul-oscuro);
  margin: var(--spacing-sm) 0;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: var(--color-gris-claro);
  border-radius: 5px;
  overflow: hidden;
  margin: var(--spacing-sm) 0;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, var(--color-verde), var(--color-azul-claro));
}

/* ==========================================
   PÁGINA: PROGRAMAS ACADÉMICOS
   ========================================== */
.programs-overview {
  padding: var(--spacing-xl) 0;
}

.programs-intro {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.programs-tabs {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.program-tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-gris-claro);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition-fast);
}

.program-tab.active {
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
}

.program-content {
  display: none;
}

.program-content.active {
  display: block;
}

.program-header {
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.program-header h3 {
  margin-bottom: var(--spacing-sm);
}

.program-meta {
  display: flex;
  gap: var(--spacing-lg);
  font-size: 0.9rem;
}

.program-details {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-lg);
}

.program-description {
  padding: var(--spacing-lg);
  background: var(--color-fondo);
}

.program-description h4 {
  color: var(--color-azul-oscuro);
  margin: var(--spacing-md) 0 var(--spacing-sm);
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

.area-item {
  padding: var(--spacing-sm);
  background: var(--color-blanco);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--color-verde);
}

.program-dates {
  padding: var(--spacing-lg);
  background: var(--color-blanco);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.program-dates h4 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.dates-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-lg);
}

.dates-list li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-gris-claro);
}

.costs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.costs-table th,
.costs-table td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-gris-claro);
}

.costs-table th {
  background: var(--color-gris-claro);
  color: var(--color-azul-oscuro);
}

.special-programs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

.special-program {
  background: var(--color-fondo);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

.special-program h4 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.curriculum-download {
  padding: var(--spacing-xl) 0;
  background: var(--color-fondo);
}

.curriculum-download h2 {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.curriculum-download p {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.document-card {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.document-card i {
  font-size: 3rem;
  color: var(--color-error);
  margin-bottom: var(--spacing-md);
}

.document-card h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.document-card p {
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 1023px) {
  .program-details {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   PÁGINA: CONTACTO
   ========================================== */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.contact-method {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.method-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-verde), var(--color-azul-claro));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.method-details h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.method-details p {
  margin-bottom: var(--spacing-xs);
}

.method-details a {
  color: var(--color-verde);
  text-decoration: none;
}

.method-details small {
  color: var(--color-gris-oscuro);
}

.contact-form-map {
  padding: var(--spacing-xl) 0;
  background: var(--color-fondo);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.contact-form-container {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.contact-form-container h2,
.map-container h2 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-md);
}

.contact-form-container p {
  margin-bottom: var(--spacing-lg);
  color: var(--color-texto-claro);
}

.map-container iframe {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.map-info {
  margin-top: var(--spacing-md);
}

.map-info h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.map-info ul {
  list-style: none;
  padding: 0;
}

.map-info li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-gris-claro);
}

.contact-faq {
  padding: var(--spacing-xl) 0;
}

.contact-faq h2 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.contact-faq-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (max-width: 767px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  
  .contact-method {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================
   PÁGINA: FAQ
   ========================================== */
.faq-search {
  display: flex;
  gap: var(--spacing-sm);
  max-width: 600px;
  margin: 0 auto var(--spacing-lg);
}

#faqSearch {
  flex: 1;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-gris-claro);
  border-radius: var(--border-radius-sm);
}

.faq-categories {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.category-filter {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-gris-claro);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.category-filter.active {
  background: var(--color-verde);
  color: var(--color-blanco);
}

.faq-contact {
  padding: var(--spacing-xl) 0;
  background: var(--color-fondo);
  text-align: center;
}

.faq-contact-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* ==========================================
   PÁGINA: AVISO LEGAL / PRIVACIDAD / ACCESIBILIDAD
   ========================================== */
.legal-content,
.privacy-content,
.accessibility-content {
  padding: var(--spacing-xl) 0;
}

.legal-document,
.privacy-document,
.accessibility-document {
  background: var(--color-blanco);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.legal-document h2,
.privacy-document h2,
.accessibility-document h2 {
  color: var(--color-azul-oscuro);
  text-align: center;
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-titulos);
}

.legal-update,
.privacy-update,
.accessibility-update {
  text-align: center;
  color: var(--color-gris-oscuro);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-lg);
}

.legal-section,
.privacy-section,
.accessibility-section {
  margin-bottom: var(--spacing-xl);
}

.legal-section h3,
.privacy-section h3,
.accessibility-section h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-verde);
}

.legal-section h4,
.privacy-section h4 {
  color: var(--color-azul-oscuro);
  margin: var(--spacing-md) 0 var(--spacing-sm);
}

.legal-section ul,
.privacy-section ul {
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.legal-section li,
.privacy-section li {
  margin-bottom: var(--spacing-xs);
}

.legal-acceptance {
  background: var(--color-amarillo);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  text-align: center;
  margin-top: var(--spacing-xl);
}

.legal-acceptance-text {
  font-weight: 600;
  color: var(--color-azul-oscuro);
}

/* PRIVACIDAD ESPECÍFICO */
.privacy-notice {
  background: linear-gradient(135deg, rgba(1, 165, 78, 0.1), rgba(24, 163, 233, 0.1));
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border-left: 5px solid var(--color-verde);
  margin-bottom: var(--spacing-xl);
}

.privacy-notice h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.right-card {
  background: var(--color-fondo);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  text-align: center;
}

.right-card i {
  font-size: 2.5rem;
  color: var(--color-verde);
  margin-bottom: var(--spacing-sm);
}

.right-card h4 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-xs);
}

.how-to-exercise {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-lg);
  border-left: 4px solid var(--color-azul-claro);
}

.privacy-contact {
  background: linear-gradient(135deg, var(--color-azul-oscuro), var(--color-verde));
  color: var(--color-blanco);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
}

.privacy-contact h3 {
  margin-bottom: var(--spacing-md);
}

.privacy-contact ul {
  list-style: none;
  padding: 0;
}

.privacy-contact li {
  margin-bottom: var(--spacing-sm);
}

/* ACCESIBILIDAD ESPECÍFICO */
.compliance-status {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--color-exito);
  color: var(--color-blanco);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
}

.status-badge i {
  font-size: 2rem;
}

.status-badge h3 {
  margin: 0;
  font-size: 1.5rem;
}

.status-badge p {
  margin: 0;
  font-size: 1rem;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.contact-option {
  background: var(--color-fondo);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  text-align: center;
}

.contact-option i {
  font-size: 2rem;
  color: var(--color-verde);
  margin-bottom: var(--spacing-sm);
}

.contact-option h4 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.technical-specifications table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
}

.technical-specifications th,
.technical-specifications td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-gris-claro);
}

.technical-specifications th {
  background: var(--color-gris-claro);
  color: var(--color-azul-oscuro);
}

/* ==========================================
   PÁGINA: PORTAL
   ========================================== */
.portal-login {
  max-width: 500px;
  margin: 0 auto;
}

.login-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.login-logo {
  width: 80px;
  margin: 0 auto var(--spacing-md);
}

.login-help {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--color-fondo);
  border-radius: var(--border-radius);
}

.login-help h4 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.login-help p {
  margin-bottom: var(--spacing-xs);
}

.portal-dashboard {
  grid-template-columns: 250px 1fr;
  gap: var(--spacing-lg);
  min-height: calc(100vh - 300px);
}

.user-info {
  text-align: center;
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--color-verde);
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto var(--spacing-sm);
}

#userName {
  color: var(--color-blanco);
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xs);
}

#userRole {
  color: var(--color-amarillo);
  font-size: 0.9rem;
}

.portal-nav {
  padding: var(--spacing-md) 0;
}

.portal-nav ul {
  list-style: none;
  padding: 0;
}

.portal-nav a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-blanco);
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: var(--transition-fast);
}

.portal-nav a:hover,
.portal-nav a.active {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--color-amarillo);
}

.portal-nav a.logout {
  color: var(--color-error);
  margin-top: var(--spacing-lg);
}

.portal-content {
  padding: var(--spacing-lg);
}

.portal-section h2 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-lg);
  font-family: var(--font-titulos);
}

/* Sección Calificaciones */
.period-selector {
  margin-bottom: var(--spacing-lg);
}

.period-selector label {
  color: var(--color-azul-oscuro);
  font-weight: 600;
}

.grades-table table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.grades-table th,
.grades-table td {
  padding: var(--spacing-sm);
  text-align: center;
  border: 1px solid var(--color-gris-claro);
}

.grades-table th {
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
}

.grades-table td {
  background: var(--color-blanco);
}

.grades-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.summary-card,
.attendance-card,
.payment-card {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.summary-card h4,
.attendance-card h4,
.payment-card h4 {
  color: var(--color-texto-claro);
  margin-bottom: var(--spacing-sm);
}

.average-grade,
.group-rank,
.attendance-number,
.payment-amount {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-verde);
  display: block;
}

.badge-success,
.payment-status {
  background: var(--color-exito);
  color: var(--color-blanco);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
}

/* Sección Horarios */
.schedule-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.schedule-grid {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  gap: 2px;
  background: var(--color-gris-claro);
}

.schedule-day-header {
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
  padding: var(--spacing-sm);
  text-align: center;
  font-weight: bold;
}

.schedule-hour {
  background: var(--color-gris-claro);
  color: var(--color-texto);
  padding: var(--spacing-sm);
  text-align: center;
  font-weight: 600;
}

.schedule-slot {
  background: var(--color-blanco);
  padding: var(--spacing-sm);
  text-align: center;
  min-height: 60px;
}

/* Sección Asistencia */
.attendance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.attendance-number.warning {
  color: var(--color-alerta);
}

/* Sección Pagos */
.payment-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.payment-date {
  color: var(--color-gris-oscuro);
  font-size: 0.9rem;
}

.payment-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* Sección Documentos */
.documents-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.documents-list table {
  width: 100%;
  border-collapse: collapse;
}

.documents-list th,
.documents-list td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-gris-claro);
}

.documents-list th {
  background: var(--color-gris-claro);
  color: var(--color-azul-oscuro);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.9rem;
}

/* Sección Mensajes */
.messages-list {
  display: grid;
  gap: var(--spacing-md);
}

.message-item {
  background: var(--color-fondo);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  border-left: 4px solid var(--color-gris-claro);
}

.message-item.unread {
  border-left-color: var(--color-azul-claro);
  background: rgba(24, 163, 233, 0.05);
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.message-sender {
  font-weight: 600;
  color: var(--color-azul-oscuro);
}

.message-date {
  color: var(--color-gris-oscuro);
  font-size: 0.9rem;
}

.message-subject {
  color: var(--color-texto);
  margin-bottom: var(--spacing-xs);
}

.message-preview {
  color: var(--color-texto-claro);
  font-size: 0.9rem;
}

/* Sección Perfil */
.profile-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-lg);
}

.profile-photo {
  text-align: center;
}

.profile-photo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: var(--spacing-md);
}

@media (max-width: 767px) {
  .portal-dashboard {
    grid-template-columns: 1fr;
  }
  
  .profile-container {
    grid-template-columns: 1fr;
  }
  
  .schedule-controls {
    flex-direction: column;
  }
  
  .schedule-grid {
    grid-template-columns: 1fr;
  }
  
  .schedule-hour {
    display: none;
  }
}

/* ==========================================
   ESTILOS RESPONSIVE GLOBALES PARA PÁGINAS
   ========================================== */
@media (max-width: 1023px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 767px) {
  .page-banner {
    padding: var(--spacing-lg) 0 var(--spacing-md);
  }
  
  .page-banner h1 {
    font-size: 1.8rem;
  }
  
  .breadcrumb {
    font-size: 0.9rem;
  }
}

/* ==========================================
   PÁGINA: DOCUMENTOS
   ========================================== */
.documents-section {
  padding: var(--spacing-xl) 0;
}

.documents-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
}

.documents-categories {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.doc-category-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-gris-claro);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition-fast);
}

.doc-category-btn.active {
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-lg);
}

.document-card {
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.document-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.doc-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-md);
  background: linear-gradient(135deg, var(--color-verde), var(--color-azul-claro));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-blanco);
}

.document-card h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.document-card p {
  color: var(--color-texto-claro);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.doc-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-gris-oscuro);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--color-fondo);
  border-radius: var(--border-radius-sm);
}

.document-request {
  background: var(--color-fondo);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  margin-top: var(--spacing-xl);
}

.document-request h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.document-request p {
  margin-bottom: var(--spacing-md);
}

/* ==========================================
   PÁGINA: NOTICIAS
   ========================================== */
.news-section {
  padding: var(--spacing-xl) 0;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.news-header h2 {
  color: var(--color-azul-oscuro);
}

.news-filters {
  display: flex;
  gap: var(--spacing-sm);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--spacing-lg);
}

.news-card {
  background: var(--color-blanco);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.news-card img {
  width: 100%;
  height: auto;
  /* Obs. 5.b (tanda 2-B): marco único de tarjeta de noticia (3/2 + contain). */
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--color-gris-claro);
}

.news-card-content {
  padding: var(--spacing-lg);
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.news-category {
  background: var(--color-verde);
  color: var(--color-blanco);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
}

.news-date {
  color: var(--color-gris-oscuro);
  font-size: 0.9rem;
}

.news-card h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.news-card p {
  color: var(--color-texto-claro);
  margin-bottom: var(--spacing-md);
}

.load-more-container {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* Featured Events */
.featured-events {
  padding: var(--spacing-xl) 0;
  background: var(--color-fondo);
}

.featured-events h2 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.events-carousel {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.events-container {
  overflow: hidden;
}

.event-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--spacing-lg);
  align-items: center;
  background: var(--color-blanco);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  margin: 0 var(--spacing-xl);
}

.event-date-card {
  background: linear-gradient(135deg, var(--color-azul-oscuro), var(--color-verde));
  color: var(--color-blanco);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  text-align: center;
}

.event-date-card .day {
  display: block;
  font-size: 2rem;
  font-weight: bold;
}

.event-date-card .month {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
}

.event-date-card .year {
  display: block;
  font-size: 0.8rem;
}

.event-details h3 {
  color: var(--color-azul-oscuro);
  margin-bottom: var(--spacing-sm);
}

.event-details p {
  color: var(--color-texto-claro);
  margin-bottom: var(--spacing-sm);
}

.event-info {
  display: flex;
  gap: var(--spacing-md);
  font-size: 0.9rem;
  color: var(--color-gris-oscuro);
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-azul-oscuro);
  color: var(--color-blanco);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-fast);
}

.carousel-nav:hover {
  background: var(--color-verde);
}

.carousel-nav.prev {
  left: 0;
}

.carousel-nav.next {
  right: 0;
}

/* Newsletter */
.newsletter-subscribe {
  padding: var(--spacing-xl) 0;
  background: linear-gradient(135deg, var(--color-azul-oscuro), var(--color-verde));
  color: var(--color-blanco);
}

.subscribe-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.subscribe-content h2 {
  margin-bottom: var(--spacing-sm);
}

.subscribe-content p {
  margin-bottom: var(--spacing-lg);
}

.subscribe-form {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.subscribe-form input {
  flex: 1;
  padding: var(--spacing-sm);
  border: none;
  border-radius: var(--border-radius-sm);
}

/* Responsive */
@media (max-width: 767px) {
  .news-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .news-filters {
    width: 100%;
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .event-item {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .subscribe-form {
    flex-direction: column;
  }
}

/* ===========================================================================
   Obs. 5.b (tanda 2-B) — GALERÍA: fotos completas, sin recorte
   ---------------------------------------------------------------------------
   pages/galeria.php define `.album-cover img` y `.foto-item img` con
   `object-fit: cover` en un bloque <style> de su propio <head>, que el
   navegador lee DESPUÉS de esta hoja. Como una hoja de estilos no se puede
   reordenar desde aquí, se gana por ESPECIFICIDAD (no con !important):
     .galeria-grid .album-card .album-cover img  (0,3,1)  >  .album-cover img (0,1,1)
     .fotos-grid .foto-item img                  (0,2,1)  >  .foto-item img    (0,1,1)
   Regla de oro del marco: fondo neutro (--color-gris-claro) + `contain` = la
   foto se ve ENTERA; la caja mantiene proporción fija para que la cuadrícula
   no se descuadre.
   =========================================================================== */

.galeria-grid .album-card .album-cover {
  /* Antes: height: 220px fijos (recorte asegurado en fotos verticales). */
  height: auto;
  aspect-ratio: 3 / 2;
  background: var(--color-gris-claro);
}

.galeria-grid .album-card .album-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-gris-claro);
}

.fotos-grid .foto-item {
  /* Se conserva la cuadrícula cuadrada (1/1) del diseño original; con
     `contain` la foto se ve completa dentro del cuadro. */
  background: var(--color-gris-claro);
}

.fotos-grid .foto-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-gris-claro);
}

/* En pantallas muy estrechas la portada del álbum pasa a 4/3: la caja gana
   altura sin volverse gigante y la foto gana ancho útil. */
@media (max-width: 480px) {
  .galeria-grid .album-card .album-cover {
    aspect-ratio: 4 / 3;
  }
}