html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.lectura-pagina {
  padding: 1.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lectura-pagina.tema-claro {
  color: #212529;
  background-color: #ffffff;
}

.lectura-pagina.tema-oscuro {
  color: #f1f3f5;
  background-color: #212529;
}

.tema-oscuro .lectura-contenido {
  color: #f1f3f5;
  background-color: #343a40;
  border-color: #495057;
}

.tema-oscuro .lectura-contenido .text-muted {
  color: #ced4da !important;
}

.tema-oscuro .lectura-pagina,
.tema-oscuro .form-label {
  color: #f1f3f5;
}

.tema-oscuro .form-select {
  color: #f1f3f5;
  background-color: #343a40;
  border-color: #6c757d;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   RF12 - Estilos de lectura
   Implementación de temas claro/oscuro mediante CSS Custom Properties.

   Técnica utilizada: CSS Custom Properties (variables CSS) definidas en :root.
   Al cambiar el atributo data-theme en el elemento <html> desde JavaScript,
   el navegador aplica automáticamente el conjunto de variables del tema
   correspondiente, sin necesidad de recargar la página ni llamadas al servidor.

   Temas disponibles:
     - (default) Modo claro: tonos sepia cálidos, pensados para lectura prolongada.
     - [data-theme="dark"] Modo oscuro: fondo azul noche, texto claro.

   La selección del tema se persiste en localStorage (ver site.js).
   ========================================================================== */

/* -- Modo claro (sepia cálido) — se aplica por defecto -- */
:root {
  --tema-bg:            #f4ecd8; /* Fondo general: beige cálido */
  --tema-text:          #3d2b1f; /* Texto principal: marrón oscuro */
  --tema-card-bg:       #fdf6e3; /* Fondo de las cards (capítulos) */
  --tema-card-border:   #c8a97a; /* Borde de las cards */
  --tema-nav-bg:        #e8d5b7; /* Fondo del navbar */
  --tema-muted:         #7a5c3e; /* Texto secundario / muted */
  --tema-link:          #8b4513; /* Color de enlaces */
  --tema-table-bg:      #fdf6e3; /* Fondo de filas de tabla */
  --tema-table-stripe:  #f4ecd8; /* Fondo de filas alternas (striped) */
  --tema-table-border:  #c8a97a; /* Bordes de la tabla */
  --tema-table-header:  #e8d5b7; /* Fondo del encabezado de tabla */
  --tema-input-bg:      #fdf6e3; /* Fondo de inputs y selects */
  --tema-input-border:  #c8a97a; /* Borde de inputs y selects */
}

/* -- Modo oscuro — se activa cuando <html data-theme="dark"> -- */
:root[data-theme="dark"] {
  --tema-bg:            #1a1a2e; /* Fondo general: azul noche */
  --tema-text:          #e0e0e0; /* Texto principal: gris claro */
  --tema-card-bg:       #16213e; /* Fondo de las cards */
  --tema-card-border:   #374151; /* Borde de las cards */
  --tema-nav-bg:        #0f1923; /* Fondo del navbar */
  --tema-muted:         #9ca3af; /* Texto secundario */
  --tema-link:          #60a5fa; /* Color de enlaces */
  --tema-table-bg:      #16213e; /* Fondo de filas de tabla */
  --tema-table-stripe:  #1e2d45; /* Fondo de filas alternas (striped) */
  --tema-table-border:  #374151; /* Bordes de la tabla */
  --tema-table-header:  #0f1923; /* Fondo del encabezado de tabla */
  --tema-input-bg:      #16213e; /* Fondo de inputs y selects */
  --tema-input-border:  #374151; /* Borde de inputs y selects */
}

/* Aplica las variables al body. La transición suaviza el cambio de tema. */
body {
  background-color: var(--tema-bg);
  color: var(--tema-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards: usan las variables del tema para fondo, borde y texto */
.card {
  background-color: var(--tema-card-bg) !important;
  border-color: var(--tema-card-border) !important;
  color: var(--tema-text) !important;
}

.card-title,
.card-text,
.card-body {
  color: var(--tema-text) !important;
}

/* Texto secundario usando la variable de muted del tema activo */
.text-muted {
  color: var(--tema-muted) !important;
}

/* Navbar: fondo y borde toman los colores del tema */
.navbar {
  background-color: var(--tema-nav-bg) !important;
  border-bottom-color: var(--tema-card-border) !important;
}

.navbar-brand,
.nav-link {
  color: var(--tema-text) !important;
}

/* Enlaces con color temático */
a {
  color: var(--tema-link);
}

/* ==========================================================================
   Tablas — overrides de Bootstrap
   Bootstrap define colores de fondo y texto directamente en sus clases
   (.table, thead, tbody tr), lo que pisa nuestras variables CSS.
   Estos overrides fuerzas las variables del tema activo en todos los
   elementos de tabla, independientemente del modo seleccionado.
   ========================================================================== */

.table {
  color: var(--tema-text) !important;
  border-color: var(--tema-table-border) !important;
  --bs-table-bg: var(--tema-table-bg);
  --bs-table-color: var(--tema-text);
  --bs-table-border-color: var(--tema-table-border);
  --bs-table-striped-bg: var(--tema-table-stripe);
  --bs-table-striped-color: var(--tema-text);
  --bs-table-hover-bg: var(--tema-table-stripe);
  --bs-table-hover-color: var(--tema-text);
}

/* Encabezado de la tabla (thead) */
.table thead th,
.table thead td {
  background-color: var(--tema-table-header) !important;
  color: var(--tema-text) !important;
  border-color: var(--tema-table-border) !important;
}

/* Filas del cuerpo de la tabla */
.table tbody tr {
  background-color: var(--tema-table-bg) !important;
  color: var(--tema-text) !important;
}

.table tbody td,
.table tbody th {
  color: var(--tema-text) !important;
  border-color: var(--tema-table-border) !important;
}

/* ==========================================================================
   Inputs, selects y botones de formulario — overrides de Bootstrap
   Bootstrap también hardcodea fondo blanco en form-control y form-select.
   ========================================================================== */

.form-control,
.form-select {
  background-color: var(--tema-input-bg) !important;
  color: var(--tema-text) !important;
  border-color: var(--tema-input-border) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--tema-input-bg) !important;
  color: var(--tema-text) !important;
}

/* Botones outline adaptan su borde y texto al tema */
.btn-outline-secondary {
  color: var(--tema-text) !important;
  border-color: var(--tema-card-border) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--tema-card-border) !important;
  color: var(--tema-bg) !important;
}

/* Etiqueta de texto junto al toggle ("Modo claro" / "Modo oscuro") */
.toggle-tema-label {
  font-size: 0.85rem;
  color: var(--tema-muted);
  user-select: none;  /* Evita que el texto se seleccione al hacer clic */
  white-space: nowrap;
}

/* Contenedor del texto del capítulo en la vista de lectura.
   Limita el ancho para mejorar la legibilidad (líneas más cortas = menos fatiga visual). */
.articulo-lectura {
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}