/* =========================================================================
   GPSINTEGRA — Tema oscuro compartido (módulos de administración)
   Se enlaza DESPUÉS del <style> propio de cada página: a igual especificidad
   gana esta hoja, y las páginas conservan su layout. Los tokens de app.css
   se redefinen aquí en clave oscura (slate + acento azul/cian), igual que
   el dashboard rediseñado.
   ========================================================================= */

:root {
  --navy: #2563eb;          /* ahora es el azul primario (botones que usaban navy) */
  --navy2: #1d4ed8;
  --bg: #0f172a;
  --card: rgba(30, 41, 59, .45);
  --surface-2: rgba(30, 41, 59, .6);
  --line: rgba(51, 65, 85, .55);
  --line-2: rgba(71, 85, 105, .6);
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --faint: #64748b;
  --green: #22c55e;
  --green-2: #4ade80;
  --amber: #f59e0b;
  --red: #f87171;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

body { background: #0f172a; color: #e2e8f0; font-family: Inter, system-ui, sans-serif; }
h1, h2, h3 { color: #fff; }
.sub, .hint, .muted { color: #94a3b8; }
::selection { background: rgba(6, 182, 212, .3); }
:focus-visible { outline: 2px solid rgba(6, 182, 212, .6); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }

/* ── Header (barra superior con glass) ── */
header {
  background: rgba(15, 23, 42, .82);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(51, 65, 85, .5);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  position: sticky; top: 0; z-index: 50;
  height: 60px;
}

/* Marca: logo + nombre del sistema, siempre enlaza al inicio */
a.brand, .brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .3px; font-size: 15px;
}
a.brand:hover .logo { box-shadow: 0 0 20px rgba(6, 182, 212, .55); }
.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 0 14px rgba(6, 182, 212, .35);
  transition: box-shadow .2s ease;
}
.brand .gps { color: #67e8f9; margin-left: 4px; }

header a.nav, header a.map {
  color: #94a3b8; background: rgba(30, 41, 59, .4);
  border: 1px solid rgba(51, 65, 85, .7); border-radius: 10px;
  padding: 7px 12px; font-weight: 600; font-size: 12.5px; text-decoration: none;
  transition: all .2s ease;
}
header a.nav:hover, header a.map:hover { color: #e2e8f0; border-color: #475569; background: rgba(51, 65, 85, .45); }
header a.nav.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(59, 130, 246, .85), rgba(6, 182, 212, .85));
  border-color: rgba(125, 211, 252, .35);
  box-shadow: 0 4px 14px rgba(6, 182, 212, .3);
}
header .user { color: #94a3b8; }
.btn-out { color: #94a3b8; border: 1px solid rgba(51, 65, 85, .7); background: rgba(30, 41, 59, .4); border-radius: 10px; }
.btn-out:hover { color: #f87171; border-color: rgba(239, 68, 68, .45); }

/* ── Tarjetas y tablas ── */
.card {
  background: rgba(30, 41, 59, .45);
  border: 1px solid rgba(51, 65, 85, .55);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}
table {
  background: rgba(30, 41, 59, .45);
  border: 1px solid rgba(51, 65, 85, .55);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}
.card table { background: transparent; border: 0; box-shadow: none; } /* tabla dentro de card: sin doble panel */
th, thead th { background: rgba(15, 23, 42, .55); color: #94a3b8; }
.card th { background: transparent; }
td { color: #cbd5e1; border-bottom-color: rgba(51, 65, 85, .4); }
th { border-bottom-color: rgba(51, 65, 85, .55); }
td b, tbody td:first-child { color: #fff; }
tbody tr:hover { background: rgba(51, 65, 85, .22); }

/* ── Formularios ── */
input, select, textarea {
  background: rgba(30, 41, 59, .7);
  border: 1px solid rgba(71, 85, 105, .6);
  color: #e2e8f0;
  border-radius: 10px;
}
input::placeholder { color: #7c8ba1; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(6, 182, 212, .6);
  box-shadow: 0 0 12px rgba(6, 182, 212, .2);
}
select option { background: #1e293b; color: #e2e8f0; }
input[type=checkbox] { background: transparent; border: 0; accent-color: #06b6d4; box-shadow: none; }
label { color: #cbd5e1; }
.hint a { color: #67e8f9; }

/* ── Botones ── */
.btn-primary, .btn-add, .btn-new, .btn-save, .newco button {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: #fff; border: 0;
  box-shadow: 0 2px 12px rgba(6, 182, 212, .3);
}
.btn-primary:hover, .btn-add:hover, .btn-new:hover, .btn-save:hover, .newco button:hover { filter: brightness(1.12); background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.btn-ghost { background: rgba(51, 65, 85, .5); color: #cbd5e1; border: 1px solid rgba(71, 85, 105, .5); }
.btn-ghost:hover { background: rgba(51, 65, 85, .8); }
.act button, .emp-act button { background: rgba(30, 41, 59, .6); border: 1px solid rgba(71, 85, 105, .6); color: #cbd5e1; }
.act button:hover, .emp-act button:hover { border-color: rgba(6, 182, 212, .5); color: #67e8f9; }
.act .del, .emp-act .del, .del { color: #f87171; border-color: rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .08); }
.act .del:hover, .emp-act .del:hover, .del:hover { background: rgba(239, 68, 68, .18); color: #fca5a5; }

/* ── Pills, tags, badges, chips ── */
.tag, .pill.no, .chips span, .emp-table .count { background: rgba(51, 65, 85, .5); color: #cbd5e1; }
.pill.ok { background: rgba(34, 197, 94, .12); color: #4ade80; border: 1px solid rgba(34, 197, 94, .3); }
.badge { background: rgba(6, 182, 212, .18); color: #67e8f9; }
.badge.admin { background: linear-gradient(135deg, #3b82f6, #06b6d4); color: #fff; }
.badge.empresa { background: rgba(51, 65, 85, .6); color: #cbd5e1; }
.chips-edit .ch { background: rgba(51, 65, 85, .5); color: #e2e8f0; }
.chips-edit .ch button { background: rgba(71, 85, 105, .7); color: #cbd5e1; }
.chips-edit .ch button:hover { background: rgba(239, 68, 68, .3); color: #fca5a5; }
.co { background: rgba(51, 65, 85, .4); }
.co .x { background: rgba(71, 85, 105, .7); color: #cbd5e1; }
.co .x:hover { background: rgba(239, 68, 68, .3); color: #fca5a5; }
code { background: rgba(51, 65, 85, .5); border-color: rgba(71, 85, 105, .6); color: #cbd5e1; }

/* ── Modales ── */
.modal { background: rgba(2, 8, 20, .65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet {
  background: rgba(15, 23, 42, .94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(51, 65, 85, .6);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.sheet h3 { color: #fff; }

/* ── Toast de empresas ── */
#toast {
  background: rgba(15, 23, 42, .92);
  border: 1px solid rgba(6, 182, 212, .45);
  color: #e2e8f0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}