/* /Components/Common/SortableHeader.razor.rz.scp.css */
/* Encabezados de columna clicables para el ordenamiento server-side
   (reemplazan a MudTableSortLabel, que no expone el nombre de columna
   de forma confiable con ServerData). */

.sort-header[b-xizbozrj39] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sort-header:hover[b-xizbozrj39] {
    color: var(--brand-blue-light);
    text-decoration: underline;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav_menu[b-iqgkrbonl6] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav_menu_header[b-iqgkrbonl6] {
    font-size: 18px;
}

.nav_menu_footer[b-iqgkrbonl6] {
    margin-top: auto;
    margin-bottom: 8px;
    padding: 8px 16px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibilidad según el estado que blazor.web.js setea en el <dialog>.
   Los controles MudBlazor (spinner, botones, textos) se ocultan/muestran con estas clases.
   UX: 'Reintentar' se muestra durante 'retrying' (además de 'failed') para que el usuario
   pueda forzar un intento sin esperar los ~100s de reintentos automáticos. */
.components-reconnect-first-attempt-visible[b-t7t1r4xt6e],
.components-reconnect-repeated-attempt-visible[b-t7t1r4xt6e],
.components-reconnect-failed-visible[b-t7t1r4xt6e],
.components-pause-visible[b-t7t1r4xt6e],
.components-resume-failed-visible[b-t7t1r4xt6e],
.components-rejoining-animation[b-t7t1r4xt6e] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-retrying[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-failed-visible[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-failed[b-t7t1r4xt6e],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-t7t1r4xt6e] {
    display: block;
}

/* El dialog usa los colores del tema vigente (light/dark) vía las variables
   globales que MudThemeProvider inyecta en :root. */
#components-reconnect-modal[b-t7t1r4xt6e] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    width: min(20rem, 90vw);
    /* margin: auto centra de verdad: con inset-block: 0 de la UA, los márgenes
       verticales auto se reparten por igual. margin: 20vh auto estiraba el dialog
       (position: fixed) a 100vh - 40vh y el botón quedaba fuera de pantalla. */
    margin: auto;
    padding: 1.25rem; /* compacto: antes 2rem dejaba demasiado aire arriba/abajo */
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-10);
    /* Seguridad: nunca más alto que la pantalla; si el contenido desborda,
       scrollea DENTRO del dialog (no en la página, que no mueve un fixed). */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-t7t1r4xt6e 0.5s both;

    &[open] {
        animation: components-reconnect-modal-slideUp-b-t7t1r4xt6e 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-t7t1r4xt6e 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-t7t1r4xt6e]::backdrop {
    background-color: var(--mud-palette-overlay-dark);
    animation: components-reconnect-modal-fadeInOpacity-b-t7t1r4xt6e 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-t7t1r4xt6e {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-t7t1r4xt6e {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-t7t1r4xt6e {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-t7t1r4xt6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* compacto: antes 1rem entre cada elemento */
}

/* Seguro: neutraliza el margen por defecto de los <p> (MudText body1) */
#components-reconnect-modal p[b-t7t1r4xt6e] {
    margin: 0;
}

#components-seconds-to-next-attempt[b-t7t1r4xt6e] {
    font-weight: 500;
}
/* /Components/Pages/Fleet/FleetVehicleTires.razor.rz.scp.css */
/* ============================================================================
   Esquema de neumaticos del vehiculo (FleetVehicleTires).

   Los estilos viven en el .razor.css del componente (CSS aislado) porque el
   esquema es propio de esta pantalla: casilleros por rueda, etiqueta del eje,
   auxiliar y las dos posiciones temporales.

   Los colores usan transparencias sobre el fondo del tema para que el esquema se
   lea igual en claro y en oscuro (la aplicacion tiene los dos modos).
   ============================================================================ */

.tire-schema[b-htvdxrvhps] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* --- Ejes ---------------------------------------------------------------- */

.tire-spare[b-htvdxrvhps] {
    display: flex;
    justify-content: flex-end;
}

.tire-axle[b-htvdxrvhps] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.tire-axle-side[b-htvdxrvhps] {
    display: flex;
    gap: 0.4rem;
}

.tire-axle-label[b-htvdxrvhps] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: rgba(128, 128, 128, 0.10);
    font-weight: 600;
    font-size: 0.85rem;
}

.tire-axle-wheels[b-htvdxrvhps] {
    font-weight: 400;
    font-size: 0.68rem;
    opacity: 0.75;
}

/* --- Casillero (zona de arrastre) --------------------------------------- */

.tire-zone[b-htvdxrvhps] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    padding: 0.25rem;
    border: 2px dashed rgba(128, 128, 128, 0.65);
    border-radius: 0.5rem;
    background: rgba(128, 128, 128, 0.06);
    text-align: center;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.tire-zone.occupied[b-htvdxrvhps] {
    border-style: solid;
    border-color: rgba(96, 125, 139, 0.8);
    background: rgba(96, 125, 139, 0.10);
}

.tire-zone.can-drop[b-htvdxrvhps] {
    border-color: #1e88e5;
    background: rgba(30, 136, 229, 0.12);
}

.tire-zone.hover[b-htvdxrvhps] {
    border-color: #43a047;
    background: rgba(67, 160, 71, 0.20);
}

.tire-zone-empty[b-htvdxrvhps] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tire-zone-caption[b-htvdxrvhps] {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.75;
}

.tire-zone-hint[b-htvdxrvhps] {
    font-size: 0.65rem;
    opacity: 0.65;
}

/* --- Tarjeta del neumatico ---------------------------------------------- */

.tire-card[b-htvdxrvhps] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: 100%;
    padding: 0.3rem;
    border: 1px solid rgba(30, 136, 229, 0.55);
    border-radius: 0.4rem;
    background: rgba(30, 136, 229, 0.14);
    cursor: grab;
    user-select: none;
}

.tire-card:active[b-htvdxrvhps] {
    cursor: grabbing;
}

.tire-card-identifier[b-htvdxrvhps] {
    font-size: 0.72rem;
    font-weight: 600;
    word-break: break-all;
}

.tire-card-position[b-htvdxrvhps] {
    font-size: 0.62rem;
    opacity: 0.7;
}

/* Neumatico que estaba en el vehiculo y vuelve al deposito: al confirmar se
   actualiza con vehicle_id = 0 y position = '' (el campo auxiliar ToUpdate). */
.tire-card.to-update[b-htvdxrvhps] {
    border-color: #fb8c00;
    background: rgba(251, 140, 0, 0.16);
}

/* --- Posiciones temporales ---------------------------------------------- */

.tire-temporaries[b-htvdxrvhps] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

/* --- Contenedores (deposito y fuera de la plantilla) -------------------- */

.tire-container[b-htvdxrvhps] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 4.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 2px dashed rgba(128, 128, 128, 0.5);
    border-radius: 0.5rem;
    background: rgba(128, 128, 128, 0.05);
}

.tire-container.can-drop[b-htvdxrvhps] {
    border-color: #1e88e5;
    background: rgba(30, 136, 229, 0.10);
}

.tire-container.hover[b-htvdxrvhps] {
    border-color: #43a047;
    background: rgba(67, 160, 71, 0.18);
}

.tire-container .tire-card[b-htvdxrvhps] {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}
/* /Components/Pages/Maps/MapComponent.razor.rz.scp.css */
.leaflet_container[b-qbiwsfnwb7] {
    cursor: pointer !important;
}

.leaflet_drag_target[b-qbiwsfnwb7] {
    cursor: pointer !important;
}

.leaflet_drag_moving[b-qbiwsfnwb7] {
    cursor: grabbing !important;
}