/*
=========================================================
PROYECTO: AMPA José Galera
Fichero: Hoja de estilos personalizados (static/css/styles.css)
=========================================================

Aplicación web desarrollada para la gestión del
AMPA del C.E.I.P. José Galera.

Autor:
    Carlos Francisco Marcos Delgado

Licencia:
    MIT License
=========================================================
*/

/*
=========================================================
1. VARIABLES CSS GLOBALES (PALETA DE COLORES)
- Permite reutilizar colores corporativos en toda la web.
- Facilita el cambio centralizado del tema visual.
=========================================================
*/
/* 
   :root permite definir variables CSS globales accesibles en todo el proyecto.
   Los valores HEX están extraídos directamente de la identidad visual del logo.
*/
:root {
  /* Color de la figura humana izquierda del logo */
  --ampa-yellow: #f3b228;
  
  /* Color de la figura humana superior-izquierda del logo */
  --ampa-orange: #ee6016;
  
  /* Color de la figura humana superior-derecha del logo */
  --ampa-red: #a31d33;
  
  /* Color de la figura humana derecha del logo */
  --ampa-magenta: #e52382;
  
  /* Color gris pardo del lazo central y la tipografía "AMPA" */
  --ampa-slate: #53626a;
  
  /* Tono neutro claro para fondos secundarios de tarjetas y secciones */
  --ampa-light: #f8f9fa;
}

