:root {
    --primary-color: #C8102E;
    --primary-color-hover: #A50D26;
    --secondary-color: #6F4E37;
    --Background-content-bg-color: #FAF7F2;
    --background-content-bg-color: #FAF7F2;
    --text-color: #1F1F1F;
    --muted-color: #6B7280;
    --border-border: #E7E0D6;
    --danger-color: #B71C1C;
    --success-color: #2E7D32;
    --warning-color: #B26A00;
    --font: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--font); background: var(--Background-content-bg-color); color: var(--text-color); font-size: 15px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1.05rem; }
.h3 { font-size: 1.5rem; } .h4 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--primary-color-hover); text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--border-border); margin: 1rem 0; }
img { max-width: 100%; }
label { display: inline-block; }
button { font-family: inherit; }
h1:focus { outline: none; }

.text-danger { color: var(--danger-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-info { color: #1565C0 !important; }
.text-muted, .subtitle { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-bold, .font-weight-bold { font-weight: 700 !important; }
.small { font-size: .85em; }
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; }
.mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 2rem !important; }
.p-0 { padding: 0 !important; } .px-5 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .vh-100 { min-height: 100vh !important; }
.d-flex { display: flex !important; } .d-grid { display: grid !important; } .flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; }
.gap-3 { gap: 1rem !important; }
.position-relative { position: relative !important; }
.container-fluid { width: 100%; padding: 0 1rem; }
.container-fluid.p-0 { padding: 0; }
.row { display: flex; flex-wrap: wrap; margin: 0 -.75rem; }
.row.g-0 { margin: 0; }
.row.g-0 > * { padding: 0; }
.row > * { padding: 0 .75rem; width: 100%; }
.col-md-4, .col-md-6, .col-md-12 { width: 100%; }
@media (min-width: 768px) { .col-md-4 { width: 33.333%; } .col-md-6 { width: 50%; } .col-md-12 { width: 100%; } }

.form-label, .input-label, .field-label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-color); margin-bottom: .35rem; }
.form-control, .form-input, .input-field, .form-sub {
    display: block; width: 100%; font: inherit; font-size: .95rem; padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--border-border);
    background: #fff; color: var(--text-color); transition: border-color .15s ease, box-shadow .15s ease; margin: 0;
}
.form-control:focus, .form-input:focus, .input-field:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.14); }
.form-control:disabled { background: #F3F0EB; color: var(--muted-color); }
select.form-control { appearance: auto; }
.form-floating { display: flex; flex-direction: column-reverse; position: relative; }
.form-floating > .form-label { margin-bottom: .35rem; }
.form-floating > .form-control::placeholder { color: transparent; }
.form-floating .validation-message, .form-floating .btn-link { order: -1; }
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1; }
.input-group-append { display: flex; }
.input-group-text { display: inline-flex; align-items: center; padding: 0 .9rem; border: 1px solid var(--border-border); border-left: 0; border-radius: 0 10px 10px 0; background: #F3F0EB; }
.form-check { display: flex; align-items: center; gap: .5rem; }
.form-check-input { width: 1.05rem; height: 1.05rem; accent-color: var(--primary-color); margin: 0; }
.form-check-label { font-size: .9rem; color: var(--muted-color); }
.validation-message, .text-danger.small, .validation-summary { color: var(--danger-color); font-size: .8rem; margin-top: .3rem; }
.validation-summary ul, .validation-errors { margin: 0; padding-left: 1.1rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success-color); }
.invalid { outline: 1px solid var(--danger-color); }

