/* ============================================================================
 * components.css — Componentes UI reutilizables
 * ----------------------------------------------------------------------------
 * Botones, FAB, toggles, sliders, inputs, toasts, modales, banners, listas,
 * tarjetas de tema, selector de capas, panel stats, etc.
 *
 * Botones convencionales (innegociable, usuario DAMA):
 *   - .boton--verde : respuestas positivas, guardado, aceptar
 *   - .boton--rojo  : borrado, respuestas negativas, cancelar
 *   - .boton--secundario : acciones neutras
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * BOTONES
 * ---------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  background-color: var(--color-acento);
  color: var(--color-acento-texto);
  transition: background-color var(--transicion-rapida),
              transform var(--transicion-rapida),
              box-shadow var(--transicion-rapida);
  min-height: 44px; /* Tamaño mínimo táctil recomendado */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.boton:hover { background-color: var(--color-acento-hover); }
.boton:active { transform: scale(0.97); }
.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variante positiva (verde) — guardado, aceptar, respuestas positivas */
.boton--verde {
  background-color: var(--boton-positivo-fondo);
  color: var(--boton-positivo-texto);
  border-color: var(--boton-positivo-fondo);
}
.boton--verde:hover { background-color: var(--boton-positivo-hover); }

/* Variante negativa (rojo) — borrado, cancelar, respuestas negativas */
.boton--rojo {
  background-color: var(--boton-negativo-fondo);
  color: var(--boton-negativo-texto);
  border-color: var(--boton-negativo-fondo);
}
.boton--rojo:hover { background-color: var(--boton-negativo-hover); }

/* Variante secundaria — neutra, usa colores del tema */
.boton--secundario {
  background-color: var(--color-panel);
  color: var(--color-texto);
  border-color: var(--color-borde);
}
.boton--secundario:hover {
  background-color: var(--color-hover-lista);
}

/* Tamaños */
.boton--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  min-height: 36px;
}
.boton--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  min-height: 52px;
}
.boton--bloque {
  display: flex;
  width: 100%;
}

/* Alineaciones */
.botones-horizontales {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------
 * BOTONES DE ICONO (sin texto, solo icono)
 * ---------------------------------------------------------------------------- */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-texto);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background-color var(--transicion-rapida);
  -webkit-tap-highlight-color: transparent;
}
.boton-icono:hover { background-color: var(--color-hover-lista); }
.boton-icono:active { background-color: var(--color-seleccion-lista); }
.boton-icono--sm { width: 36px; height: 36px; }

/* Badge (p.ej. inicial del perfil en botón de usuario) */
.boton-icono__badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 600;
  background-color: var(--color-acento);
  color: var(--color-acento-texto);
  border-radius: var(--radius-full);
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.2;
}

/* ----------------------------------------------------------------------------
 * FAB (Floating Action Button) — engranaje de configuración
 * ---------------------------------------------------------------------------- */
.boton-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-acento);
  color: var(--color-acento-texto);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  transition: transform var(--transicion-rapida),
              background-color var(--transicion-rapida);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.boton-fab:hover { background-color: var(--color-acento-hover); }
.boton-fab:active { transform: scale(0.92); }

/* ----------------------------------------------------------------------------
 * BOTONES CIRCULARES (en cabecera de modales)
 * ---------------------------------------------------------------------------- */
.boton-circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-fondo-3);
  color: var(--color-texto);
  border: 1px solid var(--color-borde-2);
  cursor: pointer;
  transition: background-color var(--transicion-rapida);
}
.boton-circular:hover { background-color: var(--color-hover-lista); }
.boton-circular:active { transform: scale(0.95); }

/* ----------------------------------------------------------------------------
 * BOTONES DEL MAPA
 * ---------------------------------------------------------------------------- */
