/* ----------- Cabezote / Encabezado general ----------- */
body {
  font-family: 'Segoe UI', Roboto, sans-serif;
  background-color: #f3f4f6;
  color: #1f1f1f;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h5, h4 {
  font-weight: 600;
}

.encabezado-seccion {
  font-weight: bold;
  color: #0a58ca;
}

body.modo-transicion {
  transition: background-color 0.5s ease, color 0.5s ease;
}

body,
.card,
.modal,
select,
input,
button,
footer {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ----------- Área de toque de los iconos del cabezote -----------
   La barra es delgada a propósito y sus iconos son pequeños, pero su zona
   pulsable se amplía al mínimo de 32px (WCAG 2.5.8 AA pide 24px). Se hace con
   min-width/height y centrando el contenido: el icono NO crece y, como el
   cabezote ya mide más de 40px de alto, la barra tampoco. */
.navbar .racha-flama,
.navbar .campanita,
.navbar #modoOscuroToggle,
.navbar #btnMenuLateral,
.navbar [data-bs-target="#modalTienda"],
.navbar [data-bs-toggle="dropdown"] {
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
}