/* /Layout/MobileLayout.razor.rz.scp.css */
/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.mobile-app[b-65qg7nnnqw] {
    /*
       Alturas globales del layout.

       Las páginas hijas, como Online.razor,
       pueden utilizar estas mismas variables.
    */
    --mobile-header-height: calc(64px + env(safe-area-inset-top));
    --mobile-bottom-height: calc(68px + env(safe-area-inset-bottom));
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #f4f8fc;
    color: #17253d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*
       Evita scroll horizontal sin crear
       un contenedor independiente de scroll.
    */
    overflow-x: clip;
}


/* =========================================================
   HEADER SUPERIOR
   ========================================================= */

.mobile-header[b-65qg7nnnqw] {
    width: 100%;
    height: var(--mobile-header-height);
    min-height: var(--mobile-header-height);
    /*
       FIXED:
       queda físicamente anclado al viewport.

       No se desplaza ni un píxel durante el scroll.
    */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*
       El safe-area se reserva arriba.
       Los 64px visuales quedan debajo de esa zona.
    */
    padding: env(safe-area-inset-top) 18px 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(19, 49, 82, 0.08);
    box-shadow: 0 4px 18px rgba(20, 50, 80, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /*
       Por encima del buscador Online.
    */
    z-index: 1000;
}


/* =========================================================
   TÍTULO HEADER
   ========================================================= */

.mobile-header-title[b-65qg7nnnqw] {
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.3px;
    color: #17253d;
}


/* =========================================================
   BOTÓN USUARIO
   ========================================================= */

.user-button[b-65qg7nnnqw] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #edf5fb;
    color: #174f7e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, transform 0.15s ease;
}


    .user-button:active[b-65qg7nnnqw] {
        transform: scale(0.95);
    }


    .user-button svg[b-65qg7nnnqw] {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.mobile-content[b-65qg7nnnqw] {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    /*
       Como el header es FIXED y ya no ocupa espacio
       dentro del flujo normal de la página,
       reservamos exactamente su altura aquí.

       Así el contenido comienza inmediatamente
       debajo del header.
    */
    padding-top: var(--mobile-header-height);
    /*
       Reserva para la barra inferior fija.
    */
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
    /*
       IMPORTANTE:
       no usar overflow:hidden.

       Queremos que el buscador sticky de Online
       funcione respecto del viewport.
    */
    overflow-x: clip;
    overflow-y: visible;
    box-sizing: border-box;
}


/* =========================================================
   VALIDACIÓN DE SESIÓN
   ========================================================= */

.session-loading[b-65qg7nnnqw] {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #607487;
}


/* =========================================================
   SPINNER SESIÓN
   ========================================================= */

.session-spinner[b-65qg7nnnqw] {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(40, 116, 166, 0.15);
    border-top-color: #2874a6;
    border-radius: 50%;
    animation: mobile-session-spin-b-65qg7nnnqw 0.75s linear infinite;
}


@keyframes mobile-session-spin-b-65qg7nnnqw {

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   BARRA DE NAVEGACIÓN INFERIOR
   ========================================================= */

.mobile-bottom-nav[b-65qg7nnnqw] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: var(--mobile-bottom-height);
    display: grid;
    /*
       Se adapta automáticamente a la cantidad
       de permisos/menús recibidos desde la API.
    */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(20, 60, 95, 0.09);
    box-shadow: 0 -8px 28px rgba(24, 53, 80, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /*
       Header superior e inferior quedan
       en la misma capa principal.
    */
    z-index: 1000;
}


    /* =========================================================
   OPCIÓN DEL MENÚ

   NavLink genera internamente un <a>.
   Debido al CSS Isolation de Blazor usamos ::deep.
   ========================================================= */

    .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 4px;
        border-radius: 14px;
        color: #7a8998;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
    }


        .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item:visited {
            color: #7a8998;
            text-decoration: none;
        }


        .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item:focus {
            text-decoration: none;
            outline: none;
        }


        .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item:active {
            transform: scale(0.96);
        }


    /* =========================================================
   ICONO MENÚ
   ========================================================= */

    .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


        .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-icon svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            position: relative;
            z-index: 2;
        }


    /* =========================================================
   TEXTO MENÚ
   ========================================================= */

    .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-label {
        max-width: 100%;
        overflow: hidden;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.2;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =========================================================
   OPCIÓN ACTIVA
   ========================================================= */

    .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item.active {
        color: #087dbb;
        text-decoration: none;
    }


        .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item.active:visited {
            color: #087dbb;
        }


        .mobile-bottom-nav[b-65qg7nnnqw]
        
        .mobile-nav-item.active
        .mobile-nav-icon::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 40px;
            height: 34px;
            transform: translate(-50%, -50%);
            border-radius: 14px;
            background: rgba(8, 125, 187, 0.10);
            z-index: 1;
        }


/* =========================================================
   ÁREA DE USUARIO
   ========================================================= */

.user-area[b-65qg7nnnqw] {
    position: relative;
    flex: 0 0 auto;
}


/* =========================================================
   MENÚ DE USUARIO
   ========================================================= */

.user-menu[b-65qg7nnnqw] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 230px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.99);
    border: 1px solid rgba(20, 60, 95, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(21, 48, 73, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /*
       Por encima del header.
    */
    z-index: 1100;
}


/* =========================================================
   CABECERA DEL USUARIO
   ========================================================= */

.user-menu-header[b-65qg7nnnqw] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px;
}


/* =========================================================
   AVATAR USUARIO
   ========================================================= */

.user-avatar[b-65qg7nnnqw] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf5fb;
    color: #174f7e;
}


    .user-avatar svg[b-65qg7nnnqw] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   INFORMACIÓN USUARIO
   ========================================================= */

.user-info[b-65qg7nnnqw] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.user-caption[b-65qg7nnnqw] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #8b9aaa;
}


.user-info strong[b-65qg7nnnqw] {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    color: #17253d;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   SEPARADOR
   ========================================================= */

.user-menu-divider[b-65qg7nnnqw] {
    height: 1px;
    margin: 6px 4px;
    background: rgba(20, 60, 95, 0.08);
}


/* =========================================================
   CERRAR SESIÓN
   ========================================================= */

.logout-button[b-65qg7nnnqw] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #b33a3a;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .logout-button svg[b-65qg7nnnqw] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .logout-button:active[b-65qg7nnnqw] {
        background: rgba(179, 58, 58, 0.08);
    }


/* =========================================================
   HOVER SOLO EN EQUIPOS CON MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item:hover {
        color: #2874a6;
        text-decoration: none;
        background: rgba(8, 125, 187, 0.04);
    }


    .user-button:hover[b-65qg7nnnqw] {
        background: #e2f0f9;
    }


    .logout-button:hover[b-65qg7nnnqw] {
        background: rgba(179, 58, 58, 0.06);
    }
}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 350px) {

    .mobile-header[b-65qg7nnnqw] {
        padding-left: 14px;
        padding-right: 14px;
    }


    .mobile-header-title[b-65qg7nnnqw] {
        font-size: 17px;
    }


    .user-button[b-65qg7nnnqw] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    .mobile-bottom-nav[b-65qg7nnnqw] {
        padding-left: 4px;
        padding-right: 4px;
    }


        .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-label {
            font-size: 10px;
        }


        .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-icon svg {
            width: 22px;
            height: 22px;
        }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .session-spinner[b-65qg7nnnqw] {
        animation-duration: 1.5s;
    }


    .mobile-bottom-nav[b-65qg7nnnqw]  .mobile-nav-item,
    .user-button[b-65qg7nnnqw] {
        transition: none;
    }
}
/* /Pages/AdminFuncionalidades.razor.rz.scp.css */
/* =========================================================
   AVLONLINE2 MOBILE
   ADMINISTRACION - FUNCIONALIDADES
   MOBILE FIRST
   ========================================================= */

.admin-functions-page[b-7mq81b97ck] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 82px 12px 30px;
    box-sizing: border-box;
}

    .admin-functions-page *[b-7mq81b97ck],
    .admin-functions-page *[b-7mq81b97ck]::before,
    .admin-functions-page *[b-7mq81b97ck]::after {
        box-sizing: border-box;
    }


/* =========================================================
   CABECERA
   ========================================================= */

.functions-heading[b-7mq81b97ck] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.functions-heading-main[b-7mq81b97ck] {
    min-width: 0;
    flex: 1 1 auto;
}

.functions-kicker[b-7mq81b97ck] {
    display: block;
    margin-bottom: 3px;
    color: #73879a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.functions-heading h1[b-7mq81b97ck] {
    margin: 0;
    color: #17253d;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.1;
}

.functions-heading p[b-7mq81b97ck] {
    max-width: 410px;
    margin: 6px 0 0;
    color: #748596;
    font-size: 10.5px;
    line-height: 1.4;
}

.new-function-button[b-7mq81b97ck] {
    min-width: 76px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 11px;
    border: 0;
    border-radius: 13px;
    background: #174f7e;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
}

    .new-function-button svg[b-7mq81b97ck] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .new-function-button:disabled[b-7mq81b97ck] {
        opacity: 0.4;
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.functions-summary[b-7mq81b97ck] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.summary-box[b-7mq81b97ck] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 6px;
    border-radius: 13px;
    background: #edf5fb;
}

    .summary-box strong[b-7mq81b97ck] {
        color: #174f7e;
        font-size: 17px;
        font-weight: 850;
        line-height: 1;
    }

    .summary-box span[b-7mq81b97ck] {
        margin-top: 4px;
        color: #71869a;
        font-size: 7px;
        font-weight: 800;
    }


/* =========================================================
   MENSAJE
   ========================================================= */

.result-message[b-7mq81b97ck] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding: 12px 13px;
    border-radius: 14px;
}

    .result-message.success[b-7mq81b97ck] {
        background: #edf9f1;
        color: #267746;
    }

    .result-message.error[b-7mq81b97ck] {
        background: #fff2f2;
        color: #a34444;
    }

.result-icon[b-7mq81b97ck] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .result-icon svg[b-7mq81b97ck] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.result-message > span[b-7mq81b97ck] {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 650;
}

.result-close[b-7mq81b97ck] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentColor;
}

    .result-close svg[b-7mq81b97ck] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   LISTADO
   ========================================================= */

.functions-list[b-7mq81b97ck] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* =========================================================
   TARJETA FUNCIONALIDAD
   ========================================================= */

.function-card[b-7mq81b97ck] {
    width: 100%;
    padding: 14px 13px 13px;
    overflow: hidden;
    border: 1px solid rgba(26, 65, 99, 0.08);
    border-left: 4px solid #71889a;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(25, 55, 82, 0.06);
}

.function-card-active[b-7mq81b97ck] {
    border-left-color: #278656;
}

.function-card-inactive[b-7mq81b97ck] {
    border-left-color: #a2adb6;
    opacity: 0.82;
}

.function-card-top[b-7mq81b97ck] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.function-icon[b-7mq81b97ck] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3fa;
    color: #174f7e;
}

    .function-icon svg[b-7mq81b97ck] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.function-main[b-7mq81b97ck] {
    min-width: 0;
    flex: 1 1 auto;
}

.function-title-row[b-7mq81b97ck] {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .function-title-row h2[b-7mq81b97ck] {
        min-width: 0;
        margin: 0;
        color: #17253d;
        font-size: 14px;
        font-weight: 830;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

.function-state[b-7mq81b97ck] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
}

    .function-state.active[b-7mq81b97ck] {
        background: #edf9f1;
        color: #26804b;
    }

    .function-state.inactive[b-7mq81b97ck] {
        background: #f1f3f5;
        color: #77848f;
    }

.state-dot[b-7mq81b97ck] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.function-code[b-7mq81b97ck] {
    display: block;
    margin-top: 4px;
    color: #6483a0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.function-main p[b-7mq81b97ck] {
    margin: 5px 0 0;
    color: #748596;
    font-size: 9.5px;
    line-height: 1.4;
}


/* =========================================================
   DATOS
   ========================================================= */

.function-data[b-7mq81b97ck] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

    .function-data > div[b-7mq81b97ck] {
        min-width: 0;
        padding: 8px 9px;
        border-radius: 10px;
        background: #f7fafc;
    }

    .function-data span[b-7mq81b97ck] {
        display: block;
        margin-bottom: 3px;
        color: #8997a3;
        font-size: 7.5px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .function-data strong[b-7mq81b97ck] {
        display: block;
        overflow: hidden;
        color: #405a6e;
        font-size: 9.5px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   ACCIONES
   ========================================================= */

.function-actions[b-7mq81b97ck] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.function-action-button[b-7mq81b97ck] {
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 800;
}

    .function-action-button svg[b-7mq81b97ck] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .function-action-button.edit[b-7mq81b97ck] {
        background: #174f7e;
        color: #ffffff;
    }

    .function-action-button.delete[b-7mq81b97ck] {
        background: #fff0f0;
        color: #b54141;
    }

    .function-action-button:disabled[b-7mq81b97ck] {
        opacity: 0.4;
    }


/* =========================================================
   MODALES BASE
   ========================================================= */

.function-edit-backdrop[b-7mq81b97ck],
.delete-backdrop[b-7mq81b97ck] {
    position: fixed;
    inset: 0;
    z-index: 2800;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    background: rgba(15, 27, 39, 0.48);
    backdrop-filter: blur(2px);
}

.function-edit-modal[b-7mq81b97ck],
.delete-modal[b-7mq81b97ck] {
    width: 100%;
    max-width: 440px;
    border-radius: 21px 21px 15px 15px;
    background: #ffffff;
    box-shadow: 0 -12px 35px rgba(15, 33, 48, 0.18);
    overflow: hidden;
}


/* =========================================================
   HEADER MODAL
   ========================================================= */

.modal-header[b-7mq81b97ck] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 15px 12px;
}

.modal-header-icon[b-7mq81b97ck] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3fa;
    color: #174f7e;
}

    .modal-header-icon svg[b-7mq81b97ck] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.modal-header > div:nth-child(2)[b-7mq81b97ck] {
    min-width: 0;
    flex: 1 1 auto;
}

.modal-header span[b-7mq81b97ck] {
    display: block;
    color: #8292a0;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.modal-header h2[b-7mq81b97ck] {
    margin: 2px 0 0;
    overflow: hidden;
    color: #17253d;
    font-size: 15px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-close[b-7mq81b97ck] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f6f8;
    color: #677b8b;
}

    .modal-close svg[b-7mq81b97ck] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   FORMULARIO
   ========================================================= */

.modal-body[b-7mq81b97ck] {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    padding: 3px 15px 2px;
}

.form-group[b-7mq81b97ck] {
    margin-bottom: 13px;
}

    .form-group label[b-7mq81b97ck] {
        display: block;
        margin-bottom: 6px;
        color: #42586b;
        font-size: 10px;
        font-weight: 800;
    }

    .form-group input[b-7mq81b97ck],
    .form-group textarea[b-7mq81b97ck] {
        width: 100%;
        border: 1px solid #d8e2e9;
        border-radius: 12px;
        outline: none;
        background: #ffffff;
        color: #24394a;
        font-size: 11px;
    }

    .form-group input[b-7mq81b97ck] {
        height: 45px;
        padding: 0 11px;
    }

    .form-group textarea[b-7mq81b97ck] {
        min-height: 78px;
        padding: 10px 11px;
        resize: vertical;
        font-family: inherit;
        line-height: 1.4;
    }

        .form-group input:focus[b-7mq81b97ck],
        .form-group textarea:focus[b-7mq81b97ck] {
            border-color: #6ba2ca;
            box-shadow: 0 0 0 3px rgba(49, 112, 161, 0.08);
        }

    .form-group input:disabled[b-7mq81b97ck] {
        background: #f1f4f6;
        color: #72818c;
    }

    .form-group small[b-7mq81b97ck] {
        display: block;
        margin-top: 5px;
        color: #8997a3;
        font-size: 8px;
        line-height: 1.35;
    }

.form-grid[b-7mq81b97ck] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 8px;
}


/* =========================================================
   ACTIVO
   ========================================================= */

.function-active-row[b-7mq81b97ck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 3px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f6f9fb;
}

    .function-active-row > div[b-7mq81b97ck] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .function-active-row strong[b-7mq81b97ck] {
        display: block;
        color: #344e62;
        font-size: 10.5px;
    }

    .function-active-row span[b-7mq81b97ck] {
        display: block;
        margin-top: 3px;
        color: #798a98;
        font-size: 8.5px;
        line-height: 1.35;
    }


/* =========================================================
   SWITCH
   ========================================================= */

.switch[b-7mq81b97ck] {
    position: relative;
    width: 44px;
    height: 25px;
    flex: 0 0 44px;
    display: inline-block;
}

    .switch input[b-7mq81b97ck] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.switch-slider[b-7mq81b97ck] {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #c8d1d8;
    transition: 0.18s ease;
    cursor: pointer;
}

    .switch-slider[b-7mq81b97ck]::before {
        content: "";
        position: absolute;
        width: 19px;
        height: 19px;
        top: 3px;
        left: 3px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
        transition: 0.18s ease;
    }

.switch input:checked + .switch-slider[b-7mq81b97ck] {
    background: #258757;
}

    .switch input:checked + .switch-slider[b-7mq81b97ck]::before {
        transform: translateX(19px);
    }

.switch input:disabled + .switch-slider[b-7mq81b97ck] {
    opacity: 0.4;
    cursor: default;
}


/* =========================================================
   BOTONES MODAL
   ========================================================= */

.modal-actions[b-7mq81b97ck] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 15px;
}

.modal-cancel[b-7mq81b97ck],
.modal-save[b-7mq81b97ck] {
    height: 45px;
    border: 0;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.modal-cancel[b-7mq81b97ck] {
    background: #eef3f6;
    color: #526b7d;
}

.modal-save[b-7mq81b97ck] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #174f7e;
    color: #ffffff;
}

    .modal-cancel:disabled[b-7mq81b97ck],
    .modal-save:disabled[b-7mq81b97ck],
    .modal-close:disabled[b-7mq81b97ck] {
        opacity: 0.45;
    }


/* =========================================================
   ELIMINAR
   ========================================================= */

.delete-modal[b-7mq81b97ck] {
    padding: 20px 16px 16px;
}

.delete-icon[b-7mq81b97ck] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 11px;
    border-radius: 15px;
    background: #fff0f0;
    color: #bd4242;
}

    .delete-icon svg[b-7mq81b97ck] {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.delete-modal h2[b-7mq81b97ck] {
    margin: 0;
    color: #17253d;
    font-size: 18px;
    font-weight: 850;
    text-align: center;
}

.delete-modal > p[b-7mq81b97ck] {
    margin: 9px 0 0;
    color: #687b8b;
    font-size: 10.5px;
    line-height: 1.45;
    text-align: center;
}

.delete-warning[b-7mq81b97ck] {
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f7f9fb;
    text-align: center;
}

    .delete-warning strong[b-7mq81b97ck] {
        display: block;
        color: #3b5367;
        font-size: 10px;
    }

    .delete-warning span[b-7mq81b97ck] {
        display: block;
        margin-top: 4px;
        color: #7a8a97;
        font-size: 8.5px;
        line-height: 1.4;
    }

.delete-site-info[b-7mq81b97ck] {
    margin-top: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #fff5e8;
    color: #8b641d;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.delete-actions[b-7mq81b97ck] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.delete-cancel[b-7mq81b97ck],
.delete-confirm[b-7mq81b97ck] {
    height: 45px;
    border: 0;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.delete-cancel[b-7mq81b97ck] {
    background: #eef3f6;
    color: #526b7d;
}

.delete-confirm[b-7mq81b97ck] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #c84343;
    color: #ffffff;
}

    .delete-cancel:disabled[b-7mq81b97ck],
    .delete-confirm:disabled[b-7mq81b97ck] {
        opacity: 0.45;
    }


/* =========================================================
   LOADING / ERROR / EMPTY
   ========================================================= */

.admin-loading[b-7mq81b97ck],
.empty-state[b-7mq81b97ck] {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6c7e8e;
    text-align: center;
}

.admin-spinner[b-7mq81b97ck] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: admin-spin-b-7mq81b97ck 0.75s linear infinite;
}

.button-spinner[b-7mq81b97ck] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: admin-spin-b-7mq81b97ck 0.7s linear infinite;
}

@keyframes admin-spin-b-7mq81b97ck {
    to {
        transform: rotate(360deg);
    }
}

.admin-loading span[b-7mq81b97ck] {
    font-size: 11px;
    font-weight: 650;
}

.admin-error[b-7mq81b97ck] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 15px;
    background: #fff3f3;
    color: #a13f3f;
}

    .admin-error svg[b-7mq81b97ck] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .admin-error div[b-7mq81b97ck] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .admin-error strong[b-7mq81b97ck] {
        font-size: 12px;
    }

    .admin-error span[b-7mq81b97ck] {
        font-size: 10px;
    }

.empty-icon[b-7mq81b97ck] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}

    .empty-icon svg[b-7mq81b97ck] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.empty-state strong[b-7mq81b97ck] {
    color: #26394b;
    font-size: 14px;
}

.empty-state span[b-7mq81b97ck] {
    max-width: 290px;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .admin-functions-page[b-7mq81b97ck] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .functions-heading h1[b-7mq81b97ck] {
        font-size: 22px;
    }

    .functions-heading p[b-7mq81b97ck] {
        font-size: 9.5px;
    }

    .new-function-button[b-7mq81b97ck] {
        min-width: 68px;
        padding: 0 8px;
    }

    .function-title-row h2[b-7mq81b97ck] {
        font-size: 13px;
    }

    .form-grid[b-7mq81b97ck] {
        grid-template-columns: minmax(0, 1fr) 80px;
    }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px) {

    .admin-functions-page[b-7mq81b97ck] {
        padding: 88px 20px 32px;
    }

    .function-card[b-7mq81b97ck] {
        padding: 16px;
    }

    .function-title-row h2[b-7mq81b97ck] {
        font-size: 15px;
    }

    .function-edit-backdrop[b-7mq81b97ck],
    .delete-backdrop[b-7mq81b97ck] {
        align-items: center;
    }

    .function-edit-modal[b-7mq81b97ck],
    .delete-modal[b-7mq81b97ck] {
        border-radius: 20px;
    }
}


/* =========================================================
   MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .new-function-button:hover[b-7mq81b97ck],
    .function-action-button.edit:hover[b-7mq81b97ck],
    .modal-save:hover[b-7mq81b97ck] {
        background: #123f66;
    }

    .function-action-button.delete:hover[b-7mq81b97ck],
    .delete-confirm:hover[b-7mq81b97ck] {
        background: #b63a3a;
    }

    .modal-close:hover[b-7mq81b97ck],
    .modal-cancel:hover[b-7mq81b97ck],
    .delete-cancel:hover[b-7mq81b97ck] {
        background: #e6edf2;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .admin-spinner[b-7mq81b97ck],
    .button-spinner[b-7mq81b97ck],
    .switch-slider[b-7mq81b97ck],
    .switch-slider[b-7mq81b97ck]::before {
        animation: none;
        transition: none;
    }
}
/* /Pages/AdminPerfiles.razor.rz.scp.css */
/* =========================================================
   AVLONLINE2 MOBILE
   ADMINISTRACION - PERFILES
   MOBILE FIRST
   ========================================================= */

