/* ==========================================================================
   Variables globales de la aplicación
   ========================================================================== */

:root {
    /* Colores y estilos propios de Gilmar */
    --gilmar-bg: #f8f9fa;
    --gilmar-primary-lighten: #ce8476;
    --gilmar-secondary-lighten: #fca576;
    --gilmar-gradient-transition: #a43f15;
    --gilmar-gradient-primary: #3d1a15;
    --gilmar-gradient-secondary: #ff8c42;
    --gilmar-transition: all 0.3s ease;
    /* Fondo utilizado para indicar campos modificados */
    --modified-field: #ffffe0;
}

/* ==========================================================================
   Ajustes generales de MudBlazor
   ========================================================================== */

/* Anular margin-top por defecto manteniendo la flexibilidad para futuras clases */
:where(.mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label) {
    margin-top: 0px !important;
}

/* Ajusta el área de pulsación de los checkboxes sin modificar su tamaño exterior */
.mud-checkbox .mud-button-root.mud-icon-button {
    padding: 8px;
}

/* ==========================================================================
   Pantalla de carga inicial (Spinner)
   ========================================================================== */

.app-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6)), linear-gradient(135deg, var(--gilmar-gradient-primary) 0%, var(--gilmar-gradient-transition) 100%);
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.app-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(61, 26, 21, 0.15);
    border-top: 4px solid var(--gilmar-gradient-primary);
    border-bottom: 4px solid var(--gilmar-gradient-secondary);
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 1rem;
}

.app-loading-text {
    color: var(--gilmar-gradient-primary);
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.85;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Barra superior y navegación
   ========================================================================== */

/* Aplica el degradado de marca a la barra superior */
.gilmar-appbar {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--gilmar-primary-lighten) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Evitar outline en foco de h1 (si lo hay) */
h1:focus {
    outline: none;
}

/* Define la forma y los colores de los enlaces del menú lateral (NavMenu) */
.mud-nav-link {
    border-radius: 0 25px 25px 0 !important;
    margin-right: 8px !important;
    color: var(--mud-palette-secondary) !important;
}
    /* Resalta el enlace correspondiente a la página actual */
    .mud-nav-link.active {
        background-color: rgba(104, 46, 37, 0.1) !important;
        color: var(--mud-palette-primary) !important;
        font-weight: bold !important;
    }
        /* Mantiene el color del icono sincronizado con el enlace activo */
        .mud-nav-link.active .mud-nav-link-icon {
            color: var(--mud-palette-primary) !important;
        }

/* Personaliza el indicador inferior de las pestañas */
.mud-tab-slider {
    position: absolute;
    background: var(--mud-palette-secondary) !important;
}

    /* Grosor del indicador cuando las pestañas están en disposición horizontal */
    .mud-tab-slider.mud-tab-slider-horizontal {
        height: 3px;
    }

/* ==========================================================================
   Layout y contenido principal
   ========================================================================== */

/* Mantiene el layout ocupando toda la ventana y evita que el documento completo genere un segundo scroll externo */
.mud-layout {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content con padding para appbar + espacio extra y scroll vertical */
.mud-main-content {
    padding-top: calc(var(--mud-appbar-height, 64px) + 24px) !important;
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--gilmar-bg);
}

/* Main empty content: sin padding superior (cuando corresponde) */
.mud-main-empty-content {
    padding-top: 0 !important;
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--gilmar-bg);
}

/* ==========================================================================
   Página de login
   ========================================================================== */

/* Centra el formulario de login y aplica el degradado de fondo */
.login-container {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--gilmar-gradient-transition) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Componentes de marca y panel lateral
   ========================================================================== */

/* Marca/brand: texto con color primario y más peso */
.mud-brand-text {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* Añade una separación visual sutil al borde del drawer (Menú lateral) */
.mud-drawer {
    border-right: 1px solid rgba(0,0,0,0.05) !important;
}

/* Aplica un degradado de marca al fondo del drawer (Menú lateral) */
/*.mud-drawer-content {
    background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6)), linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--gilmar-gradient-transition) 100%) !important;
}*/

/* Usa el color de iconos configurado para el drawer */
.mud-menu-item > .mud-icon-root {
    color: var(--mud-palette-drawer-icon);
}

/* ==========================================================================
   Campos modificados
   ========================================================================== */

/* Mantiene transparente la zona interna de escritura para que el fondo se aplique de forma uniforme al contenedor del campo */
.mud-input-control.modified .mud-input-slot {
    background-color: transparent !important;
}

/* Aplica el fondo de modificación al contenedor completo de los campos outlined, incluyendo input y textarea */
.mud-input-control.modified .mud-input.mud-input-outlined {
    background-color: var(--modified-field) !important;
    border-radius: 4px !important;
}

/* Deja transparente el fondo de la etiqueta para conservar visible el recorte del borde outlined */
.mud-input-control.modified .mud-input-outlined-border {
    background-color: transparent !important;
}

/* Aplica el mismo tratamiento visual a los componentes MudSelect */
.mud-select.modified .mud-input {
    background-color: var(--modified-field) !important;
    border-radius: 4px !important;
}

/* Evita que el área interna del valor seleccionado oculte el fondo */
.mud-select.modified .mud-select-input {
    background-color: transparent !important;
}

/* Resalta las filas de tabla cuyos datos han sido modificados */
.mud-table-row.modified,
.mud-table-row.modified td {
    background-color: var(--modified-field) !important;
}

/* Aplica el fondo de modificación al selector de clientes */
.cliente-selector-container.modified .mud-input {
    background-color: var(--modified-field) !important;
}

/* ==========================================================================
   Tablas y estados de fila
   ========================================================================== */

/* Elimina la línea superior de la barra de paginación */
.mud-table-pagination-toolbar {
    border-top: none !important;
}

/* Define el color RGB de cada estado para poder reutilizarlo con rgba() */
.fila-inactiva {
    --estado-color: 158, 158, 158; /* Gris  */
}

.fila-error {
    --estado-color: 244, 67, 54; /* Rojo */
}

.fila-pendiente {
    --estado-color: 255, 152, 0; /* Amarillo */
}

.fila-ok {
    --estado-color: 76, 175, 80; /* Verde */
}

.fila-info {
    --estado-color: 33, 150, 243; /* Azul */
}

.fila-int {
    --estado-color: 139, 195, 74; /* Verde claro */
}

/* Aplica un fondo semitransparente según el estado de la fila */
.mud-table-row.fila-inactiva,
.mud-table-row.fila-error,
.mud-table-row.fila-pendiente,
.mud-table-row.fila-ok,
.mud-table-row.fila-info,
.mud-table-row.fila-int {
    background-color: rgba(var(--estado-color), 0.22) !important;
}

/* Incrementa ligeramente la opacidad del color cuando el usuario pasa el cursor sobre una fila con estado */
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.fila-inactiva:hover,
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.fila-error:hover,
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.fila-pendiente:hover,
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.fila-ok:hover,
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.fila-info:hover,
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.fila-int:hover {
    background-color: rgba(var(--estado-color), 0.29) !important;
}

/* Aplica el mismo color a las leyendas cuyo nombre de clase contiene simultáneamente "leyenda-" y "fila-" */
[class*="leyenda-"][class*="fila-"] {
    background-color: rgba(var(--estado-color), 0.22) !important;
}

/* Fondo de hover para las filas que no tienen un estado específico */
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.12);
}

/* ==========================================================================
   Subtabla
   ========================================================================== */

/* Personaliza la cabecera de las subtablas utilizando los valores tipográficos definidos por MudBlazor */
.sub-table .mud-table-head th {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-size: var(--mud-typography-subtitle2-size) !important;
    font-weight: var(--mud-typography-subtitle2-weight) !important;
    line-height: var(--mud-typography-subtitle2-lineheight) !important;
    letter-spacing: var(--mud-typography-subtitle2-letterspacing) !important;
    text-transform: var(--mud-typography-subtitle2-text-transform) !important;
}

/* ==========================================================================
   Google Places Autocomplete
   ========================================================================== */

/* Ajusta el contenedor generado por Google para integrarlo visualmente con los campos de la aplicación (Autocomplete) */
gmp-place-autocomplete {
    width: 100% !important;
    background-color: whitesmoke !important; /* Color de fondo para TODO el bloque */
    display: block !important;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px !important;
    color-scheme: light !important;
}

/* Sitúa el listado de sugerencias por encima del resto de componentes */
.pac-container {
    z-index: 3000 !important;
    border: none !important;
    box-shadow: var(--mud-elevation-4) !important;
}

