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

a, .btn-link {
    color: #006bb7;
}

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

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

/* Estándar para Firefox y navegadores modernos (Chrome 121+) */
html {
    /* Formato: scrollbar-color: [color-del-pulgar] [color-de-la-pista]; */
    scrollbar-color: #dc6000 #f1f1f1;
    scrollbar-width: thin; /* Opcional: auto, thin o none */
}

/* Motores WebKit (Chrome, Edge, Safari antiguos) */
::-webkit-scrollbar {
    width: 10px; /* Ancho de la barra vertical */
    height: 10px; /* Alto de la barra horizontal */
}

/* Color de la "pista" (fondo) */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Color del "pulgar" (la parte que se mueve) */
::-webkit-scrollbar-thumb {
    background: #cc3000;
    border-radius: 5px; /* Para bordes redondeados */
}

    /* Color del pulgar al pasar el mouse */
    ::-webkit-scrollbar-thumb:hover {
        background: #cc3000;
    }

:root {
    --brand-blue-soft: rgba(0, 66, 136, 0.1);
    --brand-blue-text: #004288;
    --brand-link-hover: #004288;
    --brand-progress-bar: #004288;
    --brand-btn-bg: #004288;
    --switch-active-bg: var(--brand-blue-text);
    --switch-inactive-bg: #c2c2c2; 
    --switch-inactive-border: #676868; 
}

/* Configuración automática para el modo oscuro */
[data-bs-theme="dark"] {
    --brand-blue-soft: rgba(61, 169, 252, 0.15);
    --brand-blue-text: #5cb2f8;
    --brand-link-hover: #5cb2f8;
    --brand-progress-bar: #5cb2f8;
    --brand-btn-bg: #5cb2f8;
    --switch-active-bg: var(--brand-blue-text);
    --switch-inactive-bg: #2d3748; 
    --switch-inactive-border: #4a5568;
}

    /* ==========================================================================
   CORRECCIÓN GLOBAL MAESTRA PARA INPUTS (MODO OSCURO)
   ========================================================================== */

    /* 1. Modificar las variables internas que Bootstrap inyecta a los controles */
    [data-bs-theme="dark"] .form-control,
    [data-bs-theme="dark"] .form-select {
        --bs-body-bg: #1a1d20; /* Asegura un color oscuro base (puedes cambiarlo por tu gris favorito) */
        --bs-control-color: var(--bs-body-color);
    }

        /* 2. Ganarle a Bootstrap en el estado :focus y mantener el fondo oscuro */
        [data-bs-theme="dark"] .form-control:focus,
        [data-bs-theme="dark"] .form-select:focus {
            background-color: #1a1d20 !important; /* Fuerza el fondo oscuro al hacer clic */
            color: var(--bs-body-color) !important; /* Mantiene las letras legibles (blancas) */
            border-color: var(--brand-blue-text) !important; /* Borde con tu color #56a2e2 */
            box-shadow: 0 0 0 0.25rem rgba(86, 162, 226, 0.25) !important; /* Halo celeste de Datos Maestros */
        }

    /* 3. ELIMINAR EL FONDO BLANCO DEL AUTOCOMPLETADO (AUTOFILL DE GOOGLE CHROME/EDGE) */
    [data-bs-theme="dark"] input:-webkit-autofill,
    [data-bs-theme="dark"] input:-webkit-autofill:hover,
    [data-bs-theme="dark"] input:-webkit-autofill:focus,
    [data-bs-theme="dark"] input:-webkit-autofill:active {
        /* Crea una sombra interna infinita para tapar el color blanco del navegador */
        -webkit-box-shadow: 0 0 0 1000px #1a1d20 inset !important;
        /* Mantiene las letras en el color correcto del tema */
        -webkit-text-fill-color: var(--bs-body-color) !important;
        transition: background-color 5000s ease-in-out 0s;
    }

.accordion-item {
    /* Mapea las líneas divisorias internas a tu color de bordes */
    border-color: var(--bs-border-color) !important;
}

.accordion-button:not(.collapsed) {
    /* Fondo translúcido sutil de tu azul corporativo cuando está abierto */
    background-color: var(--brand-blue-soft) !important;
    /* Texto en tu azul corporativo principal */
    color: var(--brand-blue-text) !important;
    /* Sobrescribe la sombra azul genérica de Bootstrap */
    box-shadow: inset 0 -1px 0 var(--bs-border-color) !important;
}

/* Color del icono y texto cuando el acordeón está cerrado */
.accordion-button {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
}

/* 2. Ajustes automáticos para el Modo Oscuro */
[data-bs-theme="dark"] .accordion-button::after {
    /* Filtro para que la flecha nativa de Bootstrap se vuelva blanca en la noche */
    filter: invert(1) grayscale(1) brightness(2);
}

.brand-link:hover {
    color: var(--brand-link-hover) !important;
    text-decoration: underline !important; 
}

/* ==========================================================================
   VISIBILIDAD PERMANENTE Y COLOR CORPORATIVO PARA QUILL (MODO OSCURO)
   ========================================================================== */

