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

.site-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

a, .btn-link {
    color: var(--mud-palette-primary, #1E5FB8);
}

/* Botones Bootstrap (páginas de cuenta/identidad): siguen la marca activa
   (azul DCDT / verde HeRU) vía variables del tema MudBlazor. */
.btn-primary {
    color: var(--mud-palette-primary-text, #fff);
    background-color: var(--mud-palette-primary, #1E5FB8);
    border-color: var(--mud-palette-primary, #1E5FB8);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    color: var(--mud-palette-primary-text, #fff);
    background-color: var(--mud-palette-primary-darken, #1A4F99);
    border-color: var(--mud-palette-primary-darken, #1A4F99);
}

.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;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Igual que plantilla Blazor Web App: sin esto #blazor-error-ui se ve siempre al pie. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    box-sizing: border-box;
    padding: 0.65rem 2.25rem 0.75rem 1rem;
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    color: #333;
    font-size: 0.9rem;
}

#blazor-error-ui.show {
    display: block;
}

#blazor-error-ui .reload {
    margin-left: 0.75rem;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.7;
}

/* ===== App shell offsets (AppBar + Drawer interactivos) =====
   El AppBar/Drawer viven en un componente interactivo (AppShell), por lo
   que MudLayout/MudMainContent no detectan su altura en SSR. Forzamos el
   padding-top del contenido para que no quede oculto bajo la AppBar y
   reservamos espacio izquierdo cuando el drawer está abierto en desktop.
*/
:root {
    --app-appbar-height: 48px;       /* MudAppBar Dense */
    --app-drawer-width: 240px;       /* MudDrawer ancho por defecto */
    --app-main-top-gutter: 1.35rem; /* aire bajo la AppBar (paneles derechos) */
}

@media (max-width: 959.98px) {
    :root {
        --app-main-top-gutter: 0.9rem;
    }
}

.app-main-content {
    padding-top: calc(var(--app-appbar-height) + var(--app-main-top-gutter)) !important;
    transition: padding-left 0.225s cubic-bezier(0.4, 0, 0.6, 1);
}

/* En desktop, si el drawer está abierto y es persistente, dejamos hueco
   a su izquierda. Detectamos el estado via :has() leyendo la clase real
   que MudBlazor añade al MudDrawer. */
@media (min-width: 960px) {
    body:has(.mud-drawer.mud-drawer-open) .app-main-content {
        padding-left: var(--app-drawer-width) !important;
    }
}

/* Drawer: cuando el AppBar/Drawer viven en un componente interactivo, el
   MudLayout no añade `mud-drawer-fixed`, así que el drawer cae a
   `position: absolute` y scrollea con la página (los ítems se ocultan
   bajo el AppBar al hacer scroll). Forzamos `fixed`, lo bajamos la
   altura del AppBar y recortamos el alto al viewport. */
.mud-drawer.mud-drawer-pos-left {
    position: fixed !important;
    top: var(--app-appbar-height) !important;
    height: calc(100dvh - var(--app-appbar-height)) !important;
    max-height: calc(100dvh - var(--app-appbar-height)) !important;
}

/* AppBar: por la misma razón que el drawer, el MudLayout no marca el
   AppBar como fixed cuando vive en un componente interactivo. Lo
   forzamos para que quede pegado arriba durante el scroll. */
.mud-appbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--mud-zindex-appbar, 1300);
}

/* ===== Responsive helpers ===== */

/* PageHeader: en móvil, las acciones envuelven debajo y ocupan ancho completo */
.page-header {
    row-gap: 0.5rem;
}
.page-header .page-header__h5 {
    line-height: 1.2;
    word-break: break-word;
}

@media (max-width: 599.98px) {
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .page-header .page-header__title { width: 100%; }
    .page-header .page-header__actions {
        width: 100%;
        justify-content: flex-start !important;
    }
    .page-header .page-header__h5 {
        font-size: 1.25rem;
    }
}

/* MudDataGrid: cabecera con fondo gris suave y separación más marcada del cuerpo */
.mud-data-grid .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-action-default-hover);
    border-bottom: 2px solid var(--mud-palette-lines-default);
    font-weight: 600;
}

/* MudDataGrid / MudTable: scroll horizontal siempre disponible (fallback) */
.mud-table-container,
.mud-data-grid .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Tablas MudDataGrid: caben al 100% con todas las columnas visibles
 * (padding reducido, layout fijo, sin scroll horizontal).
 */
.mud-data-grid .mud-table-container,
.dcdt-fit-grid .mud-table-container {
    overflow-x: hidden;
}
.mud-data-grid table.mud-table-root,
.mud-data-grid .mud-table,
.dcdt-fit-grid table.mud-table-root,
.dcdt-fit-grid .mud-table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
}
.mud-data-grid .mud-table-cell,
.dcdt-fit-grid .mud-table-cell {
    padding-left: 4px !important;
    padding-right: 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    vertical-align: middle;
}
.mud-data-grid .mud-table-head .mud-table-cell,
.dcdt-fit-grid .mud-table-head .mud-table-cell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.75rem;
    line-height: 1.2;
}
.mud-data-grid .mud-table-dense .mud-table-cell,
.dcdt-fit-grid .mud-table-dense .mud-table-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.mud-data-grid .mud-chip,
.dcdt-fit-grid .mud-chip {
    max-width: 100%;
    height: 22px;
    font-size: 0.7rem;
}
.mud-data-grid .mud-chip .mud-chip-content,
.dcdt-fit-grid .mud-chip .mud-chip-content {
    padding-left: 6px;
    padding-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mud-data-grid .mud-icon-button,
.dcdt-fit-grid .mud-icon-button {
    padding: 4px;
}
.dcdt-compact-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    cursor: help;
    color: inherit;
    vertical-align: middle;
}
.dcdt-compact-header__short {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
}
.dcdt-compact-header__icon {
    opacity: 0.85;
}