/* Mejora el espaciado vertical de cada sugerencia */
.pac-item {
    padding: 10px !important;
}

    /* Realza visualmente la sugerencia bajo el cursor */
    .pac-item:hover {
        background-color: var(--mud-palette-background-gray) !important;
    }

/* Usa el color principal de texto de MudBlazor para la coincidencia */
.pac-item-query {
    color: var(--mud-palette-text-primary) !important;
}

/* ==========================================================================
   Estados especiales, validación y mensajes
   ========================================================================== */

/* Mantiene visible el color personalizado del checkbox en modo readonly */
.readonly-checkbox .mud-button-root {
    color: var(--mud-palette-tertiary) !important;
}

/* Evita que MudBlazor reduzca la opacidad del checkbox readonly */
.readonly-checkbox.mud-checkbox-readonly {
    opacity: 1 !important;
}

/* Estilo de los mensajes de validación del formulario */
.validation-message {
    color: var(--mud-palette-error) !important;
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Variante visual de severidad filled sin fondo opaco */
.custom-filled-severity {
    color: var(--mud-palette-secondary);
    background-color: transparent;
}

/* Estilo para alertas con variante outlined normal */
.mud-alert-outlined-normal {
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
}

/* Color de la acción dentro de los snackbars */
.mud-snackbar .mud-snackbar-content-action > button {
    color: var(--mud-palette-primary-text);
}

/* ==========================================================================
   Mapa
   ========================================================================== */

/* Contenedor compacto para el mapa, con bordes redondeados y recorte del contenido que sobresalga de sus límites */
.map-contenedor {
    position: relative;
    height: 185px;
    width: 100%;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-inputs);
    overflow: hidden;
    background-color: #f5f5f5;
}

.geoapify-map-preview,
.geoapify-map-preview img {
    width: 100%;
    height: 100%;
}

.geoapify-map-preview {
    position: relative;
}

.geoapify-map-preview img {
    display: block;
    object-fit: cover;
}

.geoapify-map-preview__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgb(255 255 255 / 80%);
}

/*  ==========================================================================
    Timeline compacto
    ========================================================================== */

/* 1. Desplazamos todo el conjunto del Timeline hacia la izquierda */
.compact-timeline.mud-timeline {
    margin-left: -32px !important;
    padding-left: 0 !important;
    width: calc(100% + 32px) !important;
}

/* 2. Ocultamos el espacio opuesto vacío */
.compact-timeline .mud-timeline-item-opposite {
    display: none !important;
}

/* 3. Reducir el contenedor intermedio del contenido */
.compact-timeline .mud-timeline-item-content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

    /* 4. Quitar cualquier margen predeterminado del Paper interno */
    .compact-timeline .mud-timeline-item-content > .mud-paper {
        margin-left: -12px !important;
    }

/* ==========================================================================
   Interfaz de error de Blazor
   ========================================================================== */

/* Personaliza el fondo y el color del panel de error global */
#blazor-error-ui {
    background: lightyellow !important;
    color: var(--mud-palette-primary) !important;
}

    /* Posiciona el botón de cierre dentro del panel de error */
    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    /* Destaca visualmente la acción para recargar la aplicación */
    #blazor-error-ui .reload {
        color: #0d6efd !important;
    }

/* Estilo visual del límite de error de Blazor */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSAOOTQuMDgxNSAyOTEgOTQuNjc4MiAyOTEgOTcuMDY1MSAyODkuMDM4IDk5IDI4Ni42MTcgOTlMMjQwLjM4MyA5OUMyMzcuOTYzIDk5IDIzNiA5Ny4wNjUxIDIzNiAOOTQuNjc4MiAyMzYgOTQuMzc5OSAyMzYuMDMxIDk0LjA4ODYgMjM2LjA4OSA5My44MDcyTDIzNi4zMzggOTMuMDE2MiAyMzYuODU4IDkyLjEzMTQgMjU5LjQ3MyA1My42Mjk0IDI1OS45NjEgNTIuNzk4NSAyNjAuNDA3IDUyLjI2NThDMjYxLjIgNTEuNDgzNyAyNjIuMjk2IDUxIDI2My41MDYgNTFaTTI2My41ODYgNjYuMDE4M0MyNjAuNzM3IDY2LjAxODMgMjU5LjMxMyAONjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    /* Texto mostrado después del límite de error de Blazor */
    .blazor-error-boundary::after {
        content: "An error has occurred."
    }