/* ============ Design tokens ============ */
:root {
    --pitch-900: #0b3d2e;
    --pitch-700: #14624a;
    --pitch-500: #1e9e6a;
    --pitch-100: rgba(30, 158, 106, .10);
    --gold-500: #e8b931;
    --ink-900: #12181f;
    --ink-700: #33404d;
    --ink-500: #6b7885;
    --line: #e6e9ec;
    --surface: #ffffff;
    --bg: #f6f8f7;
    --danger: #d64545;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(18,24,31,.06);
    --shadow: 0 1px 2px rgba(18,24,31,.06), 0 8px 24px rgba(18,24,31,.05);
    --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-900);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -.018em; color: var(--ink-900); }

a { color: var(--pitch-700); text-decoration: none; }
a:hover { color: var(--pitch-900); }

:focus-visible { outline: 2px solid var(--pitch-500); outline-offset: 2px; }

/* ============ Layout ============ */
.page { display: flex; flex-direction: column; min-height: 100dvh; }

.app-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
}

/* ============ Cabecera de página (componente PageHeader) ============ */
.page-header { margin-bottom: 1.5rem; }
.page-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pitch-700);
    background: var(--pitch-100);
    padding: .2rem .6rem;
    border-radius: 999px;
    margin-bottom: .6rem;
}
.page-title { font-size: 1.55rem; margin: 0; }
.page-subtitle { margin: .3rem 0 0; color: var(--ink-500); font-size: .92rem; }
.page-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============ Radzen: cards ============ */
.rz-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

/* ============ Radzen: botones ============ */
.rz-button {
    border-radius: var(--radius-sm);
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    box-shadow: none;
    transition: background-color .18s var(--ease), transform .12s var(--ease);
}
.rz-button:hover { box-shadow: none; transform: translateY(-1px); }
.rz-button:active { transform: none; }

.rz-button.rz-primary { background-color: var(--pitch-700); color: #fff; }
.rz-button.rz-primary:hover { background-color: var(--pitch-900); }
.rz-button.rz-secondary { background-color: transparent; color: var(--ink-700); border: 1px solid var(--line); }
.rz-button.rz-warning { background-color: var(--gold-500); color: var(--ink-900); }
.rz-button.rz-danger { background-color: var(--danger); }
.rz-button.rz-success { background-color: var(--pitch-500); }
.rz-button.rz-variant-flat { background: transparent; color: var(--ink-500); }
.rz-button.rz-variant-flat:hover { background: var(--pitch-100); color: var(--pitch-900); }
.rz-button.rz-variant-flat.rz-danger { color: var(--danger); }
.rz-button.rz-variant-flat.rz-danger:hover { background: rgba(214,69,69,.10); }

/* ============ Radzen: inputs ============ */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-textarea, .rz-datepicker {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rz-textbox:focus-within, .rz-dropdown:focus-within, .rz-numeric:focus-within {
    border-color: var(--pitch-500);
    box-shadow: 0 0 0 3px var(--pitch-100);
}
.rz-label { font-size: .8rem; font-weight: 500; color: var(--ink-500); display: block; margin-bottom: .35rem; }

/* ============ Radzen: grids ============ */
.rz-datatable, .rz-data-grid { border: 0; border-radius: var(--radius); overflow: hidden; }
.rz-grid-table thead th {
    background: transparent;
    border-bottom: 1px solid var(--line);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-500);
}
.rz-grid-table tbody td { border-bottom: 1px solid var(--line); }
.rz-grid-table tbody tr:hover td { background: var(--pitch-100); }
.rz-paginator { border: 0; background: transparent; padding-top: .75rem; }

/* ============ Radzen: alertas / dialogos ============ */
.rz-notification-item, .rz-message { border-radius: var(--radius-sm); border: 1px solid var(--line); box-shadow: none; }
.rz-dialog { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ============ Utilidades responsive ============ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.form-grid .rz-dropdown, .form-grid .rz-textbox, .form-grid .rz-numeric { width: 100%; }

.actions-bar { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
    .app-main { padding: 1.25rem .9rem 3rem; }
    .rz-card { padding: 1.1rem; border-radius: var(--radius-sm); }
    .page-title { font-size: 1.3rem; }
    .actions-bar > .rz-button { flex: 1 1 auto; }
}

/* ============ Error UI ============ */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    background: var(--ink-900);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .85rem 1rem;
}

#blazor-error-ui .reload {
    color: var(--gold-500);
    font-weight: 600;
    margin-left: .35rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: .5rem;
    font-weight: 700;
}

/* ============ Login ============ */
.login-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
    background: radial-gradient(120% 120% at 50% 0%, var(--pitch-700) 0%, var(--pitch-900) 55%, #071f18 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(7, 31, 24, .35);
    padding: 2.25rem 2rem;
}

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

