/* =========================================================================
   GPSINTEGRA — Header compartido en TEMA CLARO (módulos de administración)
   Contraparte de tema-oscuro.css. Aquí vive el estilo de la barra superior
   (logo + menú + zona derecha) para  html[data-theme="light"].

   Por qué existe: en tema oscuro TODO el header lo unifica tema-oscuro.css,
   así que todos los módulos se ven igual. En tema CLARO no había estilo
   compartido: cada página caía en su propio <style> inline (con hex
   hardcodeados distintos) y el header divergía entre módulos. Este archivo
   da UN solo header claro para todos. Se enlaza DESPUÉS del <style> de la
   página y de tema-oscuro.css → gana el cascade (además va por especificidad
   con el prefijo html[data-theme="light"]). La barra superior es navy sólida
   por diseño (el cuerpo de la página sí es claro).
   ========================================================================= */

html[data-theme="light"] header {
  height: 56px;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(15, 39, 64, .55);
  box-shadow: 0 2px 12px rgba(15, 23, 42, .12);
  position: sticky; top: 0; z-index: 50;
}

/* Marca: logo (caja con degradado) + nombre del sistema */
html[data-theme="light"] a.brand,
html[data-theme="light"] .brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .3px; font-size: 15px;
}
html[data-theme="light"] .brand .logo {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  box-shadow: 0 2px 10px rgba(6, 182, 212, .30);
}
html[data-theme="light"] .brand .gps { color: #67e8f9; margin-left: 4px; }

/* Botones de navegación. Casi todos los módulos usan a.nav; admin usa a.map. */
html[data-theme="light"] header a.nav,
html[data-theme="light"] header a.map {
  color: #c7d3e3; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  padding: 7px 12px; font-weight: 600; font-size: 12.5px; text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
html[data-theme="light"] header a.nav:hover,
html[data-theme="light"] header a.map:hover {
  color: #fff; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .12);
}
html[data-theme="light"] header a.nav.active,
html[data-theme="light"] header a.map.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(59, 130, 246, .92), rgba(6, 182, 212, .92));
  border-color: rgba(125, 211, 252, .5);
  box-shadow: 0 4px 14px rgba(6, 182, 212, .28);
}

/* Zona derecha: chip de usuario + botón salir + toggle de tema */
html[data-theme="light"] header .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
html[data-theme="light"] header .user { color: #c7d3e3; font-size: 12px; text-decoration: none; }
html[data-theme="light"] header .user:hover { color: #fff; }
html[data-theme="light"] .btn-out {
  color: #c7d3e3; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  padding: 7px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
html[data-theme="light"] .btn-out:hover { color: #fff; border-color: rgba(248, 113, 113, .55); background: rgba(248, 113, 113, .16); }
/* El .theme-toggle base ya vive en app.css, pensado para la barra oscura → sirve tal cual aquí. */