/* CardLane CSS Overhaul - SaaS Premium Command Center Styling */

.dispatch-dashboard {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: calc(100vh - 70px);
  height: calc(100dvh - 70px);
  box-sizing: border-box;
  overflow: hidden;
}

/* Custom scrollbars inside dashboard */
.saas-cards-scroll-container::-webkit-scrollbar,
.copilot-chat-history::-webkit-scrollbar,
.location-dropdown::-webkit-scrollbar {
  width: 5px;
}
.saas-cards-scroll-container::-webkit-scrollbar-track,
.copilot-chat-history::-webkit-scrollbar-track,
.location-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.saas-cards-scroll-container::-webkit-scrollbar-thumb,
.copilot-chat-history::-webkit-scrollbar-thumb,
.location-dropdown::-webkit-scrollbar-thumb {
  background: var(--overlay-soft);
  border-radius: var(--radius-xs);
}
.saas-cards-scroll-container::-webkit-scrollbar-thumb:hover,
.copilot-chat-history::-webkit-scrollbar-thumb:hover,
.location-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--overlay-strong);
}

/* 4. KPI Strip Row */
.kpi-strip-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  flex-shrink: 0;
  width: 100%;
}

.kpi-card-saas {
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-sizing: border-box;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.kpi-card-saas:hover {
  border-color: var(--overlay-strong);
  transform: translateY(-1px);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-icon {
  font-size: 0.85rem;
}

.kpi-value {
  font-family: var(--font-display), sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.25;
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.65rem;
  font-weight: 600;
}
.kpi-trend.trend-up {
  color: var(--color-success);
}
.kpi-trend.trend-down {
  color: var(--color-danger);
}
.kpi-trend.trend-neutral {
  color: var(--color-text-muted);
}

/* Split screen layout */
.dashboard-split {
  display: flex;
  gap: var(--space-5);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left panel: Lane Board */
.left-panel-saas {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  overflow: hidden;
}

.lane-board-header h3 {
  font-family: var(--font-display), sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  letter-spacing: 0.3px;
}

/* Filters and Tuners */
.saas-filter-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

.saas-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: end;
}

.saas-filter-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.saas-filter-input-group.flex-row-end {
  justify-content: flex-end;
}

.saas-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saas-input-spinner,
.saas-select {
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.saas-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.65rem center;
  background-repeat: no-repeat;
  background-size: 0.9rem;
  padding-right: var(--space-8);
}

.saas-input-spinner:focus,
.saas-select:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-surface-800);
}

.saas-btn-primary {
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 33px;
  box-shadow: var(--glow-accent);
  width: 100%;
}

.saas-btn-primary:hover:not(:disabled) {
  background: var(--color-accent-700);
  box-shadow: var(--glow-accent);
}

.saas-btn-primary:disabled {
  background: var(--color-slate-800);
  color: var(--color-slate-600);
  cursor: not-allowed;
  box-shadow: none;
}

/* Tuning controls */
.saas-finance-tuning-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--overlay-subtle);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.finance-tuning-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tuning-inputs-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.tuning-input-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--space-3);
  color: var(--color-text-muted);
}

.tuning-input-item input {
  width: 55px;
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-1);
  color: var(--color-text);
  font-size: var(--space-3);
  font-weight: 600;
  text-align: center;
}

.tuning-input-item input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Scroll load container */
.saas-cards-scroll-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  min-height: 0;
}

