/*
 * © Mytrak Technology. Desarrollado para uso exclusivo de Systrack+ (INFORMAC).
 * Prohibida su cesión, venta o uso fuera de esa plataforma.
 *
 * Paneles de clientes y de vehículos (12/11/2026).
 * Superficies sólidas en lugar de vidrio esmerilado, con la paleta de Systrack+.
 * Selectores: data-testid estables y la etiqueta legible de cada clase (-card, -avatar…),
 * nunca el hash, para que sobreviva a una nueva compilación del frontend.
 * Revertir: quitar el <link> de este archivo en nginx.
 */

/* ── Paleta: las variables del propio tema de Systrack+ (sirve en modo oscuro y claro) ── */
html {
  --pn-bg: var(--st-bg-elev, #0a0e1a);
  --pn-s1: var(--st-surface, #0f1420);
  --pn-s2: var(--st-surface-2, #141b2b);
  --pn-line: var(--st-surface-3, #1a2236);
  --pn-line-2: var(--st-border-2, #243049);
  --pn-deep: var(--st-bg, #05070d);
  --pn-text: var(--st-text, #e8edf5);
  --pn-text-2: var(--st-text-2, #cbd5e1);
  --pn-dim: var(--st-text-dim, #94a3b8);
  --pn-muted: var(--st-text-muted, #64748b);
  --pn-accent: #f97316;
  --pn-on: #22c55e;
  --pn-off: #ef4444;
  --pn-sel: color-mix(in srgb, #f97316 9%, var(--pn-s1));
  --pn-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ── Contenedor: fuera el vidrio ─────────────────────────── */
[data-testid="st-sidebar"] .MuiPaper-root {
  background: var(--pn-bg) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-testid="st-vehicle-panel"],
[data-testid="st-client-list"] {
  background: var(--pn-bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Controles comunes ──────────────────────────────────── */
[data-testid="st-sidebar"] [class*="-searchWrap"] .MuiInputBase-root {
  background: var(--pn-deep) !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
[data-testid="st-sidebar"] [class*="-searchWrap"] .MuiInputBase-root.Mui-focused {
  border-color: var(--pn-accent) !important;
}
[data-testid="st-vp-sort"],
[data-testid="st-vp-collapse"] {
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
[data-testid="st-vp-sort"]:hover,
[data-testid="st-vp-collapse"]:hover {
  background: var(--pn-s2) !important;
  border-color: var(--pn-line-2) !important;
}

/* ═════════════ PANEL DE VEHÍCULOS ═════════════ */

/* Chips de conteo con texto */
[data-testid="st-vp-chip-online"],
[data-testid="st-vp-chip-offline"] {
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden;
}
[data-testid="st-vp-chip-online"] { border-color: rgba(34, 197, 94, .28) !important; background: rgba(34, 197, 94, .06) !important; }
[data-testid="st-vp-chip-offline"] { border-color: rgba(239, 68, 68, .28) !important; background: rgba(239, 68, 68, .06) !important; }
[data-testid="st-vp-chip-online"][class*="-chipActive"] { border-color: var(--pn-on) !important; }
[data-testid="st-vp-chip-offline"][class*="-chipActive"] { border-color: var(--pn-off) !important; }
[data-testid="st-sidebar"] [class*="-chipTop"] {
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
[data-testid="st-sidebar"] [class*="-chipTop"]::after {
  order: 1;
  font: 500 12px/1 Inter, system-ui, sans-serif;
  color: var(--pn-text-2);
}
[data-testid="st-vp-chip-online"] [class*="-chipTop"]::after { content: "En línea"; }
[data-testid="st-vp-chip-offline"] [class*="-chipTop"]::after { content: "Fuera de línea"; }
[data-testid="st-sidebar"] [class*="-chipDot"] { order: 0; box-shadow: none !important; }
[data-testid="st-sidebar"] [class*="-chipValue"] {
  order: 2;
  margin-left: auto;
  font-family: var(--pn-mono) !important;
  font-weight: 600 !important;
}
[data-testid="st-sidebar"] [class*="-chipBar"] { height: 2px !important; box-shadow: none !important; opacity: .7; }

/* Agregar grupo: acción secundaria (el naranja queda para la unidad seleccionada) */
[data-testid="st-vp-new-group"] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--pn-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--pn-text-2) !important;
}
[data-testid="st-vp-new-group"] span { color: var(--pn-text-2) !important; }
[data-testid="st-vp-new-group"] svg { color: var(--pn-accent) !important; }
[data-testid="st-vp-new-group"]:hover { background: var(--pn-s1) !important; border-color: var(--pn-accent) !important; }
[data-testid="st-sidebar"] [class*="-brandDrive"] {
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Encabezado de grupo */
[data-testid="st-vp-group"] {
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
[data-testid="st-vp-group"] [class*="-folder"] { background: var(--pn-s2) !important; box-shadow: none !important; }
[data-testid="st-vp-group"] [class*="-name"] { color: var(--pn-text-2) !important; letter-spacing: .06em; }
[data-testid="st-vp-group"] [class*="-count"] {
  background: var(--pn-s2) !important;
  color: var(--pn-dim) !important;
  font-family: var(--pn-mono) !important;
}

/* Tarjeta de unidad */
[data-testid="st-vp-card"] {
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background-color .12s, border-color .12s;
}
[data-testid="st-vp-card"]:hover { background: var(--pn-s2) !important; border-color: var(--pn-line-2) !important; }
[data-testid="st-vp-card"][class*="-selected"] {
  background: var(--pn-sel) !important;
  border-color: rgba(249, 115, 22, .75) !important;
}
[data-testid="st-vp-icon"] {
  position: relative;
  background: var(--pn-s2) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
/* Punto de estado sobre el ícono: verde con reporte, rojo atenuado sin reporte */
[data-testid="st-vp-icon"]::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--pn-s1);
  background: var(--pn-on);
}
[data-testid="st-vp-icon"][class*="-iconDim"]::after { background: var(--pn-off); }
[data-testid="st-vp-name"] { color: var(--pn-text) !important; font-weight: 600 !important; }
[data-testid="st-vehicle-panel"] [class*="-meta"] {
  font-family: var(--pn-mono) !important;
  font-size: 11px !important;
  color: var(--pn-dim) !important;
}
[data-testid="st-vp-speed"] {
  background: var(--pn-deep) !important;
  border: 1px solid var(--pn-line) !important;
  color: var(--pn-text-2) !important;
  font-family: var(--pn-mono) !important;
  box-shadow: none !important;
}
/* Sin reportar hace días (marca que pone systrack-paneles.js) */
[data-testid="st-vp-card"][data-pn-viejo] { box-shadow: inset 3px 0 0 var(--pn-off) !important; }
[data-testid="st-vp-card"][data-pn-viejo] [class*="-meta"] span:last-child { color: #f87171 !important; }

/* ═════════════ PANEL DE CLIENTES ═════════════ */

/* Cabecera en una sola fila: ícono · título · plegar */
[data-testid="st-client-list"] > div:has(> [class*="-titles"]) {
  display: grid !important;
  grid-template-columns: 38px 1fr 30px;
  align-items: center;
  column-gap: 12px;
  padding: 12px 6px 8px 14px;
}
/* Plegar: pegado al borde derecho del panel */
[data-testid="st-client-list"] > div:has(> [class*="-titles"]) > [data-testid="st-vp-collapse"] {
  justify-self: end;
  width: 30px !important;
  height: 30px !important;
}
/* Sin el subtítulo «Elige uno para ver sus unidades» */
[data-testid="st-client-list"] [class*="-titles"] > [class*="-sub"] { display: none !important; }
[data-testid="st-client-list"] > div:has(> [class*="-titles"]) > [class*="-titles"] { width: auto !important; min-width: 0; }
[data-testid="st-client-list"] [class*="-brand"] {
  width: 38px !important;
  height: 38px !important;
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
[data-testid="st-client-list"] [class*="-title"] { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em; }
[data-testid="st-client-list"] [class*="-sub"] { color: var(--pn-muted) !important; letter-spacing: .08em; }

/* Franja de totales (la arma systrack-paneles.js; la línea original queda oculta) */
[data-testid="st-client-list-totals"][data-pn-oculto] { display: none !important; }
.pn-totales {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  margin: 4px 8px 10px;
  background: var(--pn-s1);
  border: 1px solid var(--pn-line);
  border-radius: 10px;
}
.pn-totales > div { padding: 9px 12px 10px; }
.pn-totales > div + div { border-left: 1px solid var(--pn-line); }
.pn-totales .pn-l {
  display: block;
  font: 600 10px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pn-muted);
}
.pn-totales .pn-n {
  display: block;
  margin-top: 4px;
  font: 600 19px/1.1 "JetBrains Mono", ui-monospace, Consolas, monospace;
  color: var(--pn-text);
}
.pn-totales .pn-on { color: var(--pn-on); }
.pn-totales .pn-pct { font-size: 12px; color: var(--pn-dim); margin-left: 6px; }

/* Fila de cliente */
[data-testid="st-client-list-item"] {
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background-color .12s, border-color .12s;
}
[data-testid="st-client-list-item"]:hover { background: var(--pn-s2) !important; border-color: var(--pn-line-2) !important; }
/* Identificador: iniciales en tono neutro (fuera los avatares de colores) */
[data-testid="st-client-list-item"] [class*="-avatar"] {
  background: var(--pn-s2) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line-2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--pn-text-2) !important;
  font-size: 12px !important;
  letter-spacing: .04em;
}
[data-testid="st-client-list-item"]:hover [class*="-avatar"] { color: var(--pn-accent) !important; border-color: rgba(249, 115, 22, .5) !important; }
[data-testid="st-client-list-item"] [class*="-name"] { color: var(--pn-text) !important; font-weight: 600 !important; }
/* Barra de % en línea: pista visible y relleno verde plano */
[data-testid="st-client-list-item"] [class*="-bar"]:not([class*="-barRow"]):not([class*="-barOn"]) {
  height: 6px !important;
  border-radius: 3px !important;
  background: var(--pn-line) !important;
}
[data-testid="st-client-list-item"] [class*="-barOn"] {
  border-radius: 3px !important;
  background: var(--pn-on) !important;
  background-image: none !important;
  box-shadow: none !important;
}
[data-testid="st-client-list-item"] [class*="-pct"] { color: var(--pn-dim) !important; font-size: 10.5px !important; }
[data-testid="st-client-list-item"] [class*="-total"]:not([class*="-totalUnit"]) {
  font-family: var(--pn-mono) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
[data-testid="st-client-list-item"] [class*="-totalUnit"] { font-family: Inter, system-ui, sans-serif !important; color: var(--pn-muted) !important; }
[data-testid="st-client-list-item"] [class*="-split"] { font-family: var(--pn-mono) !important; }
[data-testid="st-client-list-item"] [class*="-on"] { color: var(--pn-on) !important; }
[data-testid="st-client-list-item"] [class*="-dot"] { box-shadow: none !important; }
[data-testid="st-client-list-item"] [class*="-on"] [class*="-dot"] { background: var(--pn-on) !important; }

/* ═════════════ OTROS TABLEROS SIN VIDRIO ═════════════ */
[data-testid="st-topbar"] {
  background: var(--pn-deep) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--pn-line) !important;
}
[data-testid="st-bottom-nav"] {
  background: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.maplibregl-style-list,
.MuiPopover-paper,
.MuiMenu-paper {
  background-color: var(--pn-s1) !important;
  background-image: none !important;
  border: 1px solid var(--pn-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═════════════ BARRA INFERIOR SIEMPRE VISIBLE ═════════════ */
/* Con un panel abierto (Alertas, Mantenimiento, Reportes…) la barra queda encima para
   poder cambiar de opción sin cerrar primero. El contenedor no captura clics (pointer-events: none). */
[class*="-dock"]:has(> [data-testid="st-bottom-nav"]) { z-index: 1400 !important; }
/* Espacio abajo en los paneles laterales para que la barra no tape su contenido */
.MuiDrawer-paperAnchorRight { padding-bottom: 72px !important; box-sizing: border-box; }

/* ═════════════ TRANSICIÓN ENTRE OPCIONES ═════════════ */
/* El panel abierto se recoge (systrack-reportes-panel.js pone .pn-sale-*) y el nuevo se despliega.
   Se anima con clip-path, sin mover el panel: si se desplazara fuera de la pantalla, el foco
   que pone MUI al abrir desplazaría toda la página hacia un lado. */
@keyframes pn-entra-der { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pn-sale-der { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes pn-entra-geo { from { clip-path: inset(0 100% 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes pn-sale-geo { from { clip-path: inset(0 0 0 0 round 14px); } to { clip-path: inset(0 100% 0 0 round 14px); } }
.MuiDrawer-paperAnchorRight,
.pn-rep-panel:not(.pn-rep-oculto) { animation: pn-entra-der .26s cubic-bezier(.2, .8, .2, 1); }
[data-testid="st-geo-panel"] { animation: pn-entra-geo .22s cubic-bezier(.2, .8, .2, 1); }
.pn-sale-der { animation: pn-sale-der .2s cubic-bezier(.4, 0, 1, 1) forwards !important; }
.pn-sale-geo { animation: pn-sale-geo .2s cubic-bezier(.4, 0, 1, 1) forwards !important; }
@media (prefers-reduced-motion: reduce) {
  .MuiDrawer-paperAnchorRight, .pn-rep-panel, [data-testid="st-geo-panel"], .pn-sale-der, .pn-sale-geo { animation: none !important; }
}

/* ═════════════ CONTROLES DEL MAPA SIN CARRUSEL ═════════════ */
/* Los 8 controles de la derecha estaban en un carrusel de 4 con flechas ▲▼: ahora se ven todos. */
.st-ctrl-carousel .st-carousel-arrow { display: none !important; }
.st-ctrl-carousel .st-carousel-window {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
}
.st-ctrl-carousel .st-carousel-track {
  transform: none !important;
  translate: none !important;
  transition: none !important;
}
.st-ctrl-carousel .st-carousel-track > * {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.st-ctrl-carousel .st-carousel-track > .maplibregl-ctrl-group:not(:has(button, a, input)) { display: none !important; }