.admin-profiles-page[b-kouuxmpye3] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 82px 12px 30px;
    box-sizing: border-box;
}

    .admin-profiles-page *[b-kouuxmpye3],
    .admin-profiles-page *[b-kouuxmpye3]::before,
    .admin-profiles-page *[b-kouuxmpye3]::after {
        box-sizing: border-box;
    }


/* =========================================================
   CABECERA
   ========================================================= */

.profiles-heading[b-kouuxmpye3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.profiles-heading-main[b-kouuxmpye3] {
    min-width: 0;
    flex: 1 1 auto;
}

.profiles-kicker[b-kouuxmpye3] {
    display: block;
    margin-bottom: 3px;
    color: #73879a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.profiles-heading h1[b-kouuxmpye3] {
    margin: 0;
    color: #17253d;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.1;
}

.profiles-heading p[b-kouuxmpye3] {
    max-width: 410px;
    margin: 6px 0 0;
    color: #748596;
    font-size: 10.5px;
    line-height: 1.4;
}

.new-profile-button[b-kouuxmpye3] {
    min-width: 74px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 11px;
    border: 0;
    border-radius: 13px;
    background: #174f7e;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
}

    .new-profile-button svg[b-kouuxmpye3] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .new-profile-button:disabled[b-kouuxmpye3] {
        opacity: 0.4;
    }


/* =========================================================
   RESUMEN
   ========================================================= */

.profiles-summary[b-kouuxmpye3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.summary-box[b-kouuxmpye3] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 6px;
    border-radius: 13px;
    background: #edf5fb;
}

    .summary-box strong[b-kouuxmpye3] {
        color: #174f7e;
        font-size: 17px;
        font-weight: 850;
        line-height: 1;
    }

    .summary-box span[b-kouuxmpye3] {
        margin-top: 4px;
        color: #71869a;
        font-size: 7px;
        font-weight: 800;
    }


/* =========================================================
   MENSAJE
   ========================================================= */

.result-message[b-kouuxmpye3] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding: 12px 13px;
    border-radius: 14px;
}

    .result-message.success[b-kouuxmpye3] {
        background: #edf9f1;
        color: #267746;
    }

    .result-message.error[b-kouuxmpye3] {
        background: #fff2f2;
        color: #a34444;
    }

.result-icon[b-kouuxmpye3] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .result-icon svg[b-kouuxmpye3] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.result-message > span[b-kouuxmpye3] {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 650;
}

.result-close[b-kouuxmpye3] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentColor;
}

    .result-close svg[b-kouuxmpye3] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   LISTADO
   ========================================================= */

.profiles-list[b-kouuxmpye3] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* =========================================================
   TARJETA PERFIL
   ========================================================= */

.profile-card[b-kouuxmpye3] {
    width: 100%;
    padding: 14px 13px 13px;
    overflow: hidden;
    border: 1px solid rgba(26, 65, 99, 0.08);
    border-left: 4px solid #71889a;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(25, 55, 82, 0.06);
}

.profile-card-active[b-kouuxmpye3] {
    border-left-color: #2d9a5b;
}

.profile-card-inactive[b-kouuxmpye3] {
    border-left-color: #a2adb6;
    opacity: 0.8;
}

.profile-card-top[b-kouuxmpye3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.profile-icon[b-kouuxmpye3] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3fa;
    color: #174f7e;
}

    .profile-icon svg[b-kouuxmpye3] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.profile-main[b-kouuxmpye3] {
    min-width: 0;
    flex: 1 1 auto;
}

.profile-title-row[b-kouuxmpye3] {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .profile-title-row h2[b-kouuxmpye3] {
        min-width: 0;
        margin: 0;
        color: #17253d;
        font-size: 14px;
        font-weight: 830;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

.profile-main p[b-kouuxmpye3] {
    margin: 5px 0 0;
    color: #748596;
    font-size: 9.5px;
    line-height: 1.4;
}

.profile-state[b-kouuxmpye3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
}

    .profile-state.active[b-kouuxmpye3] {
        background: #edf9f1;
        color: #26804b;
    }

    .profile-state.inactive[b-kouuxmpye3] {
        background: #f1f3f5;
        color: #77848f;
    }

.state-dot[b-kouuxmpye3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}


/* =========================================================
   ESTADÍSTICAS
   ========================================================= */

.profile-stats[b-kouuxmpye3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

    .profile-stats > div[b-kouuxmpye3] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 5px;
        border-radius: 10px;
        background: #f7fafc;
    }

    .profile-stats strong[b-kouuxmpye3] {
        color: #35536a;
        font-size: 13px;
        font-weight: 850;
    }

    .profile-stats span[b-kouuxmpye3] {
        margin-top: 3px;
        color: #8896a2;
        font-size: 7px;
        font-weight: 800;
    }


/* =========================================================
   ACCIONES
   ========================================================= */

.profile-actions[b-kouuxmpye3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.profile-action-button[b-kouuxmpye3] {
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 800;
}

    .profile-action-button svg[b-kouuxmpye3] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .profile-action-button.permissions[b-kouuxmpye3] {
        background: #174f7e;
        color: #ffffff;
    }

    .profile-action-button.edit[b-kouuxmpye3] {
        background: #eef3f6;
        color: #49687f;
    }

    .profile-action-button:disabled[b-kouuxmpye3] {
        opacity: 0.4;
    }


/* =========================================================
   MODALES - BASE
   ========================================================= */

.profile-edit-backdrop[b-kouuxmpye3],
.permissions-backdrop[b-kouuxmpye3] {
    position: fixed;
    inset: 0;
    z-index: 2700;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    background: rgba(15, 27, 39, 0.48);
    backdrop-filter: blur(2px);
}

.profile-edit-modal[b-kouuxmpye3],
.permissions-modal[b-kouuxmpye3] {
    width: 100%;
    max-width: 440px;
    border-radius: 21px 21px 15px 15px;
    background: #ffffff;
    box-shadow: 0 -12px 35px rgba(15, 33, 48, 0.18);
    overflow: hidden;
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.modal-header[b-kouuxmpye3],
.permissions-header[b-kouuxmpye3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 15px 12px;
}

.modal-header-icon[b-kouuxmpye3],
.permissions-icon[b-kouuxmpye3] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3fa;
    color: #174f7e;
}

    .modal-header-icon svg[b-kouuxmpye3],
    .permissions-icon svg[b-kouuxmpye3] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.modal-header > div:nth-child(2)[b-kouuxmpye3],
.permissions-header > div:nth-child(2)[b-kouuxmpye3] {
    min-width: 0;
    flex: 1 1 auto;
}

.modal-header span[b-kouuxmpye3],
.permissions-header span[b-kouuxmpye3] {
    display: block;
    color: #8292a0;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.modal-header h2[b-kouuxmpye3],
.permissions-header h2[b-kouuxmpye3] {
    margin: 2px 0 0;
    overflow: hidden;
    color: #17253d;
    font-size: 15px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-close[b-kouuxmpye3] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f6f8;
    color: #677b8b;
}

    .modal-close svg[b-kouuxmpye3] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   FORMULARIO
   ========================================================= */

.modal-body[b-kouuxmpye3] {
    padding: 3px 15px 2px;
}

.form-group[b-kouuxmpye3] {
    margin-bottom: 13px;
}

    .form-group label[b-kouuxmpye3] {
        display: block;
        margin-bottom: 6px;
        color: #42586b;
        font-size: 10px;
        font-weight: 800;
    }

    .form-group input[b-kouuxmpye3],
    .form-group textarea[b-kouuxmpye3] {
        width: 100%;
        border: 1px solid #d8e2e9;
        border-radius: 12px;
        outline: none;
        background: #ffffff;
        color: #24394a;
        font-size: 11px;
    }

    .form-group input[b-kouuxmpye3] {
        height: 45px;
        padding: 0 11px;
    }

    .form-group textarea[b-kouuxmpye3] {
        min-height: 82px;
        padding: 10px 11px;
        resize: vertical;
        font-family: inherit;
        line-height: 1.4;
    }

        .form-group input:focus[b-kouuxmpye3],
        .form-group textarea:focus[b-kouuxmpye3] {
            border-color: #6ba2ca;
            box-shadow: 0 0 0 3px rgba(49, 112, 161, 0.08);
        }


/* =========================================================
   ACTIVO
   ========================================================= */

.profile-active-row[b-kouuxmpye3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 3px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f6f9fb;
}

    .profile-active-row > div[b-kouuxmpye3] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .profile-active-row strong[b-kouuxmpye3] {
        display: block;
        color: #344e62;
        font-size: 10.5px;
    }

    .profile-active-row span[b-kouuxmpye3] {
        display: block;
        margin-top: 3px;
        color: #798a98;
        font-size: 8.5px;
        line-height: 1.35;
    }


/* =========================================================
   SWITCH
   ========================================================= */

.switch[b-kouuxmpye3] {
    position: relative;
    width: 44px;
    height: 25px;
    flex: 0 0 44px;
    display: inline-block;
}

    .switch input[b-kouuxmpye3] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.switch-slider[b-kouuxmpye3] {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #c8d1d8;
    transition: 0.18s ease;
    cursor: pointer;
}

    .switch-slider[b-kouuxmpye3]::before {
        content: "";
        position: absolute;
        width: 19px;
        height: 19px;
        top: 3px;
        left: 3px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
        transition: 0.18s ease;
    }

.switch input:checked + .switch-slider[b-kouuxmpye3] {
    background: #258757;
}

    .switch input:checked + .switch-slider[b-kouuxmpye3]::before {
        transform: translateX(19px);
    }

.switch input:disabled + .switch-slider[b-kouuxmpye3] {
    opacity: 0.4;
    cursor: default;
}


/* =========================================================
   ACCIONES MODAL PERFIL
   ========================================================= */

.modal-actions[b-kouuxmpye3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 15px;
}

.modal-cancel[b-kouuxmpye3],
.modal-save[b-kouuxmpye3] {
    height: 45px;
    border: 0;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.modal-cancel[b-kouuxmpye3] {
    background: #eef3f6;
    color: #526b7d;
}

.modal-save[b-kouuxmpye3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #174f7e;
    color: #ffffff;
}

    .modal-cancel:disabled[b-kouuxmpye3],
    .modal-save:disabled[b-kouuxmpye3],
    .modal-close:disabled[b-kouuxmpye3] {
        opacity: 0.45;
    }


/* =========================================================
   PERMISOS
   ========================================================= */

.permissions-modal[b-kouuxmpye3] {
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
}

.permissions-summary[b-kouuxmpye3] {
    margin: 0 15px 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #edf5fb;
    color: #4f6e86;
}

    .permissions-summary strong[b-kouuxmpye3] {
        color: #174f7e;
        font-size: 14px;
        font-weight: 850;
    }

    .permissions-summary span[b-kouuxmpye3] {
        margin-left: 4px;
        font-size: 9px;
    }

.permissions-list[b-kouuxmpye3] {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 15px 10px;
}

.permission-item[b-kouuxmpye3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid #edf1f4;
}

    .permission-item:last-child[b-kouuxmpye3] {
        border-bottom: 0;
    }

.permission-main[b-kouuxmpye3] {
    min-width: 0;
    flex: 1 1 auto;
}

.permission-name[b-kouuxmpye3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .permission-name strong[b-kouuxmpye3] {
        color: #2c4355;
        font-size: 11px;
        font-weight: 800;
    }

.disabled-badge[b-kouuxmpye3] {
    padding: 3px 6px;
    border-radius: 7px;
    background: #f1f3f5;
    color: #818d96;
    font-size: 7px;
    font-weight: 800;
}

.permission-code[b-kouuxmpye3] {
    display: block;
    margin-top: 2px;
    color: #6483a0;
    font-size: 7.5px;
    font-weight: 750;
}

.permission-main p[b-kouuxmpye3] {
    margin: 4px 0 0;
    color: #7a8996;
    font-size: 8.5px;
    line-height: 1.35;
}

.permissions-footer[b-kouuxmpye3] {
    padding: 10px 15px 15px;
    border-top: 1px solid #eef2f5;
}

.permissions-close-button[b-kouuxmpye3] {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: #eef3f6;
    color: #49677d;
    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   LOADING PERMISOS
   ========================================================= */

.permissions-loading[b-kouuxmpye3] {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #718492;
}

    .permissions-loading span[b-kouuxmpye3] {
        font-size: 10px;
    }

.permissions-error[b-kouuxmpye3] {
    margin: 0 15px 15px;
    padding: 12px;
    border-radius: 12px;
    background: #fff2f2;
    color: #a34444;
}

    .permissions-error strong[b-kouuxmpye3] {
        display: block;
        font-size: 11px;
    }

    .permissions-error span[b-kouuxmpye3] {
        display: block;
        margin-top: 3px;
        font-size: 9px;
    }


/* =========================================================
   LOADING GENERAL / ERROR / EMPTY
   ========================================================= */

.admin-loading[b-kouuxmpye3],
.empty-state[b-kouuxmpye3] {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6c7e8e;
    text-align: center;
}

.admin-spinner[b-kouuxmpye3] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: admin-spin-b-kouuxmpye3 0.75s linear infinite;
}

.button-spinner[b-kouuxmpye3] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: admin-spin-b-kouuxmpye3 0.7s linear infinite;
}

@keyframes admin-spin-b-kouuxmpye3 {
    to {
        transform: rotate(360deg);
    }
}

.admin-loading span[b-kouuxmpye3] {
    font-size: 11px;
    font-weight: 650;
}

.admin-error[b-kouuxmpye3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 15px;
    background: #fff3f3;
    color: #a13f3f;
}

    .admin-error svg[b-kouuxmpye3] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .admin-error div[b-kouuxmpye3] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .admin-error strong[b-kouuxmpye3] {
        font-size: 12px;
    }

    .admin-error span[b-kouuxmpye3] {
        font-size: 10px;
    }

.empty-icon[b-kouuxmpye3] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}

    .empty-icon svg[b-kouuxmpye3] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.empty-state strong[b-kouuxmpye3] {
    color: #26394b;
    font-size: 14px;
}

.empty-state span[b-kouuxmpye3] {
    max-width: 290px;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .admin-profiles-page[b-kouuxmpye3] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .profiles-heading h1[b-kouuxmpye3] {
        font-size: 22px;
    }

    .profiles-heading p[b-kouuxmpye3] {
        font-size: 9.5px;
    }

    .new-profile-button[b-kouuxmpye3] {
        min-width: 66px;
        padding: 0 8px;
    }

    .profile-title-row h2[b-kouuxmpye3] {
        font-size: 13px;
    }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px) {

    .admin-profiles-page[b-kouuxmpye3] {
        padding: 88px 20px 32px;
    }

    .profile-card[b-kouuxmpye3] {
        padding: 16px;
    }

    .profile-title-row h2[b-kouuxmpye3] {
        font-size: 15px;
    }

    .profile-edit-backdrop[b-kouuxmpye3],
    .permissions-backdrop[b-kouuxmpye3] {
        align-items: center;
    }

    .profile-edit-modal[b-kouuxmpye3],
    .permissions-modal[b-kouuxmpye3] {
        border-radius: 20px;
    }
}


/* =========================================================
   MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .new-profile-button:hover[b-kouuxmpye3],
    .profile-action-button.permissions:hover[b-kouuxmpye3],
    .modal-save:hover[b-kouuxmpye3] {
        background: #123f66;
    }

    .profile-action-button.edit:hover[b-kouuxmpye3],
    .modal-close:hover[b-kouuxmpye3],
    .permissions-close-button:hover[b-kouuxmpye3] {
        background: #e6edf2;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .admin-spinner[b-kouuxmpye3],
    .button-spinner[b-kouuxmpye3],
    .switch-slider[b-kouuxmpye3],
    .switch-slider[b-kouuxmpye3]::before {
        animation: none;
        transition: none;
    }
}
/* /Pages/AdminUsuarios.razor.rz.scp.css */
/* =========================================================
   AVLONLINE2 MOBILE
   ADMINISTRACION - USUARIOS
   MOBILE FIRST
   ========================================================= */

.admin-users-page[b-63c1a0y6zz] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 82px 12px 30px;
    box-sizing: border-box;
}


    .admin-users-page *[b-63c1a0y6zz],
    .admin-users-page *[b-63c1a0y6zz]::before,
    .admin-users-page *[b-63c1a0y6zz]::after {
        box-sizing: border-box;
    }


/* =========================================================
   CABECERA
   ========================================================= */

.admin-heading[b-63c1a0y6zz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}


    .admin-heading > div:first-child[b-63c1a0y6zz] {
        min-width: 0;
        flex: 1 1 auto;
    }


.admin-kicker[b-63c1a0y6zz] {
    display: block;
    margin-bottom: 3px;
    color: #73879a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}


.admin-heading h1[b-63c1a0y6zz] {
    margin: 0;
    color: #17253d;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.1;
}


.admin-heading p[b-63c1a0y6zz] {
    max-width: 390px;
    margin: 6px 0 0;
    color: #748596;
    font-size: 10.5px;
    line-height: 1.4;
}


.admin-total[b-63c1a0y6zz] {
    min-width: 65px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 9px;
    border-radius: 14px;
    background: #edf5fb;
}


    .admin-total strong[b-63c1a0y6zz] {
        color: #174f7e;
        font-size: 18px;
        font-weight: 850;
        line-height: 1;
    }


    .admin-total span[b-63c1a0y6zz] {
        margin-top: 4px;
        color: #71869a;
        font-size: 7px;
        font-weight: 800;
    }


/* =========================================================
   BUSCADOR
   ========================================================= */

.search-card[b-63c1a0y6zz] {
    width: 100%;
    margin-bottom: 13px;
}


    .search-card form[b-63c1a0y6zz] {
        display: flex;
        gap: 8px;
    }


.search-box[b-63c1a0y6zz] {
    position: relative;
    min-width: 0;
    height: 48px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 59, 91, 0.06);
}


    .search-box > svg[b-63c1a0y6zz] {
        width: 18px;
        height: 18px;
        margin-left: 13px;
        flex: 0 0 18px;
        fill: none;
        stroke: #71869a;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .search-box input[b-63c1a0y6zz] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 39px 0 9px;
        border: 0;
        outline: none;
        background: transparent;
        color: #17253d;
        font-size: 13px;
    }


        .search-box input[b-63c1a0y6zz]::placeholder {
            color: #a1adb8;
        }


.clear-search[b-63c1a0y6zz] {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7b8d9d;
}


    .clear-search svg[b-63c1a0y6zz] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.search-button[b-63c1a0y6zz] {
    min-width: 76px;
    height: 48px;
    flex: 0 0 76px;
    padding: 0 10px;
    border: 0;
    border-radius: 15px;
    background: #174f7e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}


    .search-button:disabled[b-63c1a0y6zz],
    .clear-search:disabled[b-63c1a0y6zz] {
        opacity: 0.45;
    }


/* =========================================================
   MENSAJE RESULTADO
   ========================================================= */

.result-message[b-63c1a0y6zz] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding: 12px 13px;
    border-radius: 14px;
}


    .result-message.success[b-63c1a0y6zz] {
        background: #edf9f1;
        color: #267746;
    }


    .result-message.error[b-63c1a0y6zz] {
        background: #fff2f2;
        color: #a34444;
    }


.result-icon[b-63c1a0y6zz] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}


    .result-icon svg[b-63c1a0y6zz] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.result-message > span[b-63c1a0y6zz] {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 650;
}


.result-close[b-63c1a0y6zz] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentColor;
}


    .result-close svg[b-63c1a0y6zz] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   LISTADO
   ========================================================= */

.users-list[b-63c1a0y6zz] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* =========================================================
   TARJETA USUARIO
   ========================================================= */

.user-card[b-63c1a0y6zz] {
    width: 100%;
    padding: 14px 13px 13px;
    overflow: hidden;
    border: 1px solid rgba(26, 65, 99, 0.08);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(25, 55, 82, 0.06);
}


.user-top[b-63c1a0y6zz] {
    display: flex;
    align-items: center;
    gap: 10px;
}


.user-avatar[b-63c1a0y6zz] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3fa;
    color: #174f7e;
    font-size: 13px;
    font-weight: 850;
}


