/* ----------- 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.
   "[data-recorrido]" son las piezas de muestra del recorrido de bienvenida del
   invitado (vistas/modulos/cabezote.php): no se pulsan, pero tienen que medir
   lo mismo que las de verdad. */
.navbar .racha-flama,
.navbar .campanita,
.navbar #modoOscuroToggle,
.navbar #btnMenuLateral,
.navbar [data-bs-target="#modalTienda"],
.navbar [data-recorrido],
.navbar [data-bs-toggle="dropdown"] {
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
}

/* ----------- Relojes de seguridad del panel de administración -----------
   "Aviso de cierre" (inactividad) y "Código" (ventana del código para
   modificar el sistema): vistas/modulos/cabezote.php. Cifras de ancho fijo
   (tabular-nums) para que el reloj no "baile" al cambiar cada segundo; en
   pantalla chica solo van el icono y la cifra. ".alerta" = queda poco tiempo;
   ".inactivo" = no hay ventana de código abierta. */
.temporizador-admin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
}

.temporizador-admin .temporizador-valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.temporizador-admin.alerta {
  background: #fbbf24;
  color: #1f1f1f;
}

.temporizador-admin.inactivo {
  opacity: 0.75;
}

.temporizador-admin.inactivo .temporizador-valor {
  font-weight: 600;
}