/*
 * @file ui-primitives.css
 * @description Base UI primitives referencing CSS variables populated by ThemeManager.
 * All structural component CSS belongs here. Views must NOT contain inline styles.
 */

/* ─── Floating UI Utilities ───────────────────────────────────────────────────── */

.floating-ui {
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.floating-ui-container {
    pointer-events: none;
    height: 100%;
}

/* ─── Left Panel (fixed 320px panel over the map) ────────────────────────────── */

.panel-left {
    pointer-events: auto;
    position: absolute;
    top: var(--spacing-unit, 8px);
    left: var(--spacing-unit, 8px);
    bottom: var(--spacing-unit, 8px);
    width: 320px;
    background: var(--color-surface, #ffffff);
    border-radius: var(--spacing-radius, 6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 20;
}

.panel-left__header {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.panel-left__header--between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-left__title {
    margin: 0;
    font-size: 1.1em;
}

.panel-left__description {
    margin: 0;
    opacity: 0.8;
    font-size: 0.9em;
}

.panel-left__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-left__search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.panel-left__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.78em;
    font-weight: bold;
    color: var(--color-text);
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Status Badges ───────────────────────────────────────────────────────────── */

.status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-driving {
    background-color: rgba(72, 187, 120, 0.15);
    color: #38a169;
}

.status-stopped {
    background-color: rgba(245, 101, 101, 0.15);
    color: #e53e3e;
}

/* ─── Vehicle Card ────────────────────────────────────────────────────────────── */

.vehicle-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--spacing-radius, 6px);
    padding: 12px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

.vehicle-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vehicle-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.vehicle-card__id {
    font-weight: bold;
    color: var(--color-primary);
}

.vehicle-card__footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    color: var(--color-text);
}

.vehicle-card__muted {
    opacity: 0.6;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────────── */

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-surface, #ffffff);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: none;
    border-radius: var(--spacing-radius);
    font-family: var(--typography-font-family);
    font-size: var(--typography-base-size);
    cursor: pointer;
    text-align: center;
    transition: filter 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-primary--full {
    width: 100%;
    display: block;
}

.btn-primary--icon {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Card (generic surface container) ───────────────────────────────────────── */

.card {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--spacing-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    pointer-events: auto;
}

/* ─── Form Primitives ─────────────────────────────────────────────────────────── */

.form-group {
    margin-bottom: var(--spacing-unit, 8px);
}

.form-group--spacious {
    margin-bottom: calc(var(--spacing-unit, 8px) * 2);
}

.form-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--color-text);
}

.input-field {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--spacing-radius);
    background-color: var(--color-background, #f7fafc);
    color: var(--color-text);
    font-family: var(--typography-font-family);
    font-size: var(--typography-base-size);
    pointer-events: auto;
    transition: background 0.2s, border-color 0.2s;
}

.input-field:focus {
    outline: none;
    background: var(--color-surface, #ffffff);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

/* ─── Login Card ──────────────────────────────────────────────────────────────── */

.login-card {
    width: 380px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--spacing-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-top: 4px solid var(--color-primary);
    pointer-events: auto;
}

.login-card__header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.login-card__logo {
    font-size: 2em;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.login-card__title {
    margin: 0 0 4px;
    font-size: 1.4em;
    color: var(--color-text);
}

.login-card__tagline {
    margin: 0;
    opacity: 0.65;
    font-size: 0.9em;
}

.login-card__output {
    display: block;
    margin-top: var(--spacing-unit);
    color: var(--color-error);
    font-size: 0.9em;
    min-height: 1.2em;
}

/* ─── View Overlay Container (floats inside #layout-content) ─────────────────── */

.view-overlay {
    pointer-events: none;
    /* allows the map to be panned through empty areas */
    position: absolute;
    inset: 0;
}

.view-card-container {
    pointer-events: auto;
    /* re-enables interaction specifically on card wrappers */
    max-width: 420px;
    margin: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
}

/* ─── Map Controls Panel (DashboardView) ─────────────────────────────────────── */

/* El panel vive dentro del menu lateral (#sidebar-map-tools), no flotando
   sobre el mapa: ocupaba el centro y estorbaba justo donde cae la ruta. */
.map-controls-wrapper {
    pointer-events: auto;
    padding: 0;
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar__map-tools {
    padding: 0 8px 8px;
}

/* Dentro del menu pierde el aspecto de tarjeta flotante: sin cristal, sin
   sombra y sin borde redondeado, para leerse como una seccion mas. */
.sidebar__map-tools .map-controls-card {
    background-color: color-mix(in srgb, var(--color-nav-bg) 60%, #000 12%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--color-nav-text) 18%, transparent);
    border-radius: var(--radius-sm, 8px);
}

.sidebar__map-tools .map-controls-header {
    background: none;
    padding: 10px 12px;
}

/* A 250 px las cinco pestanas no caben en una linea: se dejan envolver en vez
   de recortarlas. Ensanchar el menu no era opcion — su ancho lo asume todo el
   layout (barra superior incluida) y desalinearia la cabecera. */
.sidebar__map-tools .map-tabs-nav {
    flex-wrap: wrap;
    gap: 2px;
}

.sidebar__map-tools .map-tab-btn {
    flex: 0 0 auto;
    padding: 5px 8px;
    font-size: 0.68rem;
}

.sidebar__map-tools .map-tab-pane {
    padding: 10px 12px;
}

/* El panel ya no necesita su propio scroll: lo aporta .sidebar__nav, que
   desplaza el menu entero. Dos scrolls anidados es justo lo que hace que un
   boton parezca inalcanzable. */
.sidebar__map-tools #tab-routes {
    max-height: none;
    overflow-y: visible;
}

.map-controls-card {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    /* overflow: hidden; Removed to allow custom dropdown to escape card bounds */
    background-color: rgba(var(--color-surface-rgb, 30, 30, 30), 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(150, 150, 150, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    color: var(--color-text);
}

/* La pestana de rutas acumula muchos controles (unidad, fechas, camara, capas,
   reproducir, disponibilidad) y llegaba a medir 1251 px en una ventana de 831:
   el boton de reproducir quedaba fuera de la pantalla y era inalcanzable.
   El scroll va aqui y no en .map-controls-card porque esa tiene el overflow
   visible a proposito, para que el desplegable de POIs pueda salirse. */
#tab-routes {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    min-height: 0;
}

.map-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
    background-color: rgba(var(--color-surface-rgb, 0, 0, 0), 0.05);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.map-controls-title {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-icon-minimal {
    background: transparent;
    border: none;
    color: var(--color-text);
    opacity: 0.7;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-icon-minimal:hover {
    background-color: rgba(150, 150, 150, 0.1);
}

.map-tabs-nav {
    display: flex;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
    padding: 0 0.5rem;
    gap: 0.5rem;
}

.map-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.75rem 0.25rem;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s, opacity 0.2s, border-bottom 0.2s;
    opacity: 0.6;
}

.map-tab-btn.active {
    opacity: 1;
    border-bottom: 2px solid var(--color-primary);
}

.map-tab-content-container {
    padding: 1rem;
}

.map-tab-pane {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.map-tab-pane.active {
    display: flex;
}

.map-tab-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text);
    opacity: 0.8;
    line-height: 1.4;
}

/* Custom UI Dropdown wrapper to bypass OS native styling */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
    font-size: 0.9em;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--color-background);
    color: var(--color-text);
    border: 1px solid rgba(150, 150, 150, 0.2);
    cursor: pointer;
    transition: border-color 0.2s;
}

.custom-select-trigger:hover {
    border-color: rgba(150, 150, 150, 0.4);
}

.custom-select-trigger.open {
    border-color: var(--color-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-options-container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--color-surface, #333333);
    color: var(--color-text, #ffffff);
    border: 1px solid rgba(150, 150, 150, 0.2);
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 50;
    display: none;
    flex-direction: column;
}

.custom-options-container.open {
    display: flex;
}

.custom-option {
    padding: 0.75rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid rgba(150, 150, 150, 0.05);
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: rgba(150, 150, 150, 0.15);
}

.custom-option.selected {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.btn-glass-secondary {
    width: 100%;
    padding: 0.75rem;
    font-weight: bold;
    border-radius: 6px;
    background-color: rgba(150, 150, 150, 0.15);
    color: var(--color-text);
    border: 1px solid rgba(150, 150, 150, 0.2);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-glass-secondary:hover {
    background-color: rgba(150, 150, 150, 0.25);
}

.btn-glass-secondary:active {
    transform: scale(0.98);
}

.quick-access-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.btn-quick-poi {
    flex: 1;
    min-width: 80px;
    padding: 0.45rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 16px;
    background-color: var(--color-primary, #4285F4);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
    text-align: center;
}

.btn-quick-poi:hover {
    filter: brightness(1.1);
}

.btn-quick-poi:active {
    transform: scale(0.95);
}

/* ─── Map Cluster Custom Styling ──────────────────────────────────────────────── */

.cluster-solid {
    background-color: var(--color-primary, #4285F4);
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    font-family: var(--typography-font-family, sans-serif);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.cluster-solid--fleet {
    background-color: var(--color-success, #38a169);
    color: #ffffff;
}

.cluster-solid--poi {
    background-color: var(--color-tertiary, #8A3CE5);
    color: #ffffff;
}

.cluster-solid:hover {
    transform: scale(1.1);
    z-index: 1000 !important;
}

.cluster-solid-small {
    font-size: 0.85rem;
}

.cluster-solid-medium {
    font-size: 0.95rem;
}

.cluster-solid-large {
    font-size: 1.1rem;
}

/* ─── Override default MarkerCluster text color ──────────────────────────────── */

.marker-cluster div {
    color: #000000;
}

/* ─── Fleet (Latest Positions) ───────────────────────────────────────────────── */

.fleet-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.vehicle-marker-dot {
    width: 14px;
    height: 14px;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.fleet-popup {
    min-width: 120px;
    font-family: var(--typography-font-family, sans-serif);
}

.fleet-popup__muted {
    font-size: 0.85em;
    color: rgba(var(--color-text-rgb, 128, 128, 128), 0.6);
}

.nearby-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    background: rgba(var(--color-surface-rgb, 20, 20, 20), 0.2);
    padding: 6px;
    border-radius: 8px;
    border: 1px solid rgba(150, 150, 150, 0.1);
}

.nearby-item {
    background: rgba(var(--color-surface-rgb, 255, 255, 255), 0.03);
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.nearby-item:hover {
    background: rgba(var(--color-surface-rgb, 255, 255, 255), 0.08);
    border-color: rgba(var(--color-primary-rgb, 66, 133, 244), 0.3);
    transform: translateX(2px);
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
}

/* ─── POI Manager ───────────────────────────────────────────────────────────── */

.poi-manager-wrapper {
    pointer-events: none;
    padding: calc(var(--spacing-unit) * 2);
    max-width: 380px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
}

.poi-manager-card {
    height: 100%;
    max-height: calc(100vh - 120px);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

.poi-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    padding-right: 4px;
    flex: 1;
}

.poi-card {
    background: rgba(var(--color-surface-rgb, 20, 20, 20), 0.4);
    border: 1px solid rgba(150, 150, 150, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    position: relative;
    transition: background 0.2s;
}

.poi-card:hover {
    background: rgba(var(--color-surface-rgb, 20, 20, 20), 0.6);
}

.poi-card__header {
    margin-bottom: 0.4rem;
}

.poi-card__color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.poi-card__actions {
    display: flex;
    gap: 4px;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.poi-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: 0.5;
    font-style: italic;
    font-size: 0.9em;
}

.poi-draw-bar {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    pointer-events: auto;
    background: var(--color-primary, #4285F4);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-weight: bold;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.btn-danger {
    background-color: var(--color-danger, #e53e3e);
    color: white;
    padding: 0.75rem;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
}

.btn-danger:hover {
    filter: brightness(1.1);
}

.btn-danger:active {
    transform: scale(0.98);
}

.poi-marker-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px 4px 12px 12px;
    border: 2px solid white;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}

.poi-cluster-icon {
    background-color: rgba(66, 133, 244, 0.9);
    border: 3px solid white;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ─── Generic Layout & Utility Classes ────────────────────────────────────────── */

.absolute-hidden {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
}

.absolute-app {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-1 {
    flex: 1;
}

.gap-sm {
    gap: 0.25rem;
}

.gap-md {
    gap: 0.5rem;
}

.gap-lg {
    gap: 1rem;
}

.gap-xl {
    gap: 1.5rem;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.min-w-180 {
    min-width: 180px;
}

.min-h-400 {
    min-height: 400px;
}

.max-w-800 {
    max-width: 800px;
}

.box-border {
    box-sizing: border-box;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.z-1 {
    z-index: 1;
}

.sidebar-section-title {
    padding: 1rem 1rem 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-nav-text);
    opacity: 0.7;
}

.topnav-header {
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--spacing-unit);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-primary);
}

.topnav-brand {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary);
}

.topnav-link {
    color: var(--color-text);
    margin-right: var(--spacing-unit);
}

.topnav-logout-btn {
    color: var(--color-text);
    background: none;
    border: 1px solid var(--color-primary);
    border-radius: var(--spacing-radius);
    padding: 4px 10px;
    cursor: pointer;
}

.layout-main-content {
    background: var(--color-background);
    color: var(--color-text);
    min-height: calc(100vh - 50px);
    padding: var(--spacing-unit);
    font-family: var(--typography-font-family);
    font-size: var(--typography-base-size);
}

.m-0 {
    margin: 0;
}

.m-auto {
    margin: 0 auto;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mr-1 {
    margin-right: 0.5rem;
}

.mr-2 {
    margin-right: 1rem;
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.5rem;
}

.p-2 {
    padding: 1rem;
}

.p-3 {
    padding: 1.5rem;
}

.p-4 {
    padding: 2rem;
}

.flex-grow-1 {
    flex: 1;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

.text-sm {
    font-size: 0.85em;
}

.text-xs {
    font-size: 0.75em;
}

.text-primary-color {
    color: var(--color-primary);
}

.text-secondary-color {
    color: var(--text-secondary, #666);
}

.text-danger {
    color: var(--color-danger, #e53e3e);
}

.text-white {
    color: white;
}

.text-shadow {
    text-shadow: 1px 1px 3px black;
}

.text-uppercase {
    text-transform: uppercase;
}

.letter-spacing-sm {
    letter-spacing: 0.05em;
}

.text-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.bg-primary {
    background-color: var(--bg-primary, #ffffff);
}

.bg-secondary {
    background-color: var(--bg-secondary, #f0f0f0);
}

.bg-transparent {
    background: transparent;
}

.rounded-md {
    border-radius: var(--border-radius-md, 8px);
}

.border-solid {
    border: 1px solid var(--border-color);
}

/* ─── Base Table Component (Modern & Beautiful) ─────────────────────────────── */

.table-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: transparent;
    border-radius: var(--spacing-radius, 8px);
}

.base-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--typography-font-family, sans-serif);
    font-size: 0.9em;
    min-width: 100%;
    color: var(--color-text);
}

.base-table thead tr {
    text-align: left;
}

.base-table th {
    padding: 8px 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    color: var(--color-text);
    opacity: 0.8;
    background: rgba(var(--color-surface-rgb, 20, 20, 20), 0.8);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid rgba(150, 150, 150, 0.2);
    position: sticky;
    top: 0;
    z-index: 20;
}

.base-table td {
    padding: 8px 10px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
    word-break: break-word;
}

.base-table tbody tr {
    background-color: var(--color-surface);
    transition: background-color 0.2s ease, transform 0.1s;
}

.base-table tbody tr:hover {
    background-color: rgba(var(--color-primary-rgb, 66, 133, 244), 0.05);
}

.base-table tbody tr:last-child td {
    border-bottom: none;
}

.border-none {
    border: none;
}

.cursor-pointer {
    cursor: pointer;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-90 {
    opacity: 0.9;
}

.word-break {
    word-break: break-all;
}

.shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ─── Modal & Carousel Extensions ─────────────────────────────────────────────── */

.carousel-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.carousel-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.carousel-modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
}

.carousel-modal-loader {
    display: none;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.carousel-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
}

.carousel-modal-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: white;
    text-align: left;
    pointer-events: none;
}

.carousel-btn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.carousel-btn-nav--left {
    left: 10px;
}

.carousel-btn-nav--right {
    right: 10px;
}

/* ─── Specific Component Extensions ────────────────────────────────────────────── */

.diag-popup-img {
    max-width: 100%;
    max-height: 140px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.log-console {
    height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.9rem;
    background: #1a1a1a;
    color: #00ff00;
    padding: 1rem;
    border-radius: 4px;
}

.color-picker-input {
    border: none;
    width: 40px;
    height: 30px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.topnav-container {
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--spacing-unit);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-primary);
}

.topnav-title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary);
    margin: 0;
}

.topnav-logout {
    color: var(--color-text);
    background: none;
    border: 1px solid var(--color-primary);
    border-radius: var(--spacing-radius);
    padding: 4px 10px;
    cursor: pointer;
}

.layout-content-area {
    background: var(--color-background);
    color: var(--color-text);
    min-height: calc(100vh - 50px);
    padding: var(--spacing-unit);
    font-family: var(--typography-font-family);
    font-size: var(--typography-base-size);
}

.map-canvas {
    height: 100%;
    width: 100%;
    min-height: 400px;
    z-index: 1;
}
/* ─── Asset Labels (Map) ──────────────────────────────────────────────────────── */

.asset-label {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Override Leaflet Tooltip defaults */
.leaflet-tooltip-top.asset-label::before {
    border-top-color: rgba(15, 23, 42, 0.75);
}

.leaflet-tooltip.asset-label {
    border: none;
}

/* ─── Address Search Feature ────────────────────────────────────────────────── */

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    pointer-events: none;
}

.search-marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: var(--color-primary);
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    animation: bounceMarker 0.6s ease-out;
}

.search-marker-pin::after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #ffffff;
    position: absolute;
    border-radius: 50%;
}

@keyframes bounceMarker {
    0% { transform: translateY(-20px) rotate(-45deg); opacity: 0; }
    60% { transform: translateY(5px) rotate(-45deg); }
    100% { transform: translateY(0) rotate(-45deg); opacity: 1; }
}

.search-result-popup {
    min-width: 180px;
    text-align: center;
}

/* Google Autocomplete Container Styling */
.pac-container {
    background-color: rgba(var(--color-surface-rgb, 30, 30, 30), 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    font-family: inherit;
    z-index: 10000 !important; /* Above all floating panels */
}

.pac-item {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--color-text);
}

.pac-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.pac-item-query {
    color: #ffffff;
    font-weight: 600;
}

.pac-matched {
    color: var(--color-primary);
}

.pac-icon {
    filter: invert(1) brightness(2); /* Make icon visible on dark bg */
}
/* Geofence Monitoring & Spatial Analysis */
.poi-popup-units-section {
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.poi-units-count-badge {
    background: var(--color-primary, #4285F4);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.poi-units-list-container {
    max-height: 120px;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    margin-top: 5px;
    padding: 4px;
}

.poi-unit-item {
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.poi-unit-item:last-child {
    border-bottom: none;
}

.poi-occupants-badge {
    display: inline-block;
    background: rgba(66, 133, 244, 0.1);
    color: var(--color-primary, #4285F4);
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.poi-occupants-badge:hover {
    background: var(--color-primary, #4285F4);
    color: white;
    transform: scale(1.05);
}

.poi-unit-status {
    font-size: 14px;
    filter: drop-shadow(0 0 2px currentColor);
}

/* Fix for broken table layout with many columns */
.poi-manager-card .table-wrapper {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(66, 133, 244, 0.3) transparent;
}

/* Custom scrollbar for Webkit */
.poi-manager-card .table-wrapper::-webkit-scrollbar {
    height: 4px;
}
.poi-manager-card .table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.poi-manager-card .table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(66, 133, 244, 0.2);
    border-radius: 10px;
}

.poi-manager-card .base-table {
    table-layout: fixed; /* Force column widths */
    width: 100%;
    border-collapse: collapse;
}

.poi-manager-card .base-table th, 
.poi-manager-card .base-table td {
    padding: 10px 8px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
}

.poi-manager-card .base-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

.poi-manager-card .base-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Specific Column Sizing for POI Manager */
.poi-manager-card .base-table th:nth-child(1),
.poi-manager-card .base-table td:nth-child(1) { width: 30px; text-align: center; padding-left: 2px; padding-right: 2px; } /* Color */

.poi-manager-card .base-table th:nth-child(2),
.poi-manager-card .base-table td:nth-child(2) { 
    white-space: normal;
    word-break: break-all;
    font-weight: 600;
} /* Name - Dynamic width */

.poi-manager-card .base-table th:nth-child(3),
.poi-manager-card .base-table td:nth-child(3) { width: 75px; opacity: 0.7; } /* Category */

.poi-manager-card .base-table th:nth-child(4),
.poi-manager-card .base-table td:nth-child(4) { width: 45px; text-align: center; } /* Units */

.poi-manager-card .base-table th:nth-child(5),
.poi-manager-card .base-table td:nth-child(5) { width: 60px; text-align: center; padding-left: 2px; padding-right: 2px; } /* Actions */

.poi-manager-card .base-table .poi-occupants-badge {
    padding: 2px 6px;
    font-size: 0.75rem;
}

.poi-manager-card .btn-icon-minimal {
    padding: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.poi-manager-card .btn-icon-minimal:hover {
    opacity: 1;
}

/* ─── Nodos de Ruta (RouteMapRenderer) ────────────────────────────────────────── */

/* Contenedor Leaflet del nodo intermedio (borra el fondo por defecto) */
.custom-route-node {
    background: transparent;
    border: none;
}

/* Punto visual del nodo intermedio */
.route-node-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-tertiary, #8A3CE5);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.custom-route-node:hover .route-node-dot {
    transform: scale(1.6);
    background-color: var(--color-primary, #4285F4);
}

/* Reproductor de ruta (widgets/RoutePlayer.js).
   Todos los colores salen de los tokens que publica ThemeManager, para que la
   barra cambie con la marca sin tocar esta hoja. */
.route-player {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(140%);
    z-index: 1200;
    width: min(760px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
    color: var(--color-text);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.route-player--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.route-player__meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 0.72rem;
}

.route-player__asset {
    font-weight: 700;
}

.route-player__sep {
    opacity: 0.4;
}

.route-player__step,
.route-player__time,
.route-player__coords {
    color: var(--color-muted);
}

.route-player__dwell {
    padding: 2px 8px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-muted) 22%, transparent);
    color: var(--color-text);
    font-weight: 600;
}

.route-player__skip {
    padding: 2px 8px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    color: var(--color-primary);
    font-weight: 700;
}

.route-player__speed-badge {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-success) 18%, transparent);
    color: var(--color-success);
    font-weight: 700;
}

.route-player__controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.route-player__btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9999px;
    border: none;
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
    color: var(--color-text);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.route-player__btn:hover {
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
}

.route-player__btn--activo {
    background: color-mix(in srgb, var(--color-primary) 28%, transparent);
    color: var(--color-primary);
}

.route-player__btn--activo:hover {
    background: color-mix(in srgb, var(--color-primary) 38%, transparent);
}

.route-player__btn--play {
    width: 42px;
    height: 42px;
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: 1rem;
}

/* El del panel lleva el color del de play: es la puerta a las opciones del
   recorrido y entre ocho botones redondos iguales no habia forma de verlo. */
.route-player__btn--acento {
    background: var(--color-primary);
    color: var(--color-surface);
}

.route-player__btn--acento:hover {
    background: var(--color-primary);
    filter: brightness(1.1);
}

.route-player__btn--play:hover {
    background: var(--color-primary);
    filter: brightness(1.1);
}

.route-player__scrubber {
    flex-grow: 1;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.route-player__rate {
    display: flex;
    align-items: center;
    gap: 6px;
}

.route-player__rate-label {
    min-width: 26px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-muted);
}

.route-player__rate-input {
    width: 62px;
    accent-color: var(--color-muted);
    cursor: pointer;
}

/* Marcador que recorre la ruta */
.route-player__marker {
    background: transparent;
    border: none;
}

.route-player__dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--color-primary);
    border: 3px solid var(--color-surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Boton de empresa activa en el menu lateral */
.sidebar__client {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: calc(100% - 16px);
    margin: 4px 8px 6px;
    padding: 8px 11px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--color-nav-text) 22%, transparent);
    background: color-mix(in srgb, var(--color-nav-bg) 55%, #000 10%);
    color: var(--color-nav-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.sidebar__client:hover {
    border-color: var(--color-nav-active);
}

.sidebar__client-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.sidebar__client-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-nav-active);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Selector de empresa: reutiliza la caja modal del dialogo de fechas */
.client-picker__search {
    margin-bottom: 8px;
}

.client-picker__list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.client-picker__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.client-picker__item:hover {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.client-picker__item--active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.client-picker__name {
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-picker__meta {
    flex-shrink: 0;
    font-size: 0.66rem;
    color: var(--color-muted);
}

/* Seccion de flota del panel lateral.
   Usa los tokens de navegacion que publica ThemeManager (--color-nav-*), para
   que cambiar de marca la revista sin tocar esta hoja. */
.sidebar__fleet .sidebar__accordion-content {
    padding: 0 10px 8px;
}

.sidebar__fleet-filter {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    padding: 7px 10px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--color-nav-text) 28%, transparent);
    background: color-mix(in srgb, var(--color-nav-bg) 70%, #000 10%);
    color: var(--color-nav-text);
    font-family: inherit;
    font-size: 0.75rem;
}

.sidebar__fleet-filter:focus {
    outline: none;
    border-color: var(--color-nav-active);
}

.sidebar__fleet-filter::placeholder {
    color: color-mix(in srgb, var(--color-nav-text) 65%, transparent);
}

.sidebar__fleet .asset-list {
    max-height: 208px;
}

.sidebar__fleet .asset-list__item {
    color: var(--color-nav-text);
}

.sidebar__fleet .asset-list__item--active {
    background: color-mix(in srgb, var(--color-nav-active) 22%, transparent);
    border-color: var(--color-nav-active);
    color: var(--color-nav-active);
}

/* Boton para ver la captura situada. Va dentro del pie que ya flota sobre la
   foto, alineado a la derecha para no empujar el titulo ni la fecha. */
.carousel-modal-onmap {
    position: absolute;
    right: 14px;
    bottom: 12px;
    padding: 5px 13px;
}

.carousel-modal-onmap:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Filtros por lo que vio el analisis de vision. El que no tiene ninguna
   captura se queda apagado en vez de desaparecer: saber que no hay armas es
   informacion, y un filtro que aparece y desaparece deja sin saber si se
   llego a mirar. */
.carousel-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    max-width: min(920px, 94vw);
}

.carousel-filter {
    padding: 4px 11px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.carousel-filter:hover:not(:disabled) {
    border-color: #fff;
}

.carousel-filter--activo {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.carousel-filter--vacio {
    opacity: 0.4;
    cursor: default;
}

.carousel-filter__n {
    margin-left: 4px;
    opacity: 0.7;
    font-weight: 400;
}

/* Tira de miniaturas del carrusel */
.carousel-strip {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding: 6px;
    /* Mas ancha que antes: la tira lleva ahora todas las capturas y se recorre
       arrastrando o con la rueda, asi que cuanto mas quepa de una vez, menos
       hay que desplazar. */
    max-width: min(920px, 94vw);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

/* 84x48: la miniatura del backend es de 100x56 reales (medido), asi que por
   encima de ese tamano se escala y se ve sucia. En pantalla retina incluso asi
   se duplica, pero a este tamano y como tira de contacto es aceptable; la
   nitidez esta en la imagen grande, que va en raw. */
.carousel-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-xs, 6px);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-thumb:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.carousel-thumb--activa {
    border-color: var(--color-primary);
}

/* Hueco de una miniatura que aun no llega o que fallo: se reserva su sitio
   para que la tira no salte al ir completandose. */
.carousel-thumb--vacia {
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05) 6px,
        rgba(255, 255, 255, 0.02) 6px,
        rgba(255, 255, 255, 0.02) 12px
    );
}

/* Selector de camara dentro del carrusel */
.carousel-cameras {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.carousel-camera {
    padding: 5px 13px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.carousel-camera:hover {
    border-color: #fff;
}

.carousel-camera--activa {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Salto a una hora del dia dentro del carrusel */
.carousel-jump {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}

.carousel-jump input[type="time"] {
    padding: 4px 8px;
    border-radius: var(--radius-xs, 6px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: inherit;
    font-size: 0.72rem;
}

/* El icono del reloj del control nativo es negro sobre fondo oscuro. */
.carousel-jump input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.carousel-jump__hint {
    opacity: 0.7;
    font-weight: 400;
}

/* Miniatura ampliada mientras llega la imagen completa. El desenfoque leve
   dice que lo que se ve todavia no es la definitiva, sin tapar la escena. */
.carousel-modal-img--previa {
    filter: blur(2px);
}

/* Panel de opciones de la ruta, desplegable sobre la barra del reproductor.
   Aqui vive lo que antes estaba en la pestana Routes: capas, camara,
   disponibilidad y el resumen de la consulta. Va plegado por defecto porque
   durante la reproduccion lo que importa es el mapa. */
.route-player__panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 8px);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.72rem;
}

.route-player__panel[hidden] {
    display: none;
}

.route-player__estado,
.route-player__disponibilidad {
    margin: 0;
    opacity: 0.75;
}

.route-player__capas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    border: none;
}

.route-player__capas legend {
    padding: 0;
    opacity: 0.6;
}

.route-player__capas label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.route-player__camaras {
    display: flex;
    align-items: center;
    gap: 6px;
}

.route-player__camara,
.date-dialog__camera {
    width: 26px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-xs, 6px);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.route-player__camara--activa,
.date-dialog__camera--activa {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Camara dentro del dialogo de fechas: se elige antes de pedir, porque la
   consulta de capturas va por camara. */
.date-dialog__cameras {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.date-dialog__cameras-label {
    opacity: 0.6;
    font-size: 0.72rem;
}

/* Dialogo de rango de fechas (widgets/DateRangeDialog.js) */
.date-dialog {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.date-dialog--visible {
    opacity: 1;
    pointer-events: auto;
}

.date-dialog__box {
    width: min(360px, calc(100vw - 32px));
    box-sizing: border-box;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.date-dialog__header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.date-dialog__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.date-dialog__asset {
    margin: 3px 0 0;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.date-dialog__body {
    padding: 14px 18px;
}

.date-dialog__month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.date-dialog__month-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: capitalize;
}

.date-dialog__nav {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: none;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.date-dialog__nav:hover {
    background: color-mix(in srgb, var(--color-text) 20%, transparent);
}

.date-dialog__weekdays,
.date-dialog__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.date-dialog__weekdays {
    margin-bottom: 4px;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--color-muted);
}

.date-dialog__day {
    aspect-ratio: 1;
    border: none;
    border-radius: var(--radius-2xs, 4px);
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.74rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.date-dialog__day:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.date-dialog__day:disabled {
    color: color-mix(in srgb, var(--color-muted) 55%, transparent);
    cursor: not-allowed;
}

/* Extremos del rango en solido; los dias de en medio, tenidos. Asi se lee de
   un vistazo que hay seleccionado sin tener que contar casillas. */
.date-dialog__day--extremo {
    background: var(--color-primary);
    color: var(--color-surface);
    font-weight: 700;
}

.date-dialog__day--dentro {
    background: color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.date-dialog__hint {
    margin: 10px 0 0;
    font-size: 0.7rem;
    color: var(--color-muted);
    text-align: center;
}

.date-dialog__footer {
    display: flex;
    gap: 8px;
    padding: 12px 18px 16px;
}

.date-dialog__footer button {
    flex-grow: 1;
    padding: 9px 0;
    font-size: 0.78rem;
    cursor: pointer;
}

.date-dialog__confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Contenedor de las ventanas del mapa.
   Leaflet lo deja blanco por defecto y aqui nunca se habia tematizado: como el
   contenido si usa los colores del tema, en el tema oscuro salia texto casi
   blanco sobre fondo blanco. Medido antes de esto: contraste 1.09 en titulo y
   valores, 2.87 en las etiquetas y 2.22 en el estado, cuando lo minimo legible
   (WCAG AA) es 4.5. El fondo tiene que venir de la misma paleta que el texto. */
.leaflet-popup-content-wrapper {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

.leaflet-popup-tip {
    /* Sin borde: la punta es un cuadrado girado, y el borde le dibuja rayas
       cruzadas en lugar de continuar el contorno de la ventana. */
    background: var(--color-surface);
    box-shadow: none;
}

.leaflet-popup-close-button {
    color: var(--color-muted) !important;
}

.leaflet-popup-close-button:hover {
    color: var(--color-text) !important;
}

/* Ficha de unidad sobre el mapa (estructura de tagoraexpo1: titulo, tabla de
   etiqueta/valor y acciones). Colores del tema, ninguno literal. */
.fleet-popup__title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text);
}

.fleet-popup__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.fleet-popup__label {
    padding: 3px 10px 3px 0;
    font-size: 0.72rem;
    color: var(--color-muted);
    white-space: nowrap;
    vertical-align: top;
}

.fleet-popup__value {
    padding: 3px 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text);
}

.fleet-popup__state {
    padding: 1px 7px;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.fleet-popup__state--on {
    background: color-mix(in srgb, var(--color-success) 20%, transparent);
    color: var(--color-success);
}

.fleet-popup__state--off {
    background: color-mix(in srgb, var(--color-muted) 22%, transparent);
    color: var(--color-muted);
}

.fleet-popup__actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Cruz para soltar la unidad elegida. Solo sale en la fila activa. */
.asset-list__clear {
    margin-left: 6px;
    padding: 0 4px;
    border-radius: var(--radius-xs, 6px);
    color: var(--color-muted);
    font-size: 0.7rem;
    line-height: 1.6;
    cursor: pointer;
}

.asset-list__clear:hover {
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
    color: var(--color-text);
}

/* Lista de unidades reutilizable (widgets/AssetList.js) */
.asset-list {
    max-height: 168px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asset-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.asset-list__item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.asset-list__item--active {
    background: var(--primary-bg-subtle, rgba(66, 133, 244, 0.16));
    border-color: var(--color-primary, #4285F4);
}

.asset-list__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Encendida / apagada: el color vive aqui, no en la vista */
.asset-list__dot--on {
    background-color: var(--color-success);
}

.asset-list__dot--off {
    background-color: var(--color-muted);
}

/* Sin reportar: hueco, no relleno. Un punto relleno afirma un estado; uno
   hueco dice "existe, pero no se sabe". */
.asset-list__dot--sin-datos {
    background-color: transparent;
    border: 1.5px solid var(--color-muted);
}

.asset-list__item--sin-datos .asset-list__id {
    opacity: 0.6;
}

.asset-list__id {
    flex-grow: 1;
    font-size: 0.78rem;
    font-weight: 600;
}

.asset-list__route {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius-2xs, 4px);
    color: var(--color-muted);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Aparece al apuntar la fila: 862 iconos siempre visibles serian ruido. */
.asset-list__item:hover .asset-list__route,
.asset-list__item--active .asset-list__route,
.asset-list__route:focus {
    opacity: 1;
}

.asset-list__route:hover {
    background: color-mix(in srgb, var(--color-primary) 25%, transparent);
    color: var(--color-primary);
}

.asset-list__empty {
    margin: 0;
    padding: 10px 0;
    text-align: center;
    font-size: 0.72rem;
    opacity: 0.55;
}

/* Zona de patio de maniobras: area, no punto. Relleno muy suave para no tapar
   el trazado ni las paradas que caen dentro, y borde discontinuo porque el
   limite es una estimacion (el nodo mas alejado), no una valla real. */
.route-yard-zone {
    fill: var(--color-primary);
    fill-opacity: 0.1;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-dasharray: 6 5;
    stroke-opacity: 0.75;
    cursor: pointer;
    transition: fill-opacity 0.15s ease;
}

.route-yard-zone:hover {
    fill-opacity: 0.2;
}

/* Marca de radio fijo en pixeles: hace visible la zona a cualquier zoom. */
.route-yard-mark {
    fill: var(--color-primary);
    fill-opacity: 0.18;
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-dasharray: 5 4;
    cursor: pointer;
    transition: fill-opacity 0.15s ease;
}

.route-yard-mark:hover {
    fill-opacity: 0.35;
}

/* Globo con la foto que sale al pasar el reproductor por una captura.
   Se le quita a Leaflet el relleno y el padding del popup para que la imagen
   llegue al borde: el globo ES la foto, no una caja con una foto dentro. */
.route-bubble-popup .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

.route-bubble-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
}

.route-bubble-popup .leaflet-popup-tip {
    background: var(--color-surface);
}

.route-bubble__img {
    display: block;
    width: 180px;
    height: 102px;
    object-fit: cover;
    /* Mientras esta la miniatura (100x56) escalada a 180, el navegador la
       suaviza; al llegar la completa el cambio de src no da salto porque la
       caja no se mueve. */
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.route-bubble__pie {
    padding: 5px 8px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--color-text);
}

.route-bubble__riesgo {
    padding: 4px 8px 6px;
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 15%, transparent);
}

/* Cruz para quitar de en medio las capturas. Va sobre la propia foto, en la
   esquina, porque el globo no tiene marco donde ponerla: cualquier barra
   propia lo haria mas grande, que es justo lo que estorba. */
.route-bubble {
    position: relative;
}

.route-bubble__cerrar {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: inherit;
    font-size: 0.68rem;
    cursor: pointer;
}

.route-bubble__cerrar:hover {
    background: rgba(0, 0, 0, 0.8);
}

.route-bubble--sin-foto {
    padding: 12px 14px;
    font-size: 0.7rem;
    color: var(--color-muted);
}

/* Paradas sobre la ruta: marcador cuadrado y letrero permanente con el tramo
   horario. Colores del tema (ThemeManager), nunca literales. */
.custom-route-stop {
    background: transparent;
    border: none;
}

/* Anillo hueco, no cuadro relleno.
   Tres razones: (1) se distingue de los dos puntos rellenos que ya hay en la
   ruta -nodo de telemetria y captura de camara- por FORMA, no solo por color,
   que es lo unico que funciona cuando se solapan; (2) un anillo lee como
   "aqui se detuvo" en vez de como un marcador mas; (3) al ser hueco deja ver
   la linea de la ruta por dentro, asi que no interrumpe el trazado. */
.route-stop-dot {
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border-radius: 50%;
    background: transparent;
    border: 3px solid var(--color-text);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-background) 75%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--color-background) 75%, transparent);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.custom-route-stop:hover .route-stop-dot {
    transform: scale(1.35);
    border-color: var(--color-primary);
}

/* La parada por la que va el reproductor: rellena y en color primario, para
   encontrarla de un vistazo entre las demas. */
.custom-route-stop.route-stop--activa .route-stop-dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.35);
}

/* Tooltip permanente de Leaflet: se le quita el aspecto por defecto */
.leaflet-tooltip.route-stop-label {
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    border-radius: var(--radius-xs, 6px);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.leaflet-tooltip.route-stop-label::before {
    display: none;
}

/* Capturas de camara sobre la ruta */
.custom-route-camera {
    background: transparent;
    border: none;
}

.route-camera-dot {
    width: 14px;
    height: 14px;
    /* Bolita: se distingue del nodo de telemetria por color y tamano, no por forma */
    border-radius: 50%;
    background-color: var(--color-primary, #4285F4);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease;
    cursor: pointer;
}

.custom-route-camera:hover .route-camera-dot {
    transform: scale(1.35);
}

.route-camera-popup {
    min-width: 180px;
}

.route-camera-popup__riesgo {
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: var(--radius-xs, 6px);
    background: color-mix(in srgb, var(--color-error) 18%, transparent);
    color: var(--color-error);
    font-size: 0.72rem;
    font-weight: 600;
}

.route-camera-popup__inferida {
    margin-top: 5px;
    font-size: 0.66rem;
    font-style: italic;
    color: var(--color-muted);
}

/* Captura con riesgo detectado: se distingue en el propio punto, para no tener
   que abrirlas una por una buscando cual salto la alarma. */
.route-camera-dot--riesgo {
    background-color: var(--color-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 35%, transparent);
}

/* Marcadores terminales A / B */
.custom-route-marker {
    background: transparent;
    border: none;
}

.route-marker-start,
.route-marker-end {
    --pin-color: var(--color-success, #38a169);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 1);
    background-color: var(--pin-color);
    position: relative;
    transform: translateY(-8px); /* Levantar un poco para que la punta toque el suelo */
}

/* Punta del pin */
.route-marker-start:after,
.route-marker-end:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--pin-color);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

/* Evitar que el borde blanco se vea mal en la punta */
.route-marker-start:before,
.route-marker-end:before {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid #ffffff;
    z-index: -1;
}

.route-marker-start {
    --pin-color: var(--color-success, #38a169);
}

.route-marker-end {
    --pin-color: var(--color-danger, #e53e3e);
}

/* Popup del marcador terminal */
.route-terminal-popup {
    font-family: var(--typography-font-family, sans-serif);
    min-width: 140px;
}

.route-terminal-popup__titulo {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: var(--color-text, #1a1a1a);
}

.route-terminal-popup__fecha {
    font-size: 0.78rem;
    opacity: 0.65;
}

/* ─── Tooltip Flotante de Nodo (mouseover) ─────────────────────────────────────── */

.route-node-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(var(--color-surface-rgb, 20, 20, 20), 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(150, 150, 150, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    font-family: var(--typography-font-family, sans-serif);
    font-size: 0.8rem;
    color: var(--color-text, #f0f0f0);
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    transition: opacity 0.12s ease;
    opacity: 0;
}

.route-node-tooltip--visible {
    display: flex;
    opacity: 1;
}

.route-node-tooltip__fila {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.route-node-tooltip__icono {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.route-node-tooltip__valor {
    font-weight: 600;
    letter-spacing: 0.01em;
}


/* ── Resumen del recorrido (widgets/RouteStatsPanel.js) ──────────────
   Las graficas van en SVG propio: lo que hace falta aqui es un anillo y unas
   barras, y traer una libreria de graficos por CDN seria pagar peso y cadena
   de suministro por dos funciones de trigonometria. */
.route-stats {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.route-stats--visible {
    opacity: 1;
    pointer-events: auto;
}

.route-stats__box {
    width: min(760px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 24px 24px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.route-stats__header {
    position: relative;
    margin-bottom: 18px;
}

.route-stats__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.route-stats__asset {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.route-stats__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.route-stats__close:hover {
    background: color-mix(in srgb, var(--color-text) 12%, transparent);
    color: var(--color-text);
}

/* Cifras: se reparten solas segun quepan, sin numero fijo de columnas. */
.route-stats__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.route-stats__cifra {
    padding: 12px;
    border-radius: var(--radius-sm, 8px);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

/* Las alertas son el dato por el que se abre esto, no uno mas de la fila. */
.route-stats__cifra--alerta {
    background: color-mix(in srgb, var(--color-error) 14%, transparent);
}

.route-stats__cifra--alerta .route-stats__valor {
    color: var(--color-error);
}

.route-stats__valor {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.route-stats__valor small {
    margin-left: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.7;
}

.route-stats__etiqueta {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
    color: var(--color-muted);
}

.route-stats__graficas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.route-stats__grafica h4 {
    margin: 0 0 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

.route-stats__total-alertas {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-error) 18%, transparent);
    color: var(--color-error);
    font-size: 0.72rem;
}

/* El agujero del anillo lleva el total: un porcentaje sin saber sobre cuanto
   no dice nada. */
.route-stats__anillo {
    position: relative;
    width: 150px;
    margin: 0 auto;
}

.route-stats__anillo svg {
    width: 100%;
    height: auto;
    display: block;
}

.route-stats__anillo-centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.route-stats__anillo-centro strong {
    font-size: 0.85rem;
}

.route-stats__anillo-centro span {
    font-size: 0.65rem;
    color: var(--color-muted);
}

.route-stats__leyenda,
.route-stats__alertas {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    font-size: 0.74rem;
}

.route-stats__leyenda li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
}

.route-stats__leyenda strong {
    margin-left: auto;
}

.route-stats__pct {
    width: 36px;
    text-align: right;
    color: var(--color-muted);
}

.route-stats__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.route-stats__alertas li {
    display: grid;
    grid-template-columns: 1fr 70px 24px;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.route-stats__alerta-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-stats__barra {
    height: 7px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    overflow: hidden;
}

.route-stats__barra span {
    display: block;
    height: 100%;
    background: var(--color-error);
}

.route-stats__alertas strong {
    text-align: right;
}

.route-stats__vacio {
    margin: 0;
    font-size: 0.74rem;
    color: var(--color-muted);
}

/* Acordeon de alertas del resumen. La cabecera es el mismo renglon de antes
   -nombre, barra y cuenta-, ahora pulsable; al abrirse lista sus instantes. */
.route-stats__alertas .route-stats__grupo {
    display: block;
    padding: 0;
}

.route-stats__alerta-cabecera {
    display: grid;
    grid-template-columns: 12px 1fr 70px 24px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.route-stats__alerta-cabecera:hover {
    color: var(--color-primary);
}

.route-stats__chevron {
    display: inline-block;
    color: var(--color-muted);
    transition: transform 0.15s ease;
}

.route-stats__grupo--abierto .route-stats__chevron {
    transform: rotate(90deg);
}

.route-stats__ocurrencias {
    display: none;
    list-style: none;
    margin: 0 0 6px;
    padding: 4px 0 4px 20px;
    border-left: 2px solid color-mix(in srgb, var(--color-error) 35%, transparent);
}

.route-stats__grupo--abierto .route-stats__ocurrencias {
    display: block;
}

.route-stats__ocurrencias li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.route-stats__hora {
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

.route-stats__ver {
    padding: 1px 8px;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
}

.route-stats__ver:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.route-stats__ver:disabled {
    opacity: 0.4;
    border-color: var(--color-muted);
    color: var(--color-muted);
    cursor: default;
}

/* Marca temporal de donde salto una alerta. Anillo pulsante para que se
   distinga de los puntos del trazado y de las capturas. */
.route-alert-mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-error) 65%, transparent);
    border: 2px solid var(--color-error);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-error) 60%, transparent);
    animation: route-alert-pulso 1.6s ease-out infinite;
}

@keyframes route-alert-pulso {
    to { box-shadow: 0 0 0 16px transparent; }
}

/* Filtro por estado de la flota en el menu lateral. La cuenta va al lado del
   nombre porque el numero es la mitad de la respuesta: "en movimiento" sin
   saber cuantas de cuantas no dice si la flota esta trabajando o parada. */
.sidebar__fleet-estados {
    display: flex;
    gap: 4px;
    margin: 6px 0 8px;
}

.sidebar__estado {
    flex: 1;
    padding: 4px 6px;
    border-radius: var(--radius-xs, 6px);
    border: 1px solid color-mix(in srgb, var(--color-nav-text) 22%, transparent);
    background: transparent;
    color: var(--color-nav-text);
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sidebar__estado:hover {
    border-color: var(--color-nav-active);
}

.sidebar__estado--activo {
    background: color-mix(in srgb, var(--color-nav-active) 22%, transparent);
    border-color: var(--color-nav-active);
    color: var(--color-nav-active);
}

.sidebar__estado-n {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
}