.boton-mapa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--color-panel);
  color: var(--color-texto);
  border: 1px solid var(--color-borde-2);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transicion-rapida),
              transform var(--transicion-rapida);
  -webkit-tap-highlight-color: transparent;
}
.boton-mapa:hover { background-color: var(--color-hover-lista); }
.boton-mapa:active { transform: scale(0.95); }
.boton-mapa--activo {
  background-color: var(--color-acento);
  color: var(--color-acento-texto);
  border-color: var(--color-acento);
}

/* ----------------------------------------------------------------------------
 * ICONOS (envoltura .icono)
 * ---------------------------------------------------------------------------- */
.icono {
  display: inline-block;
  width: var(--tamano-icono, 24px);
  height: var(--tamano-icono, 24px);
  vertical-align: middle;
  flex-shrink: 0;
}
.icono svg {
  width: 100%;
  height: 100%;
  display: block;
}
.icono--lg { width: 36px; height: 36px; }
.icono--sm { width: 18px; height: 18px; }

/* ----------------------------------------------------------------------------
 * CAMPOS DE TEXTO / SELECT / SEARCH
 * ---------------------------------------------------------------------------- */
.campo-texto,
.campo-select {
  font-family: inherit;
  font-size: 16px; /* Innegociable: evitar zoom en iOS */
  line-height: 1.4;
  color: var(--color-texto-input);
  background-color: var(--color-fondo-input);
  border: 1px solid var(--color-borde-input);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  outline: none;
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}
.campo-texto:focus,
.campo-select:focus {
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px var(--color-acento-claro);
}
.campo-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  padding-right: calc(var(--space-3) + 24px);
}

/* ----------------------------------------------------------------------------
 * TOGGLES (switches)
 * ---------------------------------------------------------------------------- */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  color: var(--color-texto);
  min-height: 44px;
}
.toggle input[type="checkbox"] {
  appearance: none;
  width: 44px;
  height: 24px;
  background-color: var(--color-toggle-off);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color var(--transicion-rapida);
  flex-shrink: 0;
  margin: 0;
  border: none;
}
.toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: var(--radius-full);
  transition: transform var(--transicion-rapida);
  box-shadow: var(--shadow-sm);
}
.toggle input[type="checkbox"]:checked {
  background-color: var(--color-acento);
}
.toggle input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}
.toggle input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
}
.toggle input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
 * SLIDERS (range inputs)
 * ---------------------------------------------------------------------------- */
.slider {
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.slider::-webkit-slider-runnable-track {
  height: 6px;
  background-color: var(--color-toggle-off);
  border-radius: var(--radius-full);
}
.slider::-moz-range-track {
  height: 6px;
  background-color: var(--color-toggle-off);
  border-radius: var(--radius-full);
}
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-acento);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  margin-top: -9px;
  transition: transform var(--transicion-rapida);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-acento);
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.slider:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
}