.saas-loading-state,
.saas-no-results-state {
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.saas-loading-state {
  border-color: rgba(var(--color-accent-rgb), 0.2);
  color: var(--color-accent-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.saas-loading-state::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(var(--color-accent-rgb), 0.1);
  border-top: 2.5px solid var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.saas-no-results-state h4 {
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-1) 0;
  font-size: var(--space-4);
}

.no-res-icon {
  font-size: var(--space-6);
  color: var(--color-slate-600);
}

.no-res-hint {
  color: var(--color-text-subtle);
  font-size: 0.78rem;
  margin-top: var(--space-2);
}

/* Group title in the location dropdown (migrado desde inline — Slice 3b) */
.location-group-title {
  padding: var(--space-2) var(--space-3);
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-text-subtle);
  border-bottom: 1px solid var(--overlay-faint);
}

/* ── Search states: skeleton de carga + error con dirección (Slice 3b) ── */
.saas-search-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.saas-skeleton-card {
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-line,
.skeleton-chip {
  position: relative;
  overflow: hidden;
  background-color: var(--overlay-soft);
  border-radius: var(--radius-sm);
}

.skeleton-line::after,
.skeleton-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--overlay-medium), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-title { height: 0.9rem; width: 60%; }
.skeleton-meta  { height: 0.7rem; width: 40%; }
.skeleton-chip-row { display: flex; gap: var(--space-2); }
.skeleton-chip { height: 1.4rem; width: 4.5rem; border-radius: var(--radius-pill); }

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

.saas-error-state {
  background-color: var(--color-surface);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.error-state-icon {
  font-size: var(--space-8);
  color: var(--color-danger);
}

.saas-error-state h4 {
  color: var(--color-text);
  margin: 0;
  font-size: var(--space-4);
}

.saas-error-state p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
  max-width: 32ch;
}

.saas-retry-btn {
  margin-top: var(--space-2);
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line::after,
  .skeleton-chip::after {
    animation: none;
  }
}

/* Load Cards styling */
.saas-load-card {
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.saas-load-card:hover {
  border-color: var(--overlay-strong);
  background-color: var(--color-surface-800);
  transform: translateY(-1.5px);
}

.saas-active-card {
  border-color: var(--color-accent) !important;
  background-color: rgba(var(--color-accent-rgb), 0.04) !important;
  box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.12);
}

.saas-active-card-success {
  border-color: var(--color-success) !important;
  background-color: rgba(34, 197, 94, 0.04) !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.12);
}

.saas-load-card.no-hover:hover {
  transform: none;
  background-color: rgba(var(--color-accent-rgb), 0.04);
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.saas-route-title {
  font-family: var(--font-display), sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.saas-route-title-small {
  font-family: var(--font-display), sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.route-arrow {
  color: var(--color-accent);
  font-size: 0.8rem;
}

.saas-status-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saas-status-badge.margin-good {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
}
.saas-status-badge.margin-avg {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}
.saas-status-badge.margin-poor {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.price-tag {
  font-family: var(--font-display), sans-serif;
  font-size: var(--space-5);
  font-weight: 800;
  color: var(--color-success);
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}

.price-tag-small {
  font-family: var(--font-display), sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-success);
}

.card-meta-line {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.return-meta-line {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.card-details-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  border-top: 1px solid var(--overlay-subtle);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}

.detail-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}

.detail-col .lbl {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-col .val {
  font-family: var(--font-display), sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
}

.detail-col .val.text-success-val {
  color: var(--color-success);
}

/* Details and Backhaul View */
.saas-details-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.saas-back-btn {
  background-color: var(--overlay-faint);
  border: 1px solid var(--overlay-soft);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
}

.saas-back-btn:hover {
  background-color: var(--overlay-soft);
  color: var(--color-text);
  border-color: var(--overlay-strong);
}

.saas-selected-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saas-backhauls-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex-shrink: 0;
}

.saas-backhauls-header h4 {
  font-family: var(--font-display), sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

.saas-backhauls-header .hint-text {
  font-size: 0.7rem;
  color: var(--color-text-subtle);
  margin: 0;
}

/* Returns Scroll container */
.backhauls-scroll {
  flex: 1;
}

.return-card {
  border-color: var(--overlay-subtle);
}

.return-badge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.time-diff-badge,
.deadhead-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}

.time-diff-badge {
  background-color: rgba(var(--color-accent-rgb), 0.08);
  color: var(--color-accent-400);
  border: 1px solid rgba(var(--color-accent-rgb), 0.15);
}

.deadhead-badge {
  background-color: rgba(239, 68, 68, 0.08);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Combined Financial Panel */
.saas-combined-summary-panel {
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
  box-sizing: border-box;
}

.saas-combined-summary-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  letter-spacing: 0.5px;
}

.badge-combined-margin {
  background-color: rgba(34, 197, 94, 0.08);
  color: var(--color-success);
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-xs);
  font-weight: 700;
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.combined-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  text-align: center;
}

.combined-metrics-row .lbl {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.combined-metrics-row .val {
  font-family: var(--font-display), sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
}

.combined-metrics-row .val.text-success-val {
  color: var(--color-success);
}

.combined-metrics-row .val.text-danger-val {
  color: var(--color-danger);
}

.combined-metrics-row .val.text-success-val-bold {
  color: var(--color-success);
  font-size: 0.85rem;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.15);
}

/* Right panel: Route Map */
.right-panel-saas {
  flex: 1.4;
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--shadow-lg);
}

.route-map-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
}

