/* ==========================================================================
   ControlISP — Monitoreo web
   Paleta heredada de la app movil:
     Azul acero  #4682B4  (primario)
     Verde       #43A047  (activo / OK)
     Rojo        #D32F2F  (alerta / detenido)
   ========================================================================== */

:root {
    /* --------------------------------------------------------------------
       Repintado del tema de Telerik.
       El tema Default trae un rojo-naranja como color primario. Estas
       variables lo reemplazan por el azul acero de la app movil, asi que
       cualquier control con ThemeColor="Primary" (botones, pestanas,
       switches, seleccion de la grilla) sale ya con el color de ControlISP.
       Van en :root y pisan al tema porque nuestro app.css se carga despues.
       -------------------------------------------------------------------- */
    --kendo-color-primary: #4682B4;
    --kendo-color-primary-hover: #3d74a1;
    --kendo-color-primary-active: #35648a;
    --kendo-color-primary-emphasis: #a3c1d9;
    --kendo-color-primary-subtle: #e4edf5;
    --kendo-color-primary-subtle-hover: #d3e2ef;
    --kendo-color-primary-subtle-active: #c2d6e9;
    --kendo-color-on-primary: #ffffff;

    /* Verde y rojo operativos, tambien heredados de la app movil. */
    --kendo-color-success: #43A047;
    --kendo-color-error: #D32F2F;

    /* --------------------------------------------------------------------
       Variables propias del proyecto (las que usa nuestro CSS, no Telerik).
       -------------------------------------------------------------------- */
    --ci-primario: #4682B4;
    --ci-primario-oscuro: #35648a;
    --ci-verde: #43A047;
    --ci-rojo: #D32F2F;
    --ci-gris: #8a94a0;

    --ci-fondo: #f4f6f8;
    --ci-panel: #ffffff;
    --ci-borde: #dde3ea;
    --ci-texto: #1f2933;
    --ci-texto-suave: #66727f;
    --ci-sidebar: #24313f;

    /* Superficies secundarias. Se nombran por su FUNCION, no por su color:
       "suave", "chip", "seleccion". Asi el tema oscuro solo tiene que
       redefinir estas seis lineas y toda la aplicacion lo sigue, en vez de
       ir persiguiendo cada #f7f9fb suelto por mil lineas de hoja. */
    --ci-suave: #f7f9fb;              /* bloques dentro de un panel        */
    --ci-chip: #eef1f5;               /* pastillas, pestanas, barras vacias */
    --ci-hover: #f2f5f8;              /* fila bajo el puntero              */
    --ci-seleccion: #e4edf5;          /* fila elegida                      */
    --ci-seleccion-suave: #eef3f8;    /* fila elegida, version tenue       */
    --ci-barra: #e6ebf0;              /* canal vacio de una barra          */
    --ci-scroll: #cfd8e0;
    --ci-scroll-hover: #adbcc8;

    /* Superficies que FLOTAN sobre el mapa (leyenda, controles). Llevan algo
       de transparencia para que se intuya el mapa debajo, y por eso no pueden
       usar --ci-panel: un color solido no se puede volver traslucido. */
    --ci-flotante: rgba(255, 255, 255, .94);

    /* Colores con significado (aviso, error, exito). Fondo y letra juntos:
       en oscuro no alcanza con oscurecer el fondo, hay que aclarar la letra
       o queda ilegible. */
    --ci-aviso-fondo: #fff4e5;
    --ci-aviso-borde: #ffd9a0;
    --ci-aviso-texto: #8a5200;
    --ci-error-fondo: #fdecea;
    --ci-error-borde: #f3c2bd;
    --ci-error-texto: #b3261e;
    --ci-ok-fondo: #e8f5e9;
    --ci-ok-borde: #b8e0bb;
    --ci-ok-texto: #2e7d32;
    --ci-info-fondo: #e4edf5;
    --ci-info-texto: #35648a;

    /* Sombra del mapa: en claro no se toca; en oscuro se invierte. */
    --ci-filtro-mapa: none;

    color-scheme: light;
}

/* ==========================================================================
   TEMA OSCURO
   --------------------------------------------------------------------------
   No es una segunda hoja de estilos: son las MISMAS reglas leyendo otros
   valores. Por eso todo lo de arriba usa variables — cambiar de tema es
   cambiar doce numeros, no mantener dos disenos en paralelo.

   El atributo lo pone un script en el <head> ANTES de que se pinte nada,
   leyendo lo que el usuario eligio la vez pasada. Si se aplicara desde
   Blazor, la pantalla parpadearia en blanco durante un instante en cada
   recarga — chico pero muy molesto a las 3 de la manana, que es cuando de
   verdad se usa un tema oscuro.

   Los azules, verdes y rojos operativos NO cambian: son el codigo de
   colores que el personal ya tiene aprendido de la app movil, y ese
   significado tiene que sobrevivir al cambio de tema.
   ========================================================================== */