.slider-linea {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.slider-linea output {
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
  color: var(--color-texto-2);
  font-size: var(--font-size-sm);
}
.slider-linea--sub {
  margin-top: var(--space-3);
  padding-left: var(--space-4);
}

/* ----------------------------------------------------------------------------
 * TOASTS (notificaciones efímeras)
 * ---------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  top: calc(var(--altura-barra-superior) + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(90vw, 480px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-panel);
  color: var(--color-texto);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--color-acento);
  pointer-events: auto;
  animation: toastEntra 240ms ease-out;
}
.toast--exito { border-left-color: var(--boton-positivo-fondo); }
.toast--error  { border-left-color: var(--boton-negativo-fondo); }
.toast--aviso  { border-left-color: #f59e0b; }
.toast--info   { border-left-color: var(--color-acento); }
.toast .icono { flex-shrink: 0; }
.toast__texto { flex: 1; font-size: var(--font-size-sm); }
.toast__cerrar {
  background: transparent;
  border: none;
  color: var(--color-texto-2);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.toast__cerrar:hover { background-color: var(--color-hover-lista); }

@keyframes toastEntra {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastSale {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}
.toast--saliendo { animation: toastSale 240ms ease-in forwards; }

/* ----------------------------------------------------------------------------
 * MODALES
 * ---------------------------------------------------------------------------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  background-color: var(--color-fondo-modal-fondo);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: modalFondoEntra 200ms ease-out;
}
@keyframes modalFondoEntra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal {
  background-color: var(--color-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(90vw, 600px);
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalEntra 240ms ease-out;
}
@keyframes modalEntra {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal--sm { width: min(90vw, 420px); }
.modal--lg { width: min(95vw, 800px); }
.modal--config {
  width: min(95vw, 720px);
  max-height: 92vh;
  max-height: 92dvh;
}
.modal__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-borde-2);
  gap: var(--space-3);
}
.modal__cabecera h2 {
  margin: 0;
  flex: 1;
  font-size: var(--font-size-xl);
}
.modal__cabecera-botones {
  display: flex;
  gap: var(--space-2);
}
.modal__cuerpo {
  padding: var(--space-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.modal__pie {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-borde-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--color-fondo-3);
}
.modal__pie-titulo {
  font-size: var(--font-size-sm);
  color: var(--color-texto-3);
  margin: 0;
  font-weight: 400;
}
/* Enlace "by DAMA" — mismo color y tipo que el resto, solo con subrayado */
.enlace-dama {
  color: var(--color-texto-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enlace-dama:hover {
  color: var(--color-texto-3);
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
 * BLOQUES DE CONFIGURACIÓN
 * ---------------------------------------------------------------------------- */
.bloque-config {
  border: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-borde-2);
}
.bloque-config:last-child { border-bottom: none; }
.bloque-config legend {
  font-weight: 600;
  font-size: var(--font-size-lg);
  padding: 0;
  margin-bottom: var(--space-2);
  color: var(--color-texto);
  display: block;
}
.bloque-config__nota {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  margin-top: var(--space-2);
  font-style: italic;
}
.bloque-config__valor-fijo {
  color: var(--color-texto-2);
  font-size: var(--font-size-sm);
  margin: 0;
}

.radios-horizontales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.radios-horizontales label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 1rem;
  min-height: 44px;
}
.grid-temas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-3);
}
.tema-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-borde-2);
  cursor: pointer;
  transition: border-color var(--transicion-rapida);
  text-align: center;
  font-size: var(--font-size-sm);
}
.tema-tarjeta:has(input:checked) {
  border-color: var(--color-acento);
  background-color: var(--color-acento-claro);
}
.tema-tarjeta input { position: absolute; opacity: 0; pointer-events: none; }
.tema-tarjeta__muestra {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-borde);
}
.tema-tarjeta__muestra--claro { background: linear-gradient(135deg, #ffffff 50%, #f1f5f9 50%); }
.tema-tarjeta__muestra--oscuro { background: linear-gradient(135deg, #0f172a 50%, #1e293b 50%); }
.tema-tarjeta__muestra--auto {
  background: linear-gradient(135deg, #ffffff 50%, #0f172a 50%);
}
.tema-tarjeta__muestra--bosque {
  background: linear-gradient(135deg, #2d5a3d 50%, #d1fae5 50%);
}
.tema-tarjeta__muestra--atardecer {
  background: linear-gradient(135deg, #c2410c 50%, #ffedd5 50%);
}
.tema-tarjeta__muestra--oceano {
  background: linear-gradient(135deg, #0e7490 50%, #cffafe 50%);
}

/* ----------------------------------------------------------------------------
 * LISTA DE PERFILES (en configuración)
 * ---------------------------------------------------------------------------- */
.lista-perfiles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.lista-perfiles__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-fondo-3);
  cursor: pointer;
  transition: background-color var(--transicion-rapida);
}
.lista-perfiles__item:hover {
  background-color: var(--color-hover-lista);
}
.lista-perfiles__item--activo {
  background-color: var(--color-seleccion-lista);
  border-left: 4px solid var(--color-acento);
}
.lista-perfiles__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-acento);
  color: var(--color-acento-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}
.lista-perfiles__nombre {
  flex: 1;
  font-size: var(--font-size-sm);
}

/* ----------------------------------------------------------------------------
 * COOKIES / RGPD — ahora es un MODAL centrado (ver .modal--cookies más abajo)
 * Los estilos del banner circular inferior han sido eliminados.
 * ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * BOTÓN INSTALAR PWA
 * ----------------------------------------------------------------------------
 * El botón de instalación se encuentra ahora dentro del panel de
 * configuración (fieldset "Aplicación"). Ya no hay contenedor flotante.
 * Estilos específicos del botón en config:
 * ---------------------------------------------------------------------------- */
#btn-instalar-config {
  margin-top: var(--space-2);
}

/* ----------------------------------------------------------------------------
 * INDICADORES DE SENSORES (GPS, red) — discretos, en la barra superior
 * ----------------------------------------------------------------------------
 * Solo visibles si hay problema (rojo). Si todo OK, están ocultos.
 * El usuario prefiere que no aparezcan sobre el mapa central mientras todo
 * va bien. Cuando hay error (GPS sin permiso, sin red), aparecen en rojo.
 * ---------------------------------------------------------------------------- */
.indicadores-sensores {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
}
.indicador-sensor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--boton-negativo-fondo);
  background-color: transparent;
  animation: pulsoIndicadorError 1.6s ease-in-out infinite;
}
.indicador-sensor .icono {
  width: 18px;
  height: 18px;
}
.indicador-sensor[hidden] { display: none !important; }
@keyframes pulsoIndicadorError {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* Variantes de estado (aplicadas por JS) */
.indicador-sensor--ok {
  color: var(--boton-positivo-fondo);
  animation: none;
}
.indicador-sensor--aviso {
  color: #f59e0b;
}

/* ----------------------------------------------------------------------------
 * PANEL STATS — estructura info1 (grande) / info2 (pequeño) / info3 (rótulo)
 *
 * Debajo del mapa (no flotante), centrado horizontalmente.
 * Al pulsar un stat, se intercambia info1 e info2 visualmente mediante la
 * clase .stat--invertido (gestionada por JS).
 * ---------------------------------------------------------------------------- */
.panel-stats {
  position: static;
  transform: none;
  z-index: var(--z-controles-mapa);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  background-color: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  width: min(95%, 720px);
  margin: 0 auto;
  align-self: center;
  justify-self: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-1);
  text-align: center;
  border-radius: var(--radius-sm);
  background-color: var(--color-fondo-3);
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transicion-rapida);
}
.stat:hover {
  background-color: var(--color-hover-lista);
}
.stat:active {
  transform: scale(0.97);
}
.stat:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 1px;
}
.stat__icono {
  width: 18px;
  height: 18px;
  color: var(--color-acento);
  margin-bottom: 2px;
}
/* info1: valor grande y negrita (arriba) */
.stat__info1 {
  display: flex;
  align-items: baseline;
  gap: 2px;
  order: 2;
}
.stat__info1 .stat__valor {
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--color-texto);
}
.stat__info1 .stat__unidad {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  font-weight: 500;
}
/* info2: valor pequeño (debajo de info1) */
.stat__info2 {
  display: flex;
  align-items: baseline;
  gap: 2px;
  order: 3;
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  font-variant-numeric: tabular-nums;
}
.stat__info2 .stat__unidad-pequena,
.stat__info2 .stat__unidad-stat {
  font-size: 10px;
  color: var(--color-texto-3);
}
/* info3: rótulo inferior */
.stat__info3 {
  order: 4;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-3);
  font-weight: 500;
  margin-top: 2px;
}
/* Icono siempre arriba */
.stat__icono { order: 1; }