.user-main[b-63c1a0y6zz] {
    min-width: 0;
    flex: 1 1 auto;
}


    .user-main h2[b-63c1a0y6zz] {
        margin: 0;
        overflow: hidden;
        color: #17253d;
        font-size: 14px;
        font-weight: 820;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.user-login[b-63c1a0y6zz] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #81909d;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.user-id[b-63c1a0y6zz] {
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 8px;
    background: #f3f7fa;
    color: #8393a0;
    font-size: 8px;
    font-weight: 750;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.user-status-row[b-63c1a0y6zz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}


.account-status[b-63c1a0y6zz],
.profile-status[b-63c1a0y6zz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 9px;
    font-size: 8.5px;
    font-weight: 750;
}


    .account-status.active[b-63c1a0y6zz] {
        background: #edf9f1;
        color: #24814a;
    }


    .account-status.inactive[b-63c1a0y6zz] {
        background: #f2f4f6;
        color: #75828d;
    }


    .account-status.blocked[b-63c1a0y6zz] {
        background: #fff0f0;
        color: #b44141;
    }


.status-dot[b-63c1a0y6zz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}


.profile-status[b-63c1a0y6zz] {
    background: #eaf3fa;
    color: #275f89;
}


    .profile-status.no-profile[b-63c1a0y6zz] {
        background: #f5f6f7;
        color: #7e8a94;
    }


/* =========================================================
   DETALLE
   ========================================================= */

.user-detail[b-63c1a0y6zz] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: #66798a;
}


    .user-detail svg[b-63c1a0y6zz] {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        fill: none;
        stroke: #6688a4;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .user-detail span[b-63c1a0y6zz] {
        min-width: 0;
        overflow: hidden;
        font-size: 9.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   PERFIL ACTUAL
   ========================================================= */

.profile-box[b-63c1a0y6zz] {
    margin-top: 11px;
    padding: 10px 11px;
    border-radius: 12px;
    background: #f7fafc;
}


    .profile-box > span[b-63c1a0y6zz] {
        display: block;
        margin-bottom: 4px;
        color: #8a98a5;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }


    .profile-box strong[b-63c1a0y6zz] {
        display: block;
        color: #344e62;
        font-size: 11px;
        font-weight: 800;
    }


        .profile-box strong.without-profile[b-63c1a0y6zz] {
            color: #7f8c96;
        }


    .profile-box small[b-63c1a0y6zz] {
        display: block;
        margin-top: 4px;
        color: #7b8b98;
        font-size: 8.5px;
        line-height: 1.35;
    }


/* =========================================================
   BOTÓN PERFIL
   ========================================================= */

.manage-profile-button[b-63c1a0y6zz] {
    width: 100%;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 11px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: #174f7e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}


    .manage-profile-button svg[b-63c1a0y6zz] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .manage-profile-button:disabled[b-63c1a0y6zz] {
        opacity: 0.42;
    }


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.pagination[b-63c1a0y6zz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 19px;
}


.page-button[b-63c1a0y6zz] {
    width: 100%;
    min-width: 0;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(30, 69, 102, 0.10);
    border-radius: 12px;
    background: #ffffff;
    color: #315f84;
    font-size: 11px;
    font-weight: 750;
}


    .page-button svg[b-63c1a0y6zz] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .page-button:disabled[b-63c1a0y6zz] {
        opacity: 0.35;
    }


.page-status[b-63c1a0y6zz] {
    min-width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    .page-status strong[b-63c1a0y6zz] {
        color: #17253d;
        font-size: 15px;
    }


    .page-status span[b-63c1a0y6zz] {
        color: #8795a3;
        font-size: 8px;
    }


/* =========================================================
   MODAL
   ========================================================= */

.profile-modal-backdrop[b-63c1a0y6zz] {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    background: rgba(15, 27, 39, 0.48);
    backdrop-filter: blur(2px);
}


.profile-modal[b-63c1a0y6zz] {
    width: 100%;
    max-width: 430px;
    padding: 17px 15px 15px;
    border-radius: 21px 21px 15px 15px;
    background: #ffffff;
    box-shadow: 0 -12px 35px rgba(15, 33, 48, 0.18);
}


.profile-modal-header[b-63c1a0y6zz] {
    display: flex;
    align-items: center;
    gap: 10px;
}


.profile-modal-avatar[b-63c1a0y6zz] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf3fa;
    color: #174f7e;
    font-size: 12px;
    font-weight: 850;
}


.profile-modal-header > div:nth-child(2)[b-63c1a0y6zz] {
    min-width: 0;
    flex: 1 1 auto;
}


.profile-modal-header span[b-63c1a0y6zz] {
    display: block;
    color: #8292a0;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
}


.profile-modal-header h2[b-63c1a0y6zz] {
    margin: 2px 0 0;
    overflow: hidden;
    color: #17253d;
    font-size: 15px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.modal-close[b-63c1a0y6zz] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f6f8;
    color: #677b8b;
}


    .modal-close svg[b-63c1a0y6zz] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   MODAL BODY
   ========================================================= */

.profile-modal-body[b-63c1a0y6zz] {
    margin-top: 17px;
}


    .profile-modal-body label[b-63c1a0y6zz] {
        display: block;
        margin-bottom: 6px;
        color: #42586b;
        font-size: 10px;
        font-weight: 800;
    }


    .profile-modal-body select[b-63c1a0y6zz] {
        width: 100%;
        height: 46px;
        padding: 0 37px 0 11px;
        border: 1px solid #d8e2e9;
        border-radius: 12px;
        outline: none;
        background: #ffffff;
        color: #24394a;
        font-size: 11px;
    }


        .profile-modal-body select:focus[b-63c1a0y6zz] {
            border-color: #6ba2ca;
            box-shadow: 0 0 0 3px rgba(49, 112, 161, 0.08);
        }


.profile-help[b-63c1a0y6zz] {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f6f9fb;
}


    .profile-help strong[b-63c1a0y6zz] {
        display: block;
        color: #344e62;
        font-size: 10.5px;
    }


    .profile-help span[b-63c1a0y6zz] {
        display: block;
        margin-top: 3px;
        color: #708392;
        font-size: 9px;
        line-height: 1.4;
    }


    .profile-help small[b-63c1a0y6zz] {
        display: block;
        margin-top: 5px;
        color: #527493;
        font-size: 8.5px;
        font-weight: 700;
    }


/* =========================================================
   MODAL ACTIONS
   ========================================================= */

.profile-modal-actions[b-63c1a0y6zz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}


.modal-cancel[b-63c1a0y6zz],
.modal-save[b-63c1a0y6zz] {
    height: 45px;
    border: 0;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}


.modal-cancel[b-63c1a0y6zz] {
    background: #eef3f6;
    color: #526b7d;
}


.modal-save[b-63c1a0y6zz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #174f7e;
    color: #ffffff;
}


    .modal-cancel:disabled[b-63c1a0y6zz],
    .modal-save:disabled[b-63c1a0y6zz],
    .modal-close:disabled[b-63c1a0y6zz] {
        opacity: 0.45;
    }


/* =========================================================
   SPINNER
   ========================================================= */

.button-spinner[b-63c1a0y6zz] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: admin-spin-b-63c1a0y6zz 0.7s linear infinite;
}


.admin-spinner[b-63c1a0y6zz] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: admin-spin-b-63c1a0y6zz 0.75s linear infinite;
}


@keyframes admin-spin-b-63c1a0y6zz {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   LOADING / ERROR / EMPTY
   ========================================================= */

.admin-loading[b-63c1a0y6zz],
.empty-state[b-63c1a0y6zz] {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6c7e8e;
    text-align: center;
}


    .admin-loading span[b-63c1a0y6zz] {
        font-size: 11px;
        font-weight: 650;
    }


.admin-error[b-63c1a0y6zz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 15px;
    background: #fff3f3;
    color: #a13f3f;
}


    .admin-error svg[b-63c1a0y6zz] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .admin-error div[b-63c1a0y6zz] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .admin-error strong[b-63c1a0y6zz] {
        font-size: 12px;
    }


    .admin-error span[b-63c1a0y6zz] {
        font-size: 10px;
    }


.empty-icon[b-63c1a0y6zz] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}


    .empty-icon svg[b-63c1a0y6zz] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.empty-state strong[b-63c1a0y6zz] {
    color: #26394b;
    font-size: 14px;
}


.empty-state span[b-63c1a0y6zz] {
    max-width: 290px;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .admin-users-page[b-63c1a0y6zz] {
        padding-left: 10px;
        padding-right: 10px;
    }


    .admin-heading h1[b-63c1a0y6zz] {
        font-size: 22px;
    }


    .admin-heading p[b-63c1a0y6zz] {
        font-size: 9.5px;
    }


    .search-card form[b-63c1a0y6zz] {
        gap: 5px;
    }


    .search-button[b-63c1a0y6zz] {
        min-width: 68px;
        flex-basis: 68px;
        padding: 0 6px;
        font-size: 11px;
    }


    .user-main h2[b-63c1a0y6zz] {
        font-size: 13px;
    }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px) {

    .admin-users-page[b-63c1a0y6zz] {
        padding: 88px 20px 32px;
    }


    .user-card[b-63c1a0y6zz] {
        padding: 16px;
    }


    .user-main h2[b-63c1a0y6zz] {
        font-size: 15px;
    }


    .manage-profile-button[b-63c1a0y6zz] {
        height: 45px;
        font-size: 12px;
    }


    .profile-modal-backdrop[b-63c1a0y6zz] {
        align-items: center;
    }


    .profile-modal[b-63c1a0y6zz] {
        border-radius: 20px;
    }
}


/* =========================================================
   MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .search-button:hover[b-63c1a0y6zz],
    .manage-profile-button:hover[b-63c1a0y6zz],
    .modal-save:hover[b-63c1a0y6zz] {
        background: #123f66;
    }


    .clear-search:hover[b-63c1a0y6zz],
    .modal-close:hover[b-63c1a0y6zz] {
        background: rgba(23, 79, 126, 0.06);
    }


    .page-button:not(:disabled):hover[b-63c1a0y6zz] {
        background: #f5f8fa;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .admin-spinner[b-63c1a0y6zz],
    .button-spinner[b-63c1a0y6zz] {
        animation: none;
    }
}
/* /Pages/CorteMotor.razor.rz.scp.css */
/* =========================================================
   AVLONLINE2 - CORTE MOTOR
   MOBILE FIRST
   ========================================================= */

.corte-motor-page[b-3llw9gvmbu] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 82px 12px 28px;
    box-sizing: border-box;
}


    .corte-motor-page *[b-3llw9gvmbu],
    .corte-motor-page *[b-3llw9gvmbu]::before,
    .corte-motor-page *[b-3llw9gvmbu]::after {
        box-sizing: border-box;
    }


/* =========================================================
   CABECERA
   ========================================================= */

.corte-heading[b-3llw9gvmbu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}


.corte-kicker[b-3llw9gvmbu] {
    display: block;
    margin-bottom: 3px;
    color: #7b8da0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}


.corte-heading h1[b-3llw9gvmbu] {
    margin: 0;
    color: #17253d;
    font-size: 24px;
    font-weight: 850;
    line-height: 1.1;
}


.corte-total[b-3llw9gvmbu] {
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 8px;
    border-radius: 13px;
    background: #edf5fb;
}


    .corte-total strong[b-3llw9gvmbu] {
        color: #174f7e;
        font-size: 17px;
        font-weight: 850;
        line-height: 1;
    }


    .corte-total span[b-3llw9gvmbu] {
        margin-top: 3px;
        color: #71869a;
        font-size: 7px;
        font-weight: 750;
    }


/* =========================================================
   BUSCADOR
   ========================================================= */

.search-card[b-3llw9gvmbu] {
    width: 100%;
    margin-bottom: 13px;
}


    .search-card form[b-3llw9gvmbu] {
        display: flex;
        gap: 8px;
    }


.search-box[b-3llw9gvmbu] {
    position: relative;
    min-width: 0;
    height: 48px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(24, 59, 91, 0.06);
}


    .search-box > svg[b-3llw9gvmbu] {
        width: 18px;
        height: 18px;
        margin-left: 13px;
        flex: 0 0 18px;
        fill: none;
        stroke: #71869a;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .search-box input[b-3llw9gvmbu] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 38px 0 9px;
        border: 0;
        outline: none;
        background: transparent;
        color: #17253d;
        font-size: 13px;
    }


        .search-box input[b-3llw9gvmbu]::placeholder {
            color: #a0abb7;
        }


.clear-search[b-3llw9gvmbu] {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7c8d9e;
}


    .clear-search svg[b-3llw9gvmbu] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.search-button[b-3llw9gvmbu] {
    min-width: 76px;
    height: 48px;
    flex: 0 0 76px;
    padding: 0 10px;
    border: 0;
    border-radius: 15px;
    background: #174f7e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
}


/* =========================================================
   MENSAJE RESULTADO
   ========================================================= */

.command-message[b-3llw9gvmbu] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding: 12px 13px;
    border-radius: 14px;
}


    .command-message.success[b-3llw9gvmbu] {
        background: #edf9f1;
        color: #267746;
    }


    .command-message.error[b-3llw9gvmbu] {
        background: #fff2f2;
        color: #a34444;
    }


.command-message-icon[b-3llw9gvmbu] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}


    .command-message-icon svg[b-3llw9gvmbu] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.command-message span[b-3llw9gvmbu] {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 650;
}


.command-message-close[b-3llw9gvmbu] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentColor;
}


    .command-message-close svg[b-3llw9gvmbu] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   LISTADO
   ========================================================= */

.vehicle-list[b-3llw9gvmbu] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* =========================================================
   TARJETA
   ========================================================= */

.vehicle-card[b-3llw9gvmbu] {
    width: 100%;
    padding: 14px 13px 13px;
    overflow: hidden;
    border: 1px solid rgba(26, 65, 99, 0.08);
    border-left: 4px solid #8b9baa;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(25, 55, 82, 0.06);
}


.vehicle-card-on[b-3llw9gvmbu] {
    border-left-color: #27a65b;
}


.vehicle-card-off[b-3llw9gvmbu] {
    border-left-color: #d84b4b;
}


.vehicle-card-stale[b-3llw9gvmbu] {
    border-left-color: #e4b52c;
}


.vehicle-card-unknown[b-3llw9gvmbu] {
    border-left-color: #8b9baa;
}


/* =========================================================
   CABECERA TARJETA
   ========================================================= */

.vehicle-top[b-3llw9gvmbu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}


.vehicle-main[b-3llw9gvmbu] {
    min-width: 0;
    flex: 1 1 auto;
}


.vehicle-title-row[b-3llw9gvmbu] {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}


    .vehicle-title-row h2[b-3llw9gvmbu] {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
        color: #17253d;
        font-size: 15px;
        font-weight: 820;
        line-height: 1.2;
    }


.plate[b-3llw9gvmbu] {
    max-width: 100%;
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 8px;
    background: #edf5fb;
    color: #174f7e;
    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   ESTADO
   ========================================================= */

.vehicle-state[b-3llw9gvmbu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 10px;
    font-weight: 750;
}


.state-dot[b-3llw9gvmbu] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}


.state-on[b-3llw9gvmbu] {
    color: #259c56;
}


.state-off[b-3llw9gvmbu] {
    color: #cb4545;
}


.state-stale[b-3llw9gvmbu] {
    color: #c59713;
}


.state-unknown[b-3llw9gvmbu] {
    color: #7f8d99;
}


/* =========================================================
   VELOCIDAD
   ========================================================= */

.speed-box[b-3llw9gvmbu] {
    min-width: 49px;
    flex: 0 0 49px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 5px;
    border-radius: 11px;
    background: #f2f7fb;
}


    .speed-box strong[b-3llw9gvmbu] {
        color: #244964;
        font-size: 17px;
        font-weight: 850;
        line-height: 1;
    }


    .speed-box span[b-3llw9gvmbu] {
        margin-top: 3px;
        color: #8092a0;
        font-size: 7px;
        font-weight: 700;
    }


/* =========================================================
   UBICACIÓN
   ========================================================= */

.vehicle-location[b-3llw9gvmbu] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 11px;
    color: #617587;
}


    .vehicle-location svg[b-3llw9gvmbu] {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        margin-top: 1px;
        fill: none;
        stroke: #5d85a5;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .vehicle-location span[b-3llw9gvmbu] {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 10.5px;
        line-height: 1.35;
    }


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.vehicle-info[b-3llw9gvmbu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}


    .vehicle-info > div[b-3llw9gvmbu] {
        min-width: 0;
        padding: 8px 9px;
        border-radius: 10px;
        background: #f7fafc;
    }


    .vehicle-info span[b-3llw9gvmbu] {
        display: block;
        margin-bottom: 3px;
        color: #8a98a5;
        font-size: 8px;
        font-weight: 750;
        text-transform: uppercase;
    }


    .vehicle-info strong[b-3llw9gvmbu] {
        display: block;
        overflow: hidden;
        color: #425a6d;
        font-size: 9.5px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   ACCIONES
   ========================================================= */

.command-actions[b-3llw9gvmbu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}


.command-button[b-3llw9gvmbu] {
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .command-button svg[b-3llw9gvmbu] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.command-off[b-3llw9gvmbu] {
    background: #c84343;
}


.command-on[b-3llw9gvmbu] {
    background: #238557;
}


.command-button:disabled[b-3llw9gvmbu] {
    opacity: 0.38;
    cursor: default;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.pagination[b-3llw9gvmbu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 19px;
}


.page-button[b-3llw9gvmbu] {
    width: 100%;
    min-width: 0;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(30, 69, 102, 0.10);
    border-radius: 12px;
    background: #ffffff;
    color: #315f84;
    font-size: 11px;
    font-weight: 750;
}


    .page-button svg[b-3llw9gvmbu] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .page-button:disabled[b-3llw9gvmbu] {
        opacity: 0.35;
    }


.page-status[b-3llw9gvmbu] {
    min-width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    .page-status strong[b-3llw9gvmbu] {
        color: #17253d;
        font-size: 15px;
    }


    .page-status span[b-3llw9gvmbu] {
        color: #8795a3;
        font-size: 8px;
    }


/* =========================================================
   MODAL
   ========================================================= */

.command-modal-backdrop[b-3llw9gvmbu] {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    background: rgba(15, 27, 39, 0.48);
    backdrop-filter: blur(2px);
}


.command-modal[b-3llw9gvmbu] {
    width: 100%;
    max-width: 430px;
    padding: 20px 16px 16px;
    border-radius: 21px 21px 15px 15px;
    background: #ffffff;
    box-shadow: 0 -12px 35px rgba(15, 33, 48, 0.18);
}


.command-modal-icon[b-3llw9gvmbu] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    border-radius: 15px;
}


    .command-modal-icon svg[b-3llw9gvmbu] {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.modal-icon-off[b-3llw9gvmbu] {
    background: #fdecec;
    color: #c84343;
}


.modal-icon-on[b-3llw9gvmbu] {
    background: #eaf7ef;
    color: #238557;
}


.command-modal h2[b-3llw9gvmbu] {
    margin: 0;
    color: #17253d;
    font-size: 18px;
    font-weight: 850;
    text-align: center;
}


.command-modal > p[b-3llw9gvmbu] {
    margin: 9px 0 0;
    color: #66798a;
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}


.command-modal-warning[b-3llw9gvmbu] {
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f6f9fb;
    text-align: center;
}


    .command-modal-warning strong[b-3llw9gvmbu] {
        display: block;
        color: #314c61;
        font-size: 11px;
    }


    .command-modal-warning span[b-3llw9gvmbu] {
        display: block;
        margin-top: 4px;
        color: #7a8b99;
        font-size: 9px;
    }


.command-modal-actions[b-3llw9gvmbu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}


.modal-cancel[b-3llw9gvmbu],
.modal-confirm[b-3llw9gvmbu] {
    height: 45px;
    border: 0;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}


.modal-cancel[b-3llw9gvmbu] {
    background: #eef3f6;
    color: #526b7d;
}


.modal-confirm[b-3llw9gvmbu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ffffff;
}


.modal-confirm-off[b-3llw9gvmbu] {
    background: #c84343;
}


.modal-confirm-on[b-3llw9gvmbu] {
    background: #238557;
}


/* =========================================================
   SPINNER BOTÓN
   ========================================================= */

.button-spinner[b-3llw9gvmbu] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: corte-spin-b-3llw9gvmbu 0.7s linear infinite;
}


/* =========================================================
   LOADING / VACÍO / ERROR
   ========================================================= */

.corte-loading[b-3llw9gvmbu],
.empty-state[b-3llw9gvmbu] {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6c7e8e;
    text-align: center;
}


.corte-spinner[b-3llw9gvmbu] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: corte-spin-b-3llw9gvmbu 0.75s linear infinite;
}


@keyframes corte-spin-b-3llw9gvmbu {
    to {
        transform: rotate(360deg);
    }
}


.corte-loading span[b-3llw9gvmbu] {
    font-size: 11px;
    font-weight: 650;
}


.corte-message[b-3llw9gvmbu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 15px;
}


    .corte-message.error[b-3llw9gvmbu] {
        background: #fff3f3;
        color: #a13f3f;
    }


    .corte-message svg[b-3llw9gvmbu] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .corte-message div[b-3llw9gvmbu] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .corte-message strong[b-3llw9gvmbu] {
        font-size: 12px;
    }


    .corte-message span[b-3llw9gvmbu] {
        font-size: 10px;
    }


.empty-icon[b-3llw9gvmbu] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}


    .empty-icon svg[b-3llw9gvmbu] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.empty-state strong[b-3llw9gvmbu] {
    color: #26394b;
    font-size: 14px;
}


.empty-state span[b-3llw9gvmbu] {
    max-width: 290px;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .corte-motor-page[b-3llw9gvmbu] {
        padding-left: 10px;
        padding-right: 10px;
    }


    .corte-heading h1[b-3llw9gvmbu] {
        font-size: 22px;
    }


    .search-card form[b-3llw9gvmbu] {
        gap: 5px;
    }


    .search-button[b-3llw9gvmbu] {
        min-width: 68px;
        flex-basis: 68px;
        padding: 0 6px;
        font-size: 11px;
    }


    .vehicle-title-row h2[b-3llw9gvmbu] {
        font-size: 14px;
    }


    .command-button[b-3llw9gvmbu] {
        font-size: 10px;
    }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px) {

    .corte-motor-page[b-3llw9gvmbu] {
        padding: 88px 20px 32px;
    }


    .vehicle-card[b-3llw9gvmbu] {
        padding: 16px;
    }


    .vehicle-title-row h2[b-3llw9gvmbu] {
        font-size: 16px;
    }


    .vehicle-location span[b-3llw9gvmbu] {
        font-size: 11px;
    }


    .command-button[b-3llw9gvmbu] {
        height: 46px;
        font-size: 12px;
    }


    .command-modal-backdrop[b-3llw9gvmbu] {
        align-items: center;
    }


    .command-modal[b-3llw9gvmbu] {
        border-radius: 20px;
    }
}


/* =========================================================
   MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .search-button:hover[b-3llw9gvmbu] {
        background: #123f66;
    }


    .clear-search:hover[b-3llw9gvmbu] {
        background: rgba(23, 79, 126, 0.06);
    }


    .command-off:not(:disabled):hover[b-3llw9gvmbu] {
        background: #b83a3a;
    }


    .command-on:not(:disabled):hover[b-3llw9gvmbu] {
        background: #1d744b;
    }


    .page-button:not(:disabled):hover[b-3llw9gvmbu] {
        background: #f5f8fa;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .corte-spinner[b-3llw9gvmbu],
    .button-spinner[b-3llw9gvmbu] {
        animation: none;
    }
}
/* /Pages/Historico.razor.rz.scp.css */
/* =========================================================
   AVLONLINE2 - HISTÓRICO TABULAR
   SELECCIÓN RÁPIDA DE FECHA Y MÓVIL
   ========================================================= */

.historico-page[b-zhzb30yebq] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 190px 16px 28px;
    box-sizing: border-box;
    overflow-x: clip;
}


    .historico-page *[b-zhzb30yebq],
    .historico-page *[b-zhzb30yebq]::before,
    .historico-page *[b-zhzb30yebq]::after {
        box-sizing: border-box;
    }


/* =========================================================
   FILTROS FIJOS
   ========================================================= */

.historico-filters[b-zhzb30yebq] {
    position: fixed;
    top: var(--mobile-header-height, 64px);
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 760px);
    z-index: 900;
    padding: 8px 0 10px;
    background: #f5f9fc;
}


/* =========================================================
   SELECTOR RÁPIDO DE DÍAS
   ========================================================= */

.date-strip-shell[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    height: 60px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(24, 59, 91, 0.06);
}


/* =========================================================
   FLECHAS DE NAVEGACIÓN
   ========================================================= */

.date-range-button[b-zhzb30yebq] {
    width: 34px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #edf5fb;
    color: #174f7e;
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease, opacity 120ms ease;
    -webkit-tap-highlight-color: transparent;
}


    .date-range-button svg[b-zhzb30yebq] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .date-range-button:active:not(:disabled)[b-zhzb30yebq] {
        transform: scale(0.92);
    }


    .date-range-button:disabled[b-zhzb30yebq] {
        opacity: 0.25;
        cursor: default;
    }


/* =========================================================
   TIRA DE 5 DÍAS
   ========================================================= */

.date-strip[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
}


/* =========================================================
   DÍA
   ========================================================= */

.date-chip[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 2px;
    overflow: hidden;
    border: 1px solid rgba(34, 77, 111, 0.13);
    border-radius: 10px;
    background: #ffffff;
    color: #536b80;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
    -webkit-tap-highlight-color: transparent;
}


    .date-chip:active:not(:disabled)[b-zhzb30yebq] {
        transform: scale(0.95);
    }


    .date-chip:disabled[b-zhzb30yebq] {
        opacity: 0.55;
        cursor: default;
    }


/* =========================================================
   DÍA DE SEMANA
   ========================================================= */

