:root {
    --color-primary: #40b4a5;
    --cp-primary: #40b4a5;
    --color-primary-dark: #2f8f84;
    --cp-primary-dark: #2f8f84;
    --color-primary-soft: #ddf2ef;
    --cp-primary-soft: #ddf2ef;
    --color-bg: #f6faf9;
    --color-surface: #ffffff;
    --color-border: #d9e7e4;
    --color-text: #23403c;
    --cp-text: #23403c;
    --color-text-muted: #5f7672;
    --color-danger: #f45160;
    --color-warning: #f4b023;
    --shadow-sm: 0 10px 30px rgba(35, 64, 60, 0.08);
    --shadow-md: 0 20px 45px rgba(35, 64, 60, 0.1);
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
}

html,
body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

body {
    margin: 0;
}

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

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

.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-outline-primary {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn,
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--radius-sm);
}

.btn-detalle {
    background: #2fa89a;
    color: white;
    border: none;
    border-radius: 12px;
    padding: .55rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    transition: all .2s ease;
    box-shadow: 0 4px 12px rgba(47,168,154,.25);
}

    .btn-detalle:hover {
        background: #248d81;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(47,168,154,.35);
    }

    .btn-detalle:active {
        transform: translateY(0);
    }

    .btn-detalle:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(47,168,154,.20);
    }
.detalle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.12rem white, 0 0 0 0.28rem rgba(64, 180, 165, 0.25);
    border-color: var(--color-primary);
}

.content {
    padding-top: 1.1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    font-weight: 700;
}

h1:focus {
    outline: none;
}

article {
    background: transparent;
}

.card,
.panel,
.section-card,
.table,
form {
    border-radius: var(--radius-md);
}

.card,
.section-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.table {
    overflow: hidden;
    background: var(--color-surface);
}

.table > :not(caption) > * > * {
    border-bottom-color: #edf4f2;
}

.table thead th {
    color: var(--color-text);
    background: #f8fcfb;
    border-bottom-width: 1px;
}

.form-control,
.form-select,
.input-group-text {
    border-color: var(--color-border);
    background-color: #fff;
}

.form-control::placeholder {
    color: #8ba19d;
}

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

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: #c93544;
    font-size: 0.9rem;
}

.badge.bg-success,
.badge.text-bg-success {
    background: rgba(64, 180, 165, 0.15) !important;
    color: var(--color-primary-dark) !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background: rgba(244, 81, 96, 0.15) !important;
    color: #c93544 !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background: rgba(244, 176, 35, 0.18) !important;
    color: #996a08 !important;
}

.blazor-error-boundary {
    background: linear-gradient(135deg, #ba2f3d 0%, var(--color-danger) 100%);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

.blazor-error-boundary::after {
    content: "Se produjo un error.";
}

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

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: radial-gradient(circle at top left, rgba(64, 180, 165, 0.18), transparent 28%), radial-gradient(circle at bottom right, rgba(244, 176, 35, 0.12), transparent 22%), var(--color-bg);
}

.login-card {
    width: min(100%, 440px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.page-title,
.section-title {
    margin-bottom: 0.35rem;
}

.page-subtitle,
.section-subtitle,
.text-muted {
    color: var(--color-text-muted) !important;
}