html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

/* ═══════════════════════════════════════════
   COMMAND BAR — Override azul de marca
   ═══════════════════════════════════════════ */
.command-bar {
    background: #F4F6FA !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 24px !important;
    padding-top: 6px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}
.top-row-container {
    padding: 0 !important;
    margin: 0 !important;
}
.top-row-container + .mud-alert {
    margin: 0 !important;
    border-radius: 0 !important;
}
.sidebar-header {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 1.2rem !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}
.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(241, 138, 37, 0.25) 30%, rgba(240, 174, 30, 0.4) 50%, rgba(241, 138, 37, 0.25) 70%, transparent 95%);
}
.sidebar-divider {
    display: none !important;
}

/* ═══════════════════════════════════════════
   SIDEBAR NAV — Texto, iconos y estados
   ═══════════════════════════════════════════ */

/* ─── Texto: blanco legible ─── */
.sidebar .mud-nav-link,
.sidebar .mud-nav-link .mud-nav-link-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.8rem;
    font-weight: 450;
    letter-spacing: 0.15px;
}

/* ─── Forma pill: cada item con radios y margen para alojar el fondo ─── */
.sidebar .mud-nav-link {
    position: relative !important;
    border-radius: 8px !important;
    margin: 1px 6px !important;
    transition: background-color 0.16s ease, color 0.16s ease !important;
}

/* ─── Hover: texto más brillante + fondo sutil ─── */
.sidebar .mud-nav-link:hover,
.sidebar .mud-nav-link:hover .mud-nav-link-text {
    color: #ffffff !important;
}
.sidebar .mud-nav-link:hover,
.sidebar .mud-nav-link:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ─── Matar ripple de MudBlazor (pero conservamos ::before para el acento) ─── */
.sidebar .mud-nav-link.mud-ripple {
    background: transparent !important;
    background-color: transparent !important;
}
.sidebar .mud-nav-link::after {
    display: none !important;
}

/* ─── Active: texto e ícono blancos + fondo gris tenue + barra de acento naranja ─── */
.sidebar .mud-nav-link.active,
.sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}
.sidebar .mud-nav-link.active,
.sidebar .mud-nav-link.active .mud-nav-link-text,
.sidebar .mud-nav-link.active:not(.mud-nav-link-disabled),
.sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.sidebar .mud-nav-link.active::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: #F18A25;
    box-shadow: 0 0 6px rgba(240, 174, 30, 0.5);
}

/* ─── Iconos base: blanco suave ─── */
.sidebar .mud-nav-link .mud-icon-root,
.sidebar .mud-nav-link .mud-nav-link-icon,
.sidebar .mud-nav-link .mud-nav-link-icon .mud-icon-root {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 1.15rem !important;
    transition: color 0.18s ease, filter 0.18s ease;
}

/* ─── Iconos hover ─── */
.sidebar .mud-nav-link:hover .mud-icon-root,
.sidebar .mud-nav-link:hover .mud-nav-link-icon,
.sidebar .mud-nav-link:hover .mud-nav-link-icon .mud-icon-root {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ─── Iconos active: blanco (el acento naranja vive solo en la barra izquierda) ─── */
.sidebar .mud-nav-link.active .mud-icon-root,
.sidebar .mud-nav-link.active .mud-nav-link-icon,
.sidebar .mud-nav-link.active .mud-nav-link-icon .mud-icon-root,
.sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon .mud-icon-root,
.sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: #ffffff !important;
    filter: none !important;
    fill: #ffffff !important;
}

/* ─── Flecha expand/collapse: gold cuando abierto ─── */
.sidebar .mud-nav-link-expand-icon,
.sidebar .mud-nav-link-expand-icon svg,
.sidebar .mud-nav-link-expand-icon .mud-svg-icon {
    color: rgba(255, 255, 255, 0.35) !important;
    fill: rgba(255, 255, 255, 0.35) !important;
    transition: color 0.18s ease, fill 0.18s ease;
}
.sidebar .mud-nav-link:hover .mud-nav-link-expand-icon,
.sidebar .mud-nav-link:hover .mud-nav-link-expand-icon svg {
    color: rgba(255, 255, 255, 0.6) !important;
    fill: rgba(255, 255, 255, 0.6) !important;
}
.sidebar .mud-nav-link-expand-icon.mud-transform,
.sidebar .mud-nav-link-expand-icon.mud-transform svg {
    color: #F18A25 !important;
    fill: #F18A25 !important;
}

/* ─── Acción (Nuevo/Nueva) — gold siempre ─── */
.sidebar .nav-action .mud-icon-root,
.sidebar .nav-action .mud-nav-link-icon,
.sidebar .nav-action .mud-nav-link-icon .mud-icon-root {
    color: #F18A25 !important;
}

/* ─── Hoja (Listado, etc.) — sutil ─── */
.sidebar .nav-leaf .mud-icon-root,
.sidebar .nav-leaf .mud-nav-link-icon,
.sidebar .nav-leaf .mud-nav-link-icon .mud-icon-root {
    color: rgba(255, 255, 255, 0.35) !important;
}
.sidebar .nav-leaf:hover .mud-icon-root,
.sidebar .nav-leaf:hover .mud-nav-link-icon .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}

.command-bar__divider {
    background: linear-gradient(180deg, transparent, #D1D5DB, transparent) !important;
}
.command-bar .mud-icon-button-root:hover {
    background: #EBF1FA !important;
}

/* ═══════════════════════════════════════════
   APP LOADING — Pantalla de carga global
   (Inicio, verificación de sesión, logout)
   ═══════════════════════════════════════════ */
.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #13203a 0%, #0e1a2e 50%, #0a1222 100%);
    z-index: 9999;
}
.app-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    animation: loadFadeIn 0.4s ease;
}
.app-loading-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-bottom: 8px;
}
.app-loading-logo {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 2px 12px rgba(241, 138, 37, 0.2));
    animation: loadPulse 2s ease-in-out infinite;
}
.app-loading-version {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 1rem;
    line-height: 1.3;
    display: inline-block;
}
.app-loading-version strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(241, 138, 37, 0.9);
    letter-spacing: 1.6px;
}
.app-loading-bar {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.app-loading-bar-fill {
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, #23519E, #F18A25);
    animation: loadSlide 1.5s ease-in-out infinite;
}
.app-loading-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}
@keyframes loadSlide {
    0%   { transform: translateX(-200%); }
    100% { transform: translateX(600%); }
}
@keyframes loadPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
@keyframes loadFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* ═══════════════════════════════════════════
   DIALOGS — Estilos de marca TrucksLogic (scoped a .tl-* helpers)
   Los overrides GLOBALES de dialog (.mud-dialog-container .mud-dialog,
   -title, -content, -actions, .mud-overlay) se movieron a
   css/mud-overrides.css. Aquí solo queda lo scopeado a .tl-modal-*.
   ═══════════════════════════════════════════ */

.tl-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.tl-modal-header--framed {
    padding: 14px 18px;
    background: #13203a;
}

.tl-modal-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.tl-modal-header-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mud-dialog-container .mud-dialog-title .tl-modal-header-icon .mud-icon-root {
    color: inherit !important;
    font-size: 1.2rem;
}