html[data-tema="oscuro"] {
    --ci-fondo: #131a22;
    --ci-panel: #1b232d;
    --ci-borde: #2c3743;
    --ci-texto: #e4e9ee;
    --ci-texto-suave: #97a3b0;
    --ci-sidebar: #0f151b;

    --ci-suave: #202a35;
    --ci-chip: #26313d;
    --ci-hover: #263241;
    --ci-seleccion: #1e3a52;
    --ci-seleccion-suave: #1b3244;
    --ci-barra: #2c3743;
    --ci-scroll: #3b4a5a;
    --ci-scroll-hover: #506274;

    --ci-flotante: rgba(27, 35, 45, .94);

    /* Mismos significados, adaptados: fondo apagado, letra encendida. */
    --ci-aviso-fondo: #3a2c12;
    --ci-aviso-borde: #5c4520;
    --ci-aviso-texto: #f0b95c;
    --ci-error-fondo: #3b1e1c;
    --ci-error-borde: #5e2f2b;
    --ci-error-texto: #f08a80;
    --ci-ok-fondo: #17321c;
    --ci-ok-borde: #2a5730;
    --ci-ok-texto: #7fce85;
    --ci-info-fondo: #1e3a52;
    --ci-info-texto: #9cc6e8;

    /* El azul acero puro pierde fuerza sobre fondo oscuro: se aclara un
       punto para que siga leyendose como el mismo azul. */
    --ci-primario: #5b9bd5;
    --kendo-color-primary: #5b9bd5;
    --kendo-color-primary-hover: #6fa9dd;
    --kendo-color-primary-active: #4a8ac4;
    --kendo-color-primary-subtle: #1e3a52;
    --kendo-color-primary-subtle-hover: #24455f;
    --kendo-color-primary-subtle-active: #2a506e;
    --kendo-color-on-primary: #0f151b;

    /* Telerik tambien se pinta por variables: sus componentes (grilla,
       botones, barra) siguen estas y no hay que cargar otro tema. */
    --kendo-color-app-surface: #1b232d;
    --kendo-color-on-app-surface: #e4e9ee;
    --kendo-color-surface: #202a35;
    --kendo-color-surface-alt: #1b232d;
    --kendo-color-base: #202a35;
    --kendo-color-base-hover: #263241;
    --kendo-color-base-active: #2c3743;
    --kendo-color-base-subtle: #26313d;
    --kendo-color-on-base: #e4e9ee;
    --kendo-color-border: #2c3743;
    --kendo-color-border-alt: #3b4a5a;
    --kendo-color-subtle: #97a3b0;

    /* Las teselas de OpenStreetMap son siempre claras: no existe version
       oscura sin contratar otro proveedor. Se invierten por CSS, que da un
       mapa nocturno decente. Se aplica SOLO al panel de teselas: los
       marcadores y los circulos conservan su color real, que es justo lo
       que no se puede alterar. */
    --ci-filtro-mapa: invert(1) hue-rotate(180deg) brightness(.92) contrast(.95);

    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--ci-fondo);
    color: var(--ci-texto);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
}

/* ---------- Estructura general ------------------------------------------ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--ci-sidebar);
    color: #cfd8e3;
    display: flex;
    flex-direction: column;
}

/* Ahora es un enlace al mapa. Se le quitan las marcas de enlace: debe
   verse igual que antes, solo que se puede hacer clic. */
.app-marca {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Solo la imagen es el enlace al mapa. Se le quitan las marcas de enlace:
   debe verse igual que antes, solo que se puede hacer clic. */
.app-marca-enlace {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
}

.app-marca-enlace:hover { background: rgba(255, 255, 255, .05); }

/* El pie de la marca: el nombre del sistema a la izquierda y el interruptor
   de tema a la derecha. Aca y no en la barra de arriba porque es una
   preferencia personal, no una accion de la pantalla: convive mejor con la
   identidad del sistema que con los controles del trabajo. */
.app-marca-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

/* El logo viene con transparencia, asi que se apoya directo sobre el fondo
   oscuro. Ancho fijo y alto automatico: si manana cambia la imagen, no hay
   que tocar el CSS. */
.app-logo {
    display: block;
    width: 184px;
    height: auto;
}

.app-marca-sub {
    font-size: 10.5px;
    color: #8fa0b3;
    letter-spacing: .3px;
}

.app-nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }

.app-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: #cfd8e3;
    text-decoration: none;
    font-size: 13.5px;
}

.app-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.app-nav-item.active {
    background: var(--ci-primario);
    color: #fff;
    font-weight: 600;
}

.app-nav-icono { width: 16px; text-align: center; opacity: .85; }

.app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
    height: 52px;
    background: var(--ci-panel);
    border-bottom: 1px solid var(--ci-borde);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}

.app-topbar-reloj {
    color: var(--ci-texto-suave);
    font-size: 13px;
    text-transform: capitalize;
    /* Empuja todo lo demas a la derecha. */
    margin-right: auto;
}

/* ---------- Acceso a Diagnostico ----------

   Un engranaje discreto, no una entrada de menu. Diagnostico dejo de ser una
   pantalla de armado el dia que empezo a vigilar el servidor de rutas: hay que
   poder abrirlo sin acordarse de una direccion, pero sin volver a llenar el
   menu lateral que se pidio dejar en una sola opcion. */

.topbar-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 14px;
    border-radius: 50%;
    border: 1px solid transparent;
    color: var(--ci-texto-suave);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.topbar-icono:hover {
    background: var(--ci-chip);
    border-color: var(--ci-borde);
    color: var(--ci-primario);
}

@media (prefers-reduced-motion: reduce) {
    .topbar-icono { transition: none; }
}

/* ---------- Interruptor de tema ----------

   Alto 24px, ancho 46px: el tamano minimo que un dedo acierta comodo en
   una pantalla tactil y que a la vez no compite con el nombre del usuario
   al lado. Los dos iconos viven DENTRO de la pista, siempre visibles: se
   ve de un vistazo que el control alterna entre sol y luna, sin tener que
   probarlo para averiguarlo.                                             */

.tema-interruptor {
    border: none;
    background: none;
    padding: 0;
    margin-left: 16px;
    cursor: pointer;
    line-height: 0;
}

.tema-pista {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 46px;
    height: 24px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ci-chip);
    border: 1px solid var(--ci-borde);
    transition: background .18s ease, border-color .18s ease;
}

.tema-icono {
    font-size: 11px;
    line-height: 1;
    z-index: 1;
    transition: opacity .18s ease;
}

