/* ui.css — capa visual (consola de despacho). Se carga al final; quitar este archivo revierte el diseño. */

:root,
html[data-theme="dark"] {
  --ui-bg: #0c0d0f;
  --ui-surface: #131518;
  --ui-raised: #191c20;
  --ui-line: #24272c;
  --ui-line-strong: #343840;
  --ui-fg: #e9ebee;
  --ui-muted: #8a9099;
  --ui-accent: #ffb020;
  --ui-accent-ink: #1a1100;
  --ui-danger: #ff6b6b;
  --ui-hover: rgba(255, 255, 255, 0.045);
  --ui-scrim: rgba(0, 0, 0, 0.62);
  color-scheme: dark;
}

html[data-theme="light"] {
  --ui-bg: #f4f5f6;
  --ui-surface: #ffffff;
  --ui-raised: #eff0f2;
  --ui-line: #e1e3e6;
  --ui-line-strong: #c4c8ce;
  --ui-fg: #121418;
  --ui-muted: #646b75;
  --ui-accent: #f5a300;
  --ui-accent-ink: #1a1100;
  --ui-danger: #c9302c;
  --ui-hover: rgba(0, 0, 0, 0.04);
  --ui-scrim: rgba(18, 20, 24, 0.45);
  color-scheme: light;
}

:root,
html[data-theme="dark"],
html[data-theme="light"] {
  /* Reasigna los tokens heredados para que home, login, mapas y controles sigan al nuevo sistema. */
  --fg: var(--ui-fg);
  --muted: var(--ui-muted);
  --border: var(--ui-line);
  --accent: var(--ui-accent);
  --accent-ink: var(--ui-accent-ink);
  --error: var(--ui-danger);
  --active-bg: var(--ui-raised);
  --active-fg: var(--ui-fg);
  --glass: var(--ui-surface);
  --glass-strong: var(--ui-raised);
  --glass-border: var(--ui-line);
  --glass-highlight: transparent;
  --panel: var(--ui-surface);
  --panel-tint: var(--ui-surface);
  --panel-tint-strong: var(--ui-raised);
  --surface: var(--ui-raised);
  --surface-tint: var(--ui-raised);
  --surface-tint-hover: var(--ui-hover);
  --sidebar: var(--ui-surface);
  --sidebar-bg: var(--ui-surface);
  --sidebar-fg: var(--ui-muted);
  --sidebar-border: var(--ui-line);
  --page-gradient: none;
  --brand-blue-soft: var(--ui-line-strong);
  --controles-field-bg: var(--ui-raised);
  --controles-field-bg-focus: var(--ui-raised);
  --controles-dropdown-bg: var(--ui-raised);
  --controles-dropdown-hover: var(--ui-hover);
  --ease-in: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.4, 0, 1, 1);
  --t-in: 200ms;
  --t-out: 140ms;
}

body {
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-stretch: 100%;
  background: var(--ui-bg);
  background-image: none;
  color: var(--ui-fg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

/* ---------- Etiquetas en versalitas ---------- */
.hint,
.despacho-meta,
.modal-form label:not(.check),
.perm-group legend,
.map-field,
.content .grid.compact th,
.grid th,
.sub {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.sub { font-size: 0.72rem; line-height: 1.5; margin-bottom: 1.6rem; }
.modal-form label:not(.check) { gap: 0.4rem; }
.map-field select,
.modal-form label:not(.check) input,
.modal-form label:not(.check) select,
.modal-form label:not(.check) textarea {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.content .grid.compact th,
.grid th {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line-strong);
  position: sticky;
  top: 0;
}

/* ---------- Estructura plana ---------- */
.content .topbar {
  background: var(--ui-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--ui-line);
}
.content .view {
  background: var(--ui-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
}
.view.view-mapas,
.view.view-controles {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* ---------- Titulares: fuente y tamaño por defecto (home.css) ---------- */
.content .topbar h1 { color: var(--ui-fg); }
@media (min-width: 961px) {
  .content:not(.module-mapas) .topbar-left { align-items: baseline; }
}
.content .topbar { padding: 0.9rem 1.25rem; }
.content.module-mapas .topbar { padding: 0.7rem 1.25rem; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-line);
}
.sidebar .brand {
  color: var(--ui-fg);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.sidebar-filter {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  color: var(--ui-fg);
}
.sidebar-filter::placeholder { color: var(--ui-muted); }
.sidebar-filter:focus { outline: none; border-color: var(--ui-accent); }

.nav-link {
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ui-muted);
  position: relative;
  transition: background var(--t-out) var(--ease-out), color var(--t-out) var(--ease-out);
}
.nav-link:hover {
  background: var(--ui-hover);
  color: var(--ui-fg);
  transition-duration: var(--t-in);
}
.nav-link.active {
  background: var(--ui-raised);
  color: var(--ui-fg);
  box-shadow: inset 2px 0 0 var(--ui-accent);
}
.nav-link.filter-hl {
  outline: 1px solid var(--ui-accent);
  background: var(--ui-raised);
  color: var(--ui-fg);
}
.btn-sidebar-toggle,
html[data-theme="light"] .btn-sidebar-toggle {
  background: transparent;
  color: var(--ui-muted);
  border-radius: 6px;
}
.btn-sidebar-toggle:hover,
html[data-theme="light"] .btn-sidebar-toggle:hover {
  background: var(--ui-hover);
  color: var(--ui-fg);
}
.sidebar .btn-sidebar,
html[data-theme="light"] .sidebar .btn-sidebar {
  background: transparent;
  border: 1px solid var(--ui-line);
  color: var(--ui-muted);
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.82rem;
}
.sidebar .btn-sidebar:hover,
html[data-theme="light"] .sidebar .btn-sidebar:hover {
  background: var(--ui-hover);
  color: var(--ui-fg);
  border-color: var(--ui-line-strong);
}
.nav-hint,
html[data-theme="light"] .nav-hint {
  background: var(--ui-fg);
  color: var(--ui-bg);
  border-radius: 4px;
  box-shadow: none;
  font-size: 0.78rem;
}

/* ---------- Botones: un solo acento para la acción principal ---------- */
.btn,
.content .btn {
  background: var(--ui-raised);
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  color: var(--ui-fg);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--t-out) var(--ease-out), border-color var(--t-out) var(--ease-out);
}
.btn:hover,
.content .btn:hover {
  background: var(--ui-hover);
  border-color: var(--ui-muted);
  transition-duration: var(--t-in);
}
.btn.btn-accent,
.content .btn.btn-accent {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-ink);
}
.btn.btn-accent:hover,
.content .btn.btn-accent:hover {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  filter: brightness(1.08);
}
.btn:disabled { opacity: 0.4; }

/* ---------- Campos ---------- */
.content .maint-search input,
.modal-form input,
.modal-form textarea,
.modal-form select {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  color: var(--ui-fg);
  transition: border-color var(--t-out) var(--ease-out), box-shadow var(--t-out) var(--ease-out);
}
.content .maint-search input:focus,
.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent);
  transition-duration: var(--t-in);
}
.check input,
.map-checks input { accent-color: var(--ui-accent); }

/* ---------- Tablas ---------- */
.grid th,
.grid td { border-bottom: 1px solid var(--ui-line); }
.content .grid tbody tr:hover { background: var(--ui-hover); }
.content .grid tbody tr.selected {
  background: var(--ui-raised);
  outline: 0;
  box-shadow: inset 2px 0 0 var(--ui-accent);
}
.grid-wrap { scrollbar-color: var(--ui-line-strong) transparent; }
.grid-wrap::-webkit-scrollbar-thumb { background: var(--ui-line-strong); }
.grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--ui-muted); }

/* ---------- Modal y toast ---------- */
.modal-backdrop {
  background: var(--ui-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line-strong);
  border-radius: 8px;
  box-shadow: none;
}
.perm-group { border-radius: 6px; border-color: var(--ui-line) !important; }
.toast {
  background: var(--ui-raised);
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  font-size: 0.82rem;
}
.toast.ok { border-color: var(--ui-accent); color: var(--ui-fg); box-shadow: inset 2px 0 0 var(--ui-accent); }
.toast.err { border-color: var(--ui-danger); color: var(--ui-fg); box-shadow: inset 2px 0 0 var(--ui-danger); }
.form-msg { color: var(--ui-danger); }
.form-msg.ok { color: var(--ui-fg); }