/* FIX: el contenedor del mapa no tenía altura -> Leaflet quedaba a 0px / invisible */
.map-view-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Leyenda de las 3 líneas (pieza signature) */
.route-map-legend {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 1000;
  background-color: var(--color-surface);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
}

.legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.legend-swatch {
  width: 18px;
  height: 3px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.swatch-outbound { background-color: var(--color-accent); }
.swatch-deadhead { background: repeating-linear-gradient(90deg, var(--color-danger) 0 4px, transparent 4px 7px); }
.swatch-backhaul { background-color: var(--color-success); }

/* Animación de trazado de ruta (sólo líneas sólidas; el deadhead conserva su patrón) */
.route-line-animated {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: route-draw 0.9s ease-out forwards;
}

@keyframes route-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .route-line-animated {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

.map-title-bar {
  height: 45px;
  border-bottom: 1px solid var(--overlay-soft);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  font-family: var(--font-display), sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  flex-shrink: 0;
  background-color: var(--color-surface-800);
  box-sizing: border-box;
}

/* Map Overlay Card */
.saas-map-overlay-card {
  position: absolute;
  top: var(--space-16);
  left: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
  width: 210px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}

.overlay-title {
  font-family: var(--font-display), sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid var(--overlay-soft);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
  letter-spacing: 0.5px;
}

.overlay-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.overlay-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
}

.overlay-metric .lbl {
  color: var(--color-text-muted);
  font-weight: 500;
}

.overlay-metric .val {
  font-weight: 700;
  color: var(--color-text);
}

.overlay-metric .val.text-success-val-bold {
  color: var(--color-success);
  font-weight: 800;
}

.overlay-metric .val.text-danger-val {
  color: var(--color-danger);
}

/* Map Empty State */
.saas-map-empty-state-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(11, 14, 22, 0.82);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-8);
}

.empty-state-container {
  text-align: center;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.empty-icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(var(--color-accent-rgb), 0.1);
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.35rem;
  box-shadow: 0 0 15px rgba(var(--color-accent-rgb), 0.25);
}

.empty-state-container h3 {
  font-family: var(--font-display), sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.empty-state-container p {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* 7. AI Copilot Floating Widget */
.saas-copilot-widget {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-lg);
  z-index: 2000;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.saas-copilot-widget.copilot-collapsed {
  width: 170px;
  height: 42px;
  overflow: hidden;
}

.saas-copilot-widget.copilot-expanded {
  width: 320px;
  height: 410px;
}

.copilot-widget-header {
  height: 42px;
  padding: 0 var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--overlay-subtle);
  flex-shrink: 0;
  background-color: var(--color-surface-800);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.copilot-robot-icon {
  color: var(--color-accent);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.45);
}

.copilot-header-title {
  font-family: var(--font-display), sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.copilot-toggle-btn {
  background: none;
  border: none;
  color: var(--color-text-subtle);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copilot-widget-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background-color: var(--color-bg-900);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-sizing: border-box;
}

.copilot-chat-history {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.chat-bubble-container {
  display: flex;
  width: 100%;
}

.chat-bubble-container.copilot-sent {
  justify-content: flex-start;
}

.chat-bubble-container.user-sent {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.copilot-sent .chat-bubble {
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-subtle);
  color: var(--color-text);
}

.user-sent .chat-bubble {
  background-color: var(--color-accent);
  color: white;
  border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md);
}

.bubble-text {
  margin: 0;
}

/* Copilot Typing Bubble */
.copilot-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-subtle);
  border-radius: var(--radius-md);
  min-height: 25px;
  box-sizing: border-box;
}

.copilot-typing .dot {
  width: 5px;
  height: 5px;
  background-color: var(--color-text-subtle);
  border-radius: 50%;
  display: inline-block;
  animation: copilot-bounce 1.4s infinite ease-in-out both;
}