/* ---- ESTADO INVERTIDO: info2 pasa a ser el grande, info1 el pequeño ---- */
.stat--invertido .stat__info1 {
  order: 3;
}
.stat--invertido .stat__info2 {
  order: 2;
}
.stat--invertido .stat__info1 .stat__valor {
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.stat--invertido .stat__info1 .stat__unidad {
  font-size: 10px;
}
.stat--invertido .stat__info2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-texto);
  line-height: 1.1;
}
.stat--invertido .stat__info2 .stat__unidad-pequena,
.stat--invertido .stat__info2 .stat__unidad-stat {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
 * SELECTOR DE CAPAS (popup)
 * ---------------------------------------------------------------------------- */
.selector-capas {
  position: absolute;
  top: calc(var(--space-2) + 44px + var(--space-2));
  right: var(--space-2);
  z-index: var(--z-controles-mapa);
  background-color: var(--color-panel);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  border: 1px solid var(--color-borde-2);
  min-width: 180px;
}
.selector-capas[hidden] { display: none !important; }
.selector-capas h3 {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
  color: var(--color-texto-2);
  font-weight: 600;
}
.selector-capas ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.selector-capas label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  min-height: 32px;
}
.selector-capas label:hover {
  background-color: var(--color-hover-lista);
}

/* ----------------------------------------------------------------------------
 * LISTA DE RUTAS (histórico)
 * ---------------------------------------------------------------------------- */