.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-link, .btn-resend {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: filter .15s ease, background .15s ease, transform .1s ease; line-height: 1.2;
}
.btn-lg { padding: .85rem 1.4rem; font-size: 1rem; }
.btn-primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 5px 14px rgba(200, 16, 46, 0.2); }
.btn-primary:hover { background: var(--primary-color-hover); border-color: var(--primary-color-hover); color: #fff; text-decoration: none; }
.btn-primary:disabled { opacity: .65; cursor: default; }
.btn-secondary { background: #fff; color: var(--text-color); border-color: var(--border-border); }
.btn-secondary:hover { background: #F3F0EB; text-decoration: none; color: var(--text-color); }
.btn-danger { background: #fff; color: var(--danger-color); border-color: #F2C3C3; }
.btn-danger:hover { background: #FBE4E0; text-decoration: none; }
.btn-link, .btn-resend { background: transparent; color: var(--primary-color); padding: .25rem .5rem; }
.btn-link:hover { text-decoration: underline; }
.btn:active { transform: translateY(1px); }
.d-grid > .btn, .d-grid > .btn-primary { width: 100%; }

.alert { padding: .75rem 1rem; border-radius: 10px; font-size: .9rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alert-danger { background: #FBE4E0; color: #8C1C13; border-color: #F2C3C3; }
.alert-success { background: #E1F1E8; color: #1B5E20; border-color: #BFE3C9; }
.alert-warning { background: #FBF0DA; color: #7A4A00; border-color: #F2DDAE; }
.alert-info { background: #E0EFF4; color: #0D47A1; border-color: #BBD7E8; }
.status-message { font-size: .9rem; }
.status-message.error { color: var(--danger-color); }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table td, .table th { padding: .6rem .75rem; border-bottom: 1px solid var(--border-border); text-align: left; }
.nav { list-style: none; padding: 0; margin: 0; }
.nav-pills { display: flex; flex-direction: column; gap: .25rem; }
.nav-pills .nav-link { display: block; padding: .5rem .85rem; border-radius: 8px; color: var(--text-color); }
.nav-pills .nav-link.active, .nav-pills .nav-link:hover { background: #FBE6EA; color: var(--primary-color); text-decoration: none; }
.form-horizontal .btn { margin-right: .5rem; }

.account-root { min-height: 100vh; }
.account-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--Background-content-bg-color); }
.account-hero { position: relative; min-height: 320px; background: var(--primary-color) url("/images/loginImag.png") center / cover no-repeat; }
.account-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 31, 31, 0) 55%, rgba(31, 31, 31, 0.55) 100%); }
.account-hero-text { position: absolute; left: 40px; right: 40px; bottom: 36px; color: #fff; z-index: 1; }
.account-hero-text h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin: 0 0 .35rem; }
.account-hero-text p { margin: 0; opacity: .9; font-size: .95rem; max-width: 520px; }
.account-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.account-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border-border); border-radius: 20px; padding: 36px 36px 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgba(111, 78, 55, 0.1); }
.account-card-wide { max-width: 560px; }
.account-card .logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto 6px; }
.account-card h1 { font-size: 1.5rem; margin: 0; text-align: center; }
.account-subtitle { color: var(--muted-color); margin: 0 0 6px; text-align: center; line-height: 1.5; }
.account-field { display: flex; flex-direction: column; gap: 6px; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.account-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.account-help { margin: 4px 0 0; font-size: .82rem; color: var(--muted-color); text-align: center; }
.account-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: .74rem; color: var(--muted-color); }
.account-footer img { height: 14px; opacity: .85; }
.account-simple { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: var(--Background-content-bg-color); }
.account-simple .account-card { max-width: 520px; }
.account-simple header h1 { text-align: left; font-size: 1.35rem; }
.account-lang { display: flex; justify-content: flex-end; }
.login-lang-toggle { display: inline-flex; align-items: center; padding: 2px; border: 1px solid var(--border-border); border-radius: 999px; background: #F3F0EB; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1; font-family: inherit; }
.login-lang-toggle:hover { border-color: #C9BFB2; }
.login-lang-opt { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; color: var(--muted-color); transition: all .2s ease; }
.login-lang-active { background: #fff; color: var(--text-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.login-flag-icon { width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.text-forgot-password { font-size: 14px; font-weight: 500; color: var(--text-color); }
.text-forgot-password:hover { color: var(--primary-color-hover); text-decoration: none; }
.text-mutedsub { color: var(--text-color); font-size: 14px; font-weight: 500; }
@media (max-width: 860px) {
    .account-page { grid-template-columns: 1fr; }
    .account-hero { min-height: 200px; }
    .account-hero-text { left: 20px; right: 20px; bottom: 20px; }
    .account-main { padding: 24px 16px; }
    .account-card { padding: 28px 22px; }
}

.manage-page { display: flex; justify-content: center; }
.manage-card { width: 100%; max-width: 760px; background: #fff; border: 1px solid var(--border-border); border-radius: 14px; padding: 28px 32px; }
.manage-card h3 { color: var(--primary-color); margin-bottom: 1rem; }
.manage-card .row > .col-md-6 { width: 100%; max-width: 480px; }
.manage-nav { margin-bottom: 1.25rem; }

.blazor-error-boundary { background: #B71C1C; color: #fff; padding: 1rem; border-radius: 10px; }
.blazor-error-boundary::after { content: "Ocurrió un error."; }
#blazor-error-ui { background: #FFF6E5; color: var(--text-color); bottom: 0; box-shadow: 0 -1px 4px rgba(0, 0, 0, .15); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; font-size: .9rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }