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

:root {
    --avanza-dark: #243F49;
    --avanza-deep: #274852;
    --avanza-primary: #3E7F89;
    --avanza-primary-hover: #326A73;
    --avanza-primary-active: #274852;
    --avanza-cyan: #67CBDD;
    --avanza-soft: #C0E5E8;
    --avanza-focus-rgb: 62, 127, 137;
}

/* Links */
a,
.btn-link {
    color: var(--avanza-primary);
}

    a:hover,
    .btn-link:hover {
        color: var(--avanza-primary-hover);
    }

/* Botones principales AVANZA */
/* Incluye btn-primary y btn-success para matar el verde de Bootstrap */
.btn-primary,
.btn-success,
.btn-avanza {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--avanza-primary);
    --bs-btn-border-color: var(--avanza-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--avanza-primary-hover);
    --bs-btn-hover-border-color: var(--avanza-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--avanza-focus-rgb);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--avanza-primary-active);
    --bs-btn-active-border-color: var(--avanza-primary-active);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #8fb8bd;
    --bs-btn-disabled-border-color: #8fb8bd;
    background-color: var(--avanza-primary) !important;
    border-color: var(--avanza-primary) !important;
    color: #ffffff !important;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(62, 127, 137, 0.22);
    transition: all 0.2s ease-in-out;
}

    .btn-primary:hover,
    .btn-success:hover,
    .btn-avanza:hover {
        background-color: var(--avanza-primary-hover) !important;
        border-color: var(--avanza-primary-hover) !important;
        color: #ffffff !important;
        transform: translateY(-1px);
    }

    .btn-primary:focus,
    .btn-success:focus,
    .btn-avanza:focus,
    .btn-primary:focus-visible,
    .btn-success:focus-visible,
    .btn-avanza:focus-visible {
        background-color: var(--avanza-primary-hover) !important;
        border-color: var(--avanza-primary-hover) !important;
        color: #ffffff !important;
        outline: none !important;
        box-shadow: 0 0 0 0.25rem rgba(62, 127, 137, 0.32) !important;
    }

    .btn-primary:active,
    .btn-success:active,
    .btn-avanza:active,
    .btn-primary.active,
    .btn-success.active,
    .btn-avanza.active,
    .show > .btn-primary.dropdown-toggle,
    .show > .btn-success.dropdown-toggle,
    .show > .btn-avanza.dropdown-toggle {
        background-color: var(--avanza-primary-active) !important;
        border-color: var(--avanza-primary-active) !important;
        color: #ffffff !important;
        transform: translateY(0);
        box-shadow: 0 0 0 0.25rem rgba(62, 127, 137, 0.32) !important;
    }

/* Quita el azul/verde fuerte del focus general de Bootstrap */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(62, 127, 137, 0.28) !important;
}

/* Inputs / formularios */
.form-control:focus,
.form-check-input:focus {
    border-color: var(--avanza-primary);
    box-shadow: 0 0 0 0.25rem rgba(62, 127, 137, 0.22);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--avanza-primary);
    border-color: var(--avanza-primary);
}

/* Botones secundarios outline */
.btn-outline-primary,
.btn-outline-success,
.btn-avanza-outline {
    --bs-btn-color: var(--avanza-primary);
    --bs-btn-border-color: var(--avanza-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--avanza-primary);
    --bs-btn-hover-border-color: var(--avanza-primary);
    --bs-btn-focus-shadow-rgb: var(--avanza-focus-rgb);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--avanza-primary-active);
    --bs-btn-active-border-color: var(--avanza-primary-active);
    background-color: transparent !important;
    color: var(--avanza-primary) !important;
    border: 1px solid var(--avanza-primary) !important;
    border-radius: 7px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    .btn-outline-primary:hover,
    .btn-outline-success:hover,
    .btn-avanza-outline:hover {
        background-color: var(--avanza-primary) !important;
        border-color: var(--avanza-primary) !important;
        color: #ffffff !important;
    }

    .btn-outline-primary:focus,
    .btn-outline-success:focus,
    .btn-avanza-outline:focus,
    .btn-outline-primary:focus-visible,
    .btn-outline-success:focus-visible,
    .btn-avanza-outline:focus-visible {
        background-color: var(--avanza-primary) !important;
        border-color: var(--avanza-primary) !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 0.25rem rgba(62, 127, 137, 0.28) !important;
    }

    .btn-outline-primary:active,
    .btn-outline-success:active,
    .btn-avanza-outline:active,
    .btn-outline-primary.active,
    .btn-outline-success.active,
    .btn-avanza-outline.active {
        background-color: var(--avanza-primary-active) !important;
        border-color: var(--avanza-primary-active) !important;
        color: #ffffff !important;
    }

/* Layout general */
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

/* Error de Blazor */
.blazor-error-boundary {
    background-color: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: 8px;
}

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

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

/* Floating labels */
.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;
}

/* Paneles home */
.welcome-panel {
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f4f8f7);
}

.quick-card {
    border-radius: 16px;
    transition: all 0.2s ease-in-out;
}

    .quick-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    }

.info-panel {
    border-radius: 18px;
    background-color: #ffffff;
}

.quick-link-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    min-height: 100px;
    transition: all 0.2s ease-in-out;
}

    .quick-link-box:hover {
        background-color: #f1f7f6;
        border-color: #cfe1df;
    }