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

:root,
html:is([data-theme="dark"],[data-theme="gris-oscuro"]) {
  --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:is([data-theme="light"],[data-theme="gris-claro"]) {
  --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="gris-oscuro"] {
  --ui-bg: #2a2d32;
  --ui-surface: #33373d;
  --ui-raised: #3c4148;
  --ui-line: #4a4f57;
  --ui-line-strong: #5d636d;
  --ui-fg: #eceef1;
  --ui-muted: #a5abb5;
  --ui-accent: #ffb020;
  --ui-hover: rgba(255, 255, 255, 0.06);
  --ui-scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

html[data-theme="gris-claro"] {
  --ui-bg: #c6c9ce;
  --ui-surface: #d9dce0;
  --ui-raised: #cdd0d5;
  --ui-line: #b1b5bc;
  --ui-line-strong: #979ca5;
  --ui-fg: #16181c;
  --ui-muted: #4d545e;
  --ui-accent: #e09a00;
  --ui-hover: rgba(0, 0, 0, 0.06);
  --ui-scrim: rgba(18, 20, 24, 0.45);
  color-scheme: light;
}

html:is([data-theme="dark"],[data-theme="gris-oscuro"]),
html:is([data-theme="light"],[data-theme="gris-claro"]) {
  /* 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; }
/* Textos descriptivos de módulo: fuente normal (no ensanchada), sin versalitas ni espaciado amplio. */
.hint,
.despacho-meta,
.sub {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-stretch: 100%;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.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-family: "Microsoft YaHei UI Light", "Microsoft YaHei UI", "Segoe UI Light", "Segoe UI", sans-serif;
  font-stretch: 100%;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0;
}
/* Título del módulo Mapas */
.content.module-mapas .topbar h1 {
  font-family: "Microsoft YaHei UI Light", "Microsoft YaHei UI", "Segoe UI Light", "Segoe UI", sans-serif;
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0;
}
.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;
  /* Texto e iconos de la barra lateral: cerca del color de texto del tema (antes el gris atenuado). */
  color: color-mix(in srgb, var(--ui-fg) 88%, var(--ui-muted));
  position: relative;
  transition: background var(--t-out) var(--ease-out), color var(--t-out) var(--ease-out);
}
.nav-link svg,
.nav-link .nav-ico { opacity: 1; }
.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:is([data-theme="light"],[data-theme="gris-claro"]) .btn-sidebar-toggle {
  background: transparent;
  color: var(--ui-muted);
  border-radius: 6px;
}
.btn-sidebar-toggle:hover,
html:is([data-theme="light"],[data-theme="gris-claro"]) .btn-sidebar-toggle:hover {
  background: var(--ui-hover);
  color: var(--ui-fg);
}
.sidebar .btn-sidebar,
html:is([data-theme="light"],[data-theme="gris-claro"]) .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:is([data-theme="light"],[data-theme="gris-claro"]) .sidebar .btn-sidebar:hover {
  background: var(--ui-hover);
  color: var(--ui-fg);
  border-color: var(--ui-line-strong);
}
.nav-hint,
html:is([data-theme="light"],[data-theme="gris-claro"]) .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; }

/* Regla: todos los botones (.btn) miden lo mismo que los edits y selectores: alto --ctl-h (40 px; 32 px en Despacho y
   panel del mapa), letra 0.82rem, radio 6 px. Se usa min-height para que un texto largo crezca en vez de recortarse.
   Los botones compactos de barras densas (Rastreo, buscador de flota, mensajes) conservan su regla propia, más específica.
   En pantallas táctiles se mantiene el mínimo de 44 px. */
.btn {
  box-sizing: border-box;
  min-height: var(--ctl-h);
  padding: 0 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.2;
}
.btn[hidden] { display: none; }
@media (pointer: coarse) {
  .btn { min-height: max(var(--ctl-h), 44px); }
}

/* ---------- 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);
}
.content .maint-search input:focus,
.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
  border-color: var(--ui-accent);
  box-shadow: none;
  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);
  /* El contorno lo lleva la caja .map-search: sin esto el campo dibujaba un segundo borde dentro (Unidad y Control). */
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}
.mapas-chrome-inner .map-search:focus-within { border-color: var(--ui-accent); }
.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-filtros { border-bottom: 1px solid var(--ui-line); }
.flota-filtros input[type="search"],
.flota-filtros select {
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
}
.flota-filtros #flota-enviar-msg {
  background: var(--ui-accent);
  color: var(--ui-accent-fg, #14161a);
  border: 1px solid var(--ui-accent);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.flota-filtros #flota-enviar-msg:hover { filter: brightness(1.08); }
.flota-filtros input[type="search"]:focus,
.flota-filtros select:focus { outline: none; border-color: var(--ui-accent); }
.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 0 0 0 1px var(--ui-accent); } /* 1 px de borde + 1 px interior: 2 px en los cuatro lados */
.fc-code {
  font-family: "Microsoft YaHei UI Light", "Microsoft YaHei UI", "Segoe UI Light", "Segoe UI", sans-serif;
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0;
}
.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;
  }
}