.tl-modal-header-icon--info {
    background: rgba(255, 255, 255, 0.15);
    color: #A3C9FF;
}

.tl-modal-header-icon--success {
    background: rgba(13, 159, 110, 0.25);
    color: #34D399;
}

.tl-modal-header-icon--warning {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.tl-modal-header-icon--error {
    background: rgba(220, 38, 38, 0.25);
    color: #FCA5A5;
}

.tl-modal-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mud-dialog-container .mud-dialog-title .tl-modal-header-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.2;
}

.mud-dialog-container .mud-dialog-title .tl-modal-header-subtitle {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.75rem;
    line-height: 1.35;
}

.tl-modal-header-end {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-modal-header-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    min-width: 30px;
    color: rgba(255, 255, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tl-modal-header-close:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14);
}

/* ─── BPM Dialog — BpmDialogHeader propio pegado al borde, retícula única de 28px ─── */
.mud-dialog-container .tl-bpm-dialog.mud-dialog,
.mud-dialog-container .tl-bpm-dialog .mud-dialog {
    overflow: hidden !important;
    /* Esquinas de ARRIBA planas (igual que .tl-wizard-dialog): el header navy tiene
       esquinas cuadradas y un radius arriba dejaba el fleco blanco sub-pixel. Abajo
       sigue redondeado para el cuerpo blanco. */
    border-radius: 0 0 16px 16px !important;
}
.mud-dialog-container .tl-bpm-dialog .mud-dialog-title { display: none !important; }
.mud-dialog-container .tl-bpm-dialog .mud-dialog-content { padding: 0 !important; }
.mud-dialog-container .tl-bpm-dialog .mud-dialog-actions { padding: 14px 28px !important; }
.tl-bpm-dialog__body { padding: 18px 28px 14px; }

/* ─── BPM Task Dialog (Mis Tareas) — el modal rinde su propio marco (BpmTaskDialog),
   asi que se le quita TODO el chrome del MudDialog. Vive aqui y no en cada dialogo:
   estaba duplicado en los cuatro y un dialogo nuevo que lo olvidara aparecia con
   titulo, paddings y barra de acciones sueltos encima de su propio marco. Cada
   dialogo solo declara su ANCHO. ─── */
.mud-dialog-container .po-bpm-dialog.mud-dialog,
.mud-dialog-container .po-bpm-dialog .mud-dialog { overflow: hidden !important; }
.mud-dialog-container .po-bpm-dialog .mud-dialog-title { padding: 0 !important; display: none !important; }
.mud-dialog-container .po-bpm-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden !important; }
.mud-dialog-container .po-bpm-dialog .mud-dialog-actions { display: none !important; }

/* ─── Wizard Dialog — chrome stripped, WizardShell rendered as the only frame ─── */
/* Prefijo .mud-dialog-container → especificidad (0,3,0) para ganarle al override
   global de mud-overrides.css (.mud-dialog-container .mud-dialog-content { padding:24px 28px }),
   que si no reaplica el padding y reaparece el borde blanco. */