.login-brand-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pitch-500);
    box-shadow: 0 0 0 4px var(--pitch-100);
}

.login-brand-name {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pitch-900);
}

.login-title {
    font-size: 1.5rem;
    margin: 0 0 .35rem;
}

.login-subtitle {
    margin: 0 0 1.75rem;
    color: var(--ink-500);
    font-size: .92rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.login-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-700);
}

.login-input.form-control {
    height: 46px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: .5rem .85rem;
    font-size: .95rem;
    box-shadow: none;
}

.login-input.form-control:focus {
    border-color: var(--pitch-500);
    box-shadow: 0 0 0 3px var(--pitch-100);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--ink-700);
    margin: -.25rem 0 .25rem;
    cursor: pointer;
}

.login-submit {
    height: 46px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--pitch-700);
    color: #fff;
    font-weight: 600;
    font-size: .98rem;
    cursor: pointer;
    transition: background-color .18s var(--ease), transform .12s var(--ease);
}

.login-submit:hover {
    background: var(--pitch-900);
    transform: translateY(-1px);
}

.login-separator {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--ink-500);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.login-separator::before,
.login-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.login-passkey,
.login-passkey button {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-700);
    font-weight: 500;
    cursor: pointer;
}

.login-passkey button:hover {
    background: var(--pitch-100);
    color: var(--pitch-900);
}

.login-links {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding-top: .35rem;
    border-top: 1px solid var(--line);
    font-size: .88rem;
}

.login-validation:empty {
    display: none;
}

@media (max-width: 480px) {
    .login-card {
        padding: 1.75rem 1.25rem;
        border-radius: var(--radius);
    }

    .login-title {
        font-size: 1.3rem;
    }
}

/* ===== Área de cuenta (Manage) ===== */
.manage-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.manage-header {
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.manage-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pitch-900);
}

.manage-subtitle {
    margin: .25rem 0 0;
    color: var(--ink-500);
    font-size: .95rem;
}

.manage-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.manage-sidebar {
    position: sticky;
    top: 1rem;
}

@media (max-width: 768px) {
    .manage-page {
        padding: 1rem .75rem 2.5rem;
    }

    .manage-grid {
        grid-template-columns: 1fr;
    }

    .manage-sidebar {
        position: static;
        top: auto;
    }

    .manage-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .manage-nav-link {
        white-space: nowrap;
    }

    .manage-title {
        font-size: 1.35rem;
    }

    .manage-form {
        max-width: 100%;
    }
}

.manage-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}

.manage-nav-link {
    display: block;
    padding: .6rem .8rem;
    border-radius: calc(var(--radius) - 4px);
    color: var(--ink-700);
    text-decoration: none;
    font-weight: 500;
    transition: background-color .15s var(--ease, ease), color .15s var(--ease, ease);
}

.manage-nav-link:hover {
    background: var(--pitch-100);
    color: var(--pitch-900);
}

.manage-nav-link.active {
    background: var(--pitch-700);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--gold-500);
}

.manage-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}

.manage-card-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pitch-900);
}

.manage-card-subtitle {
    margin: .25rem 0 1.25rem;
    color: var(--ink-500);
    font-size: .9rem;
}

.manage-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 480px;
}

.manage-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.manage-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-700);
}

.manage-input.form-control {
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 4px);
    padding: .7rem .85rem;
    font-size: .95rem;
    color: var(--ink-900);
    background: #fff;
}

.manage-input.form-control:focus {
    border-color: var(--pitch-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pitch-500) 25%, transparent);
    outline: none;
}

.manage-input.form-control:disabled {
    background: var(--bg);
    color: var(--ink-500);
}

.manage-submit {
    align-self: flex-start;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    background: var(--pitch-700);
    color: #fff;
    font-weight: 600;
    padding: .75rem 1.5rem;
    cursor: pointer;
    transition: background-color .15s var(--ease, ease), transform .05s ease;
}

.manage-submit:hover {
    background: var(--pitch-900);
}

.manage-submit:active {
    transform: translateY(1px);
}

.manage-input-group { display: flex; align-items: center; gap: .5rem; }
.manage-input-group .manage-input { flex: 1 1 auto; min-width: 0; }

.manage-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.manage-badge-ok { background: var(--pitch-100); color: var(--pitch-700); }

.manage-link-button {
    align-self: flex-start;
    margin-top: .4rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pitch-700);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

.manage-link-button:hover { color: var(--pitch-900); }

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .password-input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-500);
    transform: translateY(-50%);
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--pitch-700);
}

.password-toggle:focus-visible {
    border-radius: .35rem;
    outline: 2px solid var(--pitch-500);
    outline-offset: 2px;
}