/* 1. SECCIÓN DE ICONOS: Fuerza el celeste corporativo permanentemente en los vectores SVG */
[data-bs-theme="dark"] .custom-quill-toolbar button .ql-stroke,
[data-bs-theme="dark"] .custom-quill-toolbar button stroke,
[data-bs-theme="dark"] .custom-quill-toolbar .ql-picker-label .ql-stroke {
    stroke: var(--brand-blue-text) !important; /* Aplica el celeste corporativo de Datos Maestros */
}

[data-bs-theme="dark"] .custom-quill-toolbar button .ql-fill,
[data-bs-theme="dark"] .custom-quill-toolbar button fill {
    fill: var(--brand-blue-text) !important;
}

/* 2. SELECTORES DESPLEGABLES: Texto permanente de fuentes y tamaños en el color de marca */
[data-bs-theme="dark"] .custom-quill-toolbar select,
[data-bs-theme="dark"] .custom-quill-toolbar .ql-picker-label {
    color: var(--brand-blue-text) !important;
}

/* 3. PLACEHOLDER REPARADO: Dale un gris claro con excelente contraste o un toque de marca sutil */
[data-bs-theme="dark"] .ql-container .ql-editor.ql-blank::before {
    color: var(--bs-secondary-color) !important; /* Gris claro estándar de Bootstrap para inputs */
    opacity: 0.7 !important; /* Da el efecto sutil de marca de agua sin perder legibilidad */
    font-style: italic;
}

/* 4. EFECTO INTERACTIVO AL PASAR EL MOUSE (Opcional: Si quieres que brille un poco más en el Hover) */
[data-bs-theme="dark"] .custom-quill-toolbar button:hover,
[data-bs-theme="dark"] .custom-quill-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .custom-quill-toolbar .ql-picker-label:hover {
    filter: brightness(1.3) !important; /* Ilumina ligeramente el tono de marca al posicionarse encima */
}

/* ==========================================================================
   ADAPTACIÓN MAESTRA DE PESTAÑAS (TABS) CON BORDES VISIBLES (DARK MODE)
   ========================================================================== */

/* 1. Contenedor de la barra de pestañas */
[data-bs-theme="dark"] .tab_heading_main {
    background-color: var(--bs-body-secondary) !important;
    border-bottom: 1px solid var(--bs-border-color-translucent) !important;
    padding-top: 4px; /* Un poco de aire arriba para que se aprecie el borde superior */
}

/* 2. Pestañas en estado de reposo (Inactivas) con bordes invisibles pero listas para el Hover */
[data-bs-theme="dark"] .tab-link {
    background-color: transparent !important;
    color: var(--bs-secondary-color) !important;
    /* CORREGIDO: Bordes redondeados finos arriba, transparentes en reposo */
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    margin-right: 4px;
    transition: all 0.2s ease;
}

    [data-bs-theme="dark"] .tab-link .link-name,
    [data-bs-theme="dark"] .tab-link .link-icon i {
        color: var(--bs-secondary-color) !important;
    }

    /* 3. Efecto Hover: Dibuja un contorno suave al pasar el mouse */
    [data-bs-theme="dark"] .tab-link:hover {
        color: var(--bs-body-color) !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
        border-color: var(--bs-border-color-translucent) !important;
        border-bottom: none !important;
    }

    /* 4. PESTAÑA SELECCIONADA / ACTIVA (.active_tabi) CON BORDES FINOS VISIBLES */
    [data-bs-theme="dark"] .tab-link.active_tabi {
        background-color: var(--bs-body-bg) !important; /* Adopta el fondo negro de la página */
        /* CORREGIDO: Dibuja la línea superior, izquierda y derecha de forma nítida en la noche */
        border: 1px solid var(--bs-border-color-translucent) !important;
        border-bottom: none !important; /* Mantiene abierta la pestaña hacia abajo */
        /* Línea superior o acento en tu celeste de marca (opcional, si quieres un toque fino arriba) */
        border-top: 2px solid var(--brand-blue-text) !important;
    }

        [data-bs-theme="dark"] .tab-link.active_tabi .link-name,
        [data-bs-theme="dark"] .tab-link.active_tabi .link-icon i {
            color: var(--brand-blue-text) !important;
            font-weight: 600 !important;
        }

/* ==========================================================================
   SOLUCIÓN MAESTRA: JQUERY DATEPICKER 100% OSCURO (ELIMINA PARCHES BLANCOS)
   ========================================================================== */