.mud-dialog-container .tl-wizard-dialog.mud-dialog,
.mud-dialog-container .tl-wizard-dialog .mud-dialog {
    min-width: 0 !important;
    width: min(1120px, 92vw) !important;
    max-width: min(1120px, 92vw) !important;
    min-height: 640px !important;
    max-height: 92vh !important;
    height: auto !important;
    /* Esquinas de ARRIBA planas (el header oscuro recortado por un radius dejaba un
       fleco claro sub-pixel = las "puntas blancas"). Abajo sigue redondeado. */
    border-radius: 0 0 14px 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    outline: none !important;
    background: #13203A !important;
    box-shadow: 0 24px 60px -12px rgba(10, 15, 30, 0.25) !important;
}
/* El WizardShell aporta su propia cabecera/acciones: se oculta el chrome del MudDialog. */
.mud-dialog-container .tl-wizard-dialog .mud-dialog-title,
.mud-dialog-container .tl-wizard-dialog .mud-dialog-actions { display: none !important; }
.mud-dialog-container .tl-wizard-dialog .mud-dialog-content {
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    /* Transparente: detrás del header asoma el paper navy (no blanco); el cuerpo
       blanco lo aporta .wz-content. Así NO queda ninguna capa blanca en las esquinas. */
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
}
.tl-wizard-dialog .wz-shell--dialog {
    flex: 1 1 auto !important;
    min-height: 600px !important;
    height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.tl-wizard-dialog .wz-content,
.tl-wizard-dialog .wz-content-body {
    min-height: 360px !important;
}
/* Centra el contenido del wizard dentro del modal (más ancho para grillas). */
.tl-wizard-dialog .wz-step-body {
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}
/* Header cuadrado: SOLO el diálogo recorta (overflow:hidden + radius) → esquinas
   navy a ras, sin las "puntas blancas" que asomaban entre las dos curvas. */
.tl-wizard-dialog .wz-top {
    border-radius: 0 !important;
}

/* Móvil: el wizard ocupa toda la pantalla — sin bordes blancos ni overflow horizontal. */
@media (max-width: 760px) {
    .mud-dialog-container .tl-wizard-dialog.mud-dialog,
    .mud-dialog-container .tl-wizard-dialog .mud-dialog {
        min-width: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }
    .tl-wizard-dialog .wz-top { border-radius: 0 !important; }
    .tl-wizard-dialog .wz-shell--dialog { border-radius: 0 !important; }
}

/* ─── Form Dialog (full-size) — override tamaño ─── */
.tl-form-dialog .mud-dialog {
    height: 92vh !important;
    max-height: 92vh !important;
    max-width: 1100px !important;
    width: 95vw !important;
    display: flex !important;
    flex-direction: column !important;
}

.tl-form-dialog .mud-dialog-title {
    flex-shrink: 0;
}

.tl-form-dialog .mud-dialog-content {
    padding: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}

/* Header custom del form dialog (override global) */
.tl-form-dialog .mud-dialog-title {
    background: none !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.tl-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #13203a;
}

.tl-dialog-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tl-dialog-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tl-dialog-header-icon.edit {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tl-dialog-header-icon.view {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tl-dialog-header-icon.create {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tl-dialog-title-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.tl-dialog-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.tl-dialog-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.tl-dialog-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Responsive dialog */
@media (max-width: 640px) {
    .tl-form-dialog .mud-dialog {
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* ═══════════════════════════════════════════
   ACTION BAR — Barra de acciones reutilizable
   (Se usa dentro de dialogs y formularios)
   ═══════════════════════════════════════════ */
.tl-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    margin-left: auto;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: fit-content;
}

.tl-form-dialog .mud-tabs-header {
    overflow: visible !important;
}

.tl-action-bar .d-flex {
    justify-content: flex-end;
}

.tl-action-bar .mud-button {
    transition: all 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tl-action-bar .mud-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.tl-action-bar .mud-button:active:not(:disabled) {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .tl-action-bar {
        padding: 8px 12px;
        overflow-x: auto;
    }

    .tl-action-bar .mud-button {
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-width: unset !important;
    }

    .tl-action-bar .mud-button .mud-button-label {
        font-size: 0.72rem;
    }
}


/* ─── Brand Buttons hover/transitions: movido a css/mud-overrides.css
   (.mud-button-filled / .mud-button-outlined son overrides globales) ─── */

/* ─── Filter Prompt Card (estado previo al Buscar) ─── */
.tl-filter-prompt {
    margin-top: 12px;
    padding: 40px 24px;
    text-align: center;
    border: 1px dashed #E5E7EB;
    border-radius: 12px;
    background: #FAFBFC;
}
.tl-filter-prompt__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1A3D7A;
    margin-top: 8px;
}
.tl-filter-prompt__sub {
    font-size: 0.8rem;
    color: #6B7280;
    margin-top: 4px;
}

/* ─── Filter Bar compacto ─── */
.tl-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    box-sizing: border-box;
}
.tl-filter-bar__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    flex: 1 1 420px;
    min-width: 0;
}
.tl-filter-bar__filters > * {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 260px;
}
.tl-filter-bar__filters > .tl-date-chips {
    flex: 0 1 auto;
    max-width: none;
}
.tl-filter-bar__filters > .tl-date-custom {
    flex: 1 1 100%;
    max-width: none;
    margin-top: 0;
}
.tl-filter-bar__filters .mud-input-control.mud-input-control-margin-dense {
    margin: 0;
}
.tl-filter-bar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}
.tl-filter-bar__actions .mud-button-root {
    min-height: 36px;
}

@media (max-width: 1280px) {
    .tl-filter-bar__filters {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    .tl-filter-bar {
        padding: 12px;
        gap: 10px;
    }
    .tl-filter-bar__filters > *,
    .tl-filter-bar__filters > .tl-date-chips {
        flex: 1 1 100%;
        max-width: none;
    }
    .tl-filter-bar__actions {
        flex: 1 1 100%;
        margin-left: 0;
    }
    .tl-filter-bar__actions > *,
    .tl-filter-bar__actions .mud-button-root {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ─── Toggle "Mis tareas" ─── */
.tl-toggle-mine.mud-button-root {
    border-radius: 20px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    min-width: 120px;
}
.tl-toggle-mine.mud-button-root:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(35,81,158,0.18) !important;
}
.tl-toggle-mine.mud-button-filled {
    box-shadow: 0 2px 12px rgba(35,81,158,0.30), 0 0 0 2px rgba(35,81,158,0.10) !important;
}
.tl-toggle-mine.mud-button-outlined {
    border-style: dashed !important;
}

/* ─── Action Menu dropdown ─── */
.action-menu-btn .mud-icon-button-root {
    color: var(--brand-blue-dark) !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    transition: all 0.15s ease;
}
.action-menu-btn .mud-icon-button-root:hover {
    background: #EBF1FA !important;
}
.action-menu-list {
    border-radius: 12px !important;
    padding: 6px !important;
    min-width: 180px !important;
}
.action-menu-list .mud-list-item {
    border-radius: 8px !important;
    margin: 1px 0 !important;
    transition: background 0.12s ease;
}
.action-menu-list .mud-list-item:hover {
    background: #F8FAFD !important;
}
.action-menu-list .mud-list-item-icon {
    min-width: 28px !important;
}
/* Popover del ActionMenu */
.mud-popover-cascading-value .mud-popover.action-menu-list,
.mud-menu .mud-popover {
    border-radius: 14px !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}
.mud-menu .mud-paper {
    border-radius: 14px !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* NOTA: se removió la regla global .mud-popover{max-width:calc(100vw-16px)!important}
   que rompía la medición de ancho de MudBlazor 8 y descentraba/agrandaba TODOS los
   selects. MudBlazor 8 ya recorta el popover al viewport por sí mismo; el caso móvil
   sigue cubierto por .mx-mud-popover (mx.css). */

/* ─── Columnas responsivas en tablas ─── */
/* Se ocultan en pantallas pequeñas, se muestran en grandes */
@media (max-width: 1199px) { .tl-col-xl { display: none !important; } }
@media (max-width: 991px)  { .tl-col-lg { display: none !important; } }
@media (max-width: 767px)  { .tl-col-md { display: none !important; } }

/* ─── Tabla estandarizada ─── */
.tl-table .mud-table-head .mud-table-row .mud-table-cell {
    background-color: var(--brand-blue-light) !important;
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ─── Filas estilo MyTasks: compactas, zebra suave, hover brand-blue-light ─── */
.tl-table tbody.mud-table-body td.mud-table-cell {
    padding: 4px 16px !important;
    font-size: 0.72rem !important;
    border-bottom: 1px solid #F1F5F9 !important;
    height: auto !important;
}
.tl-table tbody.mud-table-body tr.mud-table-row {
    transition: background-color .12s ease !important;
    min-height: 36px !important;
}
.tl-table tbody.mud-table-body tr.mud-table-row:hover {
    background: var(--brand-blue-light) !important;
}
.tl-table tbody.mud-table-body tr.mud-table-row:nth-of-type(odd) {
    background: #FAFBFD !important;
}
.tl-table tbody.mud-table-body tr.mud-table-row:nth-of-type(odd):hover {
    background: var(--brand-blue-light) !important;
}

/* ─── Accent bar lateral por fila (estilo MyTasks) ───
   Opt-in: setear --row-accent via RowStyleFunc en cualquier MudTable .tl-table */
.tl-table tbody.mud-table-body tr.mud-table-row td.mud-table-cell:first-child {
    box-shadow: inset 3px 0 0 var(--row-accent, transparent);
}

/* ─── Tabla responsive: < 768px → cada fila se vuelve card ───
   Patrón "labelled card" — el DataLabel del MudTd se muestra como label.
   Aplica a tablas con la clase .tl-table que NO tengan vista mobile dedicada. */
@media (max-width: 767px) {
    .tl-table .mud-table-container {
        overflow-x: visible !important;
    }
    .tl-table table.mud-table-root {
        display: block;
    }
    .tl-table thead.mud-table-head {
        display: none;
    }
    .tl-table tbody.mud-table-body,
    .tl-table tbody.mud-table-body tr.mud-table-row {
        display: block;
        width: 100%;
    }
    .tl-table tbody.mud-table-body tr.mud-table-row {
        background: white;
        border: 1px solid rgba(13,25,48,0.07);
        border-radius: 16px;
        padding: 4px 14px 8px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(13,25,48,0.04), 0 6px 18px rgba(13,25,48,0.06);
    }
    .tl-table tbody.mud-table-body td.mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid #F3F4F6;
        text-align: right;
        font-size: 0.85rem;
        min-height: 0;
    }
    .tl-table tbody.mud-table-body td.mud-table-cell:last-child {
        border-bottom: none;
    }
    /* Primera celda = título destacado del card (sin etiqueta, a todo el ancho) */
    .tl-table tbody.mud-table-body td.mud-table-cell:first-child {
        display: block;
        text-align: left;
        padding: 12px 0 8px;
        border-bottom: 1px solid rgba(13,25,48,0.07);
        margin-bottom: 2px;
    }
    .tl-table tbody.mud-table-body td.mud-table-cell:first-child::before {
        display: none;
    }
    /* Producto: título prominente dentro del card */
    .tl-table tbody.mud-table-body td.mud-table-cell:first-child .ol-product-title {
        font-size: 1rem; font-weight: 700;
    }
    .tl-table tbody.mud-table-body td.mud-table-cell .mud-input-control { min-width: 0; }
    /* Valor de cada fila meta en negrita para jerarquía */
    .tl-table tbody.mud-table-body td.mud-table-cell { color: #1E1E1E; font-weight: 600; }
    .tl-table tbody.mud-table-body td.mud-table-cell::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6B7280;
        flex-shrink: 0;
        min-width: 90px;
        text-align: left;
    }
    .tl-table tbody.mud-table-body td.mud-table-cell:not([data-label])::before {
        content: "";
        min-width: 0;
    }
    /* Pager queda igual */
    .tl-table tfoot.mud-table-foot {
        display: block;
    }
}

.home-bg {
    min-height: 100vh;
    width: 100%;
    background-image: url('/images/plantilla_sat.png');
    background-size: cover; /* 🔑 clave */
    background-position: center; /* 🔑 clave */
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Verification Point Components ─── */

/* Shake animation for validation errors */
@keyframes vp-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* Error row shake in verification table */
tr[style*="border-left:3px solid var(--mud-palette-error)"] {
    animation: vp-shake 0.4s ease;
}

/* ── Auth Pages (Login / Register) ──────────────────── */

/* Layout wrapper */
.login-layout {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #f7f8fa;
}


/* SAT Badge - reusable component */
.sat-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 2.5rem 0;
}

.sat-badge-text {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #F0C27A, #F18A25, #E8A849, #D4943C);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: satShimmer 4s ease infinite;
    filter: drop-shadow(0 1px 2px rgba(241, 138, 37, 0.3));
}

.sat-badge-version {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(241, 138, 37, 0.5);
}

@keyframes satShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}


/* Geo animations */
@keyframes geoFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-20px, 30px); }
}

@keyframes geoFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(25px, -20px); }
}