.date-chip-weekday[b-zhzb30yebq] {
    width: 100%;
    overflow: hidden;
    color: #8998a7;
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   FECHA
   ========================================================= */

.date-chip strong[b-zhzb30yebq] {
    width: 100%;
    overflow: hidden;
    color: #26394c;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   INDICADOR HOY
   ========================================================= */

.date-chip-today[b-zhzb30yebq] {
    min-height: 7px;
    color: #2387e8;
    font-size: 6px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.35px;
}


.date-chip-spacer[b-zhzb30yebq] {
    display: block;
    min-height: 7px;
}


/* =========================================================
   DÍA ACTUAL
   ========================================================= */

.date-chip.current:not(.selected)[b-zhzb30yebq] {
    border-color: rgba(35, 135, 232, 0.30);
    background: #f4f9fe;
}


/* =========================================================
   DÍA SELECCIONADO
   ========================================================= */

.date-chip.selected[b-zhzb30yebq] {
    border-color: transparent;
    background: linear-gradient( 180deg, #3195ed 0%, #2384dc 100% );
    box-shadow: 0 5px 13px rgba(35, 132, 220, 0.24);
}


    .date-chip.selected .date-chip-weekday[b-zhzb30yebq] {
        color: rgba(255, 255, 255, 0.80);
    }


    .date-chip.selected strong[b-zhzb30yebq] {
        color: #ffffff;
    }


    .date-chip.selected .date-chip-today[b-zhzb30yebq] {
        color: #ffffff;
    }


/* =========================================================
   SALTO DIRECTO A FECHA HISTÓRICA
   Mantener debajo de los cinco días; no comprimir la tira.
   ========================================================= */

.date-jump[b-zhzb30yebq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    margin-top: 7px;
    padding: 3px 7px 3px 12px;
    border: 1px solid rgba(30, 67, 99, .10);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(24, 59, 91, .04);
}

.date-jump-label[b-zhzb30yebq] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #536f84;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

    .date-jump-label svg[b-zhzb30yebq] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: #277db6;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.date-jump-input[b-zhzb30yebq] {
    min-width: 0;
    width: 156px;
    max-width: 60%;
    min-height: 33px;
    padding: 4px 8px;
    border: 1px solid #d5e5f2;
    border-radius: 9px;
    outline: none;
    background: #f4f9fd;
    color: #174f7e;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

    .date-jump-input:focus-visible[b-zhzb30yebq] {
        outline: 3px solid rgba(35, 132, 220, .20);
        outline-offset: 1px;
    }

    .date-jump-input:disabled[b-zhzb30yebq] {
        opacity: .55;
        cursor: default;
    }

/* =========================================================
   BUSCADOR
   ========================================================= */

.search-form[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}


/* =========================================================
   TOTAL MÓVILES
   ========================================================= */

.search-total[b-zhzb30yebq] {
    min-width: 54px;
    max-width: 54px;
    flex: 0 0 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #174f7e;
    text-align: center;
}


    .search-total strong[b-zhzb30yebq] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: #174f7e;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .search-total span[b-zhzb30yebq] {
        display: block;
        margin-top: 4px;
        color: #71869a;
        font-size: 8px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }


/* =========================================================
   CAMPO BUSCADOR
   ========================================================= */

.search-box[b-zhzb30yebq] {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 50px;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(24, 59, 91, 0.06);
}


    .search-box > svg[b-zhzb30yebq] {
        width: 20px;
        height: 20px;
        margin-left: 14px;
        flex: 0 0 20px;
        fill: none;
        stroke: #71869a;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .search-box input[b-zhzb30yebq] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 40px 0 10px;
        border: 0;
        outline: none;
        background: transparent;
        color: #17253d;
        font-size: 14px;
    }


        .search-box input[b-zhzb30yebq]::placeholder {
            overflow: hidden;
            color: #a0abb7;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


/* =========================================================
   LIMPIAR BÚSQUEDA
   ========================================================= */

.clear-search[b-zhzb30yebq] {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7c8d9e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .clear-search svg[b-zhzb30yebq] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   BOTÓN BUSCAR
   ========================================================= */

.search-button[b-zhzb30yebq] {
    min-width: 82px;
    max-width: 82px;
    height: 50px;
    flex: 0 0 82px;
    padding: 0 12px;
    border: 0;
    border-radius: 15px;
    background: #174f7e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}


    .search-button:disabled[b-zhzb30yebq],
    .clear-search:disabled[b-zhzb30yebq] {
        opacity: 0.55;
        cursor: default;
    }


/* =========================================================
   LISTA
   ========================================================= */

.vehicle-list[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* =========================================================
   TARJETA MÓVIL
   ========================================================= */

.vehicle-card[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 14px 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(26, 65, 99, 0.08);
    border-left: 4px solid #174f7e;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(25, 55, 82, 0.065);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}


    .vehicle-card:active[b-zhzb30yebq] {
        transform: scale(0.985);
        background: #f8fbfd;
    }


.vehicle-main[b-zhzb30yebq] {
    min-width: 0;
    flex: 1 1 auto;
}


/* =========================================================
   NOMBRE / PATENTE
   ========================================================= */

.vehicle-title-row[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


    .vehicle-title-row h2[b-zhzb30yebq] {
        min-width: 0;
        max-width: 100%;
        margin: 0;
        overflow-wrap: anywhere;
        color: #17253d;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.25;
    }


.plate[b-zhzb30yebq] {
    max-width: 100%;
    display: inline-flex;
    padding: 4px 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf5fb;
    color: #174f7e;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   IMEI
   ========================================================= */

.vehicle-imei[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
}


    .vehicle-imei span[b-zhzb30yebq] {
        flex: 0 0 auto;
        color: #8a99a6;
        font-size: 9px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }


    .vehicle-imei strong[b-zhzb30yebq] {
        min-width: 0;
        overflow: hidden;
        color: #627586;
        font-size: 11px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   FLECHA DERECHA MÓVIL
   ========================================================= */

.vehicle-arrow[b-zhzb30yebq] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f7fb;
    color: #39749e;
}


    .vehicle-arrow svg[b-zhzb30yebq] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.pagination[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 20px;
}


.page-button[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(30, 69, 102, 0.10);
    border-radius: 13px;
    background: #ffffff;
    color: #315f84;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}


    .page-button svg[b-zhzb30yebq] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .page-button:disabled[b-zhzb30yebq] {
        opacity: 0.35;
        cursor: default;
    }


.page-status[b-zhzb30yebq] {
    min-width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    .page-status strong[b-zhzb30yebq] {
        color: #17253d;
        font-size: 16px;
    }


    .page-status span[b-zhzb30yebq] {
        color: #8795a3;
        font-size: 9px;
        white-space: nowrap;
    }


/* =========================================================
   LOADING
   ========================================================= */

.historico-loading[b-zhzb30yebq],
.empty-state[b-zhzb30yebq] {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #6c7e8e;
}


.historico-spinner[b-zhzb30yebq] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: historico-spin-b-zhzb30yebq 0.75s linear infinite;
}


@keyframes historico-spin-b-zhzb30yebq {

    to {
        transform: rotate(360deg);
    }
}


.historico-loading span[b-zhzb30yebq] {
    font-size: 12px;
    font-weight: 650;
}


/* =========================================================
   ERROR
   ========================================================= */

.historico-message[b-zhzb30yebq] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 15px;
}


    .historico-message.error[b-zhzb30yebq] {
        background: #fff3f3;
        color: #a13f3f;
    }


    .historico-message svg[b-zhzb30yebq] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .historico-message div[b-zhzb30yebq] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .historico-message strong[b-zhzb30yebq] {
        font-size: 12px;
    }


    .historico-message span[b-zhzb30yebq] {
        overflow-wrap: anywhere;
        font-size: 11px;
    }


/* =========================================================
   SIN RESULTADOS
   ========================================================= */

.empty-icon[b-zhzb30yebq] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}


    .empty-icon svg[b-zhzb30yebq] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.empty-state strong[b-zhzb30yebq] {
    color: #26394b;
    font-size: 14px;
}


.empty-state span[b-zhzb30yebq] {
    font-size: 11px;
}


/* =========================================================
   TABLET / ESCRITORIO
   ========================================================= */

@media (min-width: 700px) {

    .historico-page[b-zhzb30yebq] {
        padding: 190px 20px 28px;
    }


    .historico-filters[b-zhzb30yebq] {
        width: min(calc(100% - 40px), 760px);
    }


    .date-strip[b-zhzb30yebq] {
        gap: 6px;
    }


    .date-chip-weekday[b-zhzb30yebq] {
        font-size: 9.5px;
    }


    .date-chip strong[b-zhzb30yebq] {
        font-size: 11.5px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .historico-page[b-zhzb30yebq] {
        padding: 184px 12px 28px;
    }


    .historico-filters[b-zhzb30yebq] {
        width: calc(100% - 24px);
        padding-top: 7px;
    }


    /* =====================================================
       SELECTOR RÁPIDO DE FECHA
       ===================================================== */

    .date-strip-shell[b-zhzb30yebq] {
        height: 56px;
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 4px;
        padding: 5px;
    }


    .date-range-button[b-zhzb30yebq] {
        width: 30px;
        height: 44px;
        border-radius: 9px;
    }


        .date-range-button svg[b-zhzb30yebq] {
            width: 17px;
            height: 17px;
        }


    .date-strip[b-zhzb30yebq] {
        gap: 3px;
    }


    .date-chip[b-zhzb30yebq] {
        height: 44px;
        gap: 2px;
        padding: 3px 1px;
        border-radius: 9px;
    }


    .date-chip-weekday[b-zhzb30yebq] {
        font-size: 11.5px;
    }


    .date-chip strong[b-zhzb30yebq] {
        font-size: 16px;
    }


    .date-chip-today[b-zhzb30yebq] {
        min-height: 9px;
        font-size: 9px;
    }


    .date-chip-spacer[b-zhzb30yebq] {
        min-height: 6px;
    }


    /* =====================================================
       BUSCADOR
       ===================================================== */

    .search-form[b-zhzb30yebq] {
        gap: 7px;
        margin-top: 7px;
    }


    .search-total[b-zhzb30yebq] {
        min-width: 48px;
        max-width: 48px;
        flex-basis: 48px;
    }


        .search-total strong[b-zhzb30yebq] {
            font-size: 17px;
        }


        .search-total span[b-zhzb30yebq] {
            margin-top: 3px;
            font-size: 7px;
        }


    .search-box[b-zhzb30yebq] {
        height: 48px;
    }


        .search-box > svg[b-zhzb30yebq] {
            width: 19px;
            height: 19px;
            margin-left: 12px;
            flex-basis: 19px;
        }


        .search-box input[b-zhzb30yebq] {
            padding-left: 9px;
            font-size: 13px;
        }


    .search-button[b-zhzb30yebq] {
        min-width: 76px;
        max-width: 76px;
        height: 48px;
        flex-basis: 76px;
        padding: 0 8px;
        font-size: 12px;
    }


    /* =====================================================
       TARJETA
       ===================================================== */

    .vehicle-card[b-zhzb30yebq] {
        padding: 14px 12px 14px 13px;
        border-radius: 17px;
    }


    .vehicle-title-row[b-zhzb30yebq] {
        gap: 6px;
    }


        .vehicle-title-row h2[b-zhzb30yebq] {
            font-size: 15px;
        }


    .plate[b-zhzb30yebq] {
        padding: 4px 7px;
        font-size: 10px;
    }


    .vehicle-arrow[b-zhzb30yebq] {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}


/* =========================================================
   MOBILE MUY PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .historico-page[b-zhzb30yebq] {
        padding: 182px 10px 28px;
    }


    .historico-filters[b-zhzb30yebq] {
        width: calc(100% - 20px);
    }


    .date-strip-shell[b-zhzb30yebq] {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }


    .date-range-button[b-zhzb30yebq] {
        width: 28px;
    }


    .date-strip[b-zhzb30yebq] {
        gap: 2px;
    }


    .date-chip[b-zhzb30yebq] {
        padding-left: 0;
        padding-right: 0;
    }


    .date-chip-weekday[b-zhzb30yebq] {
        font-size: 7.5px;
    }


    .date-chip strong[b-zhzb30yebq] {
        font-size: 9.5px;
    }


    .date-chip-today[b-zhzb30yebq] {
        font-size: 5.5px;
    }


    .search-form[b-zhzb30yebq] {
        gap: 5px;
    }


    .search-total[b-zhzb30yebq] {
        min-width: 43px;
        max-width: 43px;
        flex-basis: 43px;
    }


        .search-total strong[b-zhzb30yebq] {
            font-size: 15px;
        }


        .search-total span[b-zhzb30yebq] {
            font-size: 7px;
        }


    .search-button[b-zhzb30yebq] {
        min-width: 68px;
        max-width: 68px;
        flex-basis: 68px;
        padding: 0 6px;
        font-size: 11px;
    }


    .vehicle-card[b-zhzb30yebq] {
        padding: 12px 10px 12px 11px;
    }


    .vehicle-title-row h2[b-zhzb30yebq] {
        font-size: 14px;
    }
}


/* =========================================================
   MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .date-range-button:not(:disabled):hover[b-zhzb30yebq] {
        background: #e3f0f9;
    }


    .date-chip:not(:disabled):not(.selected):hover[b-zhzb30yebq] {
        border-color: rgba(35, 135, 232, 0.30);
        background: #f5fafe;
    }


    .vehicle-card:hover[b-zhzb30yebq] {
        transform: translateY(-1px);
        box-shadow: 0 10px 30px rgba(25, 55, 82, 0.10);
    }


    .search-button:hover[b-zhzb30yebq] {
        background: #123f66;
    }


    .clear-search:hover[b-zhzb30yebq] {
        background: rgba(23, 79, 126, 0.06);
    }


    .page-button:not(:disabled):hover[b-zhzb30yebq] {
        background: #f6f9fb;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .historico-spinner[b-zhzb30yebq] {
        animation: none;
    }


    .vehicle-card[b-zhzb30yebq],
    .date-chip[b-zhzb30yebq],
    .date-range-button[b-zhzb30yebq] {
        transition: none;
    }
}

/* CALENDARIO: MÓVILES PEQUEÑOS */
@media (max-width: 360px) {
    .date-jump[b-zhzb30yebq] {
        padding-left: 8px;
        gap: 5px;
    }

    .date-jump-label[b-zhzb30yebq] {
        gap: 5px;
        font-size: 10px;
    }

        .date-jump-label svg[b-zhzb30yebq] {
            width: 15px;
            height: 15px;
            flex-basis: 15px;
        }

    .date-jump-input[b-zhzb30yebq] {
        width: 139px;
        max-width: 58%;
        font-size: 11px;
    }
}
/* /Pages/HistoricoDetalle.razor.rz.scp.css */
/* ============================================================
   AVLONLINE2 - HISTÓRICO DETALLE
   MOBILE FIRST - INTERFAZ OPERATIVA
   ============================================================ */

.historico-detalle-page[b-lrkdp18phz] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 76px 9px 24px;
    box-sizing: border-box;
    overflow-x: hidden;
}


    .historico-detalle-page *[b-lrkdp18phz],
    .historico-detalle-page *[b-lrkdp18phz]::before,
    .historico-detalle-page *[b-lrkdp18phz]::after {
        box-sizing: border-box;
    }


/* ============================================================
   CABECERA PÁGINA
   ============================================================ */

.detalle-header[b-lrkdp18phz] {
    position: fixed;
    top: var(--mobile-header-height, 64px);
    left: 50%;
    transform: translateX(-50%);
    width: min( calc(100% - 18px), 760px );
    min-height: 60px;
    z-index: 900;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 5px 2px;
    background: #f5f9fc;
}


/* ============================================================
   VOLVER
   ============================================================ */

.back-button[b-lrkdp18phz] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: #ffffff;
    color: #174f7e;
    box-shadow: 0 3px 12px rgba(24, 59, 91, 0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .back-button svg[b-lrkdp18phz] {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ============================================================
   TÍTULO
   ============================================================ */

.detalle-title[b-lrkdp18phz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .detalle-title strong[b-lrkdp18phz] {
        overflow: hidden;
        color: #162a3d;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .detalle-title span[b-lrkdp18phz] {
        margin-top: 4px;
        color: #71869a;
        font-size: 11px;
        font-weight: 650;
    }


/* ============================================================
   TOTAL
   ============================================================ */

.detalle-total[b-lrkdp18phz] {
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 8px;
    border-radius: 12px;
    background: #edf5fb;
    color: #174f7e;
}


    .detalle-total strong[b-lrkdp18phz] {
        font-size: 19px;
        font-weight: 850;
        line-height: 1;
    }


    .detalle-total span[b-lrkdp18phz] {
        margin-top: 4px;
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 0.3px;
    }


/* ============================================================
   LISTADO
   ============================================================ */

.position-list[b-lrkdp18phz] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ============================================================
   TARJETA
   ============================================================ */

.position-card[b-lrkdp18phz] {
    width: 100%;
    padding: 12px 12px 10px;
    overflow: hidden;
    border: 1px solid rgba(26, 65, 99, 0.07);
    border-left-width: 4px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(25, 55, 82, 0.055);
}


.position-card-moving[b-lrkdp18phz],
.position-card-on[b-lrkdp18phz] {
    border-left-color: #168155;
}


.position-card-off[b-lrkdp18phz] {
    border-left-color: #c04e4e;
}


.position-card-unknown[b-lrkdp18phz] {
    border-left-color: #8997a2;
}


/* ============================================================
   CABECERA REGISTRO
   ============================================================ */

.position-header[b-lrkdp18phz] {
    width: 100%;
}


.position-header-main[b-lrkdp18phz] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
}


/* ============================================================
   FECHA / HORA
   ============================================================ */

.position-time[b-lrkdp18phz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .position-time > span[b-lrkdp18phz] {
        color: #748796;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.4px;
        white-space: nowrap;
    }


    .position-time > strong[b-lrkdp18phz] {
        margin-top: 3px;
        color: #122b44;
        font-size: 17px;
        font-weight: 850;
        line-height: 1.15;
        white-space: nowrap;
    }


/* ============================================================
   ODÓMETRO INTEGRADO
   ============================================================ */

.position-odometer-inline[b-lrkdp18phz] {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 7px;
    border-radius: 8px;
    background: #f3f7fa;
}


    .position-odometer-inline span[b-lrkdp18phz] {
        color: #748796;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }


    .position-odometer-inline strong[b-lrkdp18phz] {
        margin: 0;
        color: #20384b;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }


/* ============================================================
   ESTADO
   ============================================================ */

.history-state[b-lrkdp18phz] {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}


.history-state-moving[b-lrkdp18phz],
.history-state-on[b-lrkdp18phz] {
    background: #eaf7f1;
    color: #13704a;
}


.history-state-off[b-lrkdp18phz] {
    background: #fff0f0;
    color: #a33f3f;
}


.history-state-unknown[b-lrkdp18phz] {
    background: #f0f3f5;
    color: #71808c;
}


/* ============================================================
   VELOCIDAD
   ============================================================ */

.position-speed[b-lrkdp18phz] {
    min-width: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 8px;
    border-radius: 12px;
    background: #f3f7fa;
}


    .position-speed strong[b-lrkdp18phz] {
        color: #153b54;
        font-size: 23px;
        font-weight: 850;
        line-height: 1;
    }


    .position-speed span[b-lrkdp18phz] {
        margin-top: 4px;
        color: #748796;
        font-size: 9px;
        font-weight: 700;
    }


/* ============================================================
   UBICACIÓN
   ============================================================ */

.position-location[b-lrkdp18phz] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(30, 67, 99, 0.07);
    color: #536b7d;
}


    .position-location svg[b-lrkdp18phz] {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin-top: 1px;
        fill: none;
        stroke: #39749e;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .position-location span[b-lrkdp18phz] {
        min-width: 0;
        display: -webkit-box;
        overflow: hidden;
        color: #536b7d;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }


/* ============================================================
   SENSORES OPERATIVOS
   ============================================================ */

.sensor-grid[b-lrkdp18phz] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
}


    /* Un solo sensor utiliza todo el ancho */

    .sensor-grid > .sensor-item:only-child[b-lrkdp18phz] {
        grid-column: 1 / -1;
    }


    /* Si hay tres sensores, el último utiliza todo el ancho */

    .sensor-grid > .sensor-item:last-child:nth-child(odd)[b-lrkdp18phz] {
        grid-column: 1 / -1;
    }


/* ============================================================
   SENSOR
   ============================================================ */

.sensor-item[b-lrkdp18phz] {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 11px;
}


.sensor-door[b-lrkdp18phz] {
    background: #fff8ed;
}


.sensor-temperature[b-lrkdp18phz] {
    background: #f0f7fb;
}


/* ============================================================
   ICONO SENSOR
   ============================================================ */

.sensor-icon[b-lrkdp18phz] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
    color: #286d99;
}


.sensor-door .sensor-icon[b-lrkdp18phz] {
    color: #a86915;
}


.sensor-icon svg[b-lrkdp18phz] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   TEXTO SENSOR
   ============================================================ */

.sensor-content[b-lrkdp18phz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .sensor-content span[b-lrkdp18phz] {
        color: #778b9a;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.35px;
    }


    .sensor-content strong[b-lrkdp18phz] {
        margin-top: 2px;
        color: #20384b;
        font-size: 13px;
        font-weight: 800;
        overflow-wrap: anywhere;
    }


    .sensor-content .value-door-open[b-lrkdp18phz] {
        color: #b56708;
    }


    .sensor-content .value-door-closed[b-lrkdp18phz] {
        color: #13704a;
    }


    .sensor-content .value-no-data[b-lrkdp18phz] {
        color: #8795a0;
    }


/* ============================================================
   CONDUCTOR
   ============================================================ */

.driver-row[b-lrkdp18phz] {
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f5f8fa;
}


.driver-icon[b-lrkdp18phz] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e9f2f8;
    color: #286d99;
}


    .driver-icon svg[b-lrkdp18phz] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.driver-content[b-lrkdp18phz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .driver-content span[b-lrkdp18phz] {
        color: #778b9a;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.35px;
    }


    .driver-content strong[b-lrkdp18phz] {
        margin-top: 2px;
        color: #20384b;
        font-size: 13px;
        font-weight: 750;
        overflow-wrap: anywhere;
    }


/* ============================================================
   PIE
   ============================================================ */

.position-footer[b-lrkdp18phz] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(30, 67, 99, 0.07);
}


/* ============================================================
   EVENTO
   ============================================================ */

.event-compact[b-lrkdp18phz] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}


.event-icon[b-lrkdp18phz] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf3f9;
    color: #286d99;
}


    .event-icon svg[b-lrkdp18phz] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.event-text[b-lrkdp18phz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .event-text span[b-lrkdp18phz] {
        color: #758896;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.3px;
    }


    .event-text strong[b-lrkdp18phz] {
        margin-top: 2px;
        overflow: hidden;
        color: #20384b;
        font-size: 13px;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* ============================================================
   MAPA
   ============================================================ */

.map-button[b-lrkdp18phz] {
    min-width: 94px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 11px;
    background: #eaf5fb;
    color: #17628f;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}


    .map-button svg[b-lrkdp18phz] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ============================================================
   PAGINACIÓN
   ============================================================ */

.pagination[b-lrkdp18phz] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 17px;
}


.page-button[b-lrkdp18phz] {
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(30, 69, 102, 0.10);
    border-radius: 11px;
    background: #ffffff;
    color: #315f84;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}


    .page-button svg[b-lrkdp18phz] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }


    .page-button:disabled[b-lrkdp18phz] {
        opacity: 0.35;
    }


.page-status[b-lrkdp18phz] {
    min-width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    .page-status strong[b-lrkdp18phz] {
        color: #17253d;
        font-size: 16px;
    }


    .page-status span[b-lrkdp18phz] {
        color: #8795a3;
        font-size: 9px;
    }


/* ============================================================
   CARGA / ERROR / VACÍO
   ============================================================ */

.detalle-loading[b-lrkdp18phz],
.detalle-empty[b-lrkdp18phz],
.detalle-error[b-lrkdp18phz] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    color: #6c7e8e;
}


.detalle-loading[b-lrkdp18phz] {
    gap: 10px;
}


.detalle-spinner[b-lrkdp18phz] {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: detalle-spin-b-lrkdp18phz 0.75s linear infinite;
}


@keyframes detalle-spin-b-lrkdp18phz {

    to {
        transform: rotate(360deg);
    }
}


.detalle-loading span[b-lrkdp18phz] {
    font-size: 12px;
    font-weight: 650;
}


.detalle-empty strong[b-lrkdp18phz],
.detalle-error strong[b-lrkdp18phz] {
    color: #26394b;
    font-size: 15px;
}


.detalle-empty span[b-lrkdp18phz],
.detalle-error span[b-lrkdp18phz] {
    max-width: 310px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}


.detalle-error button[b-lrkdp18phz] {
    height: 41px;
    margin-top: 15px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: #174f7e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}


/* ============================================================
   TELÉFONOS PEQUEÑOS
   ============================================================ */

@media (max-width: 380px) {

    .historico-detalle-page[b-lrkdp18phz] {
        padding-left: 7px;
        padding-right: 7px;
    }


    .detalle-header[b-lrkdp18phz] {
        width: calc(100% - 14px);
    }


    .position-card[b-lrkdp18phz] {
        padding-left: 10px;
        padding-right: 10px;
    }


    .position-header-main[b-lrkdp18phz] {
        gap: 6px;
    }


    .position-time > strong[b-lrkdp18phz] {
        font-size: 15px;
    }


    .history-state[b-lrkdp18phz] {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 10px;
    }


    .position-speed[b-lrkdp18phz] {
        min-width: 50px;
    }


    .position-odometer-inline[b-lrkdp18phz] {
        gap: 4px;
        padding-left: 6px;
        padding-right: 6px;
    }


        .position-odometer-inline span[b-lrkdp18phz] {
            font-size: 8px;
        }


        .position-odometer-inline strong[b-lrkdp18phz] {
            font-size: 11px;
        }


    .sensor-content strong[b-lrkdp18phz],
    .driver-content strong[b-lrkdp18phz],
    .event-text strong[b-lrkdp18phz] {
        font-size: 12px;
    }


    .map-button[b-lrkdp18phz] {
        min-width: 84px;
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ============================================================
   PANTALLAS GRANDES
   ============================================================ */

@media (min-width: 700px) {

    .historico-detalle-page[b-lrkdp18phz] {
        padding-left: 20px;
        padding-right: 20px;
    }


    .detalle-header[b-lrkdp18phz] {
        width: min( calc(100% - 40px), 760px );
    }
}


/* ============================================================
   INTERACCIÓN
   ============================================================ */

.map-button:active[b-lrkdp18phz],
.back-button:active[b-lrkdp18phz] {
    transform: scale(0.95);
}


@media (hover: hover) and (pointer: fine) {

    .map-button:hover[b-lrkdp18phz] {
        background: #dceef8;
    }


    .back-button:hover[b-lrkdp18phz],
    .page-button:not(:disabled):hover[b-lrkdp18phz] {
        background: #edf5fb;
    }
}


/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .detalle-spinner[b-lrkdp18phz] {
        animation: none;
    }
}
/* /Pages/HistoricoMapa.razor.rz.scp.css */
/* ============================================================
   AVLONLINE2 - MAPA HISTÓRICO
   ============================================================ */

.historico-mapa-page[b-kqm6kx1rkq] {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: calc( 100dvh - var(--mobile-header-height) - var(--mobile-bottom-height) );
    overflow: hidden;
    background: #eef4f8;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.historico-mapa-toolbar[b-kqm6kx1rkq] {
    position: relative;
    z-index: 800;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(15, 45, 70, 0.08);
    box-shadow: 0 2px 10px rgba(13, 38, 59, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
   BOTÓN VOLVER
   ============================================================ */

.historico-mapa-back[b-kqm6kx1rkq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px 0;
    border: 0;
    border-radius: 12px;
    background: #edf6fb;
    color: #126ba0;
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}


    .historico-mapa-back:active[b-kqm6kx1rkq] {
        transform: scale(0.94);
    }


/* ============================================================
   INFORMACIÓN TOOLBAR
   ============================================================ */

.historico-mapa-toolbar-info[b-kqm6kx1rkq] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


    .historico-mapa-toolbar-info strong[b-kqm6kx1rkq] {
        display: block;
        overflow: hidden;
        color: #142a3d;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .historico-mapa-toolbar-info span[b-kqm6kx1rkq] {
        margin-top: 3px;
        overflow: hidden;
        color: #718496;
        font-size: 11px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.historico-mapa-toolbar-space[b-kqm6kx1rkq] {
    width: 40px;
    height: 40px;
}


/* ============================================================
   CONTENEDOR MAPA
   ============================================================ */

.historico-mapa-container[b-kqm6kx1rkq] {
    position: relative;
    width: 100%;
    overflow: hidden;
}


.historico-mapa-canvas[b-kqm6kx1rkq] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc( 100dvh - var(--mobile-header-height) - var(--mobile-bottom-height) - 58px );
    min-height: 420px;
    background: #dce8ee;
    touch-action: pan-x pan-y;
}


/* ============================================================
   ERROR
   ============================================================ */

.historico-mapa-error[b-kqm6kx1rkq] {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #617789;
}


    .historico-mapa-error strong[b-kqm6kx1rkq] {
        color: #263d50;
        font-size: 16px;
    }


    .historico-mapa-error span[b-kqm6kx1rkq] {
        max-width: 340px;
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.45;
    }


    .historico-mapa-error button[b-kqm6kx1rkq] {
        min-height: 42px;
        margin-top: 18px;
        padding: 0 18px;
        border: 0;
        border-radius: 12px;
        background: #147daf;
        color: #ffffff;
        font-weight: 700;
        cursor: pointer;
    }


/* ============================================================
   LEAFLET - CONTROLES
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.leaflet-control-zoom {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(15, 42, 60, 0.18) !important;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .leaflet-control-zoom a {
        border: 0 !important;
        color: #24526f !important;
    }


/* ============================================================
   MARCADOR BASE
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-div-icon {
    border: 0;
    background: transparent;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-marker {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow( 0 3px 3px rgba(0, 0, 0, 0.24) );
}


/* ============================================================
   FLECHA DIRECCIONAL
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-arrow {
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 30px solid #17ad4f;
    transform-origin: 50% 50%;
    transition: transform 550ms ease;
    filter: drop-shadow( 0 1px 1px rgba(0, 0, 0, 0.28) );
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-marker-moving::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px #159846;
}


/* ============================================================
   MARCADORES ENCENDIDO / APAGADO
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-dot {
    width: 22px;
    height: 22px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.30);
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-marker-on
.avl-map-dot {
    background: #20b75a;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-marker-off
.avl-map-dot {
    background: #e64040;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-marker-stale
.avl-map-dot {
    background: #f2b719;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-marker-unknown
.avl-map-dot {
    background: #8999a5;
}


/* ============================================================
   POPUP LEAFLET - HISTÓRICO
   Misma semántica que la grilla histórica.
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-popup-historico
.leaflet-popup-content-wrapper {
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(12, 38, 58, 0.24);
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-popup-historico
.leaflet-popup-content {
    width: min(310px, calc(100vw - 52px)) !important;
    max-width: 310px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-popup-historico
.leaflet-popup-tip {
    background: #ffffff;
    box-shadow: 4px 4px 8px rgba(12, 38, 58, 0.10);
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-map-popup-historico
.leaflet-popup-close-button {
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #546c7e !important;
    font-size: 20px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 10px rgba(15, 45, 70, 0.10);
}


/* ============================================================
   CONTENIDO POPUP HISTÓRICO
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-historico-popup {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
    color: #20384b;
}


/* ============================================================
   CABECERA POPUP
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-head {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 48px 7px 14px;
    background: linear-gradient( 135deg, #eef7fc 0%, #ffffff 72% );
    border-bottom: 1px solid rgba(35, 74, 103, 0.07);
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-head-text strong {
        overflow: hidden;
        color: #17364c;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-head-text span {
        margin-top: 3px;
        overflow: hidden;
        color: #6b8192;
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-badge {
    display: none;
}


/* ============================================================
   RESUMEN
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 7px;
    padding: 8px 13px 9px;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-datetime {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-datetime > span {
        color: #768a99;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 0.35px;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-datetime > strong {
        margin-top: 3px;
        color: #142f45;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.2;
        white-space: nowrap;
    }


/* ============================================================
   ODÓMETRO
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-odometer {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 6px;
    border-radius: 7px;
    background: #f1f6f9;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-odometer span {
        color: #718696;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 0.25px;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-odometer strong {
        color: #244258;
        font-size: 10px;
        font-weight: 850;
        white-space: nowrap;
    }


/* ============================================================
   ESTADO
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-status {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-status-moving,
.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-status-on {
    background: #e8f7ef;
    color: #13704a;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-status-off {
    background: #fff0f0;
    color: #a33f3f;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-status-unknown {
    background: #f0f3f5;
    color: #71808c;
}


/* ============================================================
   VELOCIDAD
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-speed {
    min-width: 47px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 7px;
    border-radius: 10px;
    background: #f2f7fa;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-speed strong {
        color: #153b54;
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-speed span {
        margin-top: 3px;
        color: #748796;
        font-size: 8px;
        font-weight: 750;
    }


/* ============================================================
   UBICACIÓN
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-location {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    margin: 0 13px;
    padding: 9px 0 10px;
    border-top: 1px solid rgba(30, 67, 99, 0.07);
    color: #536b7d;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-location svg {
        width: 17px;
        height: 17px;
        margin-top: 1px;
        fill: none;
        stroke: #39749e;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-location span {
        min-width: 0;
        color: #536b7d;
        font-size: 11px;
        font-weight: 550;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }


/* ============================================================
   SENSORES NATURALES
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 13px 8px;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor:only-child {
    grid-column: 1 / -1;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 7px 8px;
    border-radius: 10px;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor-door {
    background: #fff8ed;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor-temp {
    background: #eff7fb;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: #2b709c;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor-door
.avl-hist-sensor-icon {
    color: #a86915;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-sensor-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-sensor-body span {
        color: #788b99;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 0.3px;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-sensor-body strong {
        margin-top: 2px;
        color: #20384b;
        font-size: 11px;
        font-weight: 850;
        overflow-wrap: anywhere;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-sensor-body
    .avl-hist-sensor-warning {
        color: #b56708;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-sensor-body
    .avl-hist-sensor-ok {
        color: #13704a;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-sensor-body
    .avl-hist-sensor-neutral {
        color: #8795a0;
    }


/* ============================================================
   CONDUCTOR / EVENTO
   ============================================================ */

.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-info-row {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 13px 7px;
    padding: 7px 8px;
    border-radius: 10px;
    background: #f4f8fa;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-event-row {
    margin-bottom: 12px;
    background: #f7fafc;
}


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-info-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e8f2f8;
    color: #286d99;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-info-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.historico-mapa-canvas[b-kqm6kx1rkq]

.avl-hist-info-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-info-body span {
        color: #788b99;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 0.3px;
    }


    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-hist-info-body strong {
        margin-top: 2px;
        color: #20384b;
        font-size: 11px;
        font-weight: 750;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .historico-mapa-toolbar[b-kqm6kx1rkq] {
        padding-left: 8px;
        padding-right: 8px;
    }


    .historico-mapa-toolbar-info strong[b-kqm6kx1rkq] {
        font-size: 13px;
    }


    .historico-mapa-toolbar-info span[b-kqm6kx1rkq] {
        font-size: 10px;
    }
}


/* ============================================================
   TELÉFONOS BAJOS
   ============================================================ */

@media (max-height: 700px) {

    .historico-mapa-canvas[b-kqm6kx1rkq] {
        min-height: 360px;
    }
}


/* ============================================================
   MOUSE
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .historico-mapa-back:hover[b-kqm6kx1rkq] {
        background: #dfeff7;
    }


    .historico-mapa-error button:hover[b-kqm6kx1rkq] {
        background: #116a96;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .historico-mapa-canvas[b-kqm6kx1rkq]
    
    .avl-map-arrow {
        transition: none;
    }
}
/* /Pages/HistoricoRecorrido.razor.rz.scp.css */
/* =========================================================
   AVLONLINE2 - HISTÓRICO RECORRIDO
   SELECCIÓN RÁPIDA DE FECHA Y MÓVIL
   ========================================================= */

.historico-page[b-35ilsvhwdp] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 190px 16px 28px;
    box-sizing: border-box;
    overflow-x: clip;
}


    .historico-page *[b-35ilsvhwdp],
    .historico-page *[b-35ilsvhwdp]::before,
    .historico-page *[b-35ilsvhwdp]::after {
        box-sizing: border-box;
    }


/* =========================================================
   FILTROS FIJOS
   ========================================================= */

.historico-filters[b-35ilsvhwdp] {
    position: fixed;
    top: var(--mobile-header-height, 64px);
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 760px);
    z-index: 900;
    padding: 8px 0 10px;
    background: #f5f9fc;
}


/* =========================================================
   SELECTOR RÁPIDO DE DÍAS
   ========================================================= */

.date-strip-shell[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    height: 60px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(24, 59, 91, 0.06);
}


/* =========================================================
   FLECHAS DE NAVEGACIÓN
   ========================================================= */

.date-range-button[b-35ilsvhwdp] {
    width: 34px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #edf5fb;
    color: #174f7e;
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease, opacity 120ms ease;
    -webkit-tap-highlight-color: transparent;
}


    .date-range-button svg[b-35ilsvhwdp] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .date-range-button:active:not(:disabled)[b-35ilsvhwdp] {
        transform: scale(0.92);
    }


    .date-range-button:disabled[b-35ilsvhwdp] {
        opacity: 0.25;
        cursor: default;
    }


/* =========================================================
   TIRA DE 5 DÍAS
   ========================================================= */

.date-strip[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
}


/* =========================================================
   DÍA
   ========================================================= */

.date-chip[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 2px;
    overflow: hidden;
    border: 1px solid rgba(34, 77, 111, 0.13);
    border-radius: 10px;
    background: #ffffff;
    color: #536b80;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
    -webkit-tap-highlight-color: transparent;
}


    .date-chip:active:not(:disabled)[b-35ilsvhwdp] {
        transform: scale(0.95);
    }


    .date-chip:disabled[b-35ilsvhwdp] {
        opacity: 0.55;
        cursor: default;
    }


/* =========================================================
   DÍA DE SEMANA
   ========================================================= */

.date-chip-weekday[b-35ilsvhwdp] {
    width: 100%;
    overflow: hidden;
    color: #8998a7;
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   FECHA
   ========================================================= */

.date-chip strong[b-35ilsvhwdp] {
    width: 100%;
    overflow: hidden;
    color: #26394c;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   INDICADOR HOY
   ========================================================= */

.date-chip-today[b-35ilsvhwdp] {
    min-height: 7px;
    color: #2387e8;
    font-size: 6px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.35px;
}


.date-chip-spacer[b-35ilsvhwdp] {
    display: block;
    min-height: 7px;
}


/* =========================================================
   DÍA ACTUAL
   ========================================================= */

.date-chip.current:not(.selected)[b-35ilsvhwdp] {
    border-color: rgba(35, 135, 232, 0.30);
    background: #f4f9fe;
}


/* =========================================================
   DÍA SELECCIONADO
   ========================================================= */

.date-chip.selected[b-35ilsvhwdp] {
    border-color: transparent;
    background: linear-gradient( 180deg, #3195ed 0%, #2384dc 100% );
    box-shadow: 0 5px 13px rgba(35, 132, 220, 0.24);
}


    .date-chip.selected .date-chip-weekday[b-35ilsvhwdp] {
        color: rgba(255, 255, 255, 0.80);
    }


    .date-chip.selected strong[b-35ilsvhwdp] {
        color: #ffffff;
    }


    .date-chip.selected .date-chip-today[b-35ilsvhwdp] {
        color: #ffffff;
    }


/* =========================================================
   SALTO DIRECTO A FECHA HISTÓRICA
   Mantener debajo de los cinco días; no comprimir la tira.
   ========================================================= */

.date-jump[b-35ilsvhwdp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    margin-top: 7px;
    padding: 3px 7px 3px 12px;
    border: 1px solid rgba(30, 67, 99, .10);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(24, 59, 91, .04);
}

.date-jump-label[b-35ilsvhwdp] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #536f84;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

    .date-jump-label svg[b-35ilsvhwdp] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: #277db6;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.date-jump-input[b-35ilsvhwdp] {
    min-width: 0;
    width: 156px;
    max-width: 60%;
    min-height: 33px;
    padding: 4px 8px;
    border: 1px solid #d5e5f2;
    border-radius: 9px;
    outline: none;
    background: #f4f9fd;
    color: #174f7e;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

    .date-jump-input:focus-visible[b-35ilsvhwdp] {
        outline: 3px solid rgba(35, 132, 220, .20);
        outline-offset: 1px;
    }

    .date-jump-input:disabled[b-35ilsvhwdp] {
        opacity: .55;
        cursor: default;
    }

/* =========================================================
   BUSCADOR
   ========================================================= */

.search-form[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}


/* =========================================================
   TOTAL MÓVILES
   ========================================================= */

.search-total[b-35ilsvhwdp] {
    min-width: 54px;
    max-width: 54px;
    flex: 0 0 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #174f7e;
    text-align: center;
}


    .search-total strong[b-35ilsvhwdp] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: #174f7e;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .search-total span[b-35ilsvhwdp] {
        display: block;
        margin-top: 4px;
        color: #71869a;
        font-size: 8px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }


/* =========================================================
   CAMPO BUSCADOR
   ========================================================= */

.search-box[b-35ilsvhwdp] {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 50px;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(24, 59, 91, 0.06);
}


    .search-box > svg[b-35ilsvhwdp] {
        width: 20px;
        height: 20px;
        margin-left: 14px;
        flex: 0 0 20px;
        fill: none;
        stroke: #71869a;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .search-box input[b-35ilsvhwdp] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 40px 0 10px;
        border: 0;
        outline: none;
        background: transparent;
        color: #17253d;
        font-size: 14px;
    }


        .search-box input[b-35ilsvhwdp]::placeholder {
            overflow: hidden;
            color: #a0abb7;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


/* =========================================================
   LIMPIAR BÚSQUEDA
   ========================================================= */

.clear-search[b-35ilsvhwdp] {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7c8d9e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .clear-search svg[b-35ilsvhwdp] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   BOTÓN BUSCAR
   ========================================================= */

.search-button[b-35ilsvhwdp] {
    min-width: 82px;
    max-width: 82px;
    height: 50px;
    flex: 0 0 82px;
    padding: 0 12px;
    border: 0;
    border-radius: 15px;
    background: #174f7e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}


    .search-button:disabled[b-35ilsvhwdp],
    .clear-search:disabled[b-35ilsvhwdp] {
        opacity: 0.55;
        cursor: default;
    }


/* =========================================================
   LISTA
   ========================================================= */

.vehicle-list[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}


/* =========================================================
   TARJETA MÓVIL
   ========================================================= */

.vehicle-card[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 14px 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(26, 65, 99, 0.08);
    border-left: 4px solid #174f7e;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(25, 55, 82, 0.065);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}


    .vehicle-card:active[b-35ilsvhwdp] {
        transform: scale(0.985);
        background: #f8fbfd;
    }


.vehicle-main[b-35ilsvhwdp] {
    min-width: 0;
    flex: 1 1 auto;
}


/* =========================================================
   NOMBRE / PATENTE
   ========================================================= */

.vehicle-title-row[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


    .vehicle-title-row h2[b-35ilsvhwdp] {
        min-width: 0;
        max-width: 100%;
        margin: 0;
        overflow-wrap: anywhere;
        color: #17253d;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.25;
    }


.plate[b-35ilsvhwdp] {
    max-width: 100%;
    display: inline-flex;
    padding: 4px 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf5fb;
    color: #174f7e;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   IMEI
   ========================================================= */

.vehicle-imei[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
}


    .vehicle-imei span[b-35ilsvhwdp] {
        flex: 0 0 auto;
        color: #8a99a6;
        font-size: 9px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }


    .vehicle-imei strong[b-35ilsvhwdp] {
        min-width: 0;
        overflow: hidden;
        color: #627586;
        font-size: 11px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   FLECHA DERECHA MÓVIL
   ========================================================= */

.vehicle-arrow[b-35ilsvhwdp] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f7fb;
    color: #39749e;
}


    .vehicle-arrow svg[b-35ilsvhwdp] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.pagination[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 20px;
}


.page-button[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(30, 69, 102, 0.10);
    border-radius: 13px;
    background: #ffffff;
    color: #315f84;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}


    .page-button svg[b-35ilsvhwdp] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .page-button:disabled[b-35ilsvhwdp] {
        opacity: 0.35;
        cursor: default;
    }


.page-status[b-35ilsvhwdp] {
    min-width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    .page-status strong[b-35ilsvhwdp] {
        color: #17253d;
        font-size: 16px;
    }


    .page-status span[b-35ilsvhwdp] {
        color: #8795a3;
        font-size: 9px;
        white-space: nowrap;
    }


/* =========================================================
   LOADING
   ========================================================= */

.historico-loading[b-35ilsvhwdp],
.empty-state[b-35ilsvhwdp] {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #6c7e8e;
}


.historico-spinner[b-35ilsvhwdp] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: historico-spin-b-35ilsvhwdp 0.75s linear infinite;
}


@keyframes historico-spin-b-35ilsvhwdp {

    to {
        transform: rotate(360deg);
    }
}


.historico-loading span[b-35ilsvhwdp] {
    font-size: 12px;
    font-weight: 650;
}


/* =========================================================
   ERROR
   ========================================================= */

.historico-message[b-35ilsvhwdp] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 15px;
}


    .historico-message.error[b-35ilsvhwdp] {
        background: #fff3f3;
        color: #a13f3f;
    }


    .historico-message svg[b-35ilsvhwdp] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .historico-message div[b-35ilsvhwdp] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .historico-message strong[b-35ilsvhwdp] {
        font-size: 12px;
    }


    .historico-message span[b-35ilsvhwdp] {
        overflow-wrap: anywhere;
        font-size: 11px;
    }


/* =========================================================
   SIN RESULTADOS
   ========================================================= */

.empty-icon[b-35ilsvhwdp] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}


    .empty-icon svg[b-35ilsvhwdp] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.empty-state strong[b-35ilsvhwdp] {
    color: #26394b;
    font-size: 14px;
}


.empty-state span[b-35ilsvhwdp] {
    font-size: 11px;
}


/* =========================================================
   TABLET / ESCRITORIO
   ========================================================= */

@media (min-width: 700px) {

    .historico-page[b-35ilsvhwdp] {
        padding: 190px 20px 28px;
    }


    .historico-filters[b-35ilsvhwdp] {
        width: min(calc(100% - 40px), 760px);
    }


    .date-strip[b-35ilsvhwdp] {
        gap: 6px;
    }


    .date-chip-weekday[b-35ilsvhwdp] {
        font-size: 9.5px;
    }


    .date-chip strong[b-35ilsvhwdp] {
        font-size: 11.5px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .historico-page[b-35ilsvhwdp] {
        padding: 184px 12px 28px;
    }


    .historico-filters[b-35ilsvhwdp] {
        width: calc(100% - 24px);
        padding-top: 7px;
    }


    /* =====================================================
       SELECTOR RÁPIDO DE FECHA
       ===================================================== */

    .date-strip-shell[b-35ilsvhwdp] {
        height: 56px;
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 4px;
        padding: 5px;
    }


    .date-range-button[b-35ilsvhwdp] {
        width: 30px;
        height: 44px;
        border-radius: 9px;
    }


        .date-range-button svg[b-35ilsvhwdp] {
            width: 17px;
            height: 17px;
        }


    .date-strip[b-35ilsvhwdp] {
        gap: 3px;
    }


    .date-chip[b-35ilsvhwdp] {
        height: 44px;
        gap: 2px;
        padding: 3px 1px;
        border-radius: 9px;
    }


    .date-chip-weekday[b-35ilsvhwdp] {
        font-size: 11.5px;
    }


    .date-chip strong[b-35ilsvhwdp] {
        font-size: 16px;
    }


    .date-chip-today[b-35ilsvhwdp] {
        min-height: 9px;
        font-size: 9px;
    }


    .date-chip-spacer[b-35ilsvhwdp] {
        min-height: 6px;
    }


    /* =====================================================
       BUSCADOR
       ===================================================== */

    .search-form[b-35ilsvhwdp] {
        gap: 7px;
        margin-top: 7px;
    }


    .search-total[b-35ilsvhwdp] {
        min-width: 48px;
        max-width: 48px;
        flex-basis: 48px;
    }


        .search-total strong[b-35ilsvhwdp] {
            font-size: 17px;
        }


        .search-total span[b-35ilsvhwdp] {
            margin-top: 3px;
            font-size: 7px;
        }


    .search-box[b-35ilsvhwdp] {
        height: 48px;
    }


        .search-box > svg[b-35ilsvhwdp] {
            width: 19px;
            height: 19px;
            margin-left: 12px;
            flex-basis: 19px;
        }


        .search-box input[b-35ilsvhwdp] {
            padding-left: 9px;
            font-size: 13px;
        }


    .search-button[b-35ilsvhwdp] {
        min-width: 76px;
        max-width: 76px;
        height: 48px;
        flex-basis: 76px;
        padding: 0 8px;
        font-size: 12px;
    }


    /* =====================================================
       TARJETA
       ===================================================== */

    .vehicle-card[b-35ilsvhwdp] {
        padding: 14px 12px 14px 13px;
        border-radius: 17px;
    }


    .vehicle-title-row[b-35ilsvhwdp] {
        gap: 6px;
    }


        .vehicle-title-row h2[b-35ilsvhwdp] {
            font-size: 15px;
        }


    .plate[b-35ilsvhwdp] {
        padding: 4px 7px;
        font-size: 10px;
    }


    .vehicle-arrow[b-35ilsvhwdp] {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}


/* =========================================================
   MOBILE MUY PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .historico-page[b-35ilsvhwdp] {
        padding: 182px 10px 28px;
    }


    .historico-filters[b-35ilsvhwdp] {
        width: calc(100% - 20px);
    }


    .date-strip-shell[b-35ilsvhwdp] {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }


    .date-range-button[b-35ilsvhwdp] {
        width: 28px;
    }


    .date-strip[b-35ilsvhwdp] {
        gap: 2px;
    }


    .date-chip[b-35ilsvhwdp] {
        padding-left: 0;
        padding-right: 0;
    }


    .date-chip-weekday[b-35ilsvhwdp] {
        font-size: 7.5px;
    }


    .date-chip strong[b-35ilsvhwdp] {
        font-size: 9.5px;
    }


    .date-chip-today[b-35ilsvhwdp] {
        font-size: 5.5px;
    }


    .search-form[b-35ilsvhwdp] {
        gap: 5px;
    }


    .search-total[b-35ilsvhwdp] {
        min-width: 43px;
        max-width: 43px;
        flex-basis: 43px;
    }


        .search-total strong[b-35ilsvhwdp] {
            font-size: 15px;
        }


        .search-total span[b-35ilsvhwdp] {
            font-size: 7px;
        }


    .search-button[b-35ilsvhwdp] {
        min-width: 68px;
        max-width: 68px;
        flex-basis: 68px;
        padding: 0 6px;
        font-size: 11px;
    }


    .vehicle-card[b-35ilsvhwdp] {
        padding: 12px 10px 12px 11px;
    }


    .vehicle-title-row h2[b-35ilsvhwdp] {
        font-size: 14px;
    }
}


/* =========================================================
   MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .date-range-button:not(:disabled):hover[b-35ilsvhwdp] {
        background: #e3f0f9;
    }


    .date-chip:not(:disabled):not(.selected):hover[b-35ilsvhwdp] {
        border-color: rgba(35, 135, 232, 0.30);
        background: #f5fafe;
    }


    .vehicle-card:hover[b-35ilsvhwdp] {
        transform: translateY(-1px);
        box-shadow: 0 10px 30px rgba(25, 55, 82, 0.10);
    }


    .search-button:hover[b-35ilsvhwdp] {
        background: #123f66;
    }


    .clear-search:hover[b-35ilsvhwdp] {
        background: rgba(23, 79, 126, 0.06);
    }


    .page-button:not(:disabled):hover[b-35ilsvhwdp] {
        background: #f6f9fb;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .historico-spinner[b-35ilsvhwdp] {
        animation: none;
    }


    .vehicle-card[b-35ilsvhwdp],
    .date-chip[b-35ilsvhwdp],
    .date-range-button[b-35ilsvhwdp] {
        transition: none;
    }
}

/* CALENDARIO: MÓVILES PEQUEÑOS */
@media (max-width: 360px) {
    .date-jump[b-35ilsvhwdp] {
        padding-left: 8px;
        gap: 5px;
    }

    .date-jump-label[b-35ilsvhwdp] {
        gap: 5px;
        font-size: 10px;
    }

        .date-jump-label svg[b-35ilsvhwdp] {
            width: 15px;
            height: 15px;
            flex-basis: 15px;
        }

    .date-jump-input[b-35ilsvhwdp] {
        width: 139px;
        max-width: 58%;
        font-size: 11px;
    }
}
/* /Pages/HistoricoRecorridoMapa.razor.rz.scp.css */
/* ====================================================================
   AVLONLINE2 · HISTÓRICO RECORRIDO / MAPA
   Vista compacta: toda la información esencial en la primera pantalla.
   MobileLayout reserva el header superior y la barra inferior.
   CSS aislado para HistoricoRecorridoMapa.razor.
   ==================================================================== */

.recorrido-page[b-ndk62zp5ef] {
    width: 100%;
    max-width: 860px;
    height: calc(100dvh - var(--mobile-header-height, 64px) - 78px - env(safe-area-inset-bottom));
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    padding: 9px 12px 4px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    box-sizing: border-box;
    color: #17253d;
}

    .recorrido-page *[b-ndk62zp5ef],
    .recorrido-page *[b-ndk62zp5ef]::before,
    .recorrido-page *[b-ndk62zp5ef]::after {
        box-sizing: border-box;
    }

/* Cabecera única, con flecha para volver a móviles. */
.recorrido-header[b-ndk62zp5ef] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 0 auto;
}

.recorrido-back-icon[b-ndk62zp5ef] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(30, 67, 99, .10);
    border-radius: 12px;
    background: #fff;
    color: #174f7e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 12px rgba(24, 59, 91, .05);
}

    .recorrido-back-icon svg[b-ndk62zp5ef] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.recorrido-heading[b-ndk62zp5ef] {
    min-width: 0;
    flex: 1 1 auto;
}

.recorrido-kicker[b-ndk62zp5ef] {
    display: block;
    margin-bottom: 2px;
    color: #728596;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.recorrido-heading h1[b-ndk62zp5ef] {
    min-width: 0;
    margin: 0;
    color: #17253d;
    font-size: clamp(16px, 4.2vw, 21px);
    font-weight: 850;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.recorrido-heading p[b-ndk62zp5ef] {
    margin: 3px 0 0;
    color: #6e8495;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Resumen reducido: posiciones, hora inicial y hora final. */
.recorrido-summary[b-ndk62zp5ef] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
}

.recorrido-metric[b-ndk62zp5ef] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 5px;
    border: 1px solid rgba(30, 67, 99, .09);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(25, 55, 82, .04);
}

    .recorrido-metric span[b-ndk62zp5ef] {
        color: #8293a2;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .15px;
        text-align: center;
    }

    .recorrido-metric strong[b-ndk62zp5ef] {
        min-width: 0;
        max-width: 100%;
        color: #24445b;
        font-size: clamp(13px, 3.2vw, 17px);
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.recorrido-metric-primary[b-ndk62zp5ef] {
    border-color: transparent;
    background: linear-gradient(155deg, #1f679d, #174f7e);
}

    .recorrido-metric-primary span[b-ndk62zp5ef] {
        color: rgba(255,255,255,.82);
    }

    .recorrido-metric-primary strong[b-ndk62zp5ef] {
        color: #fff;
    }

/* El mapa crece hasta llenar todo el espacio visible disponible. */
.recorrido-map-card[b-ndk62zp5ef] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(30,67,99,.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(25,55,82,.08);
}

.recorrido-map[b-ndk62zp5ef] {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 175px;
    background: #eaf1f5;
}

/* Leyenda compacta; aparece al pie del mapa sin provocar scroll. */
.recorrido-legend[b-ndk62zp5ef] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 7px;
    border-top: 1px solid rgba(30,67,99,.08);
    background: #fff;
}

.recorrido-legend-item[b-ndk62zp5ef] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #5d7385;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.recorrido-dot[b-ndk62zp5ef] {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    display: inline-block;
    border-radius: 50%;
}

.recorrido-dot-moving[b-ndk62zp5ef] {
    background: #148f54;
}

.recorrido-dot-stopped[b-ndk62zp5ef] {
    background: #e4a42b;
}

.recorrido-dot-off[b-ndk62zp5ef] {
    background: #808b9b;
}

.recorrido-dot-start[b-ndk62zp5ef] {
    background: #1262c5;
}

.recorrido-dot-end[b-ndk62zp5ef] {
    background: #bb3444;
}

/* Leaflet crea controles fuera del árbol Razor: :deep necesario. */
.recorrido-map[b-ndk62zp5ef]  .leaflet-control-zoom {
    overflow: hidden;
    border: 0;
    border-radius: 11px;
    box-shadow: 0 4px 15px rgba(20,45,64,.18);
}

    .recorrido-map[b-ndk62zp5ef]  .leaflet-control-zoom a {
        width: 32px;
        height: 32px;
        line-height: 32px;
        color: #174f7e;
        background: #fff;
    }

.recorrido-map[b-ndk62zp5ef]  .leaflet-popup-content-wrapper {
    border-radius: 14px;
    box-shadow: 0 7px 28px rgba(19,45,65,.20);
}

.recorrido-map[b-ndk62zp5ef]  .leaflet-popup-content {
    margin: 11px 12px;
    max-width: min(80vw, 300px);
    overflow-wrap: anywhere;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.recorrido-map[b-ndk62zp5ef]  .leaflet-control-attribution {
    font-size: 9px;
}

.recorrido-map[b-ndk62zp5ef]  .avl-history-route-icon,
.recorrido-map[b-ndk62zp5ef]  .avl-history-route-direction {
    background: transparent;
    border: none;
}

/* Error / carga / día sin puntos: conserva el botón para volver. */
.recorrido-state[b-ndk62zp5ef] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    border: 1px solid rgba(30,67,99,.09);
    border-radius: 17px;
    background: #fff;
    text-align: center;
}

.recorrido-state-icon[b-ndk62zp5ef] {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}

    .recorrido-state-icon svg[b-ndk62zp5ef] {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .recorrido-state-icon.is-error[b-ndk62zp5ef] {
        background: #fff0f0;
        color: #b84040;
    }

.recorrido-state h2[b-ndk62zp5ef] {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.recorrido-state p[b-ndk62zp5ef] {
    max-width: 430px;
    margin: 0;
    color: #718392;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.recorrido-spinner[b-ndk62zp5ef] {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(23,79,126,.15);
    border-top-color: #2384dc;
    border-radius: 50%;
    animation: recorrido-map-spin-b-ndk62zp5ef .75s linear infinite;
}

@keyframes recorrido-map-spin-b-ndk62zp5ef {
    to {
        transform: rotate(360deg);
    }
}

.recorrido-button[b-ndk62zp5ef] {
    min-height: 44px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: #174f7e;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

    .recorrido-back-icon:focus-visible[b-ndk62zp5ef],
    .recorrido-button:focus-visible[b-ndk62zp5ef] {
        outline: 3px solid rgba(35,132,220,.32);
        outline-offset: 2px;
    }

@media (max-width: 480px) {
    .recorrido-page[b-ndk62zp5ef] {
        padding: 7px 8px 3px;
        gap: 7px;
    }

    .recorrido-header[b-ndk62zp5ef] {
        gap: 8px;
    }

    .recorrido-back-icon[b-ndk62zp5ef] {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
    }

    .recorrido-summary[b-ndk62zp5ef] {
        gap: 5px;
    }

    .recorrido-metric[b-ndk62zp5ef] {
        padding: 8px 4px;
        gap: 3px;
    }

        .recorrido-metric span[b-ndk62zp5ef] {
            font-size: 7px;
        }

        .recorrido-metric strong[b-ndk62zp5ef] {
            font-size: 14px;
        }

    .recorrido-legend[b-ndk62zp5ef] {
        gap: 6px 9px;
        padding: 7px 6px;
    }

    .recorrido-legend-item[b-ndk62zp5ef] {
        font-size: 8.5px;
    }
}

@media (max-width: 360px) {
    .recorrido-heading h1[b-ndk62zp5ef] {
        font-size: 16px;
    }

    .recorrido-metric strong[b-ndk62zp5ef] {
        font-size: 12px;
    }

    .recorrido-legend-item[b-ndk62zp5ef] {
        font-size: 8px;
    }
}

/* Pantallas extremadamente bajas: priorizar un mapa usable y permitir scroll. */
@media (max-height: 550px) {
    .recorrido-page[b-ndk62zp5ef] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .recorrido-map-card[b-ndk62zp5ef] {
        flex: 0 0 auto;
    }

    .recorrido-map[b-ndk62zp5ef] {
        flex: 0 0 auto;
        height: 280px;
        min-height: 280px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .recorrido-back-icon:hover[b-ndk62zp5ef] {
        background: #eff7fc;
    }

    .recorrido-button:hover[b-ndk62zp5ef] {
        background: #123f66;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recorrido-spinner[b-ndk62zp5ef] {
        animation: none;
    }
}
/* /Pages/Informes.razor.rz.scp.css */
.module-page[b-n851pyp4yr] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 18px 32px;
}


/* =========================================================
   CABECERA
   ========================================================= */

.module-header[b-n851pyp4yr] {
    margin-bottom: 22px;
}


.module-label[b-n851pyp4yr] {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #2874a6;
}


.module-header h1[b-n851pyp4yr] {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #17253d;
}


.module-header p[b-n851pyp4yr] {
    margin: 7px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6d7d8d;
}


/* =========================================================
   CONTENIDO TEMPORAL
   ========================================================= */

.module-placeholder[b-n851pyp4yr] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(26, 69, 105, 0.08);
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(34, 70, 105, 0.07);
}


    .module-placeholder svg[b-n851pyp4yr] {
        width: 42px;
        height: 42px;
        fill: none;
        stroke: #2874a6;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .module-placeholder strong[b-n851pyp4yr] {
        margin-top: 4px;
        font-size: 18px;
        color: #17253d;
    }


    .module-placeholder span[b-n851pyp4yr] {
        max-width: 300px;
        font-size: 14px;
        line-height: 1.5;
        color: #748393;
    }
/* /Pages/Login.razor.rz.scp.css */
.login-shell[b-2oeffrev6b] {
    --brand: #078ed1;
    --brand-dark: #006ca7;
    --brand-light: #55c7f3;
    --navy: #0a3154;
    --text: #101828;
    --muted: #667085;
    --surface: rgba(255, 255, 255, 0.84);
    --border: rgba(255, 255, 255, 0.72);
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(22px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
    background: radial-gradient( circle at 10% 5%, rgba(78, 195, 243, 0.20), transparent 34% ), radial-gradient( circle at 95% 85%, rgba(0, 105, 169, 0.16), transparent 36% ), linear-gradient( 160deg, #fafdff 0%, #f4f9fd 46%, #edf6fb 100% );
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.login-content[b-2oeffrev6b] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Fondos ambientales */

.ambient[b-2oeffrev6b] {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px);
}

.ambient-one[b-2oeffrev6b] {
    width: 260px;
    height: 260px;
    top: -100px;
    right: -100px;
    background: linear-gradient( 145deg, rgba(61, 190, 242, 0.25), rgba(7, 142, 209, 0.04) );
    animation: floatOne-b-2oeffrev6b 9s ease-in-out infinite;
}

.ambient-two[b-2oeffrev6b] {
    width: 220px;
    height: 220px;
    bottom: -95px;
    left: -95px;
    background: linear-gradient( 145deg, rgba(10, 49, 84, 0.12), rgba(7, 142, 209, 0.08) );
    animation: floatTwo-b-2oeffrev6b 11s ease-in-out infinite;
}

.ambient-three[b-2oeffrev6b] {
    width: 80px;
    height: 80px;
    top: 22%;
    left: -35px;
    background: rgba(85, 199, 243, 0.13);
    animation: floatThree-b-2oeffrev6b 8s ease-in-out infinite;
}

/* Marca */

.brand-area[b-2oeffrev6b] {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.logo-wrap[b-2oeffrev6b] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
}

    .logo-wrap[b-2oeffrev6b]::before {
        content: "";
        position: absolute;
        width: 125px;
        height: 35px;
        bottom: -4px;
        border-radius: 50%;
        background: rgba(7, 142, 209, 0.12);
        filter: blur(18px);
    }

.brand-logo[b-2oeffrev6b] {
    position: relative;
    display: block;
    width: auto;
    max-width: min(220px, 68vw);
    max-height: 82px;
    object-fit: contain;
    filter: drop-shadow( 0 10px 15px rgba(10, 49, 84, 0.08) );
}

/* Tarjeta */

.login-card[b-2oeffrev6b] {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 28px 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 28px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.77) );
    box-shadow: 0 30px 70px rgba(18, 68, 103, 0.12), 0 8px 24px rgba(18, 68, 103, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

    .login-card[b-2oeffrev6b]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.60), transparent 40% );
    }

/* Encabezado */

.welcome-block[b-2oeffrev6b] {
    position: relative;
    z-index: 1;
    margin-bottom: 26px;
}

.welcome-badge[b-2oeffrev6b] {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 7px 11px;
    border: 1px solid rgba(7, 142, 209, 0.14);
    border-radius: 999px;
    background: rgba(7, 142, 209, 0.07);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.badge-dot[b-2oeffrev6b] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #26b876;
    box-shadow: 0 0 0 4px rgba(38, 184, 118, 0.12);
}

.login-title[b-2oeffrev6b] {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 31px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.9px;
}

    .login-title:focus[b-2oeffrev6b] {
        outline: none;
    }

.login-subtitle[b-2oeffrev6b] {
    max-width: 310px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Formulario */

.login-form[b-2oeffrev6b] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.field-group[b-2oeffrev6b] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-label[b-2oeffrev6b] {
    padding-left: 4px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.field-shell[b-2oeffrev6b] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    border: 1px solid #dbe4ec;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 5px rgba(16, 24, 40, 0.025);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

    .field-shell:focus-within[b-2oeffrev6b] {
        border-color: rgba(7, 142, 209, 0.75);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(7, 142, 209, 0.10), 0 8px 18px rgba(7, 142, 209, 0.07);
        transform: translateY(-1px);
    }

.field-icon[b-2oeffrev6b] {
    flex: 0 0 auto;
    width: 49px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7890a4;
}

    .field-icon svg[b-2oeffrev6b] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.field-shell:focus-within .field-icon[b-2oeffrev6b] {
    color: var(--brand);
}

.field-input[b-2oeffrev6b] {
    min-width: 0;
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 15px 0 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    /*
       Importante para iPhone:
       evita zoom automático de Safari.
    */
    font-size: 16px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}

    .field-input[b-2oeffrev6b]::placeholder {
        color: #98a2b3;
        opacity: 1;
    }

    .field-input:disabled[b-2oeffrev6b] {
        opacity: 0.6;
    }

.password-input[b-2oeffrev6b] {
    padding-right: 54px;
}

.password-button[b-2oeffrev6b] {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #788b9d;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    .password-button:active:not(:disabled)[b-2oeffrev6b] {
        background: rgba(7, 142, 209, 0.08);
    }

    .password-button svg[b-2oeffrev6b] {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Mensajes */

.status-message[b-2oeffrev6b] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.4;
    animation: messageAppear-b-2oeffrev6b 0.22s ease-out;
}

.status-icon[b-2oeffrev6b] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

    .status-icon svg[b-2oeffrev6b] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.status-error[b-2oeffrev6b] {
    border: 1px solid rgba(211, 47, 47, 0.15);
    background: rgba(211, 47, 47, 0.06);
    color: #b42318;
}

.status-success[b-2oeffrev6b] {
    border: 1px solid rgba(18, 183, 106, 0.16);
    background: rgba(18, 183, 106, 0.07);
    color: #087443;
}

/* Botón principal */

.primary-button[b-2oeffrev6b] {
    position: relative;
    width: 100%;
    min-height: 57px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    border: 0;
    border-radius: 17px;
    background: linear-gradient( 135deg, #119fdc 0%, #0589cd 50%, #0878b7 100% );
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0.1px;
    cursor: pointer;
    box-shadow: 0 15px 27px rgba(5, 137, 205, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.10s ease, box-shadow 0.18s ease, filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    .primary-button[b-2oeffrev6b]::before {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 55%;
        height: 100%;
        transform: skewX(-20deg);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.20), transparent );
        transition: left 0.5s ease;
    }

    .primary-button:hover:not(:disabled)[b-2oeffrev6b]::before {
        left: 130%;
    }

    .primary-button:active:not(:disabled)[b-2oeffrev6b] {
        transform: scale(0.982);
        box-shadow: 0 7px 16px rgba(5, 137, 205, 0.20);
    }

    .primary-button:disabled[b-2oeffrev6b] {
        opacity: 0.65;
        cursor: default;
        box-shadow: none;
    }

.button-arrow[b-2oeffrev6b] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spinner[b-2oeffrev6b] {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-2oeffrev6b 0.75s linear infinite;
}

/* Sesión activa */

.session-panel[b-2oeffrev6b] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.success-orb[b-2oeffrev6b] {
    width: 72px;
    height: 72px;
    margin: 2px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, #27c77e, #11985a );
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(18, 183, 106, 0.23), 0 0 0 10px rgba(18, 183, 106, 0.07);
    animation: successAppear-b-2oeffrev6b 0.4s ease-out;
}

    .success-orb svg[b-2oeffrev6b] {
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.session-label[b-2oeffrev6b] {
    margin-bottom: 8px;
    color: #11985a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.session-title[b-2oeffrev6b] {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.session-text[b-2oeffrev6b] {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.session-security[b-2oeffrev6b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 0;
    padding: 12px 10px;
    border: 1px solid rgba(18, 183, 106, 0.13);
    border-radius: 14px;
    background: rgba(18, 183, 106, 0.055);
    color: #087443;
    font-size: 12px;
    font-weight: 600;
}

    .session-security svg[b-2oeffrev6b] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.secondary-button[b-2oeffrev6b] {
    width: 100%;
    min-height: 52px;
    border: 1px solid #dbe4ec;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.80);
    color: #344054;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    .secondary-button:active[b-2oeffrev6b] {
        transform: scale(0.985);
        background: #f5f7f9;
    }

/* Footer */

.login-footer[b-2oeffrev6b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: rgba(52, 64, 84, 0.48);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.footer-separator[b-2oeffrev6b] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(52, 64, 84, 0.38);
}

/* Animaciones */

@keyframes spin-b-2oeffrev6b {
    to {
        transform: rotate(360deg);
    }
}

@keyframes messageAppear-b-2oeffrev6b {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

@keyframes successAppear-b-2oeffrev6b {
    from {
        opacity: 0;
        transform: scale(0.75);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floatOne-b-2oeffrev6b {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-15px, 14px, 0);
    }
}

@keyframes floatTwo-b-2oeffrev6b {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(18px, -12px, 0);
    }
}

@keyframes floatThree-b-2oeffrev6b {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(10px, 18px, 0);
    }
}

/* iPhone SE / equipos de poca altura */

@media (max-height: 700px) {
    .login-shell[b-2oeffrev6b] {
        align-items: flex-start;
        overflow-y: auto;
    }

    .brand-area[b-2oeffrev6b] {
        margin-bottom: 15px;
    }

    .brand-logo[b-2oeffrev6b] {
        max-height: 60px;
    }

    .login-card[b-2oeffrev6b] {
        padding: 22px 20px 20px;
    }

    .welcome-block[b-2oeffrev6b] {
        margin-bottom: 19px;
    }

    .login-title[b-2oeffrev6b] {
        font-size: 27px;
    }

    .login-form[b-2oeffrev6b] {
        gap: 13px;
    }

    .field-shell[b-2oeffrev6b] {
        min-height: 52px;
    }

    .field-input[b-2oeffrev6b] {
        height: 50px;
    }

    .field-icon[b-2oeffrev6b] {
        height: 52px;
    }

    .primary-button[b-2oeffrev6b] {
        min-height: 52px;
    }
}

/* Teléfonos muy angostos */

@media (max-width: 350px) {
    .login-shell[b-2oeffrev6b] {
        padding-left: calc(12px + env(safe-area-inset-left));
        padding-right: calc(12px + env(safe-area-inset-right));
    }

    .login-card[b-2oeffrev6b] {
        padding: 23px 18px 20px;
        border-radius: 24px;
    }

    .login-title[b-2oeffrev6b] {
        font-size: 27px;
    }
}

/* Accesibilidad / ahorro de batería */

@media (prefers-reduced-motion: reduce) {
    .ambient[b-2oeffrev6b],
    .spinner[b-2oeffrev6b],
    .success-orb[b-2oeffrev6b],
    .status-message[b-2oeffrev6b] {
        animation: none;
    }

    .field-shell[b-2oeffrev6b],
    .primary-button[b-2oeffrev6b] {
        transition: none;
    }
}
/* /Pages/MapaMovil.razor.rz.scp.css */
/* ============================================================
   AVLONLINE2 - MAPA INDIVIDUAL
   ============================================================ */

.mapa-movil-page[b-z9fu6cy7qy] {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-bottom-height));
    overflow: hidden;
    background: #eef4f8;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.mapa-toolbar[b-z9fu6cy7qy] {
    position: relative;
    z-index: 800;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(15, 45, 70, 0.08);
    box-shadow: 0 2px 10px rgba(13, 38, 59, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
   BOTONES TOOLBAR
   ============================================================ */

.mapa-back-button[b-z9fu6cy7qy],
.mapa-follow-button[b-z9fu6cy7qy] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #edf6fb;
    color: #126ba0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: transform 120ms ease, background-color 120ms ease;
}

.mapa-back-button[b-z9fu6cy7qy] {
    font-size: 30px;
    line-height: 1;
    padding-bottom: 4px;
}

.mapa-follow-button[b-z9fu6cy7qy] {
    font-size: 21px;
}

    .mapa-back-button:active[b-z9fu6cy7qy],
    .mapa-follow-button:active[b-z9fu6cy7qy] {
        transform: scale(0.94);
    }

    .mapa-follow-button:disabled[b-z9fu6cy7qy] {
        opacity: 0.45;
        cursor: default;
    }


/* ============================================================
   INFORMACIÓN TOOLBAR
   ============================================================ */

.mapa-toolbar-info[b-z9fu6cy7qy] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .mapa-toolbar-info strong[b-z9fu6cy7qy] {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.2;
        color: #142a3d;
    }

    .mapa-toolbar-info span[b-z9fu6cy7qy] {
        margin-top: 3px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        font-weight: 600;
        color: #718496;
    }


/* ============================================================
   CONTENEDOR MAPA
   ============================================================ */

.mapa-container[b-z9fu6cy7qy] {
    position: relative;
    width: 100%;
}

.mapa-canvas[b-z9fu6cy7qy] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc( 100dvh - var(--mobile-header-height) - var(--mobile-bottom-height) - 58px );
    min-height: 420px;
    background: #dce8ee;
    touch-action: pan-x pan-y;
}


/* ============================================================
   LOADING / ERROR
   ============================================================ */

.mapa-loading[b-z9fu6cy7qy],
.mapa-error[b-z9fu6cy7qy] {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #617789;
}

.mapa-loading[b-z9fu6cy7qy] {
    gap: 12px;
}

.mapa-error strong[b-z9fu6cy7qy] {
    color: #263d50;
    font-size: 16px;
}

.mapa-error span[b-z9fu6cy7qy] {
    margin-top: 6px;
    font-size: 13px;
}

.mapa-error button[b-z9fu6cy7qy] {
    margin-top: 18px;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #147daf;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.mapa-spinner[b-z9fu6cy7qy] {
    width: 32px;
    height: 32px;
    border: 3px solid #d7e5ed;
    border-top-color: #1384bc;
    border-radius: 50%;
    animation: mapa-spin-b-z9fu6cy7qy 700ms linear infinite;
}

@keyframes mapa-spin-b-z9fu6cy7qy {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   LEAFLET - CONTROLES
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]  .leaflet-control-zoom {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(15, 42, 60, 0.18) !important;
}

    .mapa-canvas[b-z9fu6cy7qy]  .leaflet-control-zoom a {
        border: 0 !important;
        color: #24526f !important;
    }


/* ============================================================
   MARCADOR BASE
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-div-icon {
    border: 0;
    background: transparent;
}

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-marker {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.24));
}


/* ============================================================
   FLECHA VERDE DIRECCIONAL
   Apunta al NORTE con 0°
   JS la rota usando GRADOS.
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-arrow {
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 30px solid #17ad4f;
    transform-origin: 50% 50%;
    transition: transform 550ms ease;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}


/* pequeño centro para dar mayor lectura */

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-marker-moving::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px #159846;
}


/* ============================================================
   PUNTOS ESTADO
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-dot {
    width: 22px;
    height: 22px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.30);
}

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-marker-on .avl-map-dot {
    background: #20b75a;
}

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-marker-off .avl-map-dot {
    background: #e64040;
}

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-marker-stale .avl-map-dot {
    background: #f2b719;
}

.mapa-canvas[b-z9fu6cy7qy]  .avl-map-marker-unknown .avl-map-dot {
    background: #8999a5;
}


/* ============================================================
   POPUP LEAFLET - ONLINE
   Misma semántica que la grilla histórica.
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-map-popup-online
.leaflet-popup-content-wrapper {
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(12, 38, 58, 0.24);
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-map-popup-online
.leaflet-popup-content {
    width: min(310px, calc(100vw - 52px)) !important;
    max-width: 310px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-map-popup-online
.leaflet-popup-tip {
    background: #ffffff;
    box-shadow: 4px 4px 8px rgba(12, 38, 58, 0.10);
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-map-popup-online
.leaflet-popup-close-button {
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #546c7e !important;
    font-size: 20px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 10px rgba(15, 45, 70, 0.10);
}


/* ============================================================
   CONTENIDO POPUP ONLINE
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-popup {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #ffffff;
    color: #20384b;
}


/* ============================================================
   CABECERA POPUP
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-head {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 48px 7px 14px;
    background: linear-gradient( 135deg, #eef7fc 0%, #ffffff 72% );
    border-bottom: 1px solid rgba(35, 74, 103, 0.07);
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-head-text strong {
        overflow: hidden;
        color: #17364c;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-head-text span {
        margin-top: 3px;
        overflow: hidden;
        color: #6b8192;
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-badge {
    display: none;
}


/* ============================================================
   RESUMEN
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 7px;
    padding: 8px 13px 9px;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-datetime {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-datetime > span {
        color: #768a99;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 0.35px;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-datetime > strong {
        margin-top: 3px;
        color: #142f45;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.2;
        white-space: nowrap;
    }


/* ============================================================
   ODÓMETRO
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-odometer {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 6px;
    border-radius: 7px;
    background: #f1f6f9;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-odometer span {
        color: #718696;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 0.25px;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-odometer strong {
        color: #244258;
        font-size: 10px;
        font-weight: 850;
        white-space: nowrap;
    }


/* ============================================================
   ESTADO
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-status {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-status-moving,
.mapa-canvas[b-z9fu6cy7qy]

.avl-online-status-on {
    background: #e8f7ef;
    color: #13704a;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-status-off {
    background: #fff0f0;
    color: #a33f3f;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-status-stale {
    background: #fff7df;
    color: #9b6b0d;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-status-unknown {
    background: #f0f3f5;
    color: #71808c;
}


/* ============================================================
   VELOCIDAD
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-speed {
    min-width: 47px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 7px;
    border-radius: 10px;
    background: #f2f7fa;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-speed strong {
        color: #153b54;
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-speed span {
        margin-top: 3px;
        color: #748796;
        font-size: 8px;
        font-weight: 750;
    }


/* ============================================================
   UBICACIÓN
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-location {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    margin: 0 13px;
    padding: 9px 0 10px;
    border-top: 1px solid rgba(30, 67, 99, 0.07);
    color: #536b7d;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-location svg {
        width: 17px;
        height: 17px;
        margin-top: 1px;
        fill: none;
        stroke: #39749e;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-location span {
        min-width: 0;
        color: #536b7d;
        font-size: 11px;
        font-weight: 550;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }


/* ============================================================
   SENSORES NATURALES
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 13px 8px;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor:only-child {
    grid-column: 1 / -1;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 7px 8px;
    border-radius: 10px;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor-door {
    background: #fff8ed;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor-temp {
    background: #eff7fb;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: #2b709c;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor-door
.avl-online-sensor-icon {
    color: #a86915;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-sensor-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-sensor-body span {
        color: #788b99;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 0.3px;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-sensor-body strong {
        margin-top: 2px;
        color: #20384b;
        font-size: 11px;
        font-weight: 850;
        overflow-wrap: anywhere;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-sensor-body
    .avl-online-sensor-warning {
        color: #b56708;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-sensor-body
    .avl-online-sensor-ok {
        color: #13704a;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-sensor-body
    .avl-online-sensor-neutral {
        color: #8795a0;
    }


/* ============================================================
   CONDUCTOR / EVENTO
   ============================================================ */

.mapa-canvas[b-z9fu6cy7qy]

.avl-online-info-row {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 13px 7px;
    padding: 7px 8px;
    border-radius: 10px;
    background: #f4f8fa;
}



.mapa-canvas[b-z9fu6cy7qy]

.avl-online-info-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e8f2f8;
    color: #286d99;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-info-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.mapa-canvas[b-z9fu6cy7qy]

.avl-online-info-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-info-body span {
        color: #788b99;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 0.3px;
    }


    .mapa-canvas[b-z9fu6cy7qy]
    
    .avl-online-info-body strong {
        margin-top: 2px;
        color: #20384b;
        font-size: 11px;
        font-weight: 750;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 600px) {

    .mapa-toolbar[b-z9fu6cy7qy] {
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* /Pages/Moviles.razor.rz.scp.css */
.module-page[b-g1tm8lckrn] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 18px 32px;
}


/* =========================================================
   CABECERA
   ========================================================= */

.module-header[b-g1tm8lckrn] {
    margin-bottom: 22px;
}


.module-label[b-g1tm8lckrn] {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #2874a6;
}


.module-header h1[b-g1tm8lckrn] {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #17253d;
}


.module-header p[b-g1tm8lckrn] {
    margin: 7px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6d7d8d;
}


/* =========================================================
   CONTENIDO TEMPORAL
   ========================================================= */

.module-placeholder[b-g1tm8lckrn] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(26, 69, 105, 0.08);
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(34, 70, 105, 0.07);
}


    .module-placeholder svg[b-g1tm8lckrn] {
        width: 42px;
        height: 42px;
        fill: none;
        stroke: #2874a6;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .module-placeholder strong[b-g1tm8lckrn] {
        margin-top: 4px;
        font-size: 18px;
        color: #17253d;
    }


    .module-placeholder span[b-g1tm8lckrn] {
        max-width: 300px;
        font-size: 14px;
        line-height: 1.5;
        color: #748393;
    }
/* /Pages/Online.razor.rz.scp.css */
/* =========================================================
   ONLINE - CONTENEDOR PRINCIPAL
   ========================================================= */

.online-page[b-ozhhdmufox] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    /*
       El buscador ahora es FIXED y sale del flujo normal.

       Reservamos espacio superior para:
       - buscador 50px
       - padding del buscador
       - separación con la primera tarjeta
    */
    padding: 76px 16px 28px;
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: visible;
}


    .online-page *[b-ozhhdmufox],
    .online-page *[b-ozhhdmufox]::before,
    .online-page *[b-ozhhdmufox]::after {
        box-sizing: border-box;
    }


/* =========================================================
   BUSCADOR FIJO
   ========================================================= */

.search-card[b-ozhhdmufox] {
    /*
       TOTALMENTE FIJO.

       No se desplaza ni antes ni después del scroll.
    */
    position: fixed;
    /*
       Exactamente debajo del header principal.
    */
    top: var(--mobile-header-height, 64px);
    /*
       Centrado respecto del viewport.
    */
    left: 50%;
    transform: translateX(-50%);
    /*
       Mismo ancho máximo que Online.
    */
    width: min( calc(100% - 32px), 760px );
    min-width: 0;
    /*
       Header = 1000
       Buscador = 900
       Tarjetas = normal
    */
    z-index: 900;
    margin: 0;
    padding: 8px 0;
    background: #f5f9fc;
    box-sizing: border-box;
}


    /* =========================================================
   FORMULARIO BUSCADOR
   ========================================================= */

    .search-card form[b-ozhhdmufox] {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }


/* =========================================================
   TOTAL DE MÓVILES
   ========================================================= */

.search-total[b-ozhhdmufox] {
    min-width: 54px;
    max-width: 54px;
    flex: 0 0 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    color: #174f7e;
    text-align: center;
}


    .search-total strong[b-ozhhdmufox] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        color: #174f7e;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .search-total span[b-ozhhdmufox] {
        display: block;
        margin-top: 4px;
        font-size: 8px;
        font-weight: 700;
        line-height: 1;
        color: #71869a;
        white-space: nowrap;
    }


/* =========================================================
   CAMPO BUSCADOR
   ========================================================= */

.search-box[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 15px;
    box-shadow: 0 7px 25px rgba(24, 59, 91, 0.06);
}


    .search-box > svg[b-ozhhdmufox] {
        width: 20px;
        height: 20px;
        margin-left: 14px;
        flex: 0 0 20px;
        fill: none;
        stroke: #71869a;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .search-box input[b-ozhhdmufox] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 40px 0 10px;
        border: 0;
        outline: none;
        background: transparent;
        color: #17253d;
        font-size: 14px;
    }


        .search-box input[b-ozhhdmufox]::placeholder {
            overflow: hidden;
            color: #a0abb7;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


/* =========================================================
   LIMPIAR BUSCADOR
   ========================================================= */

.clear-search[b-ozhhdmufox] {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7c8d9e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .clear-search svg[b-ozhhdmufox] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   BOTÓN BUSCAR
   ========================================================= */

.search-button[b-ozhhdmufox] {
    min-width: 82px;
    max-width: 82px;
    height: 50px;
    flex: 0 0 82px;
    padding: 0 12px;
    border: 0;
    border-radius: 15px;
    background: #174f7e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}


    .search-button:disabled[b-ozhhdmufox],
    .clear-search:disabled[b-ozhhdmufox] {
        opacity: 0.55;
        cursor: default;
    }


/* =========================================================
   LISTA
   ========================================================= */

.vehicle-list[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================================
   TARJETA
   ========================================================= */

.vehicle-card[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(26, 65, 99, 0.08);
    border-radius: 19px;
    box-shadow: 0 8px 28px rgba(25, 55, 82, 0.065);
}


/* =========================================================
   CABECERA DEL MÓVIL
   ========================================================= */

.vehicle-top[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}


.vehicle-main[b-ozhhdmufox] {
    min-width: 0;
    flex: 1 1 auto;
}


.vehicle-title-row[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


    .vehicle-title-row h2[b-ozhhdmufox] {
        min-width: 0;
        max-width: 100%;
        margin: 0;
        overflow-wrap: anywhere;
        font-size: 16px;
        font-weight: 800;
        color: #17253d;
    }


/* =========================================================
   PATENTE
   ========================================================= */

.plate[b-ozhhdmufox] {
    max-width: 100%;
    display: inline-flex;
    padding: 4px 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf5fb;
    color: #174f7e;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   ESTADO
   ========================================================= */

.vehicle-state[b-ozhhdmufox] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
}


.state-dot[b-ozhhdmufox] {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
}


.state-moving[b-ozhhdmufox] {
    color: #168155;
}


.state-on[b-ozhhdmufox] {
    color: #168155;
}


.state-off[b-ozhhdmufox] {
    color: #b54b4b;
}


.state-stale[b-ozhhdmufox] {
    color: #c28a1a;
}


.state-unknown[b-ozhhdmufox] {
    color: #8794a0;
}


/* =========================================================
   VELOCIDAD
   ========================================================= */

.speed-box[b-ozhhdmufox] {
    min-width: 58px;
    flex: 0 0 58px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 13px;
    background: #f4f8fb;
}


    .speed-box strong[b-ozhhdmufox] {
        max-width: 100%;
        overflow: hidden;
        font-size: 21px;
        line-height: 1;
        color: #17253d;
        text-overflow: ellipsis;
    }


    .speed-box span[b-ozhhdmufox] {
        margin-top: 3px;
        font-size: 9px;
        font-weight: 700;
        white-space: nowrap;
        color: #8795a3;
    }


/* =========================================================
   UBICACIÓN
   ========================================================= */

.vehicle-location[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(25, 62, 93, 0.07);
    color: #637587;
}


    .vehicle-location svg[b-ozhhdmufox] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        margin-top: 1px;
        fill: none;
        stroke: #4b7597;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .vehicle-location span[b-ozhhdmufox] {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.45;
    }


/* =========================================================
   DATOS
   ========================================================= */

.vehicle-info-grid[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}


.info-item[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    padding: 10px 11px;
    overflow: hidden;
    border-radius: 12px;
    background: #f7f9fb;
}


.info-label[b-ozhhdmufox] {
    display: block;
    margin-bottom: 3px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: #8796a5;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.info-item strong[b-ozhhdmufox] {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 750;
    color: #26384b;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   CONDUCTOR
   ========================================================= */

.driver-row[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: #52677a;
}


    .driver-row svg[b-ozhhdmufox] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: #4b7597;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .driver-row span[b-ozhhdmufox] {
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.pagination[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 20px;
}


.page-button[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(30, 69, 102, 0.10);
    border-radius: 13px;
    background: #ffffff;
    color: #315f84;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}


    .page-button svg[b-ozhhdmufox] {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .page-button:disabled[b-ozhhdmufox] {
        opacity: 0.35;
        cursor: default;
    }


.page-status[b-ozhhdmufox] {
    min-width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    .page-status strong[b-ozhhdmufox] {
        font-size: 16px;
        color: #17253d;
    }


    .page-status span[b-ozhhdmufox] {
        font-size: 9px;
        white-space: nowrap;
        color: #8795a3;
    }


/* =========================================================
   LOADING / VACÍO
   ========================================================= */

.online-loading[b-ozhhdmufox],
.empty-state[b-ozhhdmufox] {
    width: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #6c7e8e;
}


.online-spinner[b-ozhhdmufox] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(23, 79, 126, 0.13);
    border-top-color: #174f7e;
    border-radius: 50%;
    animation: online-spin-b-ozhhdmufox 0.75s linear infinite;
}


@keyframes online-spin-b-ozhhdmufox {

    to {
        transform: rotate(360deg);
    }
}


.online-loading span[b-ozhhdmufox] {
    font-size: 12px;
    font-weight: 650;
}


/* =========================================================
   ERROR
   ========================================================= */

.online-message[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 15px;
}


    .online-message.error[b-ozhhdmufox] {
        background: #fff3f3;
        color: #a13f3f;
    }


    .online-message svg[b-ozhhdmufox] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .online-message div[b-ozhhdmufox] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .online-message strong[b-ozhhdmufox] {
        font-size: 12px;
    }


    .online-message span[b-ozhhdmufox] {
        overflow-wrap: anywhere;
        font-size: 11px;
    }


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-icon[b-ozhhdmufox] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #edf5fb;
    color: #174f7e;
}


    .empty-icon svg[b-ozhhdmufox] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.empty-state strong[b-ozhhdmufox] {
    color: #26394b;
    font-size: 14px;
}


.empty-state span[b-ozhhdmufox] {
    font-size: 11px;
}


/* =========================================================
   TABLET / ESCRITORIO
   ========================================================= */

@media (min-width: 700px) {

    .online-page[b-ozhhdmufox] {
        padding: 76px 20px 28px;
    }


    .search-card[b-ozhhdmufox] {
        width: min( calc(100% - 40px), 760px );
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .online-page[b-ozhhdmufox] {
        width: 100%;
        /*
           Reserva vertical para el buscador fijo.
        */
        padding: 70px 12px 28px;
    }


    .search-card[b-ozhhdmufox] {
        position: fixed;
        top: var(--mobile-header-height, 64px);
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        min-width: 0;
        z-index: 900;
        margin: 0;
        padding: 7px 0;
        background: #f5f9fc;
    }


        .search-card form[b-ozhhdmufox] {
            width: 100%;
            gap: 7px;
        }


    /* =====================================================
       TOTAL
       ===================================================== */

    .search-total[b-ozhhdmufox] {
        min-width: 48px;
        max-width: 48px;
        flex-basis: 48px;
        padding: 0 1px;
    }


        .search-total strong[b-ozhhdmufox] {
            font-size: 17px;
        }


        .search-total span[b-ozhhdmufox] {
            margin-top: 3px;
            font-size: 7px;
        }


    /* =====================================================
       BUSCADOR
       ===================================================== */

    .search-box[b-ozhhdmufox] {
        height: 48px;
        min-width: 0;
    }


        .search-box > svg[b-ozhhdmufox] {
            width: 19px;
            height: 19px;
            margin-left: 12px;
            flex-basis: 19px;
        }


        .search-box input[b-ozhhdmufox] {
            padding-left: 9px;
            font-size: 13px;
        }


    /* =====================================================
       BOTÓN
       ===================================================== */

    .search-button[b-ozhhdmufox] {
        min-width: 76px;
        max-width: 76px;
        height: 48px;
        flex-basis: 76px;
        padding: 0 8px;
        font-size: 12px;
    }


    /* =====================================================
       TARJETAS
       ===================================================== */

    .vehicle-card[b-ozhhdmufox] {
        padding: 14px;
        border-radius: 18px;
    }


    .vehicle-top[b-ozhhdmufox] {
        gap: 8px;
    }


    .vehicle-title-row[b-ozhhdmufox] {
        gap: 6px;
    }


        .vehicle-title-row h2[b-ozhhdmufox] {
            font-size: 15px;
            line-height: 1.25;
        }


    .plate[b-ozhhdmufox] {
        padding: 4px 7px;
        font-size: 10px;
    }


    .speed-box[b-ozhhdmufox] {
        min-width: 56px;
        flex-basis: 56px;
        padding: 8px 6px;
    }


        .speed-box strong[b-ozhhdmufox] {
            font-size: 20px;
        }


    .vehicle-info-grid[b-ozhhdmufox] {
        gap: 7px;
    }


    .info-item[b-ozhhdmufox] {
        padding: 9px 10px;
    }
}


/* =========================================================
   MOBILE MUY PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .online-page[b-ozhhdmufox] {
        padding: 68px 10px 28px;
    }


    .search-card[b-ozhhdmufox] {
        width: calc(100% - 20px);
    }


        .search-card form[b-ozhhdmufox] {
            gap: 5px;
        }


    .search-total[b-ozhhdmufox] {
        min-width: 43px;
        max-width: 43px;
        flex-basis: 43px;
    }


        .search-total strong[b-ozhhdmufox] {
            font-size: 15px;
        }


        .search-total span[b-ozhhdmufox] {
            font-size: 7px;
        }


    .search-button[b-ozhhdmufox] {
        min-width: 68px;
        max-width: 68px;
        flex-basis: 68px;
        padding: 0 6px;
        font-size: 11px;
    }


    .vehicle-card[b-ozhhdmufox] {
        padding: 12px;
    }


    .vehicle-title-row h2[b-ozhhdmufox] {
        font-size: 14px;
    }


    .speed-box[b-ozhhdmufox] {
        min-width: 52px;
        flex-basis: 52px;
    }


    .vehicle-info-grid[b-ozhhdmufox] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   INTERACCIÓN MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .search-button:hover[b-ozhhdmufox] {
        background: #123f66;
    }


    .clear-search:hover[b-ozhhdmufox] {
        background: rgba(23, 79, 126, 0.06);
    }


    .page-button:not(:disabled):hover[b-ozhhdmufox] {
        background: #f6f9fb;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .online-spinner[b-ozhhdmufox] {
        animation: none;
    }
}

/* =========================================================
   AVLOnline2 - FILTRO DE ESTADO ONLINE

   AGREGAR ESTE BLOQUE AL FINAL DE Online.razor.css
   ========================================================= */

/*
   El buscador fijo ahora contiene una segunda fila
   con los filtros de estado, por lo que reservamos
   más espacio antes de comenzar la lista.
*/
.online-page[b-ozhhdmufox] {
    padding-top: 118px;
}


/* =========================================================
   FILTROS DE ESTADO
   ========================================================= */

.state-filters[b-ozhhdmufox] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 1px 1px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}


    .state-filters[b-ozhhdmufox]::-webkit-scrollbar {
        display: none;
    }


.state-filter[b-ozhhdmufox] {
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(30, 67, 99, 0.10);
    border-radius: 11px;
    background: #ffffff;
    color: #66798b;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .state-filter:disabled[b-ozhhdmufox] {
        opacity: 0.55;
        cursor: default;
    }


.filter-dot[b-ozhhdmufox] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}


.filter-dot-all[b-ozhhdmufox] {
    background: #71869a;
}


.filter-dot-on[b-ozhhdmufox] {
    background: #168155;
}


.filter-dot-off[b-ozhhdmufox] {
    background: #b54b4b;
}


.filter-dot-stale[b-ozhhdmufox] {
    background: #c28a1a;
}


/* =========================================================
   FILTRO ACTIVO
   ========================================================= */

.state-filter.filter-all.active[b-ozhhdmufox] {
    border-color: rgba(23, 79, 126, 0.24);
    background: #edf5fb;
    color: #174f7e;
}


.state-filter.filter-on.active[b-ozhhdmufox] {
    border-color: rgba(22, 129, 85, 0.24);
    background: #edf8f3;
    color: #13704a;
}


.state-filter.filter-off.active[b-ozhhdmufox] {
    border-color: rgba(181, 75, 75, 0.22);
    background: #fff2f2;
    color: #a33f3f;
}


.state-filter.filter-stale.active[b-ozhhdmufox] {
    border-color: rgba(194, 138, 26, 0.26);
    background: #fff8e8;
    color: #9b6b0d;
}


/* =========================================================
   COLOR VISUAL DE LA TARJETA

   El estado calculado por SQL tiene prioridad:

   VERDE    = ENCENDIDO
   ROJO     = APAGADO
   AMARILLO = SIN_REPORTE > 75 min
   ========================================================= */

.vehicle-card.vehicle-card-on[b-ozhhdmufox] {
    border-left: 4px solid #168155;
}


.vehicle-card.vehicle-card-off[b-ozhhdmufox] {
    border-left: 4px solid #b54b4b;
}


.vehicle-card.vehicle-card-stale[b-ozhhdmufox] {
    border-left: 4px solid #c28a1a;
}


.vehicle-card.vehicle-card-unknown[b-ozhhdmufox] {
    border-left: 4px solid #8794a0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .online-page[b-ozhhdmufox] {
        padding-top: 110px;
    }


    .state-filters[b-ozhhdmufox] {
        gap: 5px;
        margin-top: 7px;
    }


    .state-filter[b-ozhhdmufox] {
        height: 30px;
        gap: 5px;
        padding: 0 8px;
        font-size: 10px;
    }


    .filter-dot[b-ozhhdmufox] {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }
}


/* =========================================================
   MOBILE MUY PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .online-page[b-ozhhdmufox] {
        padding-top: 108px;
    }


    .state-filter[b-ozhhdmufox] {
        padding: 0 7px;
        font-size: 9px;
    }
}


/* =========================================================
   HOVER SOLO CON MOUSE
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .state-filter:not(:disabled):hover[b-ozhhdmufox] {
        background: #f7fafc;
    }


    .state-filter.filter-on.active:hover[b-ozhhdmufox] {
        background: #edf8f3;
    }


    .state-filter.filter-off.active:hover[b-ozhhdmufox] {
        background: #fff2f2;
    }


    .state-filter.filter-stale.active:hover[b-ozhhdmufox] {
        background: #fff8e8;
    }


    .state-filter.filter-all.active:hover[b-ozhhdmufox] {
        background: #edf5fb;
    }
}
/* /Pages/OnlineFlota.razor.rz.scp.css */
/* Online Flota: CSS aislado. No modifica Online ni MapaMovil. */
.fleet-page[b-a8w08pwdqz] {
    position: fixed;
    top: var(--mobile-header-height, 64px);
    bottom: var(--mobile-bottom-height, 68px);
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #e6edf2;
    color: #162c3f;
}

.fleet-toolbar[b-a8w08pwdqz] {
    position: relative;
    z-index: 850;
    min-height: 54px;
    flex: 0 0 54px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    padding: 5px 11px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 44, 65, .07);
}

.fleet-toolbar-btn[b-a8w08pwdqz] {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #edf5fa;
    color: #24678e;
    font-size: 30px;
    cursor: pointer;
}

    .fleet-toolbar-btn:disabled[b-a8w08pwdqz] {
        opacity: .55;
        cursor: wait;
    }

.fleet-toolbar-refresh[b-a8w08pwdqz] {
    font-size: 28px;
}

.fleet-toolbar-title[b-a8w08pwdqz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

    .fleet-toolbar-title strong[b-a8w08pwdqz] {
        font-size: 15px;
        font-weight: 800;
    }

    .fleet-toolbar-title span[b-a8w08pwdqz] {
        font-size: 11px;
        color: #788995;
    }

.fleet-stage[b-a8w08pwdqz] {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.fleet-map[b-a8w08pwdqz] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #dae7ed;
}

.fleet-floating-actions[b-a8w08pwdqz] {
    position: absolute;
    z-index: 730;
    right: 12px;
    top: 13px;
}

    .fleet-floating-actions button[b-a8w08pwdqz] {
        width: 43px;
        height: 43px;
        border: 0;
        border-radius: 13px;
        background: #fff;
        color: #184967;
        box-shadow: 0 3px 14px rgba(13, 40, 58, .22);
        font-size: 26px;
        font-weight: 800;
        cursor: pointer;
    }

        .fleet-floating-actions button:disabled[b-a8w08pwdqz] {
            opacity: .65;
        }

.fleet-loading[b-a8w08pwdqz] {
    position: absolute;
    top: 21%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    max-width: calc(100% - 40px);
    z-index: 735;
    border-radius: 15px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 18px rgba(14, 44, 65, .14);
    color: #365569;
    white-space: nowrap;
    font-size: 12px;
}

.fleet-spinner[b-a8w08pwdqz] {
    width: 19px;
    height: 19px;
    border: 2px solid #cae0ec;
    border-top-color: #1682b8;
    border-radius: 50%;
    animation: fleet-spin-b-a8w08pwdqz .7s linear infinite;
}

@keyframes fleet-spin-b-a8w08pwdqz {
    to {
        transform: rotate(360deg);
    }
}

.fleet-alert[b-a8w08pwdqz] {
    position: absolute;
    z-index: 950;
    left: 14px;
    right: 65px;
    top: 13px;
    padding: 10px 10px 10px 12px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e6c9aa;
    border-radius: 10px;
    background: #fff8ed;
    color: #8e5314;
    font-size: 12px;
    box-shadow: 0 2px 12px rgba(35, 46, 56, .1);
}

    .fleet-alert button[b-a8w08pwdqz] {
        background: none;
        border: 0;
        cursor: pointer;
        font-size: 19px;
        color: inherit;
    }

/* La lista es una lámina sobre el mapa; el header y el bottom-nav del layout quedan intactos. */
.fleet-sheet[b-a8w08pwdqz] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 750;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: 19px 19px 0 0;
    background: #17202c;
    color: #f1f5fa;
    box-shadow: 0 -9px 32px rgba(9, 21, 33, .28);
    transition: height 220ms ease;
    box-sizing: border-box;
}

.fleet-sheet--collapsed[b-a8w08pwdqz] {
    height: 96px;
}

.fleet-sheet--medium[b-a8w08pwdqz] {
    height: clamp(245px, 43%, 470px);
}

.fleet-sheet--expanded[b-a8w08pwdqz] {
    height: 86%;
}

.fleet-sheet-grip[b-a8w08pwdqz] {
    flex: 0 0 20px;
    height: 20px;
    touch-action: none;
    user-select: none;
    cursor: ns-resize;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fleet-sheet-grip-line[b-a8w08pwdqz] {
    width: 40px;
    height: 4px;
    border-radius: 10px;
    background: #718090;
}

.fleet-sheet-heading[b-a8w08pwdqz] {
    flex: 0 0 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 6px;
    box-sizing: border-box;
}

.fleet-sheet-heading-text[b-a8w08pwdqz] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

    .fleet-sheet-heading-text strong[b-a8w08pwdqz] {
        font-size: 15px;
        font-weight: 800;
    }

    .fleet-sheet-heading-text span[b-a8w08pwdqz] {
        color: #96a8b9;
        font-size: 11px;
    }

.fleet-sheet-buttons[b-a8w08pwdqz] {
    display: flex;
    gap: 7px;
}

    .fleet-sheet-buttons button[b-a8w08pwdqz] {
        width: 30px;
        height: 30px;
        border: 1px solid #394758;
        border-radius: 9px;
        background: #263443;
        color: #dbe8f2;
        font-size: 20px;
        cursor: pointer;
    }

.fleet-sheet-body[b-a8w08pwdqz] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fleet-sheet--collapsed .fleet-sheet-body[b-a8w08pwdqz] {
    display: none;
}

.fleet-search-row[b-a8w08pwdqz] {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    margin: 0 12px 9px;
    padding: 0 11px;
    background: #283544;
    border: 1px solid #354455;
    border-radius: 9px;
    box-sizing: border-box;
    color: #a7b8c8;
}

    .fleet-search-row span[b-a8w08pwdqz] {
        font-size: 22px;
        line-height: 1;
    }

    .fleet-search-row input[b-a8w08pwdqz] {
        flex: 1;
        width: 100%;
        min-width: 0;
        outline: none;
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 13px;
    }

        .fleet-search-row input[b-a8w08pwdqz]::placeholder {
            color: #9aacbc;
        }

        .fleet-search-row input[b-a8w08pwdqz]::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }

    .fleet-search-row button[b-a8w08pwdqz] {
        border: 0;
        background: transparent;
        color: #e8eff5;
        font-size: 21px;
        cursor: pointer;
    }

.fleet-filters[b-a8w08pwdqz] {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    margin: 0 12px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .fleet-filters[b-a8w08pwdqz]::-webkit-scrollbar {
        display: none;
    }

    .fleet-filters button[b-a8w08pwdqz] {
        flex: 0 0 auto;
        border: 1px solid #3a4b5e;
        border-radius: 15px;
        background: #253341;
        color: #c0cfdd;
        padding: 7px 10px;
        font-size: 11px;
        font-weight: 650;
        cursor: pointer;
    }

        .fleet-filters button.active[b-a8w08pwdqz] {
            background: #deeffb;
            color: #175179;
            border-color: #deeffb;
        }

.fleet-summary[b-a8w08pwdqz] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 14px 8px;
    color: #adbdca;
    font-size: 10px;
    white-space: nowrap;
    overflow-x: auto;
}

    .fleet-summary span[b-a8w08pwdqz] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.fleet-status-dot[b-a8w08pwdqz] {
    display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 50%;
}

.fleet-dot-on[b-a8w08pwdqz] {
    background: #25be6a;
}

.fleet-dot-off[b-a8w08pwdqz] {
    background: #ed6465;
}

.fleet-dot-stale[b-a8w08pwdqz] {
    background: #efb936;
}

.fleet-list[b-a8w08pwdqz] {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #41576c transparent;
}
/* Tarjetas Online Flota: paridad de datos con el listado Online V2. */
.fleet-list[b-a8w08pwdqz] {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #41576c transparent;
    padding: 7px 10px 14px;
}

.fleet-unit[b-a8w08pwdqz] {
    --fleet-card-accent: #94a3b8;
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 11px;
    padding: 12px 11px;
    border: 1px solid #e5edf3;
    border-left: 4px solid var(--fleet-card-accent);
    border-radius: 15px;
    background: #fff;
    color: #21394d;
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .09);
    -webkit-tap-highlight-color: transparent;
}

.fleet-unit--on[b-a8w08pwdqz] {
    --fleet-card-accent: #25ae67;
}

.fleet-unit--off[b-a8w08pwdqz] {
    --fleet-card-accent: #ea5964;
}

.fleet-unit--stale[b-a8w08pwdqz] {
    --fleet-card-accent: #d99d1c;
}

.fleet-unit--unknown[b-a8w08pwdqz] {
    --fleet-card-accent: #8594a1;
}

.fleet-unit--selected[b-a8w08pwdqz] {
    outline: 2px solid #2295d1;
    outline-offset: 1px;
    box-shadow: 0 2px 14px rgba(26, 128, 189, .22);
}

.fleet-unit-top[b-a8w08pwdqz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.fleet-unit-main[b-a8w08pwdqz] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.fleet-unit-title[b-a8w08pwdqz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .fleet-unit-title > strong[b-a8w08pwdqz] {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        color: #1c354d;
        font-size: 12px;
        font-weight: 850;
        line-height: 1.3;
    }

.fleet-unit-plate[b-a8w08pwdqz] {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 3px 6px;
    border-radius: 6px;
    background: #eaf5fd;
    color: #1b5f89;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.fleet-unit-status[b-a8w08pwdqz] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 5px;
    font-size: 11px;
    font-weight: 760;
}

.fleet-unit-state-dot[b-a8w08pwdqz] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.fleet-status--on[b-a8w08pwdqz] {
    color: #138f54;
}

.fleet-status--off[b-a8w08pwdqz] {
    color: #be4050;
}

.fleet-status--stale[b-a8w08pwdqz] {
    color: #a8710c;
}

.fleet-status--unknown[b-a8w08pwdqz] {
    color: #748391;
}

.fleet-unit-stale-note[b-a8w08pwdqz] {
    color: #8e6d32;
    font-size: 10px;
    line-height: 1.3;
}

.fleet-unit-speed[b-a8w08pwdqz] {
    display: flex;
    flex: 0 0 65px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    gap: 3px;
    padding: 5px 3px;
    border-radius: 11px;
    background: #f3f7fa;
    text-align: center;
}

    .fleet-unit-speed > strong[b-a8w08pwdqz] {
        color: #213b52;
        font-size: 22px;
        line-height: 1;
        font-weight: 850;
    }

    .fleet-unit-speed > small[b-a8w08pwdqz] {
        color: #71889b;
        font-size: 9px;
        font-weight: 700;
    }

    .fleet-unit-speed .fleet-unit-speed-note[b-a8w08pwdqz] {
        color: #a1762a;
        font-size: 8px;
    }

.fleet-unit-location[b-a8w08pwdqz] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    padding: 9px 0;
    border-top: 1px solid #eef2f5;
    color: #6b8498;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

    .fleet-unit-location svg[b-a8w08pwdqz],
    .fleet-unit-driver svg[b-a8w08pwdqz] {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
        stroke: #4380aa;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .fleet-unit-location > span[b-a8w08pwdqz] {
        min-width: 0;
    }

.fleet-unit-info-grid[b-a8w08pwdqz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.fleet-unit-info[b-a8w08pwdqz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 43px;
    gap: 4px;
    padding: 7px 8px;
    border-radius: 9px;
    background: #f4f7fa;
}

    .fleet-unit-info > small[b-a8w08pwdqz] {
        color: #8395a6;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .2px;
    }

    .fleet-unit-info > strong[b-a8w08pwdqz] {
        color: #253f55;
        font-size: 11px;
        font-weight: 780;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

.fleet-unit-driver[b-a8w08pwdqz] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 9px;
    border-radius: 9px;
    background: #eef5fa;
    color: #325876;
    font-size: 11px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.fleet-empty[b-a8w08pwdqz] {
    padding: 22px;
    text-align: center;
    color: #a6bacb;
    font-size: 12px;
}

/* Estilos de marcadores añadidos dinámicamente por Leaflet (CSS isolation con ::deep). */
.fleet-map[b-a8w08pwdqz]  .avl-fleet-marker-host {
    border: 0;
    background: transparent;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin-wrap {
    display: flex;
    width: 40px;
    height: 47px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #20ad5d;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.27);
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin--on {
    background: #21af61;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin--off {
    background: #e95357;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin--stale {
    background: #e6ac29;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin--unknown {
    background: #8595a2;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin--selected {
    outline: 3px solid #3c9edc;
    outline-offset: 2px;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-direction {
    display: block;
    font-size: 20px;
    line-height: 1;
    transform-origin: 50% 50%;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-pin-label {
    display: none;
    margin-top: 2px;
    max-width: 100px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255,255,255,.95);
    color: #24384b;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 4px #0003;
}

.fleet-map.avl-fleet-labels-visible[b-a8w08pwdqz]  .avl-fleet-pin-label {
    display: inline-block;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-cluster-host {
    background: transparent;
    border: 0;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-cluster {
    display: grid;
    place-items: center;
    border-radius: 50%;
    width: 43px;
    height: 43px;
    background: #12638d;
    border: 3px solid #eaf7ff;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 3px 12px #0004;
}

.fleet-map[b-a8w08pwdqz]  .leaflet-popup-content-wrapper {
    border-radius: 14px;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-popup {
    width: 245px;
    max-width: calc(100vw - 90px);
    color: #203749;
    font-size: 12px;
}

    .fleet-map[b-a8w08pwdqz]  .avl-fleet-popup strong {
        font-size: 14px;
        color: #173a53;
    }

    .fleet-map[b-a8w08pwdqz]  .avl-fleet-popup .avl-fleet-popup-line {
        margin-top: 6px;
        color: #667b8c;
    }

    .fleet-map[b-a8w08pwdqz]  .avl-fleet-popup .avl-fleet-popup-status {
        display: inline-block;
        padding: 3px 8px;
        background: #edf4f9;
        border-radius: 7px;
        color: #205679;
        font-weight: 750;
    }

.fleet-map[b-a8w08pwdqz]  .leaflet-control-zoom {
    margin-top: 12px !important;
    box-shadow: 0 2px 12px #0002;
}

@media (min-width: 860px) {
    .fleet-sheet[b-a8w08pwdqz] {
        left: 10px;
        right: auto;
        width: 390px;
        bottom: 10px;
        border-radius: 18px;
    }

    .fleet-sheet--expanded[b-a8w08pwdqz] {
        height: 88%;
    }

    .fleet-floating-actions[b-a8w08pwdqz] {
        right: 20px;
    }
}

@media (max-height: 690px) {
    .fleet-sheet--medium[b-a8w08pwdqz] {
        height: 54%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fleet-sheet[b-a8w08pwdqz] {
        transition: none;
    }
}

/* El popup del mapa presenta el mismo detalle operacional y puede desplazarse en celulares. */
.fleet-map[b-a8w08pwdqz]  .avl-fleet-online-popup .leaflet-popup-content {
    margin: 11px 12px;
    max-height: min(50dvh, 330px);
    overflow-y: auto;
    overflow-x: hidden;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-popup {
    width: 265px;
    max-width: calc(100vw - 95px);
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-popup-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.fleet-map[b-a8w08pwdqz]  .avl-fleet-popup-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

    .fleet-map[b-a8w08pwdqz]  .avl-fleet-popup-info > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        padding: 6px;
        border-radius: 6px;
        background: #f0f5f8;
    }

    .fleet-map[b-a8w08pwdqz]  .avl-fleet-popup-info small {
        color: #71879b;
        font-size: 9px;
        font-weight: 700;
    }

    .fleet-map[b-a8w08pwdqz]  .avl-fleet-popup-info b {
        color: #28435b;
        font-size: 10px;
        overflow-wrap: anywhere;
    }

.fleet-map[b-a8w08pwdqz]  .avl-fleet-popup-stale {
    color: #956611;
    font-size: 10px;
    margin-top: 5px;
    font-weight: 750;
}

@media (max-width: 360px) {
    .fleet-list[b-a8w08pwdqz] {
        padding: 6px 7px 12px;
    }

    .fleet-unit[b-a8w08pwdqz] {
        padding: 10px 9px;
    }

    .fleet-unit-speed[b-a8w08pwdqz] {
        flex-basis: 55px;
    }

    .fleet-sheet-heading-text[b-a8w08pwdqz] {
        gap: 5px;
    }

        .fleet-sheet-heading-text span[b-a8w08pwdqz] {
            font-size: 10px;
        }
}