.lista-rutas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding-right: var(--space-1);
}
.lista-rutas__vacio {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-texto-3);
  font-size: var(--font-size-sm);
}
.item-ruta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-fondo-3);
  cursor: pointer;
  transition: background-color var(--transicion-rapida);
  border: 1px solid transparent;
}
.item-ruta:hover {
  background-color: var(--color-hover-lista);
}
.item-ruta--seleccionada {
  background-color: var(--color-seleccion-lista);
  border-color: var(--color-acento);
}
.item-ruta__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.item-ruta__titulo {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-texto);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-ruta__fecha {
  font-size: var(--font-size-sm);
  color: var(--color-texto-3);
}
.item-ruta__meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
}
.item-ruta__meta span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ----------------------------------------------------------------------------
 * COMPARTIR QR
 * ---------------------------------------------------------------------------- */
.compartir-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.compartir-qr__canvas {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  background-color: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-borde-2);
}
.compartir-qr__canvas canvas,
.compartir-qr__canvas img {
  display: block;
  max-width: 100%;
  height: auto;
}
.compartir-qr__desc {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  text-align: center;
}
.compartir-botones {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ----------------------------------------------------------------------------
 * IMPORTAR (escanear QR)
 * ---------------------------------------------------------------------------- */
.importar-opciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.importar-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.importar-qr video {
  max-width: 100%;
  border-radius: var(--radius-md);
  background-color: #000;
}
.importar-qr__desc {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
}

/* ----------------------------------------------------------------------------
 * DETALLE DE RUTA (cuerpo del modal)
 * ---------------------------------------------------------------------------- */
.detalle-ruta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.detalle-ruta__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detalle-ruta__etiqueta {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  font-weight: 500;
}
.detalle-ruta__valor {
  font-size: 1rem;
  color: var(--color-texto);
}
.detalle-ruta__mapa {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-md);
  background-color: var(--color-fondo-mapa);
  border: 1px solid var(--color-borde-2);
}

/* ----------------------------------------------------------------------------
 * BOTÓN DE GRABACIÓN (principal)
 * ---------------------------------------------------------------------------- */
.boton-grabar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  min-height: 56px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  background-color: var(--boton-positivo-fondo);
  color: var(--boton-positivo-texto);
  border: 4px solid var(--color-panel);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--transicion-rapida),
              background-color var(--transicion-rapida);
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
}
.boton-grabar:hover { background-color: var(--boton-positivo-hover); }
.boton-grabar:active { transform: scale(0.96); }
.boton-grabar[aria-pressed="true"] {
  background-color: var(--color-grabando);
  animation: grabarPulso 1.6s ease-in-out infinite;
}
@keyframes grabarPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
}
.boton-grabar .icono { width: 24px; height: 24px; }

.boton-secundario-grabar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-panel);
  color: var(--color-texto);
  border: 2px solid var(--color-borde);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transicion-rapida),
              background-color var(--transicion-rapida);
  -webkit-tap-highlight-color: transparent;
}
.boton-secundario-grabar:hover { background-color: var(--color-hover-lista); }
.boton-secundario-grabar:active { transform: scale(0.92); }