/* ---------- Login ---------- */
.login-panel {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
  padding: 2.4rem 2rem 2rem;
}
.login-panel .avatar { display: none; }
.login-panel .brand {
  color: var(--ui-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.field { border-bottom: 1px solid var(--ui-line-strong); }
.field:focus-within { border-bottom-color: var(--ui-accent); }
.field-icon { color: var(--ui-muted); }
.field input { color: var(--ui-fg); }
.field input::placeholder { color: var(--ui-muted); }
button[type="submit"] {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
  border-radius: 6px;
  box-shadow: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  transition: filter var(--t-out) var(--ease-out), transform var(--t-out) var(--ease-out);
}
button[type="submit"]:hover {
  background: var(--ui-accent);
  box-shadow: none;
  filter: brightness(1.08);
  transform: none;
  transition-duration: var(--t-in);
}

/* ---------- Mapas: cromo oscuro de IDE ---------- */
.mapas-chrome {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
}
.mapas-chrome-inner select,
.mapas-chrome-inner .map-search,
.mapas-chrome-inner .map-tools button,
.mapas-chrome-inner .map-geo-toggle-btn,
.mapas-chrome-inner .map-geo-picker-input,
.mapas-chrome-inner .btn {
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  box-shadow: none;
}
.mapas-chrome-inner .map-search input {
  background: transparent;
  color: var(--ui-fg);
}
.mapas-chrome-inner .map-search input::placeholder { color: var(--ui-muted); }
.mapas-chrome-inner .map-tools button:hover,
.mapas-chrome-inner .map-geo-toggle-btn:hover { background: var(--ui-hover); }
.mapas-chrome-inner .map-geo-toggle-btn.is-active {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-ink);
}
.mapas-chrome-inner .check,
.map-checks label.check,
.map-checks .check { color: var(--ui-fg) !important; font-size: 0.74rem !important; }
.map-checks input { accent-color: var(--ui-accent); }
.map-geo-picker-list {
  background: var(--ui-raised);
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  box-shadow: none;
  color: var(--ui-fg);
}
.mapas-pane .map-status {
  background: var(--ui-surface);
  color: var(--ui-fg);
  border: 1px solid var(--ui-line-strong);
  border-radius: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

/* ---------- Panel de flota ---------- */
.mapas-side { border-left: 1px solid var(--ui-line); }
.flota-tabs { border-bottom: 1px solid var(--ui-line); }
.flota-tab {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.flota-tab.active { border-bottom-color: var(--ui-accent); color: var(--ui-fg); }
.flota-toolbar { border-bottom: 1px solid var(--ui-line); }
.flota-toolbar input[type="search"],
.flota-toolbar select,
.flota-velo {
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
}
.flota-toolbar input[type="search"]:focus,
.flota-toolbar select:focus,
.flota-velo:focus { outline: none; border-color: var(--ui-accent); }
.flota-toolbar .check { color: var(--ui-fg); font-size: 0.76rem; }
.flota-alarmas summary {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.flota-card {
  background: var(--ui-bg);
  border-color: var(--ui-line);
  transition: border-color var(--t-out) var(--ease-out);
}
.flota-card:hover { border-color: var(--ui-line-strong); transition-duration: var(--t-in); }
.flota-card.selected { border-color: var(--ui-accent); box-shadow: inset 2px 0 0 var(--ui-accent); }
.fc-code { font-stretch: 125%; }
.flota-pin { transition: color var(--t-out) var(--ease-out); }

/* ---------- Movimiento: entradas 200 ms, salidas 140 ms, sin rebote ---------- */
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }

.view:not([hidden]),
.modal-form:not([hidden]) {
  animation: ui-fade-in var(--t-in) var(--ease-in) both;
}

.modal-backdrop,
.toast {
  opacity: 1;
  transition:
    opacity var(--t-out) var(--ease-out),
    display var(--t-out) allow-discrete,
    overlay var(--t-out) allow-discrete;
}
.modal-backdrop[hidden],
.toast[hidden] { opacity: 0; }
.modal-backdrop:not([hidden]),
.toast:not([hidden]) { transition-duration: var(--t-in); transition-timing-function: var(--ease-in); }
@starting-style {
  .modal-backdrop:not([hidden]),
  .toast:not([hidden]) { opacity: 0; }
}

.sidebar { transition-timing-function: var(--ease-out); }
.app-shell { transition-duration: var(--t-in); transition-timing-function: var(--ease-in); }
@media (max-width: 960px) {
  .sidebar { transition: transform var(--t-out) var(--ease-out); }
  .app-shell.sidebar-open .sidebar,
  html.sidebar-drawer-open .sidebar.is-drawer-portal { transition: transform var(--t-in) var(--ease-in); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}