/**
 * ============================================================
 *  TEMA-AXIS.CSS — AXIS v2 “TECNOLOGÍA MODERNA”
 * ============================================================
 *  → Paleta azul profunda, turquesa brillante y coral acentuado.
 *  → Optimizado para dashboards, paneles administrativos y sistemas educativos.
 *  → Incluye variables globales, alturas unificadas y sistema de fondos temáticos.
 */

/* ============================================================
   1. VARIABLES DE TEMA — PALETA Y CONFIGURACIONES GLOBALES
   ============================================================ */
:root {
  /* 🎨 COLORES PRINCIPALES */
  --color-primario: #1e2a78; /* Azul profundo (navbar/footer, títulos) */
  --color-secundario: #2ca59d; /* Turquesa brillante (botones, detalles) */
  --color-acento: #c23c24; /* Coral intenso (hover o alertas) */

  /* 🌈 COLORES DE ESTADO */
  --color-exito: #2ecc71; /* Verde éxito */
  --color-error: #e74c3c; /* Rojo error */
  --color-advertencia: #f1c40f; /* Amarillo advertencia */
  --color-info: #3498db; /* Azul informativo */

  /* 🖋️ COLORES DE TEXTO Y FONDO */
  --color-fondo: #f8fbff; /* Fondo claro por defecto (áreas públicas) */
  --color-texto: #1b1b1b; /* Gris muy oscuro (texto principal) */
  --color-blanco: #ffffff; /* Blanco puro */
  --color-borde: rgba(0, 0, 0, 0.1); /* Borde suave universal */

  /* 🧱 BORDES Y SOMBRAS */
  --radio-borde: 0.6rem; /* Curvatura global */
  --sombra-suave: 0 2px 10px rgba(30, 42, 120, 0.15); /* Sombra azulada */

  /* ⚙️ TRANSICIÓN GLOBAL */
  --transicion: all 0.25s ease-in-out;

  /* 📏 ALTURAS Y MEDIDAS UNIFICADAS */
  --altura-btn: 2.75rem; /* Botones (altura media estándar) */
  --altura-input: 2.75rem; /* Inputs / Selects (misma altura) */

  /* 🧩 COLORES DE FONDOS TEMÁTICOS */
  --fondo-claro: #f8fafc; /* Gris azulado claro */
  --fondo-oscuro: #0d1b1e; /* Azul carbón oscuro */
  --fondo-gradiente: linear-gradient(
    180deg,
    #0d1b1e 0%,
    #064e3b 100%
  ); /* Gradiente verde-azul oscuro */

  /* 💡 COLORES DE CAMPOS DE ENTRADA */
  --color-bg-input: #f0f4ff; /* Fondo de input claro */
  --color-texto-input: #111827; /* Texto de input oscuro */

  /* 🧠 TIPOGRAFÍA */
  --fuente-base: "Inter", "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: "Poppins", "Inter", sans-serif;

  /* Color acento general del sistema AXIS v2 */
  --axis-accent: #ffd700; /* Dorado brillante */
  --axis-accent-alt: #00ff99; /* Verde neón secundario */
}

/* ============================================================
   2. CONFIGURACIÓN GENERAL DEL DOCUMENTO
   ============================================================ */
html,
body {
  height: 100%;
  font-family: var(--fuente-base);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  transition: var(--transicion);
}

/* Enlaces y estados hover */
a {
  color: var(--color-secundario);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--color-acento);
}

/* Encabezados principales */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--color-primario);
}

/* ============================================================
   3. SISTEMA DE FONDOS TEMÁTICOS
   ============================================================ */
/* 💡 Estos se aplican automáticamente desde section_template.php */

.bg-axis-claro {
  background-color: var(--fondo-claro) !important;
  color: var(--color-texto);
}

.bg-axis-oscuro {
  background-color: var(--fondo-oscuro) !important;
  color: var(--color-blanco);
}

.bg-axis-gradiente {
  background: var(--fondo-gradiente) !important;
  color: var(--color-blanco);
}

/* ============================================================
   4. NAVBAR Y FOOTER (independientes del fondo global)
   ============================================================ */
.navbar {
  background-color: var(--color-primario);
  box-shadow: var(--sombra-suave);
  min-height: 3.5rem;
  display: flex;
  align-items: center;
}

.navbar-brand {
  color: var(--color-blanco) !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  transition: var(--transicion);
}
.navbar .nav-link:hover {
  color: var(--color-secundario) !important;
}

/* Footer institucional */
footer {
  background-color: var(--color-primario);
  color: var(--color-blanco);
  font-size: 0.9rem;
  box-shadow: var(--sombra-suave);
}

/* ============================================================
   5. BOTONES Y VARIANTES
   ============================================================ */
.btn,
.btn-axis,
.btn-outline-axis {
  height: var(--altura-btn);
  padding: 0 1.25rem;
  border-radius: var(--radio-borde);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transicion);
}

/* Botón principal */
.btn-axis {
  background-color: var(--color-secundario);
  color: var(--color-blanco);
  border: none;
}
.btn-axis:hover {
  background-color: var(--color-acento);
  color: var(--color-blanco);
}

/* Botón contorno */
.btn-outline-axis {
  border: 1px solid var(--axis-accent);
  color: var(--axis-accent);
}

.btn-outline-axis:hover {
  background: var(--axis-accent);
  color: #000;
}

/* ============================================================
   6. CAMPOS DE FORMULARIO (inputs y selects)
   ============================================================ */
.form-control,
.form-select {
  height: var(--altura-input);
  background-color: var(--color-bg-input);
  color: var(--color-texto-input);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  transition: var(--transicion);
}
.form-control::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 0.2rem rgba(44, 165, 157, 0.25);
  outline: none;
}

/* ============================================================
   7. TARJETAS (CARDS)
   ============================================================ */
.axis-card {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: 1.25rem;
  transition: var(--transicion);
}
.axis-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Cards en modo oscuro (sobrescritas por personal.css cuando aplique) */
.axis-card.dark {
  background-color: #111827;
  color: #e5e7eb;
}

/* ============================================================
   8. SECCIONES ESTRUCTURALES — LAYOUTS Y HERO
   ============================================================ */
.axis-section {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Cubre toda la altura de la pantalla */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
  padding-top: 6rem; /* Compensa la altura del navbar */
  padding-bottom: 6rem;
}

.axis-section > .container {
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ============================================================
   9. ALERTIFY.JS — ESTILOS INTEGRADOS
   ============================================================ */
.alertify .ajs-header {
  background-color: var(--color-primario);
  color: var(--color-blanco);
  font-family: var(--fuente-titulos);
}
.alertify .ajs-ok {
  background-color: var(--color-secundario);
  color: var(--color-blanco);
}
.alertify .ajs-cancel {
  background-color: var(--color-acento);
  color: var(--color-blanco);
}

/* ============================================================
   10. RESPONSIVIDAD
   ============================================================ */
@media (max-width: 768px) {
  .axis-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .title-band {
    font-size: 1.1rem;
    padding: 10px 20px;
  }
  .axis-section h2 {
    font-size: 1.3rem;
  }
}

/* ============================================================
   FIN DE TEMA-AXIS.CSS
   ============================================================ */

.axis-welcome-title {
  color: #fff !important;
}

.axis-user-name {
  color: #ffd700 !important;
  font-weight: 700;
}

/* Apariencia de campos de solo lectura */
input[readonly] {
  pointer-events: none;
  opacity: 0.8;
  color: #ccc;
  cursor: not-allowed;
}

/* ==========================
   SELECTS DE FILTRO - AXIS
   ========================== */
#filtroVisibilidad,
#filtroCategoria,
#filtroTipo,
#busqueda {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

#filtroVisibilidad:focus,
#filtroCategoria:focus,
#filtroTipo:focus,
#busqueda:focus {
  outline: none;
  border-color: var(--axis-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--axis-accent) 50%, transparent);
}

#filtroVisibilidad:hover,
#filtroCategoria:hover,
#filtroTipo:hover,
#busqueda:hover {
  border-color: color-mix(in srgb, var(--axis-accent) 70%, transparent);
}

/* Placeholder visible sobre fondo oscuro */
#busqueda::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Ajuste general de altura y tipografía */
#filtroVisibilidad,
#filtroCategoria,
#filtroTipo,
#busqueda {
  min-height: 42px;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Para pantallas pequeñas: margen inferior suave */
@media (max-width: 768px) {
  #filtroVisibilidad,
  #filtroCategoria,
  #filtroTipo,
  #busqueda {
    margin-bottom: 0.5rem;
  }
}