/* 
=========================================================
2. ESTILOS BASE Y REGLAS GENERALES DEL DOCUMENTO
---------------------------------------------------------
- Normaliza elementos HTML por defecto para alinearlos con la marca.
- Sustituye los enlaces azules predeterminados de los navegadores.
=========================================================
*/
body {
  /* Fondo global suave que previene la fatiga visual frente al blanco puro (#FFF) */
  background-color: var(--ampa-light);

  /* Color de texto base en gris pizarra corporativo para mejor legibilidad */
  color: var(--ampa-slate);

  /* Stack de fuentes nativas del sistema para óptimo rendimiento sin cargas externas */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Enlaces HTML genéricos del sitio web */
a {
  /* Se sustituye el azul genérico por el magenta distintivo del logo */
  color: var(--ampa-magenta);

  /* Se retira el subrayado por defecto para una estética limpia y moderna */
  text-decoration: none;

  /* Transición fluida en la propiedad 'color' para la interacción del usuario */
  transition: color 0.2s ease-in-out;
}

/* Estado hover (al pasar el ratón) en enlaces generales */
a:hover {
  /* Cambia al tono naranja corporativo para indicar interactividad clara */
  color: var(--ampa-orange);
}

/* 
=========================================================
3. BARRA DE NAVEGACIÓN PRINCIPAL (.navbar-custom)
---------------------------------------------------------
- Encabezado blanco con marco inferior en gradiente multicolor de 4 tonos.
- Estilo de botones para los ítems del menú (Activo: Amarillo / Hover: Rojo).
=========================================================
*/
.navbar-custom {
  /* Fondo blanco limpio para contrastar adecuadamente con el logotipo */
  background-color: #ffffff;

  /* Borde inferior reservado de 4px transparente para inyectar el degradado */
  border-bottom: 4px solid transparent;

  /* Gradiente lineal horizontal de 90° con los 4 colores de las figuras del logo */
  border-image: linear-gradient(
    90deg, 
    var(--ampa-yellow), 
    var(--ampa-orange), 
    var(--ampa-red), 
    var(--ampa-magenta)
  ) 1;
}

/* Ajustes de dimensionamiento para el logo en la barra de menú */
.logo-navbar {
  /* Altura fija para no descuadrar la alineación vertical del navbar */
  height: 45px;

  /* Mantiene la relación de aspecto original sin distorsionar la imagen */
  width: auto;

  /* Garantiza que la imagen escale correctamente sin deformarse */
  object-fit: contain;

  /* Transición fluida para la animación al pasar el cursor sobre la marca */
  transition: transform 0.2s ease-in-out;
}

/* Microinteracción háptica/visual sobre el logotipo */
.navbar-brand:hover .logo-navbar {
  /* Ligero aumento de tamaño (+5%) al hacer hover sobre la marca */
  transform: scale(1.05);
}

/* Estilos de botones para los ítems del menú (.nav-link) */
.navbar-custom .nav-link {
  /* Texto base en gris pizarra institucional */
  color: var(--ampa-slate);

  /* Peso de fuente seminegrita (600) para asegurar rápida lectura */
  font-weight: 600;

  /* Padding adaptado para dar apariencia de botón físico */
  padding: 0.5rem 1rem !important;

  /* Espaciado horizontal entre los botones del menú */
  margin: 0 0.25rem;

  /* Bordes redondeados de botón */
  border-radius: 6px;

  /* Transición fluida para los cambios de fondo y color de texto */
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Estado de interacción: Hover sobre cualquier ítem (Rojo corporativo) */
.navbar-custom .nav-link:hover {
  /* Fondo rojo corporativo al pasar el cursor */
  background-color: var(--ampa-red) !important;

  /* Texto blanco para asegurar legibilidad sobre el rojo */
  color: #ffffff !important;
}

/* Estado de la página activa (.active) -> Botón Amarillo corporativo */
.navbar-custom .nav-link.active {
  /* Fondo amarillo corporativo para la sección activa */
  background-color: var(--ampa-yellow) !important;

  /* Texto gris slate corporativo para garantizar contraste accesible */
  color: var(--ampa-light) !important;
}

/* Estado hover sobre la pestaña que ya está activa */
.navbar-custom .nav-link.active:hover {
  /* Transiciona a fondo rojo al hacer hover aun estando activa */
  background-color: var(--ampa-red) !important;
  color: #ffffff !important;
}

/* 
=========================================================
4. SOBREESCRITURA DE COMPONENTES BOOTSTRAP (BOTONES)
---------------------------------------------------------
- Uso de '!important' para forzar la anulación de los estilos nativos de Bootstrap.
- Reemplazo completo de la gama de azules por la identidad propia del AMPA.
=========================================================
*/

/* --- Botón Primario (.btn-primary) -> Magenta Corporativo --- */
.btn-primary {
  /* Sustituye el azul (#0d6efd) de Bootstrap por el magenta principal */
  background-color: var(--ampa-yellow) !important;
  border-color: var(--ampa-yellow) !important;
  color: #ffffff !important;
}

/* Estados de foco y hover para el botón primario */
.btn-primary:hover, 
.btn-primary:focus {
  /* Transiciona hacia el rojo corporativo para dar sensación de pulsación */
  background-color: var(--ampa-red) !important;
  border-color: var(--ampa-red) !important;
}

/* --- Botón Contorneado Primario (.btn-outline-primary) --- */
.btn-outline-primary {
  color: var(--ampa-red) !important;
  border-color: var(--ampa-red) !important;
}

/* Estado hover de botón contorneado */
.btn-outline-primary:hover {
  background-color: var(--ampa-yellow) !important;
  border-color: var(--ampa-yellow) !important;
  color: #ffffff !important;
}

/* --- Botón Resaltado / Advertencia (.btn-warning) -> Amarillo Corporativo --- */
.btn-warning {
  background-color: var(--ampa-yellow) !important;
  border-color: var(--ampa-yellow) !important;
  /* Texto en slate oscuro para garantizar máxima accesibilidad (contraste WCAG) */
  color: var(--ampa-light) !important;
}

/* Estado hover del botón de advertencia */
.btn-warning:hover {
  /* Transiciona al naranja corporativo */
  background-color: var(--ampa-red) !important;
  border-color: var(--ampa-red) !important;
  color: #ffffff !important;
}

/* --- Botón Secundario (.btn-secondary) -> Gris Pardo Slate --- */
.btn-secondary {
  background-color: var(--ampa-slate) !important;
  border-color: var(--ampa-slate) !important;
}

/* 
=========================================================
5. PIE DE PÁGINA INSTITUCIONAL (.footer-custom)
---------------------------------------------------------
- Bloque inferior sólido en gris slate con marco superior multicolor.
- Enlaces con contraste adecuado e hipervínculos animados.
=========================================================
*/
.footer-custom {
  /* Fondo gris pizarra corporativo para dar peso visual al cierre de página */
  background-color: var(--ampa-slate);

  /* Texto neutro blanco */
  color: #ffffff;

  /* Borde superior reservado de 4px transparente para inyectar el degradado */
  border-top: 4px solid transparent;

  /* Mismo degradado horizontal multicolor utilizado en la barra de menú */
  border-image: linear-gradient(
    90deg, 
    var(--ampa-yellow), 
    var(--ampa-orange), 
    var(--ampa-red), 
    var(--ampa-magenta)
  ) 1;
}

/* Encabezados de sección del pie de página */
.footer-custom h5 {
  /* Destacados en amarillo corporativo para fácil identificación visual */
  color: var(--ampa-yellow);
  font-weight: 700;
}

/* Enlaces ubicados dentro del pie de página */
.footer-custom a {
  color: #ffffff;

  /* Ligera opacidad inicial para establecer jerarquía secundaria respecto a los títulos */
  opacity: 0.85;

  /* Transición fluida para el cambio de opacidad y color */
  transition: all 0.2s ease-in-out;
}

/* Estado hover de los enlaces del pie de página */
.footer-custom a:hover {
  /* Cambia al amarillo corporativo con 100% de opacidad al pasar el ratón */
  color: var(--ampa-yellow);
  opacity: 1;
}

/* 
=========================================================
6. CLASES DE UTILIDAD PERSONALIZADAS (HELPERS)
---------------------------------------------------------
- Clases auxiliares para aplicar colores de la paleta corporativa
  directamente sobre elementos HTML en las plantillas Jinja2.
=========================================================
*/

/* --- Utilidades de Color de Texto --- */
.text-ampa-yellow  { color: var(--ampa-yellow) !important; }  /* Texto Amarillo */
.text-ampa-orange  { color: var(--ampa-orange) !important; }  /* Texto Naranja */
.text-ampa-red     { color: var(--ampa-red) !important; }     /* Texto Rojo */
.text-ampa-magenta { color: var(--ampa-magenta) !important; } /* Texto Magenta */
.text-ampa-slate   { color: var(--ampa-slate) !important; }   /* Texto Gris Slate */

/* --- Utilidades de Color de Fondo --- */
.bg-ampa-yellow  { background-color: var(--ampa-yellow) !important; }  /* Fondo Amarillo */
.bg-ampa-orange  { background-color: var(--ampa-orange) !important; }  /* Fondo Naranja */
.bg-ampa-red     { background-color: var(--ampa-red) !important; }     /* Fondo Rojo */
.bg-ampa-magenta { background-color: var(--ampa-magenta) !important; } /* Fondo Magenta */
.bg-ampa-slate   { background-color: var(--ampa-slate) !important; }   /* Fondo Gris Slate */

/* 
=========================================================
7. TARJETAS CORPORATIVAS ESTILO PUZLE (.card-ampa)
---------------------------------------------------------
- Aplica bordes superiores de color y elevación dinámica en hover.
- Permite alternar entre los 4 colores del logo para dar vida al sitio.
=========================================================
*/
.card-ampa {
  border: none;
  border-radius: 12px;
  background-color: var(--ampa-yellow);
  box-shadow: 0 4px 12px rgba(83, 98, 106, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;

  /* Borde superior decorativo por defecto (Magenta) */
  border-top: 5px solid var(--ampa-magenta);
}

/* Elevación al pasar el cursor */
.card-ampa:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(83, 98, 106, 0.16);
}

/* Variantes de color en borde superior para alternar en bucles/secciones */
.card-ampa.border-yellow  { border-top-color: var(--ampa-yellow); }
.card-ampa.border-orange  { border-top-color: var(--ampa-orange); }
.card-ampa.border-red     { border-top-color: var(--ampa-red); }
.card-ampa.border-magenta { border-top-color: var(--ampa-magenta); }

/* 
=========================================================
8. BADGES Y ETIQUETAS DE CATEGORÍA
---------------------------------------------------------
- Etiquetado colorido para diferenciar Noticias, Eventos, Avisos y Documentos.
=========================================================
*/
.badge-ampa-yellow  { background-color: var(--ampa-yellow); color: var(--ampa-slate); font-weight: 600; }
.badge-ampa-orange  { background-color: var(--ampa-orange); color: #ffffff; font-weight: 600; }
.badge-ampa-red     { background-color: var(--ampa-red); color: #ffffff; font-weight: 600; }
.badge-ampa-magenta { background-color: var(--ampa-magenta); color: #ffffff; font-weight: 600; }

/* 
=========================================================
9. SECCIONES DESTACADAS Y HERO BANNER
---------------------------------------------------------
- Diseños de fondo suave usando degradados ligeros de la paleta.
=========================================================
*/
.hero-ampa {
  background: linear-gradient(135deg, #ffffff 0%, #fdf8ed 100%);
  border-bottom: 1px solid rgba(243, 178, 40, 0.2);
  padding: 3.5rem 0;
}

.hero-title {
  color: var(--ampa-slate);
  font-weight: 800;
}

.hero-title span {
  color: var(--ampa-magenta);
}

/* 
=========================================================
10. BOTÓN FLOTANTE "VOLVER ARRIBA" (#btnVolverArriba)
---------------------------------------------------------
- Posicionamiento sobre capas fijas y animaciones de transición.
=========================================================
*/

/* Scroll suave nativo para todo el documento */
html {
  scroll-behavior: smooth;
}

/* Estilos visuales del botón de desplazamiento */
#btnVolverArriba {
  width: 50px;
  height: 50px;
  z-index: 1030; /* Garantiza quedar por encima de tarjetas y modales */
  background-color: var(--ampa-yellow) !important;
  border: 2px solid #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.2s ease !important;
}

/* Efecto hover sobre el botón flotante */
#btnVolverArriba:hover {
  background-color: var(--ampa-red) !important;
  transform: translateY(-3px) scale(1.08);
}

/* =========================================================
   Botón corporativo de Banners / Carousel
   ========================================================= */
.btn-ampa-banner {
    background-color: var(--ampa-red) !important;
    color: #ffffff !important;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Estado Hover (al pasar el ratón por encima) */
.btn-ampa-banner:hover,
.btn-ampa-banner:focus {
    background-color: var(--ampa-orange) !important;
    color: #ffffff !important;
}

/* =========================================================
   Estilo de Tarjeta Destacada para Frase / Manifiesto
   ========================================================= */
.quote-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ampa-orange, #ff8c00), transparent);
    max-width: 150px;
}

.tracking-wider {
    letter-spacing: 2px;
}

/* =========================================================
   Frase de nuestra filosofia
   ========================================================= */

/* Estilo para la línea inferior igual a la del título */
.filosofia-divider-bottom {
  width: 90%; /* Ancho de la línea (ajústalo según prefieras) */
  height: 2px;  /* Grosor fino */
  margin: 1.8rem auto 0 auto; /* Centrado y con margen superior */
  background: linear-gradient(to right, transparent, #e67e22, transparent); /* Mismo degradado anaranjado/cálido */
  border-radius: 2px;
}