/* =========================================================
   Mapa del recorrido de operarios (Leaflet)
   Los marcadores viven fuera del DOM de Razor, por eso sus
   estilos son globales y no scoped.
   ========================================================= */

.leaflet-container {
    font-family: var(--ax-font-family);
    background: var(--ax-gray-100);
}

.recorrido-marker {
    background: transparent;
    border: none;
}

/* ---------------------------------------------------------
   Color por ruta operativa
   Única fuente de verdad de la paleta: la usan la leyenda de la pantalla, el relleno
   del pin y el trayecto que dibuja recorrido-map.js (que resuelve el color computado
   con .recorrido-ruta-sonda). Si se agrega un color aquí, actualizar también
   ColoresRuta en RecorridoOperario.razor.cs.
   Los cinco tonos evitan los colores de estado (inicio/fin) y se separan entre sí en
   tema claro y oscuro; el orden prioriza el contraste entre rutas consecutivas.
   --------------------------------------------------------- */
.recorrido-ruta--0 { --recorrido-color: var(--ax-info); }
.recorrido-ruta--1 { --recorrido-color: var(--ax-teal-600); }
.recorrido-ruta--2 { --recorrido-color: var(--ax-amber-700); }
.recorrido-ruta--3 { --recorrido-color: var(--ax-coral-600); }
.recorrido-ruta--4 { --recorrido-color: var(--ax-gold-600); }
.recorrido-ruta--sin { --recorrido-color: var(--ax-gray-600); }

/* Sonda invisible: expone el color final de la ruta (el tema lo resuelve el navegador)
   para que JS pueda pasárselo a Leaflet, que no entiende var(). */
.recorrido-ruta-sonda {
    position: absolute;
    top: 0;
    left: -9999px;
    width: 1px;
    height: 1px;
    background-color: var(--recorrido-color, transparent);
    pointer-events: none;
}

/* Relleno = ruta; aro = estado (inicio/fin). Son canales distintos, así que el color
   de la ruta nunca se confunde con el verde de inicio ni el rojo de cierre. */
.recorrido-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--ax-surface);
    background: var(--recorrido-color, var(--ax-gray-400));
    color: var(--ax-primary-contrast);
    font-family: var(--ax-font-mono);
    font-size: var(--ax-font-size-2xs);
    font-weight: 600;
    line-height: 1;
    --recorrido-aro: transparent;
    box-shadow: 0 0 0 3px var(--recorrido-aro), var(--ax-shadow-sm);
    transition: transform var(--ax-transition-fast), box-shadow var(--ax-transition-fast);
}

/* La actividad se distingue por forma, no por color: el color ya pertenece a la ruta. */
.recorrido-pin--orden {
    border-radius: 8px;
}

.recorrido-pin.is-start {
    --recorrido-aro: var(--ax-success);
}

.recorrido-pin.is-end {
    --recorrido-aro: var(--ax-error);
}

/* Una jornada con una sola captura es inicio y fin a la vez: el verde de inicio
   comunica mejor que el rojo de cierre. */
.recorrido-pin.is-start.is-end {
    --recorrido-aro: var(--ax-success);
}

/* Filtro por estado del medidor: el punto que queda a la vista se resalta con un halo del
   color de su ruta, para leerlo como «estos son los que pedí». Va antes de .is-active para
   que el punto seleccionado conserve su propio énfasis. */
.recorrido-pin.is-filtrado {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px var(--recorrido-aro),
                0 0 0 8px color-mix(in srgb, var(--recorrido-color, var(--ax-info)) 30%, transparent),
                var(--ax-shadow-md);
}

.recorrido-pin.is-active {
    transform: scale(1.18);
    box-shadow: 0 0 0 3px var(--recorrido-aro),
                0 0 0 7px var(--ax-primary-100),
                var(--ax-shadow-md);
}

/* Bloquea el scroll de la página mientras la tarjeta del mapa ocupa el viewport. */
body.recorrido-map-fullscreen {
    overflow: hidden;
}

/* Selector de capa base (Calles / Terreno / Satélite) sobre el mapa. */
.recorrido-layers {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ax-alpha-line-strong);
    border-radius: var(--ax-radius-md);
    background: var(--ax-surface);
    box-shadow: var(--ax-shadow-sm);
}

.recorrido-layers__btn {
    appearance: none;
    margin: 0;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--ax-radius-sm);
    background: transparent;
    color: var(--ax-text-secondary);
    font-family: var(--ax-font-family);
    font-size: var(--ax-font-size-xs);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ax-transition-fast), color var(--ax-transition-fast);
}

.recorrido-layers__btn:hover {
    background: var(--ax-alpha-hover);
    color: var(--ax-text-primary);
}

.recorrido-layers__btn:focus-visible {
    outline: none;
    box-shadow: var(--ax-shadow-focus);
}

.recorrido-layers__btn.is-active {
    background: var(--ax-primary);
    color: var(--ax-primary-contrast);
}

.recorrido-layers__btn.is-active:hover {
    background: var(--ax-primary-hover);
    color: var(--ax-primary-contrast);
}

/* Con tres capas el selector ocupa más ancho: en pantallas estrechas se compacta
   para no tapar el mapa ni desbordar la tarjeta. */
@media (max-width: 600px) {
    .recorrido-layers__btn {
        padding: 3px 7px;
        font-size: var(--ax-font-size-2xs);
    }
}

.recorrido-map__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    padding: var(--ax-space-6);
    text-align: center;
    color: var(--ax-text-secondary);
    font-size: var(--ax-font-size-sm);
}

/* Popup del punto (clic en el marcador): actividad, suscriptor y suscripción. */
.recorrido-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: var(--ax-radius-md);
    background: var(--ax-surface);
    color: var(--ax-text-primary);
    box-shadow: var(--ax-shadow-md);
}

.recorrido-popup .leaflet-popup-content {
    min-width: 180px;
    margin: var(--ax-space-3);
    font-family: var(--ax-font-family);
    font-size: var(--ax-font-size-sm);
    line-height: 1.35;
}

.recorrido-popup .leaflet-popup-tip {
    background: var(--ax-surface);
}

.recorrido-popup__head {
    color: var(--ax-text-secondary);
    font-size: var(--ax-font-size-xs);
    font-variant-numeric: tabular-nums;
}

.recorrido-popup__title {
    margin-top: 2px;
    font-weight: 600;
}

.recorrido-popup__rows {
    display: grid;
    gap: 2px;
    margin-top: var(--ax-space-2);
}

.recorrido-popup__row {
    display: flex;
    justify-content: space-between;
    gap: var(--ax-space-3);
}

.recorrido-popup__label {
    color: var(--ax-text-secondary);
}

.recorrido-popup__value {
    font-weight: 500;
    text-align: right;
}