/* ----------------------------------------------------------------------------
 * PRE-RUTA (campos antes de grabar)
 * ---------------------------------------------------------------------------- */
.pre-ruta {
  display: flex;
  gap: var(--space-3);
  flex: 1;
  flex-wrap: wrap;
}
.pre-ruta__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}
.pre-ruta__campo label {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  font-weight: 500;
}

.controles-grabacion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
}

/* ============================================================================
 * ESTILOS NUEVOS (añadidos tras feedback del usuario)
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * CAMPO AVISO (fondo amarillo clarito para avisar al usuario de campos vacíos)
 * No bloqueante: el usuario puede ignorar el aviso y grabar igualmente.
 * ---------------------------------------------------------------------------- */
.campo-aviso,
input.campo-aviso,
textarea.campo-aviso,
select.campo-aviso {
  background-color: #fef9c3 !important;
  border-color: #facc15 !important;
  animation: pulsoAviso 1.6s ease-in-out infinite;
}
@keyframes pulsoAviso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0); }
}
/* En tema oscuro, usar un amarillo más oscuro para mantener contraste */
[data-tema="oscuro"] .campo-aviso,
[data-tema="auto"] .campo-aviso {
  background-color: rgba(250, 204, 21, 0.15) !important;
  color: #fef9c3 !important;
}

/* ----------------------------------------------------------------------------
 * MODAL DE COOKIES (cuadrado, centrado)
 * ---------------------------------------------------------------------------- */
.modal--cookies {
  width: min(90vw, 420px);
}
.modal__cuerpo--cookies {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.cookies-cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.cookies-cabecera .icono {
  color: var(--color-acento);
}
.cookies-cabecera h2 {
  margin: 0;
  font-size: var(--font-size-xl);
}
.cookies-texto {
  color: var(--color-texto-2);
  line-height: 1.5;
  margin: 0;
  font-size: var(--font-size-sm);
}
.modal__pie--cookies {
  justify-content: center;
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-top: none;
  background-color: transparent;
}

/* ----------------------------------------------------------------------------
 * LISTA DE PERFILES EN MODAL (selector)
 * ---------------------------------------------------------------------------- */
.lista-perfiles--modal {
  margin-bottom: var(--space-3);
  max-height: 50vh;
  overflow-y: auto;
}
.perfil-selector-desc {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  margin: 0 0 var(--space-2);
  text-align: center;
}

/* ----------------------------------------------------------------------------
 * BOTÓN CERRAR PANEL (en cabecera de paneles laterales)
 * ---------------------------------------------------------------------------- */
.boton-cerrar-panel {
  margin-left: auto;
}

/* ----------------------------------------------------------------------------
 * LOG DE DEPURACIÓN (modal con <pre>)
 * ---------------------------------------------------------------------------- */
.log-contenido {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-texto);
  background-color: var(--color-fondo-3);
  border: 1px solid var(--color-borde-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}
.log-contenido:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* ============================================================================
 * MINI-MAPA EN DETALLE DE RUTA (modal)
 * ============================================================================ */
.detalle-ruta__mapa {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  background-color: var(--color-fondo-mapa);
  border: 1px solid var(--color-borde-2);
  cursor: pointer;
  position: relative;
  margin-top: var(--space-2);
}
.detalle-ruta__mapa:hover {
  border-color: var(--color-acento);
}
.detalle-ruta__mapa-hint {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-panel);
  color: var(--color-texto-2);
  font-size: var(--font-size-sm);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
 * MODAL FIN DE RUTA (3 opciones)
 * ============================================================================ */
.fin-ruta-mensaje {
  text-align: center;
  color: var(--color-texto-2);
  margin: 0 0 var(--space-4);
}
.fin-ruta-opciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Botón "Configuración de mensajes" en config general: fondo gris suave */
#btn-mensajes-voz {
  background-color: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
}
#btn-mensajes-voz:hover {
  background-color: #cbd5e1 !important;
}
[data-tema="oscuro"] #btn-mensajes-voz,
[data-tema="auto"] #btn-mensajes-voz {
  background-color: #334155 !important;
  border: 1px solid #475569 !important;
}

