/* --- VARIABLES DE TUS COLORES --- */
:root {
    --color-primario: #182b61; /* Azul Oscuro */
    --color-secundario: #475fa2; /* Azul Medio */
    --color-acento: #ffcc00; /* Amarillo */
    --bg-claro: #f4f7f9; /* Gris muy tenue para fondos alternos */
    --bg-oscuro: #6c757d; /* Gris oscuro */
    --texto-gris: #6c757d;
    --bg-rojo: #dc091b; /* Rojo para errores */
}

.bg-danger {
    background-color: var(--bg-rojo) !important;
}

.btn-danger {
    background-color: #bc0817 !important;
}

    .btn-danger:hover, .btn-danger:active, .btn-danger:focus {
        background-color: var(--bg-rojo) !important;
    }

.text-gray {
    color: var(--texto-gris);
}

/* --- Nuevas Clases de Utilidad --- */
.bg-uv-primary {
    background-color: var(--color-primario);
}

.text-uv-primary {
    color: var(--color-primario);
}

.btn-uv-yellow {
    background-color: var(--color-acento);
    color: var(--color-primario);
    font-weight: 500;
    line-height: 24px;
    padding: 0px 30px;
}

.btn-uv-yellow:hover {
    background-color: #e6b800; /* Un poco más oscuro que el acento */
    color: var(--color-primario);
}

.btn-uv-yellow i.bi {
    font-size: 24px;
}

/* --- Global / Common Styles from app.css and site.css --- */
html, body {
    font-family: 'Open Sans', sans-serif; /* Prefer site.css font */
    color: #444; /* Prefer site.css color */
    overflow-x: hidden !important;
}

a, .btn-link {
    color: #006bb7; /* From app.css, might be overridden by custom theme */
}

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

.btn {
    padding: 12px 30px; /* From site.css */
}

.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, h2, h3, h4, h5, .navbar-brand { /* Added navbar-brand here because of the font family */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2.448IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODYgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5.3NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L2NsaXBWYXRoPjwvZGVmcz48ZyBjbGlwLXBh
    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;
}

/* Bootstrap color overrides for custom variables */
.bg-primary {
    background-color: var(--color-primario) !important; /* Added !important for precedence */
}

.bg-secondary {
    background-color: var(--color-secundario) !important;
}

.bg-warning {
    background-color: var(--color-acento) !important;
}

.bg-light {
    background-color: var(--bg-claro) !important;
}

.text-secondary {
  color: rgb(65, 69, 71) !important;
}

.text-primary-custom {
  color: rgb(37, 40, 41) !important;
}

.dropdown-menu {
    padding: 0px;
    border-radius: 0px;
}

.dropdown-item {
    padding: 10px 20px;
}

    .dropdown-item.active, .dropdown-item:active, .dropdown-item > a:active {
        background-color: var(--bg-oscuro);
    }

/* Styles for screens smaller than 600px (e.g., mobile devices) */
@media (max-width: 576px) {
    
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

}