/* 1. Contenedor principal y paneles */
[data-bs-theme="dark"] .datepicker-container,
[data-bs-theme="dark"] .datepicker-dropdown,
[data-bs-theme="dark"] .datepicker-panel {
    background-color: #212529 !important;
    background: #212529 !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
}

    /* 2. EL TRUCO MAESTRO: Obliga a ABSOLUTAMENTE TODOS los elementos de la lista (celdas de días y flechas) a volverse oscuros */
    [data-bs-theme="dark"] .datepicker-panel ul li,
    [data-bs-theme="dark"] .datepicker-panel > ul > li,
    [data-bs-theme="dark"] .datepicker-container ul li {
        background-color: #212529 !important; /* Apaga el recuadro blanco gigante */
        background: #212529 !important;
        color: var(--bs-body-color) !important; /* Pone los números de los días en blanco legible */
    }

    /* 3. Nombres de los días de la semana (Do, Lu, Ma...) */
    [data-bs-theme="dark"] .datepicker-panel > ul[data-view="week"] li {
        color: var(--bs-secondary-color) !important; /* Gris claro de Bootstrap */
        font-weight: 600 !important;
    }

    /* 4. Flechas de navegación (Izquierda/Derecha) y Mes superior */
    [data-bs-theme="dark"] .datepicker-panel > ul > li[data-view="month current"],
    [data-bs-theme="dark"] .datepicker-panel > ul > li[data-view="next"],
    [data-bs-theme="dark"] .datepicker-panel > ul > li[data-view="prev"] {
        color: var(--brand-blue-text) !important; /* Tu celeste corporativo */
        font-weight: 700 !important;
    }

    /* 5. Efecto Hover (Pasar el mouse encima de un día) */
    [data-bs-theme="dark"] .datepicker-panel > ul[data-view="days"] li:hover,
    [data-bs-theme="dark"] .datepicker-container ul li:hover {
        background-color: var(--bs-tertiary-bg) !important;
        background: var(--bs-tertiary-bg) !important;
        color: var(--brand-blue-text) !important;
        border-radius: 4px !important;
    }

    /* 6. DÍA SELECCIONADO POR EL USUARIO (Ej: el día 24 que marcaste con el clic) */
    [data-bs-theme="dark"] .datepicker-panel > ul[data-view="days"] li.picked,
    [data-bs-theme="dark"] .datepicker-container ul li.picked,
    [data-bs-theme="dark"] .datepicker-container ul li.active {
        background-color: var(--switch-active-bg) !important; /* Mantiene tu celeste brillante de marca */
        background: var(--switch-active-bg) !important;
        color: #000000 !important; /* Texto negro para contraste perfecto */
        font-weight: 700 !important;
        border-radius: 4px !important;
    }

    /* 7. NUEVO - DÍA ACTUAL (HOY: El recuadro del día 7 de Septiembre) */
    [data-bs-theme="dark"] .datepicker-panel > ul[data-view="days"] li.highlighted,
    [data-bs-theme="dark"] .datepicker-container ul li.highlighted {
        background-color: rgba(86, 162, 226, 0.15) !important; /* Tu azul soft translúcido de fondo */
        background: rgba(86, 162, 226, 0.15) !important;
        color: #56a2e2 !important; /* Letras celestes corporativas */
        font-weight: 700 !important;
        border-radius: 4px !important;
        border: 1px solid rgba(86, 162, 226, 0.3) !important; /* Delicado contorno de marca */
    }

    /* 8. Días que pertenecen al mes anterior o posterior (Gris opaco) */
    [data-bs-theme="dark"] .datepicker-panel > ul[data-view="days"] li.muted,
    [data-bs-theme="dark"] .datepicker-container ul li.muted {
        color: rgba(255, 255, 255, 0.25) !important;
    }

/* ==========================================================================
   ADAPTACIÓN GLOBAL DE SWEETALERT2 AL MODO OSCURO (BOOTSTRAP 5.3)
   ========================================================================== */

/* 1. Forzamos un fondo totalmente sólido y opaco en la noche para eliminar la transparencia */
[data-bs-theme="dark"] .swal2-popup {
    background-color: #212529 !important; /* Gris oscuro sólido oficial de Bootstrap (sin transparencias) */
    background: #212529 !important; /* Asegura que anule cualquier degradado o canal alfa previo */
    border: 1px solid var(--bs-border-color-translucent) !important; /* Contorno fino visible */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important; /* Sombra pronunciada para aislar la alerta del fondo */
    border-radius: 12px !important;
}

/* 2. Título principal de la alerta ("Éxito") */
[data-bs-theme="dark"] .swal2-title {
    color: var(--bs-body-color) !important; /* Texto blanco puro brillante */
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 600 !important;
}

/* 3. Texto descriptivo inferior ("El proyecto se ha actualizado") */
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-content {
    color: var(--bs-secondary-color) !important; /* Gris claro de excelente contraste */
    font-size: 0.95rem !important;
}

/* 4. Saneamiento de los iconos nativos de SweetAlert2 por la noche (Check verde) */
[data-bs-theme="dark"] .swal2-icon.swal2-success {
    border-color: var(--bs-success) !important; /* Éxito en verde esmeralda adaptivo */
    background-color: transparent !important;
}

    [data-bs-theme="dark"] .swal2-icon.swal2-success [class^='swal2-success-line'] {
        background-color: var(--bs-success) !important;
    }

    [data-bs-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring {
        border: 4px solid rgba(40, 167, 69, 0.2) !important;
    }

/* 5. Asegurar la separación fina de la fila de botones */
[data-bs-theme="dark"] .swal2-actions {
    gap: 12px !important;
    margin-top: 1.5rem !important;
}