/* Modal de configuración: footer con texto debajo del botón */
#modal-config .modal__pie {
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
#modal-config .modal__pie-titulo {
  order: 2; /* Texto debajo del botón */
}
#modal-config .modal__pie .boton {
  order: 1; /* Botón encima */
}

/* Modal de mensajes de voz: botón "Guardar y cerrar" alineado a la derecha */
#modal-mensajes-voz .modal__pie {
  justify-content: flex-end;
}

/* Histórico panel: z-index superior a los controles del mapa */
.panel-historico--abierto {
  z-index: 1100 !important;
}

/* Modales: z-index superior al histórico para que queden por encima */
.modal-fondo {
  z-index: 1200;
}

/* Indicador de campo obligatorio */
.campo-obligatorio {
  color: var(--boton-negativo-fondo);
  font-weight: 700;
  margin-left: 2px;
}

/* ============================================================================
 * INDICADOR SENSOR CLICABLE (cuando GPS necesita permiso)
 * ============================================================================ */
.indicador-sensor--clicable {
  cursor: pointer;
  background-color: var(--color-acento-claro);
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  animation: pulsoClicable 1.6s ease-in-out infinite;
}
.indicador-sensor--clicable:hover {
  background-color: var(--color-acento);
  color: var(--color-acento-texto);
}
@keyframes pulsoClicable {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}

/* Selectores 30% más anchos (para segundos/minutos y km/h/m/s) */
.campo-select--ancho {
  min-width: 130px !important;
}

/* ============================================================================
 * CONTROLES DE MAPA FLOTANTES (wrapper + esquinas)
 * ============================================================================
 * El mapa y sus controles flotantes están dentro de .mapa-wrapper, que ocupa
 * el 50% de la pantalla. Los controles se posicionan respecto al wrapper.
 * ============================================================================ */
.mapa-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Esquina inferior izquierda: brújula, capas, pantalla completa */
.mapa-controles--inf-izq {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 1000;
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

/* Esquina inferior derecha: bola azul (usuario) + bola roja (sombra) */
.mapa-controles--inf-der {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 1000;
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}

/* Botones cuadrados con bola (azul/roja) — fondo blanco */
.boton-mapa--bola {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bolas azul (usuario) y roja (sombra) dentro de botones cuadrados */
.bola {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
}
.bola--azul {
  background-color: var(--color-usuario);
}
.bola--roja {
  background-color: var(--color-sombra);
}

/* ============================================================================
 * AVISO DE ORIENTACIÓN LANDSCAPE
 * ============================================================================ */
.aviso-landscape {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: var(--color-fondo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
}
.aviso-landscape[hidden] { display: none !important; }
.aviso-landscape__icono {
  color: var(--color-acento);
  animation: giraTelefono 2s ease-in-out infinite;
}
@keyframes giraTelefono {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}
.aviso-landscape__texto {
  font-size: var(--font-size-lg);
  color: var(--color-texto);
  max-width: 320px;
  line-height: 1.5;
}

/* ============================================================================
 * BOTONES DEL DETALLE DE RUTA (reorganización)
 * ============================================================================ */
.modal__pie--detalle {
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}
.botones-detalle-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}
.botones-detalle-fila .boton {
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  min-height: 36px;
}
.botones-detalle-fila .boton .icono {
  width: 16px;
  height: 16px;
}
.botones-detalle-fila .boton span:last-child {
  display: none; /* En móvil pequeño, ocultar texto y mostrar solo icono */
}
@media (min-width: 480px) {
  .botones-detalle-fila .boton span:last-child {
    display: inline; /* En pantallas más anchas, mostrar texto */
  }
}