.copilot-typing .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.copilot-typing .dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes copilot-bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 
  40% { 
    transform: scale(1.0);
  }
}

/* Chat Recommendation Card */
.chat-recommendation-card {
  margin-top: var(--space-2);
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-sizing: border-box;
}

.rec-card-title {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  letter-spacing: 0.5px;
}

.rec-card-route {
  font-family: var(--font-display), sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-text);
}

.rec-card-kpis {
  display: flex;
  gap: var(--space-3);
  border-top: 1px solid var(--overlay-faint);
  padding-top: var(--space-1);
  margin-top: var(--space-1);
}

.rec-card-kpis div {
  flex: 1;
}

.rec-card-kpis .lbl {
  font-size: 0.55rem;
  color: var(--color-text-subtle);
  display: block;
  text-transform: uppercase;
}

.rec-card-kpis .val {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text);
}

.rec-card-kpis .val.text-success-val {
  color: var(--color-success);
}

.rec-card-kpis .val.text-danger-val {
  color: var(--color-danger);
}

.rec-apply-btn {
  background-color: rgba(var(--color-accent-rgb), 0.15);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  color: var(--color-accent-400);
  font-weight: 700;
  font-size: 0.7rem;
  padding: var(--space-1);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  margin-top: var(--space-1);
  box-sizing: border-box;
}

.rec-apply-btn:hover {
  background-color: var(--color-accent);
  color: white;
}

/* Quick Actions in chat */
.copilot-quick-actions {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--overlay-faint);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background-color: var(--color-surface-800);
  flex-shrink: 0;
  box-sizing: border-box;
}

.quick-action-label {
  font-size: 0.6rem;
  color: var(--color-text-subtle);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-action-buttons {
  display: flex;
  gap: var(--space-2);
}

.quick-btn {
  background-color: var(--overlay-faint);
  border: 1px solid var(--overlay-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
  font-size: 0.68rem;
  color: var(--color-text-muted);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.quick-btn:hover {
  background-color: var(--overlay-soft);
  color: var(--color-text);
  border-color: var(--overlay-medium);
}

/* Input Form */
.copilot-input-form {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--overlay-subtle);
  display: flex;
  gap: var(--space-2);
  background-color: var(--color-surface);
  flex-shrink: 0;
  box-sizing: border-box;
}

.copilot-chat-input {
  flex: 1;
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-size: 0.78rem;
  box-sizing: border-box;
}

.copilot-chat-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.copilot-chat-submit-btn {
  background-color: var(--color-accent);
  border: none;
  color: white;
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--space-3);
  flex-shrink: 0;
  box-sizing: border-box;
}

.copilot-chat-submit-btn:hover {
  background-color: var(--color-accent-700);
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Custom leaflet pin adjustments */
.custom-map-pin-saas {
  transition: transform 0.2s ease;
}
.custom-map-pin-saas:hover {
  transform: scale(1.15) translateZ(0);
}

/* Responsive styles */
@media (max-width: 1200px) {
  .kpi-strip-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .dispatch-dashboard {
    height: auto;
    overflow: auto;
  }
  
  .dashboard-split {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  
  .left-panel-saas {
    max-height: 550px;
    overflow: visible;
  }
  
  .saas-cards-scroll-container {
    max-height: 400px;
  }
  
  .right-panel-saas {
    height: 400px;
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .kpi-strip-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .saas-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Lane Board en MÓVIL: linealizado, scroll de página (app nativa) ──────
   En móvil el tablero NO usa altura fija ni paneles lado a lado ni cajas de
   scroll anidadas: todo fluye en una sola columna y scrollea la página, así
   se ven TODAS las rutas y nunca aparece scroll horizontal ni fondo blanco. */
@media (max-width: 992px) {
  .dispatch-dashboard {
    height: auto;
    overflow: visible;
    padding: var(--space-4) var(--space-4);
    gap: var(--space-4);
  }
  .dashboard-split {
    flex-direction: column;
    height: auto;
    overflow: visible;
    gap: var(--space-4);
  }
  .left-panel-saas,
  .right-panel-saas {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* La lista de cargas fluye completa — sin ventana con scroll propio. */
  .left-panel-saas {
    max-height: none;
    overflow: visible;
  }
  .saas-cards-scroll-container {
    max-height: none;
    overflow: visible;
    flex: none;
    padding-right: 0;
  }
  /* El mapa mantiene una altura propia (Leaflet necesita altura explícita)
     y va debajo de la lista. */
  .right-panel-saas {
    height: 320px;
    min-height: 320px;
  }
  /* Nada dentro del tablero debe exceder el ancho de la pantalla. */
  .dispatch-dashboard,
  .dispatch-dashboard * {
    max-width: 100%;
  }
}

/* ==========================================================================
   MINI TMS STYLING (Dispatch Board, Fleet Registry, Modals)
   ========================================================================== */

/* 1. Main Views and Containers */
.tms-view-container {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow-y: auto;
  flex: 1;
  height: 100%;
  box-sizing: border-box;
}

.view-title-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.view-title-bar h2 {
  font-family: var(--font-display), sans-serif;
  font-size: var(--space-6);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.view-subtitle {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* 2. KPI Strip for TMS */
.tms-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* 3. TMS Content Panel */
.tms-content-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
}

.panel-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-bottom: 1px solid var(--overlay-subtle);
  padding-bottom: var(--space-3);
}

.panel-header-row h3 {
  font-family: var(--font-display), sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
/* Encabezados/textos "pelados" dentro de paneles: Bootstrap (inyectado por JS,
   gana en la cascada) los pintaba en #212529 (invisible en oscuro). Los
   selectores con clase suben la especificidad para recuperar el color claro. */
.tms-content-panel h3,
.tms-content-panel h4 { color: var(--color-text); }
.tms-content-panel p { color: var(--color-text-muted); }

.search-wrapper {
  position: relative;
  width: 280px;
}

.search-wrapper .search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: 0.8rem;
}

.tms-search-input {
  width: 100%;
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
  color: var(--color-text);
  font-size: 0.78rem;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.tms-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--ring-accent);
}

/* 4. Empty State */
.tms-empty-state {
  padding: var(--space-16) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.tms-empty-state .empty-icon {
  font-size: 2.2rem;
  color: var(--color-slate-600);
  margin-bottom: var(--space-2);
}

.tms-empty-state h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.tms-empty-state p {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  max-width: 400px;
  line-height: 1.5;
  margin: 0;
}

/* 5. Dispatch Table */
.tms-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}
/* Los paneles/vista deben poder encogerse por debajo del ancho de la tabla
   para que el wrapper sea el contexto de scroll (evita que la columna "Acción"
   se corte a la derecha). */
.tms-view-container,
.tms-content-panel { min-width: 0; }

.tms-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.78rem;
}

.tms-table th {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--overlay-subtle);
}

.tms-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--overlay-faint);
  color: var(--color-text);
}
/* Bootstrap .text-primary/.text-muted pintaban las celdas en un color de tema
   claro (invisible sobre asfalto): las forzamos al lenguaje oscuro. */
.tms-table td.text-primary,
.tms-table td .text-primary { color: var(--color-text) !important; }
.tms-table td.text-muted,
.tms-table td .text-muted { color: var(--color-text-muted) !important; }

.tms-row:hover {
  background-color: var(--overlay-faint);
}

.trip-id-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.trip-code {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent-400);
}

.trip-date {
  font-size: 0.65rem;
  color: var(--color-text-subtle);
}

.route-flow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.city-tag {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  font-weight: 600;
  font-size: 0.72rem;
}

.origin-tag {
  background-color: rgba(var(--color-accent-rgb), 0.08);
  color: var(--color-accent-400);
  border: 1px solid rgba(var(--color-accent-rgb), 0.15);
}

.destiny-tag {
  background-color: rgba(239, 68, 68, 0.08);
  color: var(--color-danger-300);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.return-tag {
  background-color: rgba(245, 158, 11, 0.08);
  color: var(--color-warning-400);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.final-tag {
  background-color: rgba(34, 197, 94, 0.08);
  color: var(--color-success-300);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.flow-arrow {
  color: var(--color-slate-600);
  font-size: 0.7rem;
}

.flow-arrow-green {
  color: var(--color-success);
  font-size: 0.7rem;
}

.trip-submeta {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.separator {
  color: var(--color-slate-700);
}

.resource-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.res-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-weight: 500;
}

.financials-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.val-gross {
  color: var(--color-text-muted);
}

.val-net {
  font-weight: 600;
}

.val-margin {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
}

/* 6. Status Badges */
.tms-status-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
}

.status-assigned {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-transit {
  background-color: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-accent-500);
  border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.status-delivered {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-canceled {
  background-color: rgba(100, 116, 139, 0.1);
  color: var(--color-text-subtle);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* 7. Action buttons */
.tms-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-sm {
  padding: var(--space-1) var(--space-2);
  font-size: 0.72rem;
  border-radius: var(--radius-xs);
}

.btn-outline-primary {
  border-color: rgba(var(--color-accent-rgb), 0.3);
  color: var(--color-accent-400);
}

.btn-outline-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.btn-outline-success {
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--color-success-300);
}

.btn-outline-success:hover {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.btn-outline-danger {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--color-danger-300);
}

.btn-outline-danger:hover {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
}

/* 8. Subtabs for Fleet Registry */
.tms-subtabs-row {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--overlay-soft);
  padding-bottom: 1px;
}

.tms-subtabs-nav {
  display: inline-flex; gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.tms-subtab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  padding: 7px 16px;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tms-subtab-btn:hover { color: var(--color-text); }
.tms-subtab-btn.active {
  background: var(--color-ink); color: var(--color-on-ink);
  box-shadow: var(--shadow-sm);
}
.tms-subtab-btn.active i { color: var(--color-on-ink); }

/* 9. Inline registration forms */
.tms-inline-form-panel {
  background-color: var(--color-surface-800);
  border: 1px dashed var(--overlay-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.tms-inline-form-panel h4 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tms-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: flex-end;
}

.tms-input {
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-size: 0.78rem;
  box-sizing: border-box;
}

.tms-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* 10. Fleet Cards Grid */
.tms-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.tms-asset-card {
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.tms-asset-card:hover {
  transform: translateY(-2px);
  border-color: var(--overlay-medium);
  box-shadow: var(--shadow-md);
}

.tms-asset-card .card-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tms-asset-card .asset-id {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}

.status-badge-dot {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.status-badge-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-badge-dot.status-green {
  color: var(--color-success);
}

.status-badge-dot.status-green::before {
  background-color: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}

.status-badge-dot.status-blue {
  color: var(--color-accent-400);
}

.status-badge-dot.status-blue::before {
  background-color: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent);
}

.card-body-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--space-3);
}

.card-body-details .detail-row {
  display: flex;
  justify-content: space-between;
}

.card-body-details .lbl {
  color: var(--color-text-subtle);
}

.card-body-details .val {
  color: var(--color-text);
  font-weight: 500;
}

.val-trip-id {
  font-family: monospace;
  color: var(--color-accent-400);
  font-weight: 700;
}

.active-link-row {
  border-top: 1px dashed var(--overlay-faint);
  padding-top: var(--space-1);
}

/* 11. Modal Overlay and Cards */
.tms-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(8, 11, 18, 0.72);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tms-modal-card {
  width: 480px;
  max-width: 90%;
  background-color: var(--color-surface);
  border: 1px solid var(--overlay-medium);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  animation: modal-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tms-modal-card .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--overlay-subtle);
  padding-bottom: var(--space-3);
}

.tms-modal-card .modal-header h3 {
  font-family: var(--font-display), sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.tms-modal-card .close-btn {
  background: none;
  border: none;
  color: var(--color-text-subtle);
  font-size: var(--space-6);
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1;
  padding: 0;
}

.tms-modal-card .close-btn:hover {
  color: var(--color-text);
}

.tms-modal-card .modal-body {
  padding: var(--space-5) 0 var(--space-1) 0;
}

.modal-route-summary {
  background-color: var(--color-surface-800);
  border: 1px solid var(--overlay-faint);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-sizing: border-box;
}

.modal-route-summary .summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.modal-route-summary .route-lbl {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--color-text-subtle);
}

.modal-route-summary .route-val {
  font-weight: 600;
  color: var(--color-text);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--overlay-subtle);
  padding-top: var(--space-4);
}

/* Cost allocation Pure CSS charts */
.financials-breakdown-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.segmented-bar-chart {
  display: flex;
  height: 35px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--overlay-subtle);
}

.bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  transition: width 0.3s ease;
  overflow: hidden;
  white-space: nowrap;
}

.segment-fuel { background-color: var(--color-danger); }
.segment-driver { background-color: var(--color-warning); }
.segment-other { background-color: var(--color-accent-500); }
.segment-net { background-color: var(--color-success-600); }

.chart-legend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.color-fuel { background-color: var(--color-danger); }
.color-driver { background-color: var(--color-warning); }
.color-other { background-color: var(--color-accent-500); }
.color-net { background-color: var(--color-success-600); }

/* Dashboard layout */
.dashboard-grid-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-5);
  flex: 1;
}

.dashboard-col-left, .dashboard-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.badge-ranking {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: var(--radius-lg);
}

.rank-1 { background-color: rgba(245, 158, 11, 0.15); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.3); }
.rank-2 { background-color: rgba(148, 163, 184, 0.15); color: var(--color-text-muted); border: 1px solid rgba(148, 163, 184, 0.3); }
.rank-3 { background-color: rgba(180, 83, 9, 0.15); color: var(--color-warning-700); border: 1px solid rgba(180, 83, 9, 0.3); }
.rank-4, .rank-5 { background-color: var(--overlay-subtle); color: var(--color-text-subtle); }

/* Asset capacity trackers */
.capacity-split-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.capacity-col {
  background: var(--overlay-faint);
  border: 1px solid var(--overlay-faint);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.capacity-radial-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.capacity-num {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-display), sans-serif;
  color: var(--color-text);
}

.capacity-num .lbl {
  font-size: 0.72rem;
}
.capacity-num .lbl.text-muted { color: var(--color-text-muted) !important; }

.capacity-pct {
  font-size: 0.76rem;
  font-weight: 700;
}

.capacity-bars-track {
  width: 100%;
  height: 6px;
  background-color: var(--overlay-soft);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.capacity-bar-fill {
  height: 100%;
  border-radius: var(--radius-xs);
}

.capacity-bar-fill.color-blue { background-color: var(--color-accent-500); }
.capacity-bar-fill.color-green { background-color: var(--color-success-600); }

.badge-cap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.badge-cap .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.bg-green { background-color: var(--color-success-600); }
.bg-blue { background-color: var(--color-accent-500); }
.bg-red { background-color: var(--color-danger); }
.bg-neutral { background-color: var(--color-text-subtle); }

/* DOT Alerts Feed */
.alert-count-badge {
  padding: var(--space-1) var(--space-2);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
}

.bg-danger-soft {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.dashboard-alerts-history-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

.dashboard-alert-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  align-items: flex-start;
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.12);
}

.alert-warning .alert-item-icon {
  color: var(--color-warning);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.12);
}

.alert-danger .alert-item-icon {
  color: var(--color-danger);
}

.alert-info {
  background-color: rgba(var(--color-accent-rgb), 0.04);
  border-color: rgba(var(--color-accent-rgb), 0.12);
}

.alert-info .alert-item-icon {
  color: var(--color-accent-500);
}

.alert-item-icon {
  font-size: 0.95rem;
  margin-top: var(--space-1);
}

.alert-item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.alert-item-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
}

.alert-item-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* Trip tracking drawer in Dispatch Board */
.trip-detail-drawer {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.stepper-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--space-2);
}

.stepper-node {
  display: flex;
  gap: var(--space-3);
  position: relative;
  padding-bottom: var(--space-4);
}

.stepper-node:last-child {
  padding-bottom: 0;
}

.stepper-line {
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background-color: var(--overlay-soft);
  z-index: 1;
}

.stepper-node:last-child .stepper-line {
  display: none;
}

.stepper-node.active .stepper-line {
  background-color: var(--color-success-600);
}

.stepper-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-slate-800);
  border: 2px solid var(--overlay-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  z-index: 2;
  transition: all 0.2s ease;
}

.stepper-node.active .stepper-circle {
  background-color: var(--color-success-600);
  border-color: var(--color-success-600);
  color: white;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.stepper-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stepper-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.stepper-node.active .stepper-title {
  color: var(--color-text);
}

.stepper-time {
  font-size: 0.65rem;
  color: var(--color-text-subtle);
}

/* Service logs & detail items */
.card-maintenance-mode {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: linear-gradient(180deg, var(--color-surface) 0%, rgba(239, 68, 68, 0.03) 100%) !important;
}

.tms-small-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-1);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
}

.bg-danger-soft { background-color: rgba(239, 68, 68, 0.15); color: var(--color-danger); }
.bg-info-soft { background-color: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent-500); }
.bg-neutral-soft { background-color: var(--overlay-subtle); color: var(--color-text-muted); }
/* Modal de confirmación (despacho) en móvil: más ancho, sin fuga interna */
@media (max-width: 560px) {
  .tms-modal-card { max-width: 94%; padding: var(--space-5); }
  .tms-modal-card .modal-body * { max-width: 100%; }
  .tms-modal-card .modal-footer { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════════════
   MÓVIL/TABLET (≤992px): layouts de 2 columnas → 1 columna, y TABLAS →
   TARJETAS APILADAS (etiqueta: valor). Elimina el scroll horizontal de todas
   las pantallas con tabla (Tablero, Cargas, Flota, Despacho, Conductores).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  /* Grid del dashboard y contenedores → una sola columna, sin desbordar */
  .dashboard-grid-layout { grid-template-columns: 1fr; }
  .dashboard-col-left, .dashboard-col-right,
  .tms-content-panel, .tms-view-container {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
  .tms-view-container { padding: var(--space-4); }

  /* La tabla deja de scrollear en horizontal: se transforma en tarjetas */
  .tms-table-wrapper { overflow-x: visible; max-height: none !important; }
  .tms-table,
  .tms-table thead,
  .tms-table tbody,
  .tms-table tr,
  .tms-table th,
  .tms-table td { display: block; width: auto; }

  /* Encabezados ocultos (cada celda lleva su propia etiqueta) */
  .tms-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Cada fila = una tarjeta */
  .tms-table tr {
    background: var(--color-surface);
    border: 1px solid var(--overlay-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-4);
  }
  /* Cada celda = fila etiqueta:valor */
  .tms-table td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    padding: 7px 0;
    border: none;
    border-bottom: 1px solid var(--overlay-faint);
    text-align: right;
    font-size: 0.85rem;
    min-height: 0;
  }
  .tms-table td:last-child { border-bottom: none; }
  .tms-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--color-text-muted);
  }
  /* Celda sin etiqueta (p.ej. estado vacío con colspan): centrada, sin ::before */
  .tms-table td:not([data-label]) { justify-content: center; text-align: center; }
  .tms-table td:not([data-label])::before { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP (≥993px) — Buscador en modo NAVEGACIÓN: los resultados dominan.
   Antes el tablero tenía alto fijo de pantalla con overflow oculto, y como el
   formulario es alto, la lista quedaba aplastada (~114px). Ahora, cuando se
   está navegando la lista (sin mapa), el tablero fluye/scrollea y la lista de
   cargas recibe una altura mínima grande. El modo DETALLE (con mapa) no se toca.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 993px) {
  /* Modo navegación (lista): el tablero fluye y los resultados dominan.
     EXCEPTO cuando hay un detalle abierto (.lb-drawer): ahí el tablero vuelve a
     alto fijo de pantalla para que el drawer tenga su PROPIO scroll y la página
     de atrás no se mueva (evita que el detalle quede atado al scroll general). */
  .dispatch-dashboard:has(.dashboard-split.browsing):not(:has(.lb-drawer)) {
    height: auto;
    min-height: calc(100dvh - 70px);
    overflow-y: auto;
    gap: var(--space-3);            /* menos aire entre secciones apiladas */
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .dashboard-split.browsing { flex: none; overflow: visible; }
  .dashboard-split.browsing .left-panel-saas { overflow: visible; gap: var(--space-3); }
  .dashboard-split.browsing .saas-cards-scroll-container {
    min-height: 58vh;
    max-height: none;
    overflow: visible;   /* scrollea el tablero completo, no una cajita */
  }
  /* Formulario/controles más compactos para que los resultados se vean de una */
  .dashboard-split.browsing .lb-driver-scope { margin-bottom: 0; padding: 6px 12px; }
  .dashboard-split.browsing .lb-market-row { margin-top: 0; }
  .dashboard-split.browsing .lb-controls { margin: 0 0 var(--space-2); }
}