@keyframes geoFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-15px, -25px); }
}

@keyframes geoRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ── Animations ── */
@keyframes authBrandIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes authFormIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}


/* ═══════════════════════════════════════════
   FORM SECTION — Agrupación visual de campos
   ═══════════════════════════════════════════ */
.form-section {
    margin-bottom: 1.5rem;
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.form-section-content {
    padding: 0;
}

/* ═══════════════════════════════════════════
   STEP PROGRESS — Indicador de progreso wizard
   ═══════════════════════════════════════════ */
.step-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: 16px;
}

.step-progress-item {
    display: flex;
    align-items: center;
    gap: 0;
}

.step-progress-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.step-progress-dot.completed {
    background: #23519E;
    color: white;
}

.step-progress-dot.active {
    background: #F18A25;
    color: white;
    box-shadow: 0 0 0 3px rgba(241, 138, 37, 0.2);
}

.step-progress-dot.pending {
    background: #e5e7eb;
    color: #9ca3af;
}

.step-progress-line {
    width: 20px;
    height: 2px;
    transition: background 0.25s ease;
}

.step-progress-line.completed {
    background: #23519E;
}

.step-progress-line.pending {
    background: #e5e7eb;
}


/* History list */
.doc-history-list {
    display: flex;
    flex-direction: column;
}

.doc-history-entry {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
}

.doc-history-entry:last-child {
    border-bottom: none;
}

.doc-history-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23519E;
    margin-top: 6px;
    flex-shrink: 0;
    position: relative;
}

.doc-history-entry:not(:last-child) .doc-history-dot::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 3px;
    width: 2px;
    height: calc(100% + 12px);
    background: #e5e7eb;
}

.doc-history-content {
    flex: 1;
    min-width: 0;
}

/* Files list */
.doc-files-list {
    display: flex;
    flex-direction: column;
}

.doc-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.doc-file-item:last-child {
    border-bottom: none;
}


/* ═══════════════════════════════════════════
   MOBILE OVERRIDES
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
    /* FormPanel compact on mobile */
    .form-panel {
        padding: 0.75rem !important;
        border-radius: 0 !important;
    }

    /* Hide step progress dots on mobile */
    .step-progress {
        display: none !important;
    }

    /* Tables: horizontal scroll on mobile */
    .mud-table-container {
        overflow-x: auto;
    }
}

/* ═══════════════════════════════════════════
   STICKY ADD BAR — fixed bottom on detail steps
   ═══════════════════════════════════════════ */
.sticky-add-bar {
    display: none;
}

@media (max-width: 960px) {
    .sticky-add-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        padding: 8px 12px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        gap: 8px;
        align-items: center;
    }

    .sticky-add-bar .mud-button {
        flex-shrink: 0;
    }

    /* Add bottom padding to content so sticky bar doesn't cover it */
    .mud-tabpanel {
        padding-bottom: 70px !important;
    }

    /* Hide the desktop search bar on mobile */
    .desktop-search-bar {
        display: none !important;
    }
}