.tema-sol  { color: #e8a33d; opacity: 1; }
.tema-luna { color: var(--ci-texto-suave); opacity: .45; }

.tema-perilla {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ci-panel);
    box-shadow: 0 1px 3px rgba(20, 40, 60, .3);
    transition: transform .18s ease, background .18s ease;
}

.tema-interruptor:hover .tema-pista { border-color: var(--ci-primario); }

.tema-interruptor:focus-visible .tema-pista {
    outline: 2px solid var(--ci-primario);
    outline-offset: 2px;
}

/* Encendido = oscuro. La perilla se corre y los iconos se turnan. */
.tema-encendido .tema-pista { background: #2b3a4b; border-color: #3d5064; }
.tema-encendido .tema-perilla { transform: translateX(22px); background: #dfe6ed; }
.tema-encendido .tema-sol  { opacity: .35; }
.tema-encendido .tema-luna { color: #ffd98a; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .tema-pista, .tema-perilla, .tema-icono { transition: none; }
}

/* Dentro de la barra lateral, que SIEMPRE es oscura en los dos temas, el
   interruptor no puede usar los colores de la aplicacion: quedaria una
   pastilla clara sobre fondo negro. Se le da su propia piel translucida. */
.app-sidebar .tema-interruptor { margin-left: 0; }

.app-sidebar .tema-pista {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .16);
}

.app-sidebar .tema-perilla { background: #dfe6ed; }

.app-sidebar .tema-luna { color: #93a3b4; }

.app-sidebar .tema-interruptor:hover .tema-pista { border-color: #5b9bd5; }

.app-sidebar .tema-encendido .tema-pista {
    background: rgba(91, 155, 213, .28);
    border-color: #5b9bd5;
}

/* ---------- Botones de ciudad ----------

   Van en la barra de arriba, a la izquierda del usuario. Son un control de
   vista, no un filtro: no cambian que tickets hay, solo a donde se mira. */

.ciudades {
    display: flex;
    gap: 6px;
    margin-right: 18px;
}

.ciudad-boton {
    border: 1px solid var(--ci-borde);
    background: var(--ci-panel);
    color: var(--ci-texto-suave);
    border-radius: 999px;
    padding: 5px 13px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ciudad-boton:hover {
    border-color: var(--ci-primario);
    color: var(--ci-primario);
    background: var(--ci-seleccion);
}

/* La ultima ciudad elegida queda marcada. No es un filtro activo — el mapa
   se puede arrastrar a otro lado — pero dice desde donde se partio. */
.ciudad-activa {
    background: var(--ci-primario);
    border-color: var(--ci-primario);
    color: #fff;
}

.ciudad-activa:hover {
    background: var(--ci-primario-oscuro);
    border-color: var(--ci-primario-oscuro);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .ciudad-boton { transition: none; }
}

.app-contenido { padding: 22px 26px 40px; }

/* ---------- Tipografia --------------------------------------------------- */

h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
.subtitulo { color: var(--ci-texto-suave); margin: 0 0 22px; max-width: 760px; }

/* ---------- Tarjetas ----------------------------------------------------- */

.tarjetas { display: flex; flex-wrap: wrap; gap: 16px; }

.tarjeta {
    background: var(--ci-panel);
    border: 1px solid var(--ci-borde);
    border-radius: 10px;
    padding: 18px;
    width: 340px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.tarjeta-titulo { font-weight: 600; margin-bottom: 6px; color: var(--ci-primario); }
.tarjeta-texto { color: var(--ci-texto-suave); margin-bottom: 14px; line-height: 1.5; }
.tarjeta-ok { color: var(--ci-verde); margin-top: 12px; font-weight: 600; }

/* ---------- Diagnostico -------------------------------------------------- */

.barra-acciones {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.cadena-conexion {
    font-family: Consolas, monospace;
    font-size: 11.5px;
    color: var(--ci-texto-suave);
    background: var(--ci-chip);
    border: 1px solid var(--ci-borde);
    border-radius: 6px;
    padding: 5px 9px;
    word-break: break-all;
}

.resumen {
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-weight: 600;
}

.resumen-ok { background: var(--ci-ok-fondo); color: var(--ci-ok-texto); border: 1px solid var(--ci-ok-borde); }
.resumen-error { background: var(--ci-error-fondo); color: var(--ci-error-texto); border: 1px solid var(--ci-error-borde); }

.pastilla {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

.pastilla-ok { background: var(--ci-ok-fondo); color: var(--ci-verde); }
.pastilla-error { background: var(--ci-error-fondo); color: var(--ci-rojo); }
.pastilla-aviso { background: var(--ci-aviso-fondo); color: var(--ci-aviso-texto); }
.pastilla-neutra { background: var(--ci-chip); color: var(--ci-texto-suave); }

/* ---------- Pantalla de tecnicos ---------------------------------------- */

.interruptor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ci-texto-suave);
    font-size: 13px;
}

.marca-tiempo {
    color: var(--ci-texto-suave);
    font-size: 12.5px;
    margin-left: auto;
}

.contadores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.contador {
    background: var(--ci-panel);
    border: 1px solid var(--ci-borde);
    border-left: 4px solid var(--ci-verde);
    border-radius: 8px;
    padding: 12px 18px;
    min-width: 130px;
}

.contador-aviso { border-left-color: #f0a500; }
.contador-error { border-left-color: var(--ci-rojo); }
.contador-neutro { border-left-color: var(--ci-gris); }

.contador-numero { font-size: 24px; font-weight: 700; line-height: 1.1; }
.contador-texto { color: var(--ci-texto-suave); font-size: 12px; margin-top: 2px; }

.aviso-oculto {
    background: var(--ci-chip);
    border: 1px solid var(--ci-borde);
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: var(--ci-texto-suave);
    margin-bottom: 14px;
}

.pastilla-info { background: var(--ci-seleccion); color: var(--ci-info-texto); }

/* ==========================================================================
   PANTALLA DE MAPA  —  el mapa es el protagonista
   ========================================================================== */

/* Altura util = alto de la ventana menos la barra superior y el relleno
   de .app-contenido. Asi el mapa llena la pantalla sin barra de scroll. */
.mapa-pantalla {
    display: flex;
    gap: 14px;
    height: calc(100vh - 118px);
    min-height: 460px;
}

/* ---------- Panel lateral ---------- */

.mapa-panel {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--ci-panel);
    border: 1px solid var(--ci-borde);
    border-radius: 10px;
    padding: 14px;
    overflow: hidden;
}

.panel-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.panel-titulo { font-weight: 600; font-size: 15px; }
.panel-sub { color: var(--ci-texto-suave); font-size: 11.5px; margin-top: 2px; }
.panel-botones { display: flex; gap: 6px; flex-shrink: 0; }

.panel-alerta { padding: 10px 12px; }
.panel-alerta pre { font-size: 11px; margin: 6px 0 0; }

.panel-seccion { border-top: 1px solid var(--ci-borde); padding-top: 11px; }

.panel-etiqueta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ci-texto-suave);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-nota { color: var(--ci-texto-suave); font-size: 11.5px; line-height: 1.45; margin-top: 6px; }

/* ==========================================================================
   AVISOS DE TICKETS CLASIFICADOS NUEVOS
   --------------------------------------------------------------------------
   position: fixed y no absolute: el aviso tiene que quedarse abajo a la
   derecha aunque el panel de la izquierda se este desplazando. Va sobre el
   mapa, con z-index por encima de los controles de Leaflet (que usan 1000).
   ========================================================================== */

.avisos {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 330px;
    max-width: calc(100vw - 44px);
}

.aviso-tarjeta {
    background: var(--ci-panel);
    border: 1px solid var(--ci-borde);
    border-left: 4px solid var(--ci-rojo);
    border-radius: 9px;
    box-shadow: 0 6px 20px rgba(15, 25, 35, .22);
    overflow: hidden;
    animation: entra-aviso .22s ease-out;
}

@keyframes entra-aviso {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-tarjeta { animation: none; }
}

.aviso-cabecera {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--ci-borde);
}

/* Punto rojo latiendo: dice "esto acaba de pasar" sin ocupar una palabra. */
.aviso-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ci-rojo);
    flex-shrink: 0;
    animation: latido-aviso 1.6s ease-in-out infinite;
}

@keyframes latido-aviso {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-punto { animation: none; }
}

.aviso-titulo {
    flex: 1 1 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ci-rojo);
}

.aviso-cerrar {
    border: none;
    background: none;
    color: var(--ci-texto-suave);
    font-size: 17px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.aviso-cerrar:hover { color: var(--ci-texto); }

/* Todo el cuerpo es clicable: lleva al ticket en el mapa. */
.aviso-cuerpo { padding: 9px 11px 8px; cursor: pointer; }
.aviso-cuerpo:hover { background: var(--ci-hover); }

.aviso-ticket {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.aviso-cliente {
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.3;
}

.aviso-tipo { font-size: 11px; color: var(--ci-texto-suave); }

.aviso-sugerido {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 8px;
    background: var(--ci-seleccion);
    border-radius: 6px;
}

/* Sin sugerencia (ya asignado, o nadie lo cubre): mismo bloque, sin el
   azul que dice "esta es la respuesta". */
.aviso-sugerido-neutro { background: var(--ci-chip); }

/* No se puede ubicar: es un problema de datos, no una sugerencia. Va en
   ambar para que se distinga de un aviso normal sin gritar como un error. */
.aviso-sugerido-alerta {
    background: var(--ci-aviso-fondo);
    color: var(--ci-aviso-texto);
}

.aviso-quien { font-size: 12px; line-height: 1.35; }

.aviso-km {
    font-weight: 700;
    color: var(--ci-primario);
    margin-left: 4px;
}

.aviso-otros {
    font-size: 10.5px;
    color: var(--ci-texto-suave);
    line-height: 1.4;
    margin-top: 2px;
}

.aviso-pie {
    font-size: 10px;
    color: var(--ci-texto-suave);
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px dashed var(--ci-borde);
}

/* ---------- Aviso desplegable de tickets sin ubicacion ---------- */

.aviso-linea {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.aviso-boton {
    flex-shrink: 0;
    border: 1px solid var(--ci-aviso-borde);
    background: transparent;
    color: var(--ci-aviso-texto);
    border-radius: 5px;
    padding: 3px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.aviso-boton:hover {
    background: var(--ci-aviso-borde);
    color: var(--ci-texto);
}

.sin-ubicacion {
    margin-top: 9px;
    border-top: 1px solid var(--ci-aviso-borde);
    padding-top: 7px;
    /* Si faltan datos de veinte clientes, la lista no debe empujar todo el
       panel: se desplaza dentro del propio aviso. */
    max-height: 260px;
    overflow-y: auto;
}

.sin-ubicacion-item {
    padding: 6px 4px;
    border-bottom: 1px dashed var(--ci-aviso-borde);
    border-radius: 5px;
    cursor: pointer;
}
.sin-ubicacion-item:hover { background: var(--ci-aviso-borde); }
.sin-ubicacion-item:last-of-type { border-bottom: none; }

.sin-ubicacion-linea1 {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.sin-ubicacion-ticket { font-weight: 700; flex-shrink: 0; }

.sin-ubicacion-cliente {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sin-ubicacion-motivo { margin-top: 1px; opacity: .95; }

.sin-ubicacion-dato {
    font-size: 10.5px;
    opacity: .8;
    margin-top: 2px;
    font-family: Consolas, monospace;
}

.sin-ubicacion-dir {
    font-family: inherit;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-aviso {
    background: var(--ci-aviso-fondo);
    border: 1px solid var(--ci-aviso-borde);
    color: var(--ci-aviso-texto);
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.45;
}

/* ---------- Filtros en columna ---------- */

.filtros-columna { display: flex; flex-direction: column; gap: 3px; }

.filtro-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    opacity: .45;
    font-size: 12.5px;
}

.filtro-fila:hover { background: var(--ci-hover); }
.filtro-fila.filtro-activo { opacity: 1; }
.filtro-fila input { cursor: pointer; margin: 0; }
.filtro-nombre { flex: 1 1 auto; }
.filtro-cantidad { font-weight: 700; }

/* ---------- Ticket seleccionado y tecnicos cercanos ---------- */

.panel-seleccion { background: var(--ci-suave); border-radius: 8px; padding: 11px; border-top: none; }
.seleccion-cliente { font-weight: 600; font-size: 13px; }
.seleccion-dato { color: var(--ci-texto-suave); font-size: 12px; margin-top: 2px; }

.cerrar-seleccion {
    background: none; border: none; cursor: pointer;
    font-size: 17px; line-height: 1; color: var(--ci-texto-suave); padding: 0 2px;
}
.cerrar-seleccion:hover { color: var(--ci-rojo); }

.cercano {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--ci-borde);
    font-size: 12.5px;
}
.cercano:last-of-type { border-bottom: none; }
.cercano-nombre { flex: 1 1 auto; }
/* El TIEMPO es el dato que decide a quien se manda: va grande y en el
   color primario. Los kilometros pasan a ser referencia secundaria. */
.cercano-tiempo {
    font-weight: 700;
    font-size: 13px;
    color: var(--ci-primario);
    white-space: nowrap;
}

.cercano-km { font-weight: 600; font-size: 11px; color: var(--ci-texto-suave); }
.cercano-estado { color: var(--ci-texto-suave); font-size: 11px; width: 78px; text-align: right; }

/* ---------- Zona desplazable del panel ----------

   El panel lateral tiene DOS zonas de scroll, a proposito:

   1. .panel-desplazable — filtros, resumen y carga de trabajo. Crece con
      la cantidad de tecnicos, asi que tiene que poder desplazarse.
   2. .lista-scroll — la lista de tickets/tecnicos, dentro de .panel-lista.

   Sin esta separacion, la carga de trabajo empujaba las pestanas fuera
   del panel y quedaban cortadas al pie. Es el mismo motivo por el que
   una ventana tiene barra de titulo fija y contenido que se desplaza:
   los controles no deben moverse con los datos.                        */

.panel-desplazable {
    flex: 1 1 auto;
    min-height: 90px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* El scroll queda pegado al borde del panel sin comerse el padding. */
    margin-right: -8px;
    padding-right: 8px;
}

/* Barra de scroll discreta: presente cuando hace falta, invisible cuando no. */
.panel-desplazable::-webkit-scrollbar,
.lista-scroll::-webkit-scrollbar { width: 8px; }
.panel-desplazable::-webkit-scrollbar-thumb,
.lista-scroll::-webkit-scrollbar-thumb {
    background: var(--ci-scroll);
    border-radius: 4px;
}
.panel-desplazable::-webkit-scrollbar-thumb:hover,
.lista-scroll::-webkit-scrollbar-thumb:hover { background: var(--ci-scroll-hover); }
.panel-desplazable::-webkit-scrollbar-track,
.lista-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- Lista de tickets ---------- */

/* Anclada al pie del panel. La altura es proporcional para que en una
   pantalla grande la lista sea util, con un piso para que en una chica
   nunca se aplaste hasta desaparecer. */
.panel-lista {
    flex: 0 0 auto;
    height: 42%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.buscador {
    width: 100%;
    border: 1px solid var(--ci-borde);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 12.5px;
    font-family: inherit;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.buscador:focus { outline: none; border-color: var(--ci-primario); }

.lista-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin-right: -6px; padding-right: 6px; }

.lista-item {
    padding: 8px 9px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 3px;
}
.lista-item:hover { background: var(--ci-hover); }
.lista-item-activo { background: var(--ci-seleccion); border-color: var(--ci-primario); }

.lista-linea1 { display: flex; align-items: center; gap: 7px; }
.lista-ticket { font-weight: 700; font-size: 12.5px; }
.lista-tiempo { margin-left: auto; color: var(--ci-texto-suave); font-size: 11px; }
.lista-cliente { font-size: 12.5px; margin: 2px 0 2px 22px; }
.lista-linea3 { display: flex; align-items: center; gap: 6px; margin-left: 22px; }
.lista-tecnico { color: var(--ci-texto-suave); font-size: 11.5px; }

/* ---------- Lienzo del mapa ---------- */

.mapa-lienzo-envoltura {
    flex: 1 1 auto;
    position: relative;
    border: 1px solid var(--ci-borde);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ci-panel);
    min-width: 0;
}

/* Leaflet no deduce la altura del contenido: hay que darsela. */
.lienzo-mapa { height: 100%; width: 100%; z-index: 0; }

/* ---------- Marcadores encimados abiertos en abanico ----------

   Cuando dos o mas marcadores caen en el mismo punto de la pantalla, se
   reparten en circulo y cada uno queda unido a su posicion real por una
   "pata". Sin esa linea el marcador estaria mintiendo: se veria en un lugar
   donde el ticket no esta. La linea es lo que convierte el desplazamiento
   en informacion en vez de en un error.

   El color se define aca y no en JavaScript para que siga al tema: una
   linea gris oscuro seria invisible sobre el mapa nocturno. */

.pata-grupo {
    stroke: var(--ci-texto-suave);
    stroke-opacity: .85;
}

html[data-tema="oscuro"] .pata-grupo { stroke-opacity: .95; }

/* El punto que marca el lugar VERDADERO. Con el abanico abierto ese lugar
   queda vacio; este punto dice "aca es". */
.punto-real {
    stroke: var(--ci-texto);
    fill: var(--ci-panel);
}

/* Mapa nocturno.
   El filtro se aplica SOLO al panel de teselas. Si se aplicara al mapa
   entero, invertiria tambien los marcadores y los circulos: el rojo de
   "sin asignar" saldria celeste y el codigo de colores — que es de lo
   que depende toda esta pantalla — quedaria al reves. */
.lienzo-mapa .leaflet-tile-pane { filter: var(--ci-filtro-mapa); }

html[data-tema="oscuro"] .leaflet-control-attribution {
    background: rgba(19, 26, 34, .82);
    color: #97a3b0;
}
html[data-tema="oscuro"] .leaflet-control-attribution a { color: #8fb8db; }

html[data-tema="oscuro"] .leaflet-bar a {
    background: #1b232d;
    color: #e4e9ee;
    border-bottom-color: #2c3743;
}
html[data-tema="oscuro"] .leaflet-bar a:hover { background: #263241; }

/* La leyenda flota sobre el mapa.
   El color y el FONDO van los dos por variables. Antes el fondo estaba fijo
   en blanco y el texto heredaba el color del tema: en modo oscuro quedaba
   letra casi blanca sobre fondo blanco — invisible. Es el error tipico de
   fijar la mitad de un par de colores: mientras el tema no cambia, funciona. */
.leyenda {
    position: absolute;
    right: 12px;
    bottom: 26px;
    z-index: 500;                 /* encima de los cuadros, debajo de los globos */
    background: var(--ci-flotante);
    color: var(--ci-texto);
    border: 1px solid var(--ci-borde);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 11.5px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
    backdrop-filter: blur(3px);
}

html[data-tema="oscuro"] .leyenda {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.leyenda-titulo {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ci-texto-suave);
    margin: 6px 0 3px;
}
.leyenda-titulo:first-child { margin-top: 0; }
.leyenda-fila { display: flex; align-items: center; gap: 6px; padding: 1px 0; }

/* Los globos los pinta el CSS de Leaflet en blanco fijo. En modo oscuro
   quedan como un parche claro en medio del mapa nocturno. */
html[data-tema="oscuro"] .leaflet-popup-content-wrapper,
html[data-tema="oscuro"] .leaflet-popup-tip {
    background: var(--ci-panel);
    color: var(--ci-texto);
}

html[data-tema="oscuro"] .leaflet-popup-close-button { color: var(--ci-texto-suave); }
html[data-tema="oscuro"] .leaflet-popup-close-button:hover { color: var(--ci-texto); }

/* Globo (popup) de cada pin */
.globo { min-width: 190px; text-align: left; }
.globo-titulo { font-weight: 700; margin-bottom: 4px; }
.globo-linea { font-size: 12px; line-height: 1.5; }

/* ---------- Marcadores del mapa ------------------------------------------
   El dibujo lo genera IconosMapa.cs como SVG; aca solo va la presentacion.
   La FORMA dice que es (chincheta = ticket, figura = tecnico) y el COLOR,
   como esta.                                                              */

.pin-envoltura { background: none; border: none; }

/* Sombra bajo el marcador: lo despega del mapa y lo hace legible sobre
   fondos claros y oscuros por igual. */
.pin-envoltura svg {
    display: block;
    filter: drop-shadow(0 3px 4px rgba(16, 24, 40, .38));
}

/* ---- Latido de los tickets SIN ASIGNAR ----------------------------------
   Es la UNICA animacion del mapa, y por eso funciona: si latiera todo, no
   llamaria la atencion nada. Late lento (2.4 s) para que se note sin marear
   a alguien que mira esta pantalla ocho horas seguidas.
   prefers-reduced-motion la apaga para quien configuro su sistema asi.     */
@keyframes latido-pin {
    0%, 100% { transform: scale(1);    }
    50%      { transform: scale(1.13); }
}

.pin-urgente svg {
    animation: latido-pin 2.4s ease-in-out infinite;
    transform-origin: 50% 92%;   /* late desde la punta, no desde el centro */
}

@media (prefers-reduced-motion: reduce) {
    .pin-urgente svg { animation: none; }
}

/* Al pasar el mouse el marcador crece: ayuda a distinguir cual se va a abrir
   cuando hay varios juntos. */
.pin-envoltura { transition: transform .12s ease-out; transform-origin: 50% 100%; }
.pin-envoltura:hover { transform: scale(1.18); z-index: 1200 !important; }

/* Version chica para leyenda, filtros y listas laterales. */
.marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
}
.marca svg { display: block; }

.enlace-mapa { color: var(--ci-primario); text-decoration: none; font-weight: 600; }
.enlace-mapa:hover { text-decoration: underline; }
.atenuado { color: var(--ci-gris); }

.detalle {
    margin: 0;
    font-family: Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ci-texto);
}

.grilla-diagnostico { background: var(--ci-panel); }

/* ---------- Alertas ------------------------------------------------------ */

.alerta {
    border-radius: 10px;
    padding: 16px 18px;
    border: 1px solid var(--ci-borde);
    background: var(--ci-panel);
    max-width: 900px;
}

.alerta-error { border-color: var(--ci-error-borde); background: var(--ci-error-fondo); color: var(--ci-error-texto); }
.alerta pre { white-space: pre-wrap; font-size: 12.5px; }
.nota { color: var(--ci-texto-suave); font-size: 12.5px; }

/* ---------- Bloque de error de Blazor ------------------------------------ */

#blazor-error-ui {
    background: var(--ci-aviso-fondo);
    border-top: 1px solid var(--ci-aviso-borde);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
    display: none;
    left: 0;
    padding: 12px 18px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 14px;
    top: 10px;
    font-size: 18px;
}

/* ==========================================================================
   TABLERO DE ENTREGA
   ========================================================================== */

.selector {
    border: 1px solid var(--ci-borde);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12.5px;
    font-family: inherit;
    background: var(--ci-panel);
    color: var(--ci-texto);
}
.selector:focus { outline: none; border-color: var(--ci-primario); }

/* ---------- Embudo de etapas ---------- */

.embudo {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.embudo-paso {
    flex: 1 1 150px;
    background: var(--ci-panel);
    border: 1px solid var(--ci-borde);
    border-radius: 9px;
    padding: 12px 14px;
    min-width: 150px;
}

.embudo-numero { font-size: 23px; font-weight: 700; line-height: 1.1; }

.embudo-nombre {
    color: var(--ci-texto-suave);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 2px 0 8px;
}

.embudo-barra {
    height: 6px;
    background: var(--ci-chip);
    border-radius: 999px;
    overflow: hidden;
}

.embudo-relleno { height: 100%; border-radius: 999px; }

.relleno-error  { background: var(--ci-rojo); }
.relleno-neutro { background: var(--ci-gris); }
.relleno-info   { background: var(--ci-primario); }
.relleno-ok     { background: var(--ci-verde); }

.embudo-pct { font-size: 11px; color: var(--ci-texto-suave); margin-top: 5px; }

/* ---------- Puntos de avance en la tabla ---------- */

.pasos { display: inline-flex; gap: 4px; align-items: center; }

.paso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ci-borde);
    display: inline-block;
}

.paso-hecho { background: var(--ci-primario); }

.diagnostico { color: var(--ci-texto-suave); font-size: 12px; line-height: 1.45; }

/* ==========================================================================
   MARCADOR DE TECNICO CON NOMBRE  ·  PESTANAS DEL PANEL
   ========================================================================== */

/* El nombre se dibuja fuera del cuadro del icono, hacia abajo. Leaflet no
   recorta el contenido del divIcon, asi que el ancla no se altera. */
.marcador-tecnico { position: relative; }

.etiqueta-tecnico {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #24313F;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    pointer-events: none;   /* que no robe el clic al marcador */
}

.leyenda-pista {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .75;
}

/* ---------- Pestanas del panel lateral ---------- */

.pestanas {
    display: flex;
    gap: 4px;
    margin-bottom: 9px;
    background: var(--ci-chip);
    border-radius: 7px;
    padding: 3px;
    /* No se encogen nunca: son controles, no contenido. */
    flex-shrink: 0;
}

.pestana {
    flex: 1 1 0;
    border: none;
    background: none;
    border-radius: 5px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ci-texto-suave);
    cursor: pointer;
}

.pestana:hover { color: var(--ci-texto); }

.pestana-activa {
    background: var(--ci-panel);
    color: var(--ci-primario);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

/* ==========================================================================
   ENFOQUE POR TECNICO
   Ver de quien es cada ticket SIN gastar color: el color ya dice el estado.
   ========================================================================== */

/* Todo lo que no pertenece al tecnico enfocado se apaga, no se esconde:
   sigue estando para dar contexto, pero deja de competir por la atencion. */
.pin-atenuado { opacity: .22; }
.pin-atenuado:hover { opacity: .75; }

/* Etiqueta con el nombre del tecnico debajo de la chincheta del ticket. */
.marcador-ticket { position: relative; }

.etiqueta-ticket {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #ffffff;
    color: #24313F;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1.5px solid #24313F;   /* el color real llega por estilo en linea */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    pointer-events: none;
}

/* Banner del tecnico enfocado, arriba del panel lateral. */
.enfoque-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #24313F;
    color: #fff;
    border-radius: 8px;
    padding: 9px 11px;
}

.enfoque-texto { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.enfoque-sub { font-size: 11px; color: #a8b6c6; margin-top: 1px; }
.enfoque-banner .cerrar-seleccion { color: #a8b6c6; }
.enfoque-banner .cerrar-seleccion:hover { color: #fff; }


/* ==========================================================================
   RESUMEN Y CARGA DE TRABAJO  (panel del mapa)
   ========================================================================== */

.resumen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.resumen-celda {
    background: var(--ci-suave);
    border-left: 3px solid var(--ci-gris);
    border-radius: 6px;
    padding: 7px 10px;
}

.resumen-rojo  { border-left-color: var(--ci-rojo); }
.resumen-ambar { border-left-color: #f0a500; }
.resumen-verde { border-left-color: var(--ci-verde); }

.resumen-numero { font-size: 19px; font-weight: 700; line-height: 1.1; }
.resumen-texto  { font-size: 10.5px; color: var(--ci-texto-suave); text-transform: uppercase; letter-spacing: .4px; }

/* ---------- Barras de carga, en el color de cada tecnico ---------- */

.carga {
    padding: 6px 7px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 3px;
}

.carga:hover { background: var(--ci-hover); }
.carga-activa { background: var(--ci-seleccion-suave); border-color: var(--ci-primario); }

.carga-linea { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.carga-nombre { flex: 1 1 auto; font-size: 12.5px; }
.carga-cantidad { font-weight: 700; font-size: 13px; }

.carga-barra {
    height: 6px;
    background: var(--ci-barra);
    border-radius: 999px;
    overflow: hidden;
    margin-left: 33px;
}

.carga-relleno { height: 100%; border-radius: 999px; }

/* ==========================================================================
   PANTALLA DE INGRESO
   HTML plano, sin Blazor: si la aplicacion tiene un problema, esta pantalla
   igual se ve y permite entrar.
   ========================================================================== */

.login-fondo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(160deg, #24313F 0%, #33465b 100%);
    padding: 20px;
}

.login-caja {
    background: var(--ci-panel);
    border-radius: 14px;
    padding: 30px 30px 24px;
    width: 100%;
    max-width: 370px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

.login-marca { text-align: center; margin-bottom: 24px; }

.login-logo { width: 232px; height: auto; display: block; margin: 0 auto; }

.login-sub {
    font-size: 11.5px;
    color: var(--ci-texto-suave);
    margin-top: 10px;
    letter-spacing: .3px;
}

.login-error {
    background: var(--ci-error-fondo);
    border: 1px solid var(--ci-error-borde);
    color: var(--ci-error-texto);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    margin-bottom: 16px;
    line-height: 1.45;
}

.login-campo { display: block; margin-bottom: 14px; }

.login-campo span {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ci-texto-suave);
    margin-bottom: 5px;
}

.login-campo input {
    width: 100%;
    border: 1px solid var(--ci-borde);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ci-texto);
}

.login-campo input:focus {
    outline: none;
    border-color: var(--ci-primario);
    box-shadow: 0 0 0 3px rgba(70, 130, 180, .18);
}

.login-boton {
    width: 100%;
    border: none;
    border-radius: 8px;
    background: var(--ci-primario);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px;
    cursor: pointer;
    margin-top: 6px;
}

.login-boton:hover { background: var(--ci-primario-oscuro); }

.login-pie {
    margin-top: 16px;
    font-size: 11.5px;
    color: var(--ci-texto-suave);
    text-align: center;
    line-height: 1.5;
}

/* ---------- Quien esta conectado, en la barra superior ---------- */

.usuario-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 20px;
    padding-left: 18px;
    border-left: 1px solid var(--ci-borde);
}

.usuario-datos { text-align: right; line-height: 1.25; }
.usuario-nombre { font-size: 12.5px; font-weight: 600; }
.usuario-tipo { font-size: 10.5px; color: var(--ci-texto-suave); }

.usuario-salir {
    font-size: 12px;
    color: var(--ci-texto-suave);
    text-decoration: none;
    border: 1px solid var(--ci-borde);
    border-radius: 6px;
    padding: 4px 10px;
}

.usuario-salir:hover { color: var(--ci-rojo); border-color: var(--ci-error-borde); }

/* ==========================================================================
   COBERTURA — que puede atender el tecnico enfocado
   ========================================================================== */

.panel-cobertura {
    background: var(--ci-suave);
    border-radius: 8px;
    padding: 11px;
    border-top: none;
}

.selector-radio { padding: 2px 6px; font-size: 11px; text-transform: none; letter-spacing: 0; }

.cobertura-resumen { display: flex; gap: 8px; margin-top: 4px; }

.cobertura-dato {
    flex: 1 1 0;
    background: var(--ci-panel);
    border: 1px solid var(--ci-borde);
    border-radius: 7px;
    padding: 7px 8px;
    text-align: center;
}

.cobertura-numero { font-size: 18px; font-weight: 700; line-height: 1.1; }

.cobertura-texto {
    font-size: 10px;
    color: var(--ci-texto-suave);
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Un ticket sin asignar que cae dentro del radio: candidato a darle. */
.candidato {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 7px;
    cursor: pointer;
    border-bottom: 1px dashed var(--ci-borde);
}

.candidato:last-of-type { border-bottom: none; }
.candidato:hover { background: var(--ci-seleccion-suave); }

.candidato-datos { flex: 1 1 auto; min-width: 0; }

.candidato-cliente {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.candidato-tipo {
    font-size: 10.5px;
    color: var(--ci-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.candidato-km { font-weight: 700; font-size: 12px; color: var(--ci-primario); flex-shrink: 0; }

/* Muestra del radio en el filtro: un circulo punteado como el del mapa. */
.marca-radio { align-items: center; justify-content: center; }

.muestra-radio {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px dashed var(--ci-primario);
    background: rgba(70, 130, 180, .12);
    display: inline-block;
}

/* ---------- Barra del radio de cobertura ----------

   La distancia es una magnitud continua, y una barra es el control que
   la representa: se ve donde esta el valor dentro de todo el rango y se
   puede tantear sin abrir nada. Un desplegable obligaba a elegir entre
   nueve escalones que alguien (yo) invento, y escondia el valor hasta
   hacer clic.                                                          */

.radio-control {
    padding: 9px 11px 7px;
    background: var(--ci-suave);
    border: 1px solid var(--ci-borde);
    border-radius: 8px;
    margin-top: 7px;
}

.radio-control-compacto { margin-top: 0; margin-bottom: 10px; padding: 7px 11px 5px; }

.radio-cabecera {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 2px;
}

/* El valor grande: es el dato que se esta buscando al arrastrar. */
.radio-valor {
    font-size: 17px;
    font-weight: 700;
    color: var(--ci-primario);
    font-variant-numeric: tabular-nums;
}

.radio-pista { font-size: 11px; color: var(--ci-texto-suave); }

.radio-extremos {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--ci-texto-suave);
    margin-top: -2px;
}

/* Valor del radio en el titulo del bloque de cobertura. */
.etiqueta-valor {
    margin-left: auto;
    color: var(--ci-primario);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

/* Ajustes a la barra de Telerik para que no se sienta un control
   prestado: mas delgada, sin margenes propios y en el color de la app. */
.barra-radio { margin: 0; }

.barra-radio .k-slider-track { height: 5px; border-radius: 3px; }

.barra-radio .k-slider-selection {
    background: var(--ci-primario);
    border-radius: 3px;
}

.barra-radio .k-draghandle {
    border-color: var(--ci-primario);
    background: var(--ci-panel);
    box-shadow: 0 1px 4px rgba(20, 40, 60, .28);
}

.barra-radio .k-draghandle:hover,
.barra-radio .k-draghandle:active,
.barra-radio .k-draghandle.k-focus {
    background: var(--ci-primario);
    border-color: var(--ci-primario);
}