/* ---------- Barra superior compacta: ahorra espacio arriba en todos los módulos ---------- */
/* Título y texto descriptivo en una sola línea, sin el espaciado ancho entre letras y palabras. */
.content .topbar,
.content.module-mapas .topbar { padding: 0.35rem 1.25rem; }
.content.content .topbar .topbar-left { flex-direction: row; align-items: baseline; gap: 0.4rem; }
.content .topbar .hint,
.content .topbar .despacho-meta { margin: 0; letter-spacing: 0; word-spacing: 0; }
.content .topbar h1 { line-height: 1.15; }
.views { padding-top: 0.5rem; }

/* Despacho: la vista llena hasta abajo (antes dejaba un hueco sin usar). */
@media (min-width: 961px) {
  /* Alto exacto: pantalla menos la barra superior y el relleno de #views (0.5rem arriba y abajo). Con muchas filas la rejilla
     se desplaza por dentro y la página no crece. */
  .content .view[data-view="despacho"]:not([hidden]) { height: calc(100dvh - var(--topbar-h, 2.7rem) - 1rem); min-height: 0; }
}
.views { padding-bottom: 0.5rem; }
/* Mapas: la barra superior mide ahora ~2.7rem; el mapa llena el resto de la pantalla. */
.content.module-mapas .mapas-shell { height: calc(100vh - var(--topbar-h, 2.7rem)); }

/* Despacho: columnas de los relojes (puntos de marcación) 10 px más angostas (antes 71 px). */
.despacho-grid th.rl,
.despacho-grid td.rl { width: 61px; min-width: 61px; max-width: 61px; padding-left: 0.2rem; padding-right: 0.2rem; }

/* Despacho: la fila seleccionada se enmarca por los cuatro lados (2 px ámbar): arriba y abajo en todas las celdas, el borde
   izquierdo en la primera y el derecho en la última. En las filas en ruta la barra celeste queda dentro del borde izquierdo. */
.content .despacho-grid tbody tr.selected td:first-child {
  box-shadow: inset 2px 0 0 var(--ui-accent), inset 0 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent);
}
.content .despacho-grid tbody tr.sal-e1.selected td:first-child,
.content .despacho-grid tbody tr.sal-e2.selected td:first-child {
  box-shadow: inset 2px 0 0 var(--ui-accent), inset 6px 0 0 #4aa8f0, inset 0 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent);
}
.content .despacho-grid tbody tr.selected td:last-child {
  box-shadow: inset -2px 0 0 var(--ui-accent), inset 0 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent);
}

/* Despacho: la columna SALIDA mide justo lo que ocupa su contenido (sin espacio sobrante a los lados). */
.despacho-grid th:nth-child(2),
.despacho-grid td:nth-child(2) { width: 1px; white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; }

/* Despacho: todas las columnas se ajustan al máximo a su contenido; la tabla ya no se estira al ancho de la ventana. */
.despacho-grid { width: 100%; min-width: 0; } /* columnas a su contenido y el sobrante se reparte entre ellas */
.despacho-grid th,
.despacho-grid td { width: 1px; white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; }
.despacho-grid th.rl,
.despacho-grid td.rl { width: 61px; padding-left: 0.2rem; padding-right: 0.2rem; }

/* Usuarios: vista rápida de permisos (etiquetas cortas; el nombre completo va en el hint de cada una). */
.grid td.perm-celda { white-space: normal; max-width: 52rem; line-height: 1.5; }
.perm-chip {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 0 0.45rem;
  border: 1px solid var(--ui-line-strong);
  border-radius: 999px;
  background: var(--ui-raised);
  color: var(--ui-fg);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.perm-chip:hover { opacity: 1; filter: brightness(1.15); }
/* Panorama: todos los permisos del catálogo; los que el usuario tiene van en color y los demás, apagados. */
.perm-chip.off { opacity: 0.32; background: transparent; border-color: var(--ui-line); color: var(--ui-muted); font-weight: 500; }
.perm-chip.on { background: color-mix(in srgb, #25965a 24%, var(--ui-surface)); border-color: #25965a; color: var(--ui-fg); }
.perm-chip.accion.on { background: color-mix(in srgb, var(--ui-accent) 26%, var(--ui-surface)); border-color: var(--ui-accent); }
.perm-chip.accion { border-style: dashed; }
.perm-chip.accion.on { border-style: solid; }
.perm-ninguno { color: var(--ui-muted); }

/* Vehículos: filtros de estado y de tipo de dispositivo junto al buscador. */
.maint-filtro { max-width: 13rem; min-width: 0; font-size: 0.8rem; }
.maint-filtro[hidden] { display: none !important; }
/* El título del módulo no se recorta: si falta sitio, se acorta el texto descriptivo. */
.content .topbar-left h1 { flex: none; }
.content .topbar-left .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Usuarios y Vehículos: la fila seleccionada se ve claramente (igual que en Despacho): fondo con tinte del acento,
   bordes superior e inferior de 2 px y barra lateral en la primera celda. */
#usuarios-grid tbody tr.selected td,
#vehiculos-grid tbody tr.selected td {
  background: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-surface));
  box-shadow: inset 0 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent);
}
#usuarios-grid tbody tr.selected td:first-child,
#vehiculos-grid tbody tr.selected td:first-child {
  box-shadow: inset 4px 0 0 var(--ui-accent), inset 0 2px 0 var(--ui-accent), inset 0 -2px 0 var(--ui-accent);
}
#usuarios-grid tbody tr,
#vehiculos-grid tbody tr { cursor: pointer; }

/* Regla: edits, listas y selectores de fecha sin sombras: solo un borde simple (en foco, el borde toma el acento). */
input, select, textarea { box-shadow: none !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--ui-accent, var(--accent)); }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { border: 1px solid var(--ui-line-strong, var(--border)); }

/* Base de todos los campos: borde simple de 1 px (sin el borde "inset" del navegador, que parece una sombra interior).
   :where() deja la especificidad en cero: cualquier estilo propio de un campo sigue mandando. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"]), select, textarea) {
  border: 1px solid var(--ui-line-strong, #343840);
  border-radius: 6px;
  background-color: var(--ui-bg, #0c0d0f);
  color: var(--ui-fg, #e9ebee);
}

/* Regla: todos los edits, selectores y combos tienen el mismo alto y tamaño de texto que el campo "Unidad" del despacho (2.5rem = 40 px).
   Excluye casillas, radios, rangos, colores, archivos, botones, áreas de texto y el formulario de login. */
:root { --ctl-h: 2.5rem; }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]):not(.field *),
select:not(.field *) {
  height: var(--ctl-h) !important;
  min-height: var(--ctl-h) !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 1rem !important; /* tamaño de texto por defecto de edits y selectores: 16 px (antes 18,67 px; bajado 2 puntos) */
}
/* Módulo Despacho y panel de Flota: edits 8 px más bajos (40 px -> 32 px); el botón «Enviar mensaje» del panel de flota
   tiene el mismo alto que los edits. */
.view[data-view="despacho"], #mapas-side { --ctl-h: 2rem; }
/* [Ver salida en despacho]: mismo formato que [Enviar mensaje] (ícono pequeño dentro del botón). */
.flota-filtros #flota-ver-salida {
  min-width: 0; box-sizing: border-box; font-size: 0.78rem; line-height: normal; padding: 0.2rem 0.35rem;
  overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.3rem; white-space: nowrap;
}
.flota-filtros #flota-ver-salida .btn-ico { width: 12px; height: 12px; flex: none; fill: currentColor; }
.flota-filtros #flota-ver-salida[hidden] { display: none; }
#flota-enviar-msg,
#flota-ver-salida {
  height: var(--ctl-h) !important;
  min-height: var(--ctl-h) !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Botones del panel de flota que actúan sobre la unidad seleccionada: mismo formato que [Enviar mensaje]. */
.flota-filtros #flota-rastrear,
.flota-filtros #flota-corretear,
.flota-filtros #flota-eventos-disp {
  min-width: 0; box-sizing: border-box; font-size: 0.78rem; line-height: normal; padding: 0.2rem 0.35rem;
  overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.3rem; white-space: nowrap;
  height: var(--ctl-h) !important; min-height: var(--ctl-h) !important; padding-top: 0 !important; padding-bottom: 0 !important;
}
.flota-filtros #flota-rastrear .btn-ico,
.flota-filtros #flota-corretear .btn-ico,
.flota-filtros #flota-eventos-disp .btn-ico { width: 12px; height: 12px; flex: none; fill: currentColor; }