/* Acciones siempre visibles (sticky) */
.dcdt-master-grid .dcdt-col-actions,
.mud-data-grid .dcdt-col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.18);
}
.dcdt-master-grid .dcdt-col-actions-left,
.mud-data-grid .dcdt-col-actions-left {
    position: sticky;
    left: 0;
    right: auto;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.18);
}
.mud-data-grid .mud-table-head .dcdt-col-actions,
.mud-data-grid .mud-table-head .dcdt-col-actions-left {
    background-color: var(--mud-palette-action-default-hover);
    z-index: 3;
}

@media (max-width: 767.98px) {
    .mud-data-grid-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .mud-data-grid-toolbar > .mud-input-control,
    .mud-data-grid-toolbar > .mud-select {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Diálogos MudBlazor a pantalla completa salvo que se pidan ExtraSmall */
    .mud-dialog-container .mud-dialog:not(.mud-dialog-width-xs) {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100dvh !important;
        height: auto !important;
    }

    /* Botones del header del PageHeader que ocupen el ancho de la fila si solo hay uno */
    .page-header__actions > .mud-button-root {
        flex: 1 1 auto;
    }
}

/* MudSelect/MudMenu en diálogo: refuerzo si el tema no aplica el z-index del popover */
.mud-popover {
    z-index: 30000 !important;
}

/* AppBar: que el logo + texto largo no rompa el layout */
.mud-appbar a img { flex-shrink: 0; }
.mud-appbar .mud-typography-h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

/* Reducir padding lateral del contenido principal en pantallas estrechas */
@media (max-width: 599.98px) {
    .mud-main-content {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

/* FAB del asistente: que no tape acciones flotantes en móvil */
@media (max-width: 599.98px) {
    .assistant-fab {
        right: 12px !important;
        bottom: 12px !important;
        width: 48px !important;
        height: 48px !important;
    }
    .assistant-fab-icon {
        width: 22px !important;
        height: 22px !important;
    }
}

.dcdt-hidden-file {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* Gráficos de línea: ancho interno amplio + scroll para que el eje X no quede ilegible */
.dcdt-chart-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Calendario MudDatePicker: marcar días que tienen documentos del conductor */
.mud-day.dcdt-day-has-docs {
    position: relative;
    background-color: rgba(46, 125, 50, 0.14) !important;
    border-radius: 50% !important;
    font-weight: 600;
}
.mud-day.dcdt-day-has-docs::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--mud-palette-success);
    pointer-events: none;
}
/* Si el día con docs es también el seleccionado: dejar que el color seleccionado mande, pero conservar el puntito */
.mud-day.mud-selected.dcdt-day-has-docs {
    background-color: var(--mud-palette-primary) !important;
}
.mud-day.mud-selected.dcdt-day-has-docs::after {
    background-color: #fff;
}

/* Chip empresa en AppBar: pastilla blanca, texto e icono azul marca */
.company-header-chip.mud-chip {
    background-color: #fff !important;
    color: var(--mud-palette-primary, #1E5FB8) !important;
    font-weight: 600;
    max-width: min(240px, 45vw);
    min-width: 0;
    border-radius: 4px !important;
}
.company-header-chip .mud-chip-icon,
.company-header-chip .mud-icon-root {
    color: var(--mud-palette-primary, #1E5FB8) !important;
}
.company-header-chip-label {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
}

/* Selector de empresa: scroll y columnas cuando hay muchas plantas */
.company-switcher-popover {
    max-width: min(92vw, 520px);
}
.company-switcher-popover--multi {
    min-width: min(92vw, 440px);
}
.company-switcher-items {
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.company-switcher-items--multi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(65vh, 480px);
}
.company-switcher-item {
    min-width: 0;
}
@media (max-width: 575.98px) {
    .company-switcher-items--multi {
        grid-template-columns: 1fr;
    }
    .company-switcher-popover--multi {
        min-width: 0;
    }
}

/* Portal conductor: cabecera fija de dos filas en móvil (AppBar + empresa). */
.driver-portal-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--mud-zindex-appbar, 1300);
}
.driver-portal-header .mud-appbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}
.driver-company-subbar {
    display: flex;
    align-items: center;
    padding: 0 8px 8px;
    background-color: var(--mud-palette-primary, #1E5FB8);
}
.driver-company-menu--full {
    width: 100%;
}
.company-header-chip--full.mud-chip {
    width: 100%;
    max-width: 100%;
}
.company-header-chip--full .company-header-chip-label {
    flex: 1 1 auto;
}

@media (max-width: 575.98px) {
    body:has(.driver-company-subbar .company-header-chip) {
        --app-appbar-height: 92px;
    }
    .mud-drawer.mud-drawer-pos-left {
        top: var(--app-appbar-height) !important;
        height: calc(100dvh - var(--app-appbar-height)) !important;
        max-height: calc(100dvh - var(--app-appbar-height)) !important;
    }
}

.dcdt-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 600px) {
    .dcdt-dashboard-cards:not(.dcdt-dashboard-cards--5) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .dcdt-dashboard-cards--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.dcdt-dashboard-card__inner {
    min-width: 0;
}