/* Tipografía WCAG y variables */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

/* ==========================================
   Modo Oscuro (Dark Mode)
   ========================================== */
body.modo-oscuro {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

/* Navbar superior en modo oscuro */
body.modo-oscuro .navbar,
body.modo-oscuro nav {
  background-color: #1a1a1a !important;
  border-color: #2d2d2d !important;
}

/* Enlaces del Navbar: forzar color claro */
body.modo-oscuro .navbar .nav-link,
body.modo-oscuro .navbar .text-dark,
body.modo-oscuro .navbar-brand {
  color: #f1f5f9 !important;
}

/* Menús desplegables del Navbar */
body.modo-oscuro .dropdown-menu {
  background-color: #242424 !important;
  border: 1px solid #3d3d3d !important;
}

body.modo-oscuro .dropdown-item {
  color: #e2e8f0 !important;
  background-color: transparent !important;
}

body.modo-oscuro .dropdown-item:hover,
body.modo-oscuro .dropdown-item:focus {
  background-color: #334155 !important;
  color: #38bdf8 !important;
}

/* Banner de bienvenida y secciones secundarias */
body.modo-oscuro .bienvenida,
body.modo-oscuro .seccion-formulario {
  background-color: #181818 !important;
  border-color: #2c2c2c !important;
}

body.modo-oscuro .lead,
body.modo-oscuro .text-secondary {
  color: #94a3b8 !important;
}

/* Tarjetas y menú lateral */
body.modo-oscuro .card,
body.modo-oscuro .list-group-item {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
  border-color: #333333 !important;
}

body.modo-oscuro .list-group-item-action:hover {
  background-color: #2a2a2a !important;
  color: #4ade80 !important;
}

/* Inputs y selects del formulario */
body.modo-oscuro .form-control,
body.modo-oscuro .form-select {
  background-color: #262626 !important;
  color: #ffffff !important;
  border-color: #404040 !important;
}

body.modo-oscuro .form-control::placeholder {
  color: #737373 !important;
}

/* Modales */
body.modo-oscuro .modal-content {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
  border-color: #333333 !important;
}

/* ==========================================
   Alto Contraste
   ========================================== */
body.alto-contraste {
  background: #000000 !important;
  color: #ffff00 !important;
}

body.alto-contraste * {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

body.alto-contraste a,
body.alto-contraste button {
  color: #00ffff !important;
  text-decoration: underline !important;
}

/* ==========================================
   Escalas de Tamaño de Texto
   ========================================== */
body.fuente-sm {
  font-size: 85% !important;
}

body.fuente-lg {
  font-size: 115% !important;
}

body.fuente-xl {
  font-size: 130% !important;
}