@media (min-width: 961px) {
    .mobile-search-bar {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════
   TOAST SYSTEM — Notificaciones TrucksLogic
   Paleta: Blue #23519E | Orange #F18A25 | Gold #F18A25
   ═══════════════════════════════════════════ */
.tl-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

.tl-toast {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: tlToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border-radius: 14px;
}

/* ─── Todos los toast con fondo azul de marca ─── */
.tl-toast--info,
.tl-toast--success,
.tl-toast--warning,
.tl-toast--error {
    background: #13203a;
    box-shadow: 0 8px 24px rgba(10, 18, 34, 0.3);
}

/* ─── Icono diferencia el tipo ─── */
.tl-toast--success .tl-toast-icon { background: rgba(13, 159, 110, 0.25); }
.tl-toast--success .tl-toast-icon .mud-icon-root { color: #34D399 !important; }
.tl-toast--warning .tl-toast-icon { background: rgba(241, 138, 37, 0.25); }
.tl-toast--warning .tl-toast-icon .mud-icon-root { color: #F18A25 !important; }
.tl-toast--error .tl-toast-icon { background: rgba(220, 38, 38, 0.25); }
.tl-toast--error .tl-toast-icon .mud-icon-root { color: #FCA5A5 !important; }
.tl-toast--info .tl-toast-icon { background: rgba(255, 255, 255, 0.15); }
.tl-toast--info .tl-toast-icon .mud-icon-root { color: #A3C9FF !important; }

.tl-toast--exit {
    animation: tlToastOut 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.tl-toast-accent {
    display: none;
}

/* ─── Body ─── */
.tl-toast-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px 14px;
}

/* ─── Icono con glassmorphism ─── */
.tl-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── Contenido ─── */
.tl-toast-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.tl-toast-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.tl-toast-message {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    word-break: break-word;
}

/* ─── Boton cerrar ─── */
.tl-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.tl-toast-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ─── Barra de progreso ─── */
.tl-toast-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.tl-toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: right;
    animation: tlToastProgress linear forwards;
    border-radius: 0 3px 3px 0;
}

.tl-toast-progress--info,
.tl-toast-progress--success,
.tl-toast-progress--warning,
.tl-toast-progress--error { background: rgba(255, 255, 255, 0.3); }

/* ─── Animaciones ─── */
@keyframes tlToastIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes tlToastOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(80px) scale(0.92);
    }
}

@keyframes tlToastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 767px) {
    /* Móvil: el toast se ancla ABAJO (sobre el bottom nav y el safe-area),
       a todo el ancho, para no chocar con el header azul superior.
       column-reverse: el más nuevo aparece arriba de la pila. */
    .tl-toast-container {
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
        left: 10px;
        right: 10px;
        max-width: none;
        width: auto;
        flex-direction: column-reverse;
    }
    .tl-toast { border-radius: 16px; }
    .tl-toast-message { word-break: break-word; }
}

/* ═══════════════════════════════════════════
   MODALES REUTILIZABLES — Confirmación y Selección
   Paleta: Blue #23519E | Orange #F18A25 | Gold #F18A25
   ═══════════════════════════════════════════ */

/* ─── Confirm/Selection — override title para usar header custom ─── */
/* ═══════════════════════════════════════════
   CONFIRM DIALOG — Refined minimalism
   ═══════════════════════════════════════════ */
.tl-confirm-dialog.mud-dialog {
    max-width: 380px !important;
    width: calc(100vw - 32px);
    border-radius: 16px !important;
    overflow: hidden;
    background: #ffffff !important;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 12px 32px -8px rgba(16, 24, 40, 0.18),
        0 0 0 1px rgba(16, 24, 40, 0.04) !important;
    animation: tl-confirm-enter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tl-confirm-enter {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Hide the MudBlazor title slot — close button floats absolute */
.tl-confirm-dialog .mud-dialog-title {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.tl-confirm-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: visible;
}

.tl-confirm-dialog .mud-dialog-actions {
    padding: 0 !important;
    margin: 0 !important;
}

/* ─── Subtle floating close button ─── */
.tl-confirm-dialog .tl-confirm-close-btn,
.tl-confirm-dialog .tl-confirm-close-btn .mud-icon-root {
    color: #9CA3AF !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    background: transparent !important;
    border: 0;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.tl-confirm-dialog .tl-confirm-close-btn:hover,
.tl-confirm-dialog .tl-confirm-close-btn:hover .mud-icon-root {
    color: #1E1E1E !important;
    background: #F3F4F6 !important;
}
.tl-confirm-dialog .tl-confirm-close-btn .mud-icon-root {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* ─── Body: icon + heading + message ─── */
.tl-confirm-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 28px 24px;
    text-align: center;
}

.tl-confirm-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.tl-confirm-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    opacity: 0.35;
    background: inherit;
    z-index: -1;
    filter: blur(8px);
}
.tl-confirm-icon-wrapper .mud-icon-root,
.tl-confirm-icon-wrapper .mud-svg-icon {
    color: inherit !important;
    font-size: 26px !important;
    width: 26px !important;
    height: 26px !important;
}

/* Tone variants (info/warning/error/success) */
.tl-confirm-dialog--info .tl-confirm-icon-wrapper {
    background: linear-gradient(135deg, #EBF1FA 0%, #D9E5F5 100%);
    color: #23519E;
}
.tl-confirm-dialog--warning .tl-confirm-icon-wrapper {
    background: linear-gradient(135deg, #FEF5EB 0%, #FDE8D0 100%);
    color: #F18A25;
}
.tl-confirm-dialog--error .tl-confirm-icon-wrapper {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    color: #DC2626;
}
.tl-confirm-dialog--success .tl-confirm-icon-wrapper {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    color: #16A34A;
}

.tl-confirm-heading {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1E1E1E;
    line-height: 1.35;
}

.tl-confirm-message {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #6B7280;
    max-width: 280px;
}

/* ═══════════════════════════════════════════
   HELP DIALOG
   ═══════════════════════════════════════════ */
.tl-help-dialog.mud-dialog {
    max-width: 520px !important;
    max-height: 80vh;
}
.tl-help-dialog .mud-dialog-title {
    background: #13203a !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
}
.tl-help-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow-y: auto;
}
.tl-help-dialog .mud-dialog-actions {
    display: none !important;
}

.tl-help-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.tl-help-title-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tl-help-title-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}
.tl-help-title-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}
.tl-help-close-btn,
.tl-help-dialog .tl-help-close-btn .mud-icon-root {
    color: rgba(255, 255, 255, 0.6) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}
.tl-help-close-btn:hover,
.tl-help-dialog .tl-help-close-btn:hover .mud-icon-root {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.tl-help-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tl-help-description {
    font-size: 0.82rem;
    color: #6B7280;
    line-height: 1.5;
    margin: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #F3F4F6;
}

/* Steps */
.tl-help-step {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #FAFBFC;
    transition: border-color 0.2s ease;
}
.tl-help-step--active {
    border-color: #23519E;
    background: #EBF1FA;
}
.tl-help-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.tl-help-step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #23519E;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tl-help-step--active .tl-help-step-number {
    background: var(--brand-blue-dark);
}
.tl-help-step-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1E1E1E;
}
.tl-help-step-desc {
    font-size: 0.78rem;
    color: #6B7280;
    line-height: 1.45;
    margin: 0 0 6px;
}

/* Fields list */
.tl-help-fields {
    margin: 6px 0 0;
    padding-left: 18px;
    list-style: none;
}
.tl-help-fields li {
    font-size: 0.76rem;
    color: #4B5563;
    line-height: 1.7;
    position: relative;
    padding-left: 10px;
}
.tl-help-fields li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #23519E;
}
.tl-help-fields li strong {
    color: #1E1E1E;
    font-weight: 600;
}
.tl-help-field-hint {
    color: #9CA3AF;
    font-weight: 400;
}

/* Tips */
.tl-help-tips {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.tl-help-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.74rem;
    color: #92400E;
    background: #FEF5EB;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

.tl-selection-dialog .mud-dialog-title {
    background: none !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.tl-selection-dialog .mud-dialog-content {
    padding: 0 !important;
}

.tl-selection-dialog .mud-dialog-actions {
    padding: 0 !important;
}

/* ─── Header de confirmacion/seleccion ─── */
.tl-confirm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
}

.tl-confirm-header--default {
    background: #13203a;
}

.tl-confirm-header--warning {
    background: #F18A25;
}

.tl-confirm-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.tl-confirm-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tl-confirm-dialog .mud-dialog-title .tl-confirm-header-icon .mud-icon-root {
    color: inherit !important;
    font-size: 1.2rem;
}

.tl-confirm-header-icon--danger {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.22);
}

.tl-confirm-header-icon--warning {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ─── Actions (confirm dialog) ─── */
/* ─── Confirm dialog: actions row ─── */
.tl-confirm-actions {
    display: flex;
    gap: 8px;
    padding: 16px 20px 20px;
    background: transparent;
    border-top: 0;
}

.tl-confirm-btn.mud-button {
    flex: 1;
    height: 40px;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    text-transform: none !important;
    transition: all 0.15s ease;
    box-shadow: none !important;
    padding: 0 16px !important;
}

/* Ghost cancel — refined gray */
.tl-confirm-btn--ghost.mud-button {
    background: #ffffff !important;
    color: #4B5563 !important;
    border: 1px solid #E5E7EB !important;
}
.tl-confirm-btn--ghost.mud-button:hover {
    background: #F9FAFB !important;
    color: #1E1E1E !important;
    border-color: #D1D5DB !important;
}

/* Primary confirm — contextual color via parent tone class */
.tl-confirm-btn--primary.mud-button {
    background: #23519E !important;
    color: #ffffff !important;
    border: 1px solid #23519E !important;
}
.tl-confirm-btn--primary.mud-button:hover {
    background: var(--brand-blue-dark) !important;
    border-color: var(--brand-blue-dark) !important;
}
.tl-confirm-dialog--warning .tl-confirm-btn--primary.mud-button {
    background: #F18A25 !important;
    border-color: #F18A25 !important;
}
.tl-confirm-dialog--warning .tl-confirm-btn--primary.mud-button:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
}
.tl-confirm-dialog--error .tl-confirm-btn--primary.mud-button {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
}
.tl-confirm-dialog--error .tl-confirm-btn--primary.mud-button:hover {
    background: #B91C1C !important;
    border-color: #B91C1C !important;
}
.tl-confirm-dialog--success .tl-confirm-btn--primary.mud-button {
    background: #16A34A !important;
    border-color: #16A34A !important;
}
.tl-confirm-dialog--success .tl-confirm-btn--primary.mud-button:hover {
    background: #15803D !important;
    border-color: #15803D !important;
}

/* Focus ring — accessibility */
.tl-confirm-btn.mud-button:focus-visible {
    outline: 2px solid rgba(35, 81, 158, 0.4);
    outline-offset: 2px;
}

/* ═══ Selection Dialog Items ═══ */
.tl-selection-list {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    gap: 4px;
}

.tl-selection-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.tl-selection-item:hover {
    background: #F8FAFD;
    border-color: #E5E7EB;
}

.tl-selection-item--active {
    background: linear-gradient(135deg, #EBF1FA 0%, #f0f4fb 100%) !important;
    border-color: #23519E !important;
    box-shadow: 0 0 0 1px rgba(35, 81, 158, 0.12), inset 0 0 0 1px rgba(35, 81, 158, 0.06);
}
.tl-selection-item--active .tl-selection-item-label {
    color: var(--brand-blue-dark);
}

.tl-selection-item-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tl-selection-item-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.tl-selection-item-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E1E1E;
}

.tl-selection-item-desc {
    font-size: 0.75rem;
    color: #6B7280;
}

/* ══════════════════════════════════════════════
   Dynamic Toolbar — Floating Command Bar (Dynamic Island)
   ══════════════════════════════════════════════ */
/* ─── Command bar groups (shared by main bar + dialog bar) ─── */
.command-bar__group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 2px;
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.command-bar__group .mud-icon-button-root {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
.command-bar__group::after {
    display: none;
}
.command-bar__group:last-child::after,
.command-bar__group--last::after {
    display: none !important;
}
.command-bar__group .mud-icon-button-root:hover:not(:disabled) {
    background: #EEF2F7 !important;
    transform: translateY(-1px);
}
.command-bar__group--close .mud-icon-button-root:hover:not(:disabled) {
    background: #F3F4F6 !important;
}
/* Dialog inline version */
.tl-action-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    width: fit-content;
}
.tl-action-bar .command-bar__group {
    padding: 0 2px;
}

@media (max-width: 768px) {
    .tl-action-bar {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tl-action-bar::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════
   PREMIUM TRANSITIONS — movido a css/mud-overrides.css
   (animaciones globales sobre .mud-tab-panel-animate, .mud-table-body
   .mud-table-row, .mud-dialog, .mud-chip, .mud-button-root, .mud-paper,
   .mud-alert y .form-panel). Mantener ahí evita duplicados app-wide.
   ═══════════════════════════════════════════ */

/* ═══ Administration Layout — internal sidebar nav (plain NavLink) ═══ */
/* Brand: #23519E=Blue, #EBF1FA=BlueLight, #6B7280=TextMuted, #9CA3AF=TextLight */

a.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem 0.55rem 1.1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    min-height: 38px;
    color: #6B7280;
    text-decoration: none;
    outline: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

a.admin-nav-item:visited,
a.admin-nav-item:focus,
a.admin-nav-item:active {
    color: #6B7280;
    outline: none;
    text-decoration: none;
}

a.admin-nav-item .admin-nav-item-icon {
    flex-shrink: 0;
    color: #9CA3AF;
    transition: color 0.15s ease;
}

a.admin-nav-item .admin-nav-item-label {
    flex: 1;
    min-width: 0;
    color: inherit;
    transition: color 0.15s ease;
}

/* Hover — fondo sutil, texto oscuro */
a.admin-nav-item:hover {
    background: #F3F6FB;
    color: #1E1E1E;
    text-decoration: none;
}

a.admin-nav-item:hover .admin-nav-item-icon {
    color: #6B7280;
}

/* Active — estilo Linear minimal: dot pulsante + texto brand bold, sin fondo fuerte */
a.admin-nav-item.active,
a.admin-nav-item.active:visited,
a.admin-nav-item.active:focus,
a.admin-nav-item.active:active,
a.admin-nav-item.active:hover {
    background: transparent;
    color: #23519E;
    font-weight: 600;
}

a.admin-nav-item.active .admin-nav-item-icon,
a.admin-nav-item.active .admin-nav-item-label {
    color: #23519E;
}


/* Sin outline al cliquear — el dot + bold + color son suficientes */
a.admin-nav-item:focus,
a.admin-nav-item:focus-visible {
    outline: none;
    box-shadow: none;
}


@keyframes insp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   Barra de carga (AppLoadingBar)
   Una sola definición para toda la aplicación: si se copia por
   página, la siguiente pantalla renderiza sin estilo.
   ══════════════════════════════════════════════════════════════ */
.app-load {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 26px 2px 30px;
}

.app-load--compact {
    padding: 6px 0 2px;
}

.app-load__bar {
    position: relative;
    flex: 1;
    display: block;
    height: 3px;
    border-radius: 3px;
    background: #EDF0F5;
    overflow: hidden;
}

.app-load__bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    border-radius: 3px;
    background: linear-gradient(90deg, #23519E, #F18A25);
    animation: app-load-sweep 1.15s cubic-bezier(.45, 0, .35, 1) infinite;
}

.app-load__t {
    font-size: .76rem;
    color: #667085;
    white-space: nowrap;
}

@keyframes app-load-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(305%); }
}

@media (prefers-reduced-motion: reduce) {
    .app-load__bar::after { animation: none; width: 100%; opacity: .45; }
}

/* ── Rutas de una solicitud de tarifa, dentro de su fila ── */
.rr-lines__cell { padding: 6px 14px 14px 52px !important; background: #FAFBFD; }

.rr-lines {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.rr-lines th {
    text-align: right;
    padding: 0 10px 7px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94A3B8;
    border-bottom: 1px solid #E5E7EB;
}

.rr-lines th:first-child,
.rr-lines td:first-child { text-align: left; }

.rr-lines td {
    padding: 7px 10px;
    font-size: .78rem;
    color: #13203A;
    text-align: right;
    border-bottom: 1px solid #F1F3F7;
}

.rr-lines tr:last-child td { border-bottom: 0; }
.rr-lines__name { font-weight: 600; }
.rr-lines__soft { color: #667085; }
.rr-lines__ok { color: #157347; font-weight: 600; }
.rr-lines__bad { color: #DC2626; font-weight: 700; }
.rr-lines__empty { padding: 10px 2px; font-size: .76rem; color: #A2ACBB; }

/* ── Detalles de viaje por concepto de tarifa ── */
.tdr-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 12px;
    font-size: .73rem;
    color: #667085;
    font-variant-numeric: tabular-nums;
}

.tdr-summary__k { font-weight: 600; }
.tdr-summary__k--warn { color: #B5651A; }
.tdr-summary__sep { width: 1px; height: 13px; background: #E5E9F0; }

.tdr-concept { font-size: .82rem; font-weight: 600; color: #13203A; }
.tdr-concept__desc { margin-top: 1px; font-size: .7rem; color: #8B95A5; }

.tdr-detail { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: #13203A; }

.tdr-detail__code {
    padding: 1px 7px;
    border-radius: 5px;
    background: #EEF3FB;
    color: #1A3D7A;
    font-size: .66rem;
    font-weight: 700;
    font-family: monospace;
}

.tdr-cat { font-size: .76rem; color: #667085; }
.tdr-none { font-size: .78rem; color: #B7BFCB; }

/* Selector de detalle de viaje */
.tdp { display: flex; flex-direction: column; gap: 14px; }
.tdp__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tdp__list { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }

.tdp__row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px 5px 2px;
    border-radius: 9px;
    cursor: pointer;
    border-top: 1px solid #F1F3F7;
}

.tdp__row:first-child { border-top: 0; }
.tdp__row:hover { background: #F7F9FC; }
.tdp__row--on { background: #F2F6FC; box-shadow: inset 0 0 0 1px #C9DAF2; }

.tdp__body { display: flex; flex-direction: column; min-width: 0; }
.tdp__name { font-size: .82rem; font-weight: 600; color: #13203A; }

.tdp__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 1px;
    font-size: .68rem;
    color: #8B95A5;
}

.tdp__code {
    padding: 0 6px;
    border-radius: 4px;
    background: #EEF3FB;
    color: #1A3D7A;
    font-weight: 700;
    font-family: monospace;
}

.tdp__used { color: #B5651A; font-weight: 600; }
.tdp__empty { padding: 22px 2px; font-size: .78rem; color: #A2ACBB; text-align: center; }

/* ═══════════════════════════════════════════
   FLOW SELECTOR (fs-*) — paso previo de selección,
   compartido por Orden de Trabajo, Viaje,
   Interacción de Socio y Vehículo
   ═══════════════════════════════════════════ */
.fs-shell {
    display: flex;
    flex-direction: column;
    background: #F3F4F8;
    height: calc(100vh - 130px);
    margin: 0.25rem 0 0.5rem;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(10,15,30,0.03), 0 4px 14px rgba(10,15,30,0.04);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.fs-top {
    background: white;
    border-bottom: 1px solid #E5E7EB;
    padding: 0.85rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.fs-top-left { display: flex; align-items: center; gap: 0.8rem; }

.fs-module-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, #23519E, #1A3D7A);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(35,81,158,0.22); position: relative;
    flex-shrink: 0;
}

.fs-module-icon::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
    pointer-events: none;
}

.fs-module-name { font-size: 0.92rem; font-weight: 700; color: #13203A; }

.fs-tag {
    font-size: 0.62rem; padding: 3px 9px; border-radius: 100px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    background: #EBF1FA; color: #23519E; border: 1px solid rgba(35,81,158,0.18);
}

.fs-close-btn {
    color: #DC2626 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.fs-close-btn .mud-icon-root { color: #DC2626 !important; }
.fs-close-btn:hover {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: #D85574 !important;
}
.fs-close-btn:hover .mud-icon-root { color: #D85574 !important; }

.fs-body {
    flex: 1; overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem;
    display: flex; flex-direction: column;
    gap: 1rem;
}

.fs-loading {
    display: flex; flex-direction: column; align-items: center;
    gap: 1rem; padding: 3rem 0;
}
.fs-loading-text { font-size: 0.85rem; color: #6B7280; }

.fs-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.4rem; padding: 3rem 1rem; text-align: center;
}
.fs-empty-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: #F3F4F6; margin-bottom: 0.3rem;
}
.fs-empty-title { font-size: 0.92rem; font-weight: 700; color: #13203A; }
.fs-empty-sub { font-size: 0.78rem; color: #6B7280; }

.fs-skip { display: flex; justify-content: center; padding: 0.5rem 0 1.25rem; }

.fs-heading-block { display: flex; flex-direction: column; gap: 1px; padding: 0 0.15rem; }
.fs-heading {
    font-size: 1.18rem; font-weight: 800; color: #13203A;
    letter-spacing: -0.02em; margin: 0;
}
.fs-heading-sub { font-size: 0.78rem; color: #6B7280; margin: 0; letter-spacing: -0.01em; }

.fs-panel {
    border-radius: 14px;
    padding: 0.85rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.fs-panel--blue { background: rgba(35,81,158,0.04); border: 1px solid rgba(35,81,158,0.08); }
.fs-panel--orange { background: rgba(241,138,37,0.04); border: 1px solid rgba(241,138,37,0.08); }

.fs-panel-head { display: flex; align-items: center; gap: 8px; padding: 0 0.25rem; }
.fs-panel-title { font-size: 0.78rem; font-weight: 700; color: #374151; letter-spacing: -0.01em; }
.fs-panel-badge {
    font-size: 0.58rem; font-weight: 700;
    padding: 2px 8px; border-radius: 100px;
    background: rgba(35,81,158,0.1); color: #3B6EC2;
    margin-left: auto;
}
.fs-panel-badge--orange { background: rgba(241,138,37,0.1); color: #D97706; }
.fs-panel-note { font-size: 0.7rem; color: #9CA3AF; margin-left: auto; white-space: nowrap; }

.fs-filters {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
    padding: 0 0.25rem 0.25rem;
}
.fs-filters--four { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 0; }

.fs-list {
    display: flex; flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}

.fs-tile {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    cursor: pointer; position: relative;
    transition: background-color 0.14s ease;
}
.fs-tile + .fs-tile::before {
    content: ""; position: absolute; top: 0; left: 70px; right: 0;
    height: 1px; background: #EEF0F4;
}
.fs-tile:hover { background: #F7F9FC; }
.fs-tile:active { background: #EFF3F9; }
.fs-tile--active { background: #F7F9FC; }

.fs-tile-visual {
    position: relative;
    width: 44px; height: 44px; border-radius: 12px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.fs-tile-glow {
    position: absolute;
    width: 52px; height: 52px;
    border-radius: 50%;
    opacity: 0.10;
    filter: blur(16px);
    pointer-events: none;
}

.fs-tile--plain {
    width: 100%; border: 0; background: transparent; font: inherit; text-align: left;
}
.fs-tile--plain + .fs-tile--plain::before { left: 14px; }

.fs-tile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fs-tile-name {
    font-size: 0.9rem; font-weight: 700; color: #13203A; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-tile-desc {
    font-size: 0.76rem; color: #6B7280; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fs-tile-chevron {
    flex-shrink: 0; margin-left: 6px;
    width: 8px; height: 8px;
    border-right: 2px solid #C7CCD6; border-bottom: 2px solid #C7CCD6;
    transform: rotate(-45deg);
    transition: border-color 0.14s ease;
}
.fs-tile:hover .fs-tile-chevron { border-color: #23519E; }

.fs-scratch-card {
    background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px;
    padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px;
}
.fs-scratch-hint {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    background: #F7F9FC; border: 1px solid #EEF0F4; border-radius: 10px;
    font-size: 0.78rem; color: #4B5563; line-height: 1.35;
}
.fs-scratch-hint--multi {
    background: rgba(241,138,37,0.06); border-color: rgba(241,138,37,0.22); color: #8A5314;
}
.fs-scratch-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 10px; border-top: 1px solid #EEF0F4;
}
.fs-scratch-progress { font-size: 0.72rem; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.fs-scratch-btn { border-radius: 9px !important; font-weight: 700 !important; }


@media (max-width: 640px) {
    .fs-filters { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .fs-filters--four { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .fs-shell {
        height: auto; min-height: 0; margin: 0;
        border: none; border-radius: 0; box-shadow: none; background: transparent;
    }
    .fs-top { background: transparent; border-bottom: none; padding: 6px 2px 6px; }
    .fs-module-icon {
        width: 26px; height: 26px; border-radius: 8px;
        box-shadow: 0 2px 6px rgba(35,81,158,0.2);
    }
    .fs-module-icon .mud-icon-root { font-size: 0.78rem !important; }
    .fs-module-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: #1A3D7A; }
    .fs-tag { display: none; }

    .fs-body { padding: 4px 2px 28px; gap: 20px; overflow: visible; }
    .fs-heading-block { gap: 2px; padding: 0 4px; }
    .fs-heading {
        font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.04em; color: #6B7280;
    }
    .fs-heading-sub { display: none; }

    .fs-panel { background: transparent !important; border: none !important; padding: 0; gap: 8px; }
    .fs-panel-head { padding: 0 4px; }
    .fs-panel-title { font-size: 0.8rem; }
    .fs-panel-badge { display: none; }

    .fs-list {
        border: none; border-radius: 16px;
        box-shadow: 0 1px 2px rgba(13,25,48,0.04), 0 8px 24px rgba(13,25,48,0.06);
    }
    .fs-tile { padding: 13px 14px; }
    .fs-tile + .fs-tile::before { left: 72px; background: rgba(60,60,67,0.12); }
    .fs-tile--plain + .fs-tile--plain::before { left: 16px; }
    .fs-tile-visual { width: 46px; height: 46px; border-radius: 13px; }
    .fs-tile-name { font-size: 0.98rem; }
    .fs-tile-desc { font-size: 0.8rem; }
}

@media (hover: none) {
    .fs-tile:hover { background: transparent; }
    .fs-tile:hover .fs-tile-chevron { border-color: #C7CCD6; }
    .fs-tile:active { background: rgba(35,81,158,0.10); }
    .fs-tile:active .fs-tile-chevron { border-color: #23519E; }
}

/* ── Camion del mapa de flota ──────────────────────────────────────────────
   Leaflet crea el marcador fuera del arbol de Blazor, asi que su estilo no puede
   vivir en el CSS con alcance del componente: no lo alcanzaria. */
.lfm-truck { background: none; border: 0; }

.lfm-truck > div { transition: transform .6s linear; }

/* El seleccionado se separa del resto sin cambiar de tamanio, que movería el punto
   exacto donde esta el camion. */
.lfm-truck--sel > div {
    filter: drop-shadow(0 0 0 2px #F97316) drop-shadow(0 2px 6px rgba(249, 115, 22, .55));
}



/* Controles de Leaflet en el mapa de flota: mismo material que el panel. Los crea la
   libreria fuera del arbol de Blazor, asi que no los alcanza el CSS con alcance.

   El contenedor que trae por defecto es una caja gris con borde grueso y esquinas duras,
   que sobre el vidrio se ve pegada encima. Se le quita el borde y se rehace como dos
   botones del mismo material que el panel. */
.lfm .leaflet-control-zoom {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin: 0 16px 24px 0 !important;
    box-shadow: 0 2px 6px rgba(13, 25, 48, .08), 0 10px 26px rgba(13, 25, 48, .16) !important;
}

.lfm .leaflet-control-zoom a {
    background: rgba(255, 255, 255, .8) !important;
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 0 !important;
    color: #1C1C1E !important;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 17px;
    font-weight: 400;
}

.lfm .leaflet-control-zoom a:first-child {
    border-bottom: .5px solid rgba(60, 60, 67, .14) !important;
}

.lfm .leaflet-control-zoom a:hover { background: rgba(255, 255, 255, .95) !important; }

.lfm .leaflet-control-attribution {
    background: rgba(255, 255, 255, .62) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 8px 0 0 0;
    font-size: 10px;
}

/* Boton de menu dentro del panel de flota. Alli el toggle de la barra de comandos no
   sirve: esa barra queda debajo del mapa en esta pantalla. */
.lfm__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 2px;
    border: 0;
    border-radius: 9px;
    background: rgba(120, 120, 128, .10);
    color: #1C1C1E;
    cursor: pointer;
    transition: background .18s ease;
    align-self: center;
}

.lfm__menu:hover { background: rgba(120, 120, 128, .18); }

/* ── Calendario dentro del wizard ──────────────────────────────────────────
   El picker se dibuja en el lugar del campo, o sea dentro del cuerpo del wizard, que
   es transparente y recorta con overflow:hidden. Resultado: el calendario perdia su
   papel blanco —quedaba el navy del diálogo detrás de los números— y se cortaba contra
   el borde de arriba.

   Se le devuelve su superficie y se lo saca del recorte anclándolo al viewport, que es
   lo mismo que ya se hace en móvil, sólo que aquel bloque está limitado a
   html[data-touch-layout="1"] y en escritorio no aplicaba. */
.tl-wizard-dialog .mud-picker-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tl-wizard-dialog .mud-picker-container .mud-picker,
.tl-wizard-dialog .mud-picker-container .mud-paper,
.tl-wizard-dialog .mud-picker-inline .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(13, 25, 48, .35) !important;
}

/* Los numeros y los nombres de dia heredaban el color claro del encabezado navy y
   quedaban invisibles sobre el papel blanco. */
.tl-wizard-dialog .mud-picker-container .mud-picker-calendar-header,
.tl-wizard-dialog .mud-picker-container .mud-day,
.tl-wizard-dialog .mud-picker-container .mud-picker-calendar-header-day {
    color: var(--mud-palette-text-primary) !important;
}

.tl-wizard-dialog .mud-picker-container .mud-day.mud-day-selected {
    color: var(--mud-palette-primary-text) !important;
}