/* ============================================================================
   PANEL ADMINISTRATIVO con los colores del portal Cliente Beta (10/9/2026).
   Pedido de Randy: "haz lo mismo con el panel administrativo" (lo mismo que se
   hizo en Gestion): los MISMOS tokens que el body / body.theme-dark de
   cliente-beta.html, en claro y en oscuro, y la letra Nunito Sans.
   Capa encima de styles.css, cargada SOLO por index.html y con todo bajo
   body[data-portal="admin"]: el portal viejo del cliente (cliente.html), que
   comparte styles.css, no cambia.
   ========================================================================== */

@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-stretch: 100%; font-display: swap;
  src: url("beta/3ca151aa.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-stretch: 100%; font-display: swap;
  src: url("beta/40b34848.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens ---------------------------------------------------------------- */
body[data-portal="admin"] {
  color-scheme: light;
  /* beta (claro) */
  --b-bg: #f3f5f9; --b-panel: #ffffff; --b-panel2: #f8fafd; --b-ink: #1d2536; --b-muted: #69748c; --b-line: #e4e9f2;
  --b-accent: #1b4f9c; --b-acc2: #2f6cc4; --b-acc-ink: #ffffff; --b-acc-soft: #e8eef9;
  --b-btn: #1b4f9c; --b-btn-ink: #ffffff; --b-nav-act: #1b4f9c;
  --b-green: #188a54; --b-green-soft: #e2f4ea; --b-red: #d94436; --b-red-soft: #fbe9e7; --b-amber: #b97a12; --b-amber-soft: #faf0da;
  --b-shadow: 0 10px 30px rgba(23, 42, 74, 0.10);
  /* derivados */
  --b-hover: #eef2f8; --b-input-brd: #cfd8e6; --b-th: #f7f9fc; --b-row-line: #eef2f7; --b-row-hover: #f4f7fb;
  --b-ink-2: #46536a; --b-ink-3: #5d6b81; --b-seg: #e9edf4; --b-scroll: #c9d2e0; --b-overlay: rgba(23, 42, 74, 0.40);
  --b-ring: rgba(27, 79, 156, 0.16);
  /* las variables que ya usa styles.css pasan a ser las de la beta */
  --ink: var(--b-ink); --muted: var(--b-muted); --line: var(--b-line); --panel: var(--b-panel); --base: var(--b-bg);
  --green: var(--b-green); --red: var(--b-red); --amber: var(--b-amber); --blue: var(--b-accent); --teal: var(--b-acc2);
  --shadow: var(--b-shadow);
  background: var(--b-bg);
  color: var(--b-ink);
  font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
}
body[data-portal="admin"].theme-dark {
  color-scheme: dark;
  --b-bg: #0f1524; --b-panel: #171f33; --b-panel2: #1d2840; --b-ink: #edf1f9; --b-muted: #98a4c0; --b-line: #273350;
  --b-accent: #6ea3ec; --b-acc2: #8db9f4; --b-acc-ink: #0c1524; --b-acc-soft: #22314e;
  --b-btn: #2b6fd0; --b-btn-ink: #ffffff; --b-nav-act: #ffffff;
  --b-green: #3ecf8e; --b-green-soft: #17352a; --b-red: #f07168; --b-red-soft: #3a201e; --b-amber: #e8b04b; --b-amber-soft: #3a2f17;
  --b-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  --b-hover: #1d2840; --b-input-brd: #273350; --b-th: #1d2840; --b-row-line: #222c45; --b-row-hover: rgba(255, 255, 255, 0.03);
  --b-ink-2: #c3cce0; --b-ink-3: #aeb8cf; --b-seg: #0f1524; --b-scroll: #2c3856; --b-overlay: rgba(4, 8, 18, 0.6);
  --b-ring: rgba(110, 163, 236, 0.25);
  --ink: var(--b-ink); --muted: var(--b-muted); --line: var(--b-line); --panel: var(--b-panel); --base: var(--b-bg);
  --green: var(--b-green); --red: var(--b-red); --amber: var(--b-amber); --blue: var(--b-accent); --teal: var(--b-acc2);
  --shadow: var(--b-shadow);
}
body[data-portal="admin"] button, body[data-portal="admin"] input,
body[data-portal="admin"] select, body[data-portal="admin"] textarea { font-family: inherit; }
body[data-portal="admin"] h1, body[data-portal="admin"] h2, body[data-portal="admin"] h3 { font-weight: 800; color: var(--b-ink); }

/* --- armazon y menu lateral (como el aside de la beta) ---------------------- */
body[data-portal="admin"] .app-shell { background: var(--b-bg); }
body[data-portal="admin"] .sidebar {
  background: var(--b-panel);
  color: var(--b-ink);
  border-right: 1px solid var(--b-line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-portal="admin"] .sidebar::before { display: none; }
body[data-portal="admin"] .brand-logo { background: transparent; }
body[data-portal="admin"] .brand strong { color: var(--b-ink); }
body[data-portal="admin"] .brand span { color: var(--b-muted); }
body[data-portal="admin"] .nav-stack { gap: 4px; }
body[data-portal="admin"] .nav-item {
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--b-ink);
  font-weight: 600;
  font-size: 13.5px;
}
body[data-portal="admin"] .nav-item .nav-icon { color: var(--b-muted); }
body[data-portal="admin"] .nav-item:hover { background: var(--b-hover); color: var(--b-ink); }
body[data-portal="admin"] .nav-item.active { background: var(--b-acc-soft); color: var(--b-nav-act); font-weight: 800; }
body[data-portal="admin"] .nav-item.active .nav-icon { color: var(--b-nav-act); }
body[data-portal="admin"] .nav-collapse-btn {
  border: 1px solid var(--b-line);
  background: var(--b-acc-soft);
  color: var(--b-nav-act);
  border-radius: 9px;
}
body[data-portal="admin"] .nav-collapse-btn:hover { background: var(--b-acc-soft); color: var(--b-nav-act); filter: brightness(1.08); }
body[data-portal="admin"] .sidebar .theme-toggle { border: 1px solid var(--b-line); color: var(--b-muted); font-weight: 700; }
body[data-portal="admin"] .sidebar .theme-toggle .nav-icon { color: var(--b-muted); }
body[data-portal="admin"] .nav-badge { background: var(--b-red); color: #fff; }
body[data-portal="admin"] .workspace { background: transparent; }
body[data-portal="admin"] .eyebrow { color: var(--b-muted); }

/* --- barra superior ----------------------------------------------------------- */
body[data-portal="admin"] .session-pill {
  background: var(--b-panel);
  border: 1px solid var(--b-line);
  border-radius: 14px;
}
body[data-portal="admin"] .session-pill .profile-avatar {
  background: linear-gradient(135deg, var(--b-accent), var(--b-acc2));
  color: var(--b-acc-ink);
  border-radius: 11px;
}

/* --- botones -------------------------------------------------------------------- */
body[data-portal="admin"] .primary-button {
  background: var(--b-btn);
  border-color: transparent;
  color: var(--b-btn-ink);
  border-radius: 11px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(27, 79, 156, 0.22);
}
body[data-portal="admin"].theme-dark .primary-button { box-shadow: none; }
body[data-portal="admin"] .primary-button:hover { filter: brightness(1.08); }
body[data-portal="admin"] .primary-button.danger,
body[data-portal="admin"] .sms-confirm-actions .primary-button.danger { background: var(--b-red); }
body[data-portal="admin"] .ghost-button,
body[data-portal="admin"] .icon-button,
body[data-portal="admin"] .command-grid button,
body[data-portal="admin"] menu button {
  background: var(--b-panel);
  border: 1px solid var(--b-line);
  border-radius: 10px;
  color: var(--b-ink-3);
}
body[data-portal="admin"] .ghost-button:hover,
body[data-portal="admin"] .icon-button:hover,
body[data-portal="admin"] .command-grid button:hover,
body[data-portal="admin"] menu button:hover { background: var(--b-hover); color: var(--b-ink); }
body[data-portal="admin"] .row-actions .icon-button { color: var(--b-muted); }
body[data-portal="admin"] .row-actions .icon-button:hover { background: var(--b-hover); color: var(--b-ink); }

/* --- tarjetas y paneles ------------------------------------------------------------ */
body[data-portal="admin"] .metric,
body[data-portal="admin"] .map-panel,
body[data-portal="admin"] .fleet-panel,
body[data-portal="admin"] .device-detail,
body[data-portal="admin"] .command-console,
body[data-portal="admin"] .chart-panel,
body[data-portal="admin"] .table-panel,
body[data-portal="admin"] .settings-panel,
body[data-portal="admin"] .report-panel,
body[data-portal="admin"] .management-table-panel,
body[data-portal="admin"] .side-detail,
body[data-portal="admin"] dialog {
  background: var(--b-panel);
  border: 1px solid var(--b-line);
  border-radius: 18px;
  box-shadow: var(--b-shadow);
  color: var(--b-ink);
}
body[data-portal="admin"].theme-dark .metric,
body[data-portal="admin"].theme-dark .chart-panel,
body[data-portal="admin"].theme-dark .table-panel,
body[data-portal="admin"].theme-dark .management-table-panel,
body[data-portal="admin"].theme-dark .side-detail { box-shadow: none; }
body[data-portal="admin"] .metric small { color: var(--b-muted); }
body[data-portal="admin"] .settings-grid article,
body[data-portal="admin"] .report-grid article,
body[data-portal="admin"] .user-card,
body[data-portal="admin"] .vehicle-card,
body[data-portal="admin"] .detail-grid div,
body[data-portal="admin"] .command-console.readonly,
body[data-portal="admin"] .cfg-cmd {
  background: var(--b-panel2);
  border-color: var(--b-line);
}
body[data-portal="admin"] dialog::backdrop { background: var(--b-overlay); }

/* --- graficas del resumen -------------------------------------------------------- */
body[data-portal="admin"] .bar { background: linear-gradient(180deg, var(--b-acc2), var(--b-accent)); }
body[data-portal="admin"] .bar-chart.green .bar { background: var(--b-green); }
body[data-portal="admin"] .legend-dot.blue,
body[data-portal="admin"] .dot.blue { background: var(--b-accent); }
body[data-portal="admin"] .legend-dot.green { background: var(--b-green); }
body[data-portal="admin"] .line.blue { stroke: var(--b-accent); background: var(--b-accent); }
body[data-portal="admin"] .line.teal { stroke: var(--b-green); background: var(--b-green); }
body[data-portal="admin"] .dot.teal { background: var(--b-green); }
body[data-portal="admin"] .bar-chart,
body[data-portal="admin"] .line-chart { border-color: var(--b-line); }
body[data-portal="admin"] .delta-chip.up { background: var(--b-green-soft); color: var(--b-green); }
body[data-portal="admin"] .delta-chip.down { background: var(--b-red-soft); color: var(--b-red); }
body[data-portal="admin"] .leader-row em { background: var(--b-accent); color: var(--b-acc-ink); }
body[data-portal="admin"] .chart-legend { color: var(--b-ink); }

/* --- campos --------------------------------------------------------------------------- */
body[data-portal="admin"] .search-box { background: var(--b-panel2); border: 1px solid var(--b-line); border-radius: 12px; }
body[data-portal="admin"] .search-box input { background: transparent; color: var(--b-ink); }
body[data-portal="admin"] .send-row input,
body[data-portal="admin"] dialog input,
body[data-portal="admin"] dialog textarea,
body[data-portal="admin"] dialog select,
body[data-portal="admin"] select,
body[data-portal="admin"] .form-grid input,
body[data-portal="admin"] .form-grid select,
body[data-portal="admin"] .form-grid textarea,
body[data-portal="admin"] .settings-grid input,
body[data-portal="admin"] .clone-grid input,
body[data-portal="admin"] .clone-grid select,
body[data-portal="admin"] .clone-grid textarea,
body[data-portal="admin"] .cfg-fields input,
body[data-portal="admin"] .cfg-fields select,
body[data-portal="admin"] .cfg-fields textarea {
  background: var(--b-panel);
  border: 1px solid var(--b-input-brd);
  border-radius: 10px;
  color: var(--b-ink);
}
body[data-portal="admin"] input:focus,
body[data-portal="admin"] select:focus,
body[data-portal="admin"] textarea:focus {
  outline: none;
  border-color: var(--b-accent);
  box-shadow: 0 0 0 3px var(--b-ring);
}
body[data-portal="admin"] input[type="checkbox"],
body[data-portal="admin"] input[type="radio"] { accent-color: var(--b-btn); }
body[data-portal="admin"] .clone-grid input:disabled { background: var(--b-panel2); }

/* --- tablas ------------------------------------------------------------------------------ */
body[data-portal="admin"] .data-table { color: var(--b-ink); }
body[data-portal="admin"] .data-table th {
  background: var(--b-th);
  color: var(--b-muted);
  border-bottom: 1px solid var(--b-line);
}
body[data-portal="admin"] .data-table td { border-bottom: 1px solid var(--b-row-line); }
body[data-portal="admin"] .data-table tbody tr:hover { background: var(--b-row-hover); }
body[data-portal="admin"] .data-table tr.selected { background: var(--b-acc-soft); }

/* --- chips de estado ------------------------------------------------------------------------ */
body[data-portal="admin"] .status-chip { background: var(--b-acc-soft); color: var(--b-accent); }
body[data-portal="admin"] .status-chip.online,
body[data-portal="admin"] .status-chip.done { background: var(--b-green-soft); color: var(--b-green); }
body[data-portal="admin"] .status-chip.alert,
body[data-portal="admin"] .status-chip.expired { background: var(--b-red-soft); color: var(--b-red); }
body[data-portal="admin"] .status-chip.pending { background: var(--b-amber-soft); color: var(--b-amber); }
body[data-portal="admin"] .status-chip.offline,
body[data-portal="admin"] .status-chip.scheduled { background: var(--b-seg); color: var(--b-ink-2); }
body[data-portal="admin"] .role-chip.admin { background: var(--b-acc-soft); color: var(--b-accent); }
body[data-portal="admin"] .role-chip.operator { background: var(--b-green-soft); color: var(--b-green); }

/* --- pestanas segmentadas (como las de la beta) ---------------------------------------------- */
body[data-portal="admin"] .panel-tabs,
body[data-portal="admin"] .history-tabs,
body[data-portal="admin"] .mejora-tabs {
  background: var(--b-seg);
  border: 1px solid var(--b-line);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
body[data-portal="admin"] .panel-tabs button,
body[data-portal="admin"] .history-tabs button,
body[data-portal="admin"] .mejora-tab {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--b-muted);
  font-weight: 700;
}
body[data-portal="admin"] .panel-tabs button.active,
body[data-portal="admin"] .history-tabs button.active,
body[data-portal="admin"] .mejora-tab.active {
  background: var(--b-panel);
  color: var(--b-accent);
  box-shadow: 0 2px 8px rgba(23, 42, 74, 0.12);
}
body[data-portal="admin"].theme-dark .panel-tabs button.active,
body[data-portal="admin"].theme-dark .history-tabs button.active,
body[data-portal="admin"].theme-dark .mejora-tab.active { background: var(--b-acc-soft); color: var(--b-nav-act); box-shadow: none; }
body[data-portal="admin"] .vehicle-profile-tabs button.active { color: var(--b-accent); border-color: var(--b-accent); }

/* --- mapa, herramientas y selector de fechas (Dispositivos) ----------------------------------- */
body[data-portal="admin"] .map-style-switch,
body[data-portal="admin"] .map-style-switch button { background: var(--b-panel); color: var(--b-ink-3); border-color: var(--b-line); }
body[data-portal="admin"] .map-style-switch button.active { background: var(--b-btn); color: var(--b-btn-ink); }
body[data-portal="admin"] .tracking-tools { background: var(--b-panel); }
body[data-portal="admin"] .tracking-tools button { background: var(--b-panel); color: var(--b-muted); }
body[data-portal="admin"] .tracking-tools button:hover,
body[data-portal="admin"] .tracking-tools button.active { color: var(--b-accent); }
body[data-portal="admin"] .tracker-check.on,
body[data-portal="admin"] .tracker-device-row.active .tracker-check { background: var(--b-btn); border-color: var(--b-btn); }
body[data-portal="admin"] .tracker-device-row.active,
body[data-portal="admin"] .tracking-list-row.selected { background: var(--b-acc-soft); }
body[data-portal="admin"] .hr-trigger { background: var(--b-acc-soft); color: var(--b-accent); }
body[data-portal="admin"] .drp { background: var(--b-panel); color: var(--b-ink); }
body[data-portal="admin"] .drp-day.sel,
body[data-portal="admin"] .tripr-item.sel,
body[data-portal="admin"] .tripr-item.sel:hover { background: var(--b-btn); color: var(--b-btn-ink); }
body[data-portal="admin"] .drp-day.in-range { background: var(--b-acc-soft); }
body[data-portal="admin"] #drpApply { color: var(--b-accent); }
body[data-portal="admin"] .trip-group { background: var(--b-panel2); }
body[data-portal="admin"] .maplibregl-popup-content { background: var(--b-panel); color: var(--b-ink); }
body[data-portal="admin"].theme-dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--b-panel); }
body[data-portal="admin"].theme-dark .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--b-panel); }
body[data-portal="admin"].theme-dark .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--b-panel); }
body[data-portal="admin"].theme-dark .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--b-panel); }
body[data-portal="admin"].theme-dark .map-cluster::before { background: rgba(23, 31, 51, 0.92); }
body[data-portal="admin"].theme-dark .map-cluster span { color: var(--b-ink); }

/* --- mejora de viajes ------------------------------------------------------------------------ */
body[data-portal="admin"] .mejora-row:hover { background: var(--b-row-hover); }
body[data-portal="admin"] .mejora-row.active { background: var(--b-acc-soft); }

/* --- el login se queda claro, como en la beta ---------------------------------------------- */
body[data-portal="admin"] .login-screen {
  color-scheme: light;
  --b-bg: #f3f5f9; --b-panel: #ffffff; --b-panel2: #f8fafd; --b-ink: #1d2536; --b-muted: #69748c; --b-line: #e4e9f2;
  --b-accent: #1b4f9c; --b-acc2: #2f6cc4; --b-acc-soft: #e8eef9; --b-btn: #1b4f9c; --b-btn-ink: #ffffff; --b-input-brd: #cfd8e6;
  --ink: var(--b-ink); --muted: var(--b-muted); --line: var(--b-line); --panel: var(--b-panel); --base: var(--b-bg);
  background: var(--b-bg);
  color: var(--b-ink);
}
body[data-portal="admin"] .login-card {
  background: var(--b-panel);
  border: 1px solid var(--b-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(23, 42, 74, 0.10);
}
body[data-portal="admin"] .login-card input { background: var(--b-panel); border: 1px solid var(--b-input-brd); color: var(--b-ink); }

/* LA MARCA SE VEIA BLANCO SOBRE BLANCO (2/10/2026). Randy: "el inicio de la
   plataforma no se ve nada en modo oscuro ni en modo claro". El nombre y el
   subtitulo seguian en blanco (de cuando el fondo era el mapa oscuro de
   styles.css) y el fondo paso a ser el gris claro de la beta. Ahora la entrada
   es la misma de cliente-beta.html: panel azul con la marca a la izquierda y la
   tarjeta sobre el fondo claro a la derecha (en claro y en oscuro: el login no
   cambia con el modo). */
body[data-portal="admin"] .login-screen {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
}
body[data-portal="admin"] .login-brand {
  align-items: center;
  gap: 16px;
  padding: 64px;
  background: linear-gradient(160deg, #0e2748, #1b4f9c 78%, #2f6cc4);
  color: #ffffff;
}
body[data-portal="admin"] .login-logo { width: 64px; height: 64px; padding: 0; object-fit: contain; }
body[data-portal="admin"] .login-brand strong { font-size: 26px; font-weight: 900; letter-spacing: 0.5px; color: #ffffff; }
body[data-portal="admin"] .login-brand span { margin-top: 4px; font-size: 15px; color: #cfe0f6; }
body[data-portal="admin"] .login-card {
  align-self: center;
  justify-self: center;
  width: min(400px, calc(100% - 48px));
  margin: 40px 0;
  padding: 36px;
  border-radius: 20px;
}
@media (max-width: 1120px) {
  /* Una columna: la marca queda como franja azul arriba y la tarjeta debajo. */
  body[data-portal="admin"] .login-screen { grid-template-columns: 1fr; align-content: start; }
  body[data-portal="admin"] .login-brand { padding: 28px 24px; align-items: center; }
  body[data-portal="admin"] .login-logo { width: 52px; height: 52px; }
  body[data-portal="admin"] .login-brand strong { font-size: 22px; }
  body[data-portal="admin"] .login-card { margin: 28px 0 40px; padding: 28px; }
}

/* --- barras de desplazamiento ------------------------------------------------------------- */
body[data-portal="admin"] ::-webkit-scrollbar-thumb { background: var(--b-scroll); }