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

html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-text-muted) 35%, transparent) transparent;
}

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
    border-radius: var(--radius-full);
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: var(--font-bold);
    line-height: 1.25;
    color: var(--brand-heading);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }
h5 { font-size: var(--text-sm); }
h6 { font-size: var(--text-xs); }

p { margin: 0 0 var(--space-4) 0; }
small { font-size: var(--text-sm); }
code, pre { font-family: var(--font-mono); }

code {
    font-size: var(--text-xs);
    background-color: var(--brand-gray-light);
    color: var(--color-text);
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-sm);
}

pre {
    font-size: var(--text-sm);
    background-color: var(--brand-gray-light);
    border: 1px solid var(--color-border);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: color var(--duration-default) var(--ease-default);
}

a:hover { color: var(--color-link-hover); }

header {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-4) var(--space-8);
}

main {
    max-width: 76rem;
    margin: var(--space-8) auto;
    padding: 0 var(--space-6);
}

footer {
    text-align: center;
    padding: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.d-block { display: block; }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--brand-icon-green); }
.text-danger { color: var(--brand-danger); }
.amount { font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; }
.amount-lg { font-size: var(--text-lg); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
}

.card + .card { margin-top: var(--space-6); }

.card h3 { margin-bottom: var(--space-4); }

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.alert-error {
    background-color: var(--brand-danger-light);
    color: var(--brand-danger);
    border: 1px solid color-mix(in srgb, var(--brand-danger) 25%, transparent);
}

.alert-warning {
    background-color: color-mix(in srgb, var(--color-warning) 12%, transparent);
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.alert-success {
    background-color: var(--brand-icon-green-bg);
    color: var(--brand-icon-green);
    border: 1px solid color-mix(in srgb, var(--brand-icon-green) 25%, transparent);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page-header h1 { margin-bottom: var(--space-1); }

.page-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.dashboard-title-wrapper { margin-bottom: var(--space-6); }
.dashboard-title-wrapper h1 { margin-bottom: var(--space-1); }

.dashboard-title-wrapper p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.metrics-grid .card + .card { margin-top: 0; }

.metrics-card-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    padding-right: 4.5rem;
    min-height: 7.5rem;
    overflow: hidden;
}

.metrics-card-wrapper::before {
    content: "";
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xl);
    background: var(--metric-tile, var(--brand-icon-blue-bg));
}

.metrics-card-wrapper::after {
    content: "";
    position: absolute;
    top: calc(var(--space-5) + 0.6875rem);
    right: calc(var(--space-5) + 0.6875rem);
    width: 1.375rem;
    height: 1.375rem;
    background: var(--metric-ink, var(--color-primary));
    -webkit-mask: var(--metric-icon) center / contain no-repeat;
    mask: var(--metric-icon) center / contain no-repeat;
}

.metrics-card-label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.metrics-card-value {
    color: var(--color-text);
    font-size: 1.75rem;
    font-weight: var(--font-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.metrics-card-subtext {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.metrics-card-wrapper:has(.metrics-card-icon)::before,
.metrics-card-wrapper:has(.metrics-card-icon)::after { content: none; }

.metrics-card-icon {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--metric-tile, var(--brand-icon-blue-bg));
    color: var(--metric-ink, var(--color-primary));
}

.metrics-card-icon .icon { width: 1.375rem; height: 1.375rem; }

.metrics-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-2);
}

.metrics-card-footer .metrics-card-subtext { white-space: nowrap; }
.metrics-card-footer .metrics-card-link { margin-left: auto; }

.metrics-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.metrics-card-link .icon { width: 0.875rem; height: 0.875rem; }

.metrics-card-blue {
    --metric-tile: var(--brand-icon-blue-bg);
    --metric-ink: var(--color-primary);
    --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.metrics-card-green {
    --metric-tile: var(--brand-icon-green-bg);
    --metric-ink: var(--brand-icon-green);
    --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.metrics-card-amber {
    --metric-tile: var(--brand-beige);
    --metric-ink: var(--brand-secondary);
    --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.metrics-card-indigo {
    --metric-tile: var(--brand-gradient-accent);
    --metric-ink: var(--brand-white);
    --metric-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
}

.kpi-grid,
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.kpi-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 7.25rem;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.kpi-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    min-width: 0;
}

.kpi-card-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.kpi-card-value {
    font-size: clamp(1.25rem, 1.55vw, 1.75rem);
    font-weight: var(--font-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kpi-card-value--accent { color: var(--color-primary); }

.kpi-card-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--kpi-ink, var(--color-primary));
}

.kpi-card-note .icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

.kpi-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--kpi-tile, var(--brand-icon-blue-bg));
    color: var(--kpi-ink, var(--color-primary));
}

.kpi-card-icon .icon { width: 1.5rem; height: 1.5rem; }

.kpi-card--hero {
    border-color: transparent;
    background:
        radial-gradient(80% 90% at 100% 100%, color-mix(in srgb, var(--brand-blue-light) 30%, transparent) 0%, transparent 70%),
        var(--brand-gradient-hero);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 28%, transparent);
    --kpi-tile: color-mix(in srgb, var(--brand-white) 14%, transparent);
    --kpi-ink: var(--brand-white);
}

.kpi-card--hero .kpi-card-label { color: color-mix(in srgb, var(--brand-white) 80%, transparent); }
.kpi-card--hero .kpi-card-value { color: var(--brand-white); }
.kpi-card--hero .kpi-card-note { color: color-mix(in srgb, var(--brand-icon-green-bg) 85%, var(--brand-white)); }
.kpi-card--hero .kpi-card-note .icon { fill: none; color: var(--brand-success); }

.kpi-card--blue { --kpi-tile: var(--brand-icon-blue-bg); --kpi-ink: var(--color-primary); }

.kpi-card--danger {
    --kpi-tile: var(--brand-danger-light);
    --kpi-ink: var(--brand-danger);
    --card-accent: var(--brand-tertiary);
}

.kpi-card--danger .kpi-card-note,
.kpi-card--warning .kpi-card-note { color: color-mix(in srgb, var(--brand-tertiary) 80%, var(--color-black)); }

.kpi-card--warning {
    --kpi-tile: color-mix(in srgb, var(--brand-tertiary) 16%, var(--brand-white));
    --kpi-ink: var(--brand-tertiary);
    --card-accent: var(--color-primary);
}

.summary-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.summary-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-full);
    background: var(--brand-icon-blue-bg);
    color: var(--color-primary);
}

.summary-card-icon .icon { width: 1.5rem; height: 1.5rem; }

.summary-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.summary-card-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.summary-card-value {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--color-text);
}

.summary-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.summary-card-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.summary-card-link,
.status-panel-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.summary-card-link .icon,
.status-panel-link .icon { width: 0.875rem; height: 0.875rem; }

.status-panel { padding: var(--space-5) var(--space-6); }

.status-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.status-panel-header h3 { margin: 0; font-size: var(--text-lg); }
.status-panel-link { font-size: var(--text-sm); }

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
}

.status-row + .status-row { margin-top: var(--space-2); }

.status-row-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
}

.status-row-label .icon { width: 1.125rem; height: 1.125rem; }

.status-row-value {
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
}

.status-row--success { background: color-mix(in srgb, var(--brand-icon-green-bg) 60%, var(--brand-white)); }
.status-row--success .icon,
.status-row--success .status-row-value { color: var(--brand-icon-green); }

.status-row--warning { background: color-mix(in srgb, var(--brand-tertiary) 10%, var(--brand-danger-light)); }
.status-row--warning .icon { color: var(--brand-tertiary); }
.status-row--warning .status-row-value { color: var(--brand-danger); }

.status-row--neutral { background: var(--color-background); }
.status-row--neutral .icon { color: var(--color-text-muted); }

.status-row-detail {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    column-gap: var(--space-3);
}

.status-row-note { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

.status-panel-total {
    font-family: var(--font-title);
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
}

.dashboard-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.dashboard-panels > .card + .card { margin-top: 0; }

@media (max-width: 1024px) {
    .dashboard-panels { grid-template-columns: minmax(0, 1fr); }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.stat-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.stat-card-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.stat-card-value {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--color-text);
}

.stat-card-value--success { color: var(--brand-icon-green); }
.stat-card-value--danger { color: var(--brand-danger); }

.stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
}

.stat-card-icon .icon { width: 1.375rem; height: 1.375rem; }
.stat-card-icon--blue { background: var(--brand-icon-blue-bg); color: var(--color-primary); }
.stat-card-icon--success { background: var(--brand-icon-green-bg); color: var(--brand-icon-green); }
.stat-card-icon--danger { background: var(--brand-danger-light); color: var(--brand-danger); }

.filter-bar.table-toolbar {
    margin: 0;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.table-toolbar select { width: auto; min-width: 11rem; }

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 18rem;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.search-field .icon {
    position: absolute;
    left: var(--space-3-5);
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-field input[type="search"] { padding-left: 2.75rem; }

.btn .icon { width: 1.125rem; height: 1.125rem; }

.badge-pill {
    padding: var(--space-1) var(--space-3);
    border: 1px solid currentColor;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
}

.badge-pill.badge-success { border-color: color-mix(in srgb, var(--brand-icon-green) 30%, transparent); }
.badge-pill.badge-danger { border-color: color-mix(in srgb, var(--brand-danger) 25%, transparent); }
.badge-pill.badge-warning { border-color: color-mix(in srgb, var(--brand-tertiary) 35%, transparent); }

.cell-stack > span { display: block; }
.cell-stack > span + span { font-size: var(--text-xs); }
.cell-muted { color: var(--color-text-muted); }
.input-uppercase { text-transform: uppercase; }

.cell-strong a {
    color: var(--color-text);
    font-weight: var(--font-semibold);
}

.cell-strong a:hover { color: var(--color-link-hover); }

.table-actions-head { text-align: center; }

.table-centered {
    text-align: center;
    vertical-align: middle;
}

.table-centered.cell-stack > span { text-align: center; }

.table-operations {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.clients-table th.table-operations {
    text-align: center;
}

.table-operations.cell-stack > span { text-align: center; }

.clients-table th:nth-child(6),
.clients-table td:nth-child(6) {
    padding-right: 0;
}

.clients-table th.table-operations,
.clients-table td.table-operations {
    padding-left: 0;
}

.table-actions {
    white-space: nowrap;
    text-align: center;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-height: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-primary);
    box-shadow: none;
    vertical-align: middle;
}

.icon-btn .icon { width: 1.125rem; height: 1.125rem; }

.icon-btn:hover {
    background: var(--brand-icon-blue-bg);
    color: var(--color-primary-hover);
}

.icon-btn--danger { color: var(--brand-danger); }
.icon-btn--danger:hover { background: var(--brand-danger-light); color: var(--brand-danger); }
.icon-btn--success { color: var(--brand-icon-green); }
.icon-btn--success:hover { background: var(--brand-icon-green-bg); color: var(--brand-icon-green); }

.table-empty {
    padding: var(--space-8) !important;
    text-align: center !important;
    color: var(--color-text-muted);
}

.auth-card-wrapper {
    max-width: 30rem;
    margin: 0 auto;
    width: 100%;
    padding: var(--space-10) var(--space-10);
    box-shadow: 0 10px 40px color-mix(in srgb, var(--color-shadow) 8%, transparent);
}

.auth-card-header { margin-bottom: var(--space-6); }

.auth-card-title {
    margin: 0 0 var(--space-1);
    font-size: 1.75rem;
}

.auth-card-wrapper input { min-height: 3rem; }

.auth-card-subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.auth-body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--color-background);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    min-height: 100vh;
}

.auth-brand-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-6);
    padding: var(--space-16) var(--space-12);
    background: var(--brand-gradient-soft);
    color: var(--brand-white);
}

.auth-brand-panel::before,
.auth-brand-panel::after {
    content: "";
    position: absolute;
    border-radius: 2.5rem;
    transform: rotate(45deg);
    pointer-events: none;
}

.auth-brand-panel::before {
    width: 26rem;
    height: 26rem;
    top: -9rem;
    right: -8rem;
    background: linear-gradient(135deg, var(--brand-white) 0%, transparent 75%);
    opacity: 0.18;
}

.auth-brand-panel::after {
    width: 16rem;
    height: 16rem;
    top: 8rem;
    right: 6rem;
    border: 2px solid color-mix(in srgb, var(--brand-white) 18%, transparent);
}

.auth-brand-mark {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.auth-brand-name {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.auth-brand-tagline {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: color-mix(in srgb, var(--brand-white) 85%, transparent);
}

.auth-brand-claim {
    position: relative;
    max-width: 22rem;
    margin: 0;
    padding-top: var(--space-4);
    border-top: 2px solid var(--brand-sidebar-accent);
    color: color-mix(in srgb, var(--brand-white) 85%, transparent);
    font-size: var(--text-base);
}

.auth-body--marca-blanca .auth-brand-panel {
    justify-content: flex-end;
    padding-bottom: 18vh;
    background: var(--brand-surface);
    color: var(--brand-ink);
}

.auth-brand-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% center;
    pointer-events: none;
    z-index: 0;
}

.auth-body--marca-blanca .auth-brand-panel::before {
    content: "";
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    transform: none;
    opacity: 1;
    z-index: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-white) 70%, transparent) 0%, transparent 62%);
}

.auth-body--marca-blanca .auth-brand-panel::after { content: none; }
.auth-brand-panel > :not(.auth-brand-photo) { position: relative; z-index: 2; }

.auth-brand-logo {
    width: min(18rem, 80%);
    height: auto;
}

.auth-body--marca-blanca .auth-brand-mark::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: var(--space-5);
    border-radius: var(--radius-full);
    background: var(--brand-blue-light);
}

.auth-body--marca-blanca .auth-brand-claim {
    border-top: none;
    padding-top: 0;
    color: var(--brand-ink);
    font-size: var(--text-base);
    line-height: 1.45;
}

.auth-centered {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    max-width: none;
    margin: 0;
    padding: var(--space-8) var(--space-4);
    background: var(--brand-primary);
}

.auth-centered-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.auth-centered-logo {
    width: 4.5rem;
    height: auto;
}

.auth-centered-tagline {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: color-mix(in srgb, var(--brand-white) 80%, transparent);
}

.auth-centered .auth-main-inner { max-width: 22rem; }

.auth-centered .auth-card-wrapper {
    padding: var(--space-6) var(--space-6) var(--space-6);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--color-black) 15%, transparent);
}

.auth-centered .auth-card-header {
    margin-bottom: var(--space-4);
    text-align: center;
}

.auth-centered .auth-card-title { font-size: var(--text-2xl); }
.auth-centered .auth-card-subtitle { display: none; }

.auth-centered .auth-card-wrapper input {
    min-height: 2.625rem;
    background-color: var(--color-surface);
}

.auth-centered .auth-footer { color: color-mix(in srgb, var(--brand-white) 45%, transparent); }

.auth-centered .input-icon { display: none; }
.auth-centered .input-with-icon input { padding-right: var(--space-3-5); }
.auth-centered .btn-block { min-height: 2.5rem; }

.brand-onsafe {
    --btn-gradient: linear-gradient(90deg, var(--brand-secondary) 0%, var(--brand-secondary) 50%, color-mix(in srgb, var(--brand-secondary) 82%, var(--color-black)) 100%);
}

.brand-onsafe .btn { border-radius: var(--radius-xl); }

.brand-onsafe { --onsafe-accent-blue: color-mix(in srgb, var(--brand-blue-light) 60%, var(--brand-primary)); }

.brand-onsafe .app-sidebar { background: var(--brand-primary); }

.sidebar-brand--logo {
    justify-content: center;
    padding: var(--space-2) 0 var(--space-1);
}

.sidebar-brand-logo {
    width: 5.5rem;
    height: auto;
}

.brand-onsafe .sidebar-user-avatar {
    background: var(--brand-secondary);
    box-shadow: none;
}

.brand-onsafe .sidebar-user {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-white) 12%, transparent);
}

.brand-onsafe .sidebar-user-role { display: none; }

.sidebar-operator {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sidebar-operator-label {
    padding: 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-white) 65%, transparent);
}

.sidebar-operator-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--brand-white) 20%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--brand-white) 8%, transparent);
    color: var(--brand-white);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.sidebar-operator-box .icon { width: 1.25rem; height: 1.25rem; opacity: 0.85; }

.brand-onsafe .sidebar-item--active,
.brand-onsafe .sidebar-submenu .sidebar-item--active {
    background: var(--brand-secondary);
    box-shadow: -1rem 0 0 -0.75rem var(--brand-secondary), 0 6px 16px color-mix(in srgb, var(--brand-secondary) 35%, transparent);
}

.brand-onsafe .app-header:not(:has(.btn)) { display: none; }

.brand-onsafe .kpi-card { min-height: 9.5rem; align-items: flex-start; }

.brand-onsafe .kpi-card--hero {
    align-self: start;
    background: var(--brand-dashboard-navy);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-dashboard-navy) 30%, transparent);
}

.brand-onsafe .kpi-card--hero .kpi-card-icon { display: none; }
.brand-onsafe .kpi-card--hero .kpi-card-note { color: color-mix(in srgb, var(--brand-white) 85%, transparent); font-weight: var(--font-semibold); }
.brand-onsafe .kpi-card--hero .kpi-card-note .icon { display: none; }

.brand-onsafe .kpi-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-xl);
}

.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-body { flex: 1; }

.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-note {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-weight: var(--font-semibold);
}

.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-note .icon { display: none; }

.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-note::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--radius-full);
    background: currentColor;
}

.brand-onsafe .kpi-card--blue {
    --card-accent: var(--onsafe-accent-blue);
    --kpi-ink: var(--onsafe-accent-blue);
}

.brand-onsafe .kpi-card--blue .kpi-card-icon { color: var(--color-primary); }

.brand-onsafe .kpi-card--danger {
    --card-accent: var(--brand-secondary);
    --kpi-tile: color-mix(in srgb, var(--brand-secondary) 10%, var(--brand-white));
    --kpi-ink: var(--brand-secondary);
}

.brand-onsafe .kpi-card--danger .kpi-card-value { color: var(--brand-secondary); }

.brand-onsafe .kpi-card--warning {
    --card-accent: var(--brand-gradient-to);
    --kpi-tile: color-mix(in srgb, var(--brand-gradient-to) 12%, var(--brand-white));
    --kpi-ink: var(--brand-secondary);
}

.brand-onsafe .kpi-card--warning .kpi-card-value { color: var(--onsafe-accent-blue); }

.brand-onsafe .kpi-card--danger .kpi-card-note,
.brand-onsafe .kpi-card--warning .kpi-card-note { color: var(--brand-secondary); }
.brand-onsafe .kpi-card--warning .kpi-card-note { color: var(--brand-gradient-to); }

.summary-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.brand-onsafe .summary-card { padding: var(--space-6); }

.brand-onsafe .summary-card-icon {
    width: 4rem;
    height: 4rem;
    color: var(--color-primary);
}

.brand-onsafe .summary-card-link { color: var(--onsafe-accent-blue); }

.brand-onsafe .status-row-label .icon { display: none; }

.brand-onsafe .status-row-label::before {
    content: "";
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: var(--radius-full);
    background: currentColor;
}

.brand-onsafe .status-row--success .status-row-label::before { background: var(--brand-success); }
.brand-onsafe .status-row--warning { background: color-mix(in srgb, var(--brand-secondary) 9%, var(--brand-white)); }
.brand-onsafe .status-row--warning .status-row-label::before { background: var(--brand-secondary); }
.brand-onsafe .status-row--warning .status-row-value { color: var(--brand-secondary); }
.brand-onsafe .status-row--neutral .status-row-label::before { background: var(--color-text-muted); }
.brand-onsafe .status-panel-link { color: var(--onsafe-accent-blue); }

.auth-main-inner {
    width: 100%;
    max-width: 30rem;
}

.auth-footer {
    margin: var(--space-6) 0 0;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.input-with-icon { position: relative; }
.input-with-icon input { padding-right: 2.75rem; }

.input-icon {
    position: absolute;
    top: 50%;
    right: var(--space-3-5);
    width: 1.125rem;
    height: 1.125rem;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.password-toggle svg { width: 1.125rem; height: 1.125rem; }
.password-toggle .password-toggle-hide { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle-show { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle-hide { display: inline; }

.password-requirements {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.5;
}
.password-requirements li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.password-requirements [data-rule-icon] {
    flex-shrink: 0;
    width: 1em;
    text-align: center;
}
.password-requirements [data-met="true"] {
    color: var(--color-success);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    max-width: none;
    margin: 0;
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    width: 100%;
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    right: var(--space-2);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
    min-height: 0;
    box-shadow: none;
}

.password-toggle:hover { background: none; color: var(--color-text); }

.form-stack > * + * { margin-top: var(--space-4); }

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

.form-row > * { flex: 1 1 12rem; }

.form-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-4);
}

.form-section legend {
    padding: 0 var(--space-2);
    font-weight: var(--font-semibold);
    color: var(--brand-heading);
}

label {
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    color: var(--color-text);
}

.auth-card-wrapper label {
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.permission-item,
.permission-item * {
    text-transform: none;
    letter-spacing: normal;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="file"],
textarea,
select {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2-5) var(--space-3-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--brand-gray-light);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    transition: border-color var(--duration-default) var(--ease-default),
                box-shadow var(--duration-default) var(--ease-default);
}

textarea {
    resize: vertical;
    min-height: 5rem;
}

select { cursor: pointer; }

input[readonly] {
    background-color: var(--brand-gray-light);
    color: var(--color-text-muted);
}

input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--color-text-muted) 70%, transparent); }

input:focus,
textarea:focus,
select:focus {
    outline: none;
    background-color: var(--color-surface);
    border-color: var(--color-focus);
    box-shadow: var(--shadow-focus);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
    width: 1rem;
    height: 1rem;
}

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--btn-gradient, var(--brand-gradient-button)) 0 0 / 200% 100%;
    color: var(--brand-white);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);
    transition: background-position 0.45s var(--ease-default),
                background-color var(--duration-default) var(--ease-default),
                box-shadow var(--duration-default) var(--ease-default),
                transform var(--duration-default) var(--ease-default);
}

button:hover,
.btn:hover {
    background-position: 100% 0;
    color: var(--brand-white);
    text-decoration: none;
}

button:active,
.btn:active { transform: scale(0.98); }

button:disabled,
.btn:disabled {
    background: var(--brand-border);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

.btn-primary { background: var(--btn-gradient, var(--brand-gradient-button)) 0 0 / 200% 100%; }

.btn-block { width: 100%; min-height: 2.875rem; margin-top: var(--space-2); }

.btn-sm {
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.btn-outline {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--brand-icon-blue-bg);
    color: var(--color-primary-hover);
    border-color: var(--color-primary);
}

.btn-success { background: var(--brand-success); }
.btn-success:hover { background: color-mix(in srgb, var(--brand-success) 85%, var(--color-black)); }

.btn-danger { background: var(--brand-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--brand-danger) 85%, var(--color-black)); }

.btn-outline.btn-success {
    background: var(--color-surface);
    color: var(--brand-icon-green);
    border-color: color-mix(in srgb, var(--brand-icon-green) 45%, transparent);
}

.btn-outline.btn-success:hover {
    background: var(--brand-icon-green-bg);
    color: var(--brand-icon-green);
}

.btn-outline.btn-danger {
    background: var(--color-surface);
    color: var(--brand-danger);
    border-color: color-mix(in srgb, var(--brand-danger) 40%, transparent);
}

.btn-outline.btn-danger:hover {
    background: var(--brand-danger-light);
    color: var(--brand-danger);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 17rem;
    flex-shrink: 0;
    overflow: hidden;
    isolation: isolate;
    background: var(--brand-gradient-sidebar);
    color: var(--brand-white);
    padding: var(--space-5) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.app-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content main {
    flex: 1;
    max-width: 96rem;
    width: 100%;
    margin: var(--space-4) auto var(--space-6);
    padding: 0 var(--space-8);
}

.icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--brand-white);
    text-decoration: none;
    padding: 0 var(--space-2);
}

.sidebar-brand:hover { color: var(--brand-white); }

.sidebar-brand + .sidebar-user { margin-top: var(--space-4); }

.sidebar-brand-mark {
    width: 2.875rem;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--brand-blue-light) 45%, transparent));
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-brand-name {
    font-family: var(--font-title, var(--font-sans));
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.sidebar-brand-tagline {
    font-size: 0.6875rem;
    color: color-mix(in srgb, var(--brand-white) 75%, transparent);
    white-space: nowrap;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2);
}

.sidebar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--brand-blue-light);
    color: var(--brand-white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-white) 18%, transparent);
}

.sidebar-user-avatar .icon { width: 1.25rem; height: 1.25rem; }

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--brand-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--brand-white) 75%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.app-sidebar > * { flex-shrink: 0; }

.sidebar-menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-1);
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.app-sidebar > .sidebar-menu { flex-shrink: 1; }

.sidebar-menu::-webkit-scrollbar { display: none; }

.sidebar-menu > *,
.sidebar-submenu > * { flex-shrink: 0; }

.sidebar-item,
.sidebar-group-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: color-mix(in srgb, var(--brand-white) 88%, transparent);
    text-decoration: none;
    padding: var(--space-2) var(--space-3-5);
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: var(--font-medium);
    transition: background-color var(--duration-default) var(--ease-default),
                color var(--duration-default) var(--ease-default);
}

.sidebar-item:hover,
.sidebar-group-toggle:hover {
    background: color-mix(in srgb, var(--brand-white) 10%, transparent);
    color: var(--brand-white);
}

.sidebar-item--active,
.sidebar-submenu .sidebar-item--active {
    background: var(--brand-blue-light);
    color: var(--brand-white);
    font-weight: var(--font-semibold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-shadow) 12%, transparent);
}

.sidebar-menu .icon { width: 1.25rem; height: 1.25rem; }

.sidebar-group-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.sidebar-group-toggle {
    justify-content: space-between;
    background: none;
    border: none;
    width: 100%;
    min-height: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
}

.sidebar-group-toggle:active { transform: none; }

.sidebar-group-toggle .sidebar-group-chevron {
    display: inline-block;
    transition: transform var(--duration-default) var(--ease-default);
    font-size: var(--text-xs);
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron { transform: rotate(90deg); }

.sidebar-group-toggle[aria-expanded="true"] { color: var(--brand-white); }

.sidebar-submenu {
    display: none;
    flex-direction: column;
    gap: var(--space-0-5);
    margin-left: var(--space-3);
    border-left: 1px solid color-mix(in srgb, var(--brand-white) 22%, transparent);
    padding-left: var(--space-2);
}

.sidebar-group-toggle[aria-expanded="true"] + .sidebar-submenu { display: flex; }

.sidebar-submenu .sidebar-item {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    padding-top: var(--space-3);
    border-top: 1px solid color-mix(in srgb, var(--brand-white) 16%, transparent);
}

.sidebar-logout-form { margin: 0; }

.sidebar-logout {
    width: 100%;
    min-height: 2.5rem;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3-5);
    border: 1px solid color-mix(in srgb, var(--brand-white) 28%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--brand-white) 10%, transparent);
    color: var(--brand-white);
    font-size: var(--text-sm);
    box-shadow: none;
}

.sidebar-logout .icon { width: 1.25rem; height: 1.25rem; }

.sidebar-logout:hover {
    background: color-mix(in srgb, var(--brand-white) 22%, transparent);
    border-color: color-mix(in srgb, var(--brand-white) 45%, transparent);
    color: var(--brand-white);
}

.sidebar-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-1);
    font-size: var(--text-xs);
    color: color-mix(in srgb, var(--brand-white) 75%, transparent);
}

.sidebar-online {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.sidebar-online::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--brand-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-white) 25%, transparent);
}

.app-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-4);
    background: transparent;
    color: var(--color-text);
    padding: var(--space-6) var(--space-8) 0;
}

.app-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header-date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-shadow) 4%, transparent);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.header-date .icon { color: var(--color-text-muted); }





.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.filter-bar input,
.filter-bar select { width: auto; }

.filter-bar input[type="search"],
.filter-bar input[type="text"] { flex: 1 1 16rem; }

.filter-bar .filter-actions { margin-left: auto; }

.card-table {
    padding: 0;
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.table code { font-size: 0.6875rem; }

.table th,
.table td {
    text-align: left;
    padding: var(--space-3) var(--space-2-5);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.table th {
    background-color: var(--brand-gray-light);
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.table tbody tr { transition: background-color var(--duration-default) var(--ease-default); }
.table tbody tr:hover { background-color: color-mix(in srgb, var(--brand-gray-light) 70%, transparent); }
.table tbody tr:last-child td { border-bottom: none; }

.card:not(.card-table) .table th:first-child { border-top-left-radius: var(--radius-lg); }
.card:not(.card-table) .table th:last-child { border-top-right-radius: var(--radius-lg); }

.table-actions { white-space: nowrap; }

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5) var(--space-2-5);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-active,
.badge-success {
    background-color: var(--brand-icon-green-bg);
    color: var(--brand-icon-green);
}

.badge-inactive,
.badge-danger {
    background-color: var(--brand-danger-light);
    color: var(--brand-danger);
}

.badge-pending,
.badge-warning {
    background-color: color-mix(in srgb, var(--brand-tertiary) 16%, var(--brand-white));
    color: color-mix(in srgb, var(--brand-tertiary) 65%, var(--color-black));
}

.badge-primary {
    background-color: var(--brand-icon-blue-bg);
    color: var(--color-primary);
}

.badge-outline {
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.confirm-dialog {
    padding: 0;
    width: min(28rem, calc(100vw - 2 * var(--space-4)));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xl);
}

.confirm-dialog::backdrop {
    background: var(--color-backdrop);
    backdrop-filter: blur(2px);
}

.confirm-dialog-body { padding: var(--space-6); }

.confirm-dialog-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.confirm-dialog-message {
    margin: 0 0 var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.confirm-dialog-actions form { margin: 0; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-1) 0;
}

.pagination-summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.pagination-info {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pagination-page-size {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: normal;
}

.pagination-page-size select {
    width: auto;
    min-height: 2rem;
    padding: 0 var(--space-2);
}

.pagination-links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pagination-current {
    background: var(--brand-gradient-primary);
    color: var(--brand-white);
    cursor: default;
}

.permission-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.permission-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--duration-default) var(--ease-default),
                border-color var(--duration-default) var(--ease-default);
}

.permission-item:hover {
    background-color: var(--brand-gray-light);
    border-color: var(--color-primary);
}

.permission-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.permission-code {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-family: var(--font-mono);
}

.permission-desc {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.form-hint {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
}

[id$="-drawer-root"] {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    visibility: hidden;
}

[id$="-drawer-root"]:not(:empty) {
    visibility: visible;
    pointer-events: auto;
}

[id$="-drawer-root"] .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-backdrop);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--duration-default) var(--ease-default);
}

[id$="-drawer-root"] .drawer-backdrop.visible { opacity: 1; }

[id$="-drawer-root"] .drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(32rem, 100%);
    max-width: 100%;
    background: var(--color-surface);
    box-shadow: -12px 0 40px color-mix(in srgb, var(--color-shadow) 18%, transparent);
    transform: translateX(100%);
    transition: transform var(--duration-default) var(--ease-default);
    display: flex;
    flex-direction: column;
    z-index: 50;
}

[id$="-drawer-root"] .drawer.open { transform: translateX(0); }

[id$="-drawer-root"] .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    border-top: 4px solid transparent;
    border-image: var(--brand-gradient-primary) 1;
    border-image-slice: 1 0 0 0;
}

[id$="-drawer-root"] .drawer-header h2 {
    margin: 0;
    font-size: var(--text-lg);
}

[id$="-drawer-root"] .drawer-close {
    background: none;
    border: none;
    box-shadow: none;
    min-height: 0;
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
}

[id$="-drawer-root"] .drawer-close:hover { background: none; color: var(--color-text); }

[id$="-drawer-root"] .drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

.sidebar-toggle {
    display: none;
    position: fixed;
    top: var(--space-2-5);
    left: var(--space-3);
    z-index: 30;
    min-height: 2.5rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xl);
    line-height: 1;
}

.sidebar-backdrop { display: none; }

@media (max-width: 64rem) {
    .kpi-grid,
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .auth-shell { grid-template-columns: 1fr; }

    .auth-brand-panel {
        padding: var(--space-8) var(--space-6);
        min-height: 12rem;
    }

    .auth-brand-name { font-size: var(--text-2xl); }
    .auth-brand-tagline { font-size: var(--text-sm); }
    .auth-brand-claim { display: none; }
}

@media (max-width: 48rem) {
    .table,
    .data-table {
        min-width: 100%;
        width: 100%;
    }

    .table th:not(:first-child),
    .table td:not(:first-child),
    .data-table th:not(:first-child),
    .data-table td:not(:first-child) {
        display: none;
    }

    .table th:first-child,
    .table td:first-child,
    .data-table th:first-child,
    .data-table td:first-child {
        width: 100%;
    }

    .table tbody tr,
    .data-table tbody tr {
        cursor: pointer;
    }

    .filter-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
    }

    .filter-bar > input,
    .filter-bar > .search-input-wrapper,
    .filter-bar > .filter-search {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .filter-bar > select,
    .filter-bar .filter-select {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        max-width: 8rem;
    }

    .filter-bar .filter-actions {
        width: 100%;
        flex-basis: 100%;
        margin-left: 0;
        margin-top: var(--space-1);
    }

    .filter-bar .filter-actions .btn,
    .filter-bar .filter-actions a {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .app-shell { flex-direction: column; }
    .sidebar-toggle { display: inline-flex; }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: auto;
        width: 16rem;
        transform: translateX(-100%);
        transition: transform var(--duration-default) var(--ease-default);
        z-index: 20;
    }

    .app-sidebar.open { transform: translateX(0); }

    .sidebar-backdrop.visible {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-backdrop);
        z-index: 10;
    }

    .app-header { min-height: 4rem; padding: var(--space-3) var(--space-4) var(--space-3) 4rem; }
    .header-date { display: none; }

    .app-content main {
        margin: var(--space-4) auto;
        padding: 0 var(--space-4);
    }

    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .kpi-grid,
    .summary-grid,
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .kpi-card { flex-direction: column-reverse; padding: var(--space-4); }
    .kpi-card-value { font-size: var(--text-xl); }
    .metrics-card-wrapper { padding: var(--space-4); padding-right: var(--space-4); padding-top: 4.25rem; min-height: 0; }
    .metrics-card-wrapper::before { top: var(--space-4); right: auto; left: var(--space-4); }
    .metrics-card-wrapper::after { top: calc(var(--space-4) + 0.6875rem); right: auto; left: calc(var(--space-4) + 0.6875rem); }
    .metrics-card-value { font-size: var(--text-xl); }
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stat-card--lead { justify-content: flex-start; }
.stat-card--lead .stat-card-icon { order: -1; }
.stat-card--lead .stat-card-label { color: var(--color-text-muted); font-weight: var(--font-semibold); }

.stat-card-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.stat-card-value--primary { color: var(--color-primary); }
.stat-card-value--accent { color: var(--brand-secondary); }
.stat-card-value--warning { color: var(--brand-tertiary); }
.stat-card-value--info { color: var(--brand-blue-light); }
.stat-card-value--sm { font-size: var(--text-xl); }

.stat-card-icon--square { border-radius: var(--radius-xl); }
.stat-card-icon--accent { background: color-mix(in srgb, var(--brand-secondary) 12%, var(--brand-white)); color: var(--brand-secondary); }
.stat-card-icon--warning { background: color-mix(in srgb, var(--brand-tertiary) 16%, var(--brand-white)); color: var(--brand-tertiary); }
.stat-card-icon--muted { background: var(--brand-gray-light); color: var(--color-text-muted); }

.stat-card--hero {
    position: relative;
    overflow: hidden;
    border-color: transparent;
    background: var(--brand-gradient-hero);
    color: var(--brand-white);
}

.stat-card--hero::after {
    content: "";
    position: absolute;
    right: -1.75rem;
    top: 50%;
    width: 7rem;
    height: 7rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand-white) 8%, transparent);
    transform: translateY(-50%);
}

.stat-card--hero .stat-card-label,
.stat-card--hero .stat-card-value { color: var(--brand-white); }
.stat-card--hero .stat-card-icon { position: relative; z-index: 1; background: transparent; color: var(--brand-white); }

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: -1px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: color var(--duration-default) var(--ease-default), border-color var(--duration-default) var(--ease-default);
}

.tab:hover { color: var(--color-link-hover); text-decoration: none; }

.tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--brand-secondary);
}

.tab-count {
    min-width: 1.5rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--brand-gray-light);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.tab--active .tab-count { background: var(--brand-icon-blue-bg); color: var(--color-primary); }

.toolbar-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
}

.toolbar-card label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: none;
    letter-spacing: normal;
}

.toolbar-card input,
.toolbar-card select { width: auto; }
.toolbar-card .search-field { flex: 0 1 26rem; }
.toolbar-spacer { flex: 1; }

.btn-soft {
    background: var(--brand-gray-light);
    color: var(--color-text);
    box-shadow: none;
}

.btn-soft:hover { background: color-mix(in srgb, var(--brand-border) 60%, var(--brand-gray-light)); color: var(--color-text); }

.btn-accent-outline {
    background: var(--color-surface);
    border: 1.5px solid var(--brand-secondary);
    color: var(--brand-secondary);
    box-shadow: none;
}

.btn-accent-outline:hover { background: color-mix(in srgb, var(--brand-secondary) 8%, var(--brand-white)); color: var(--brand-secondary); }

.empty-state {
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-align: center;
}

.table--navy th {
    background: var(--brand-dashboard-navy);
    color: var(--brand-white);
    text-align: center;
}

.table--navy td { text-align: center; }
.table--navy tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--brand-icon-green-bg) 35%, var(--brand-white)); }

.cell-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.cell-mono { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.cell-total { font-size: var(--text-base); font-weight: var(--font-bold); }
.text-accent { color: var(--brand-secondary); }

.badge-neutral {
    background: var(--brand-gray-light);
    color: var(--color-text);
}

.panel-title {
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
}

.settings-section + .settings-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.settings-section-title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.brand-onsafe .stat-card {
    align-items: flex-start;
    min-height: 8rem;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
}

.brand-onsafe .stat-card--lead { align-items: center; min-height: 6.5rem; }
.brand-onsafe .stat-card-label { font-size: var(--text-sm); }
.brand-onsafe .stat-card-value { font-size: var(--text-3xl); color: var(--color-primary); }
.brand-onsafe .stat-card--lead .stat-card-value { font-size: var(--text-2xl); }
.brand-onsafe .stat-card-value--sm { font-size: var(--text-2xl); color: var(--brand-ink); }
.brand-onsafe .stat-card--hero { background: var(--brand-primary); }
.brand-onsafe .stat-card--hero .stat-card-value { color: var(--brand-white); }
.brand-onsafe .stat-card-value--success { color: var(--brand-success); }
.brand-onsafe .stat-card-value--danger { color: var(--brand-danger); }
.brand-onsafe .stat-card-value--accent { color: var(--brand-secondary); }
.brand-onsafe .stat-card-icon { width: 3rem; height: 3rem; }
.brand-onsafe .stat-card-icon--success { background: color-mix(in srgb, var(--brand-success) 10%, var(--brand-white)); color: var(--brand-success); }
.brand-onsafe .tab--active { color: var(--color-primary); }
.brand-onsafe .table--navy th { background: var(--brand-dashboard-navy); }

@media (max-width: 1024px) {
    .stat-grid--3,
    .breakdown,
    .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .toolbar-card .search-field { flex-basis: 100%; }
}

.inline-form { display: inline; margin: 0; }

.icon-btn--boxed {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.detail-card { margin-top: var(--space-6); }

.detail-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.detail-card-header h3 { margin: 0; }
.detail-card-header p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.action-group {
    display: inline-flex;
    gap: var(--space-2);
}

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

.rate-pill {
    display: inline-block;
    min-width: 5.5rem;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--brand-dashboard-navy);
    font-weight: var(--font-bold);
    text-align: right;
}

.panel-subtitle {
    margin: calc(-1 * var(--space-4)) 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.simulator-card { margin-top: var(--space-6); }
.simulator-form { max-width: 48rem; }

.simulator-result {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--brand-gray-light);
}

.simulator-result h4 { margin: 0 0 var(--space-4); color: var(--color-primary); }

.simulator-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-4);
}

.stat-card-value--ink { color: var(--brand-ink) !important; }

.settings-card { max-width: 56rem; }

.cell-strong { font-weight: var(--font-semibold); }
.brand-onsafe .stat-card-value--warning { color: var(--brand-tertiary); }
.brand-onsafe .stat-card-value--info { color: var(--brand-blue-light); }
.brand-onsafe .stat-card-value--primary { color: var(--color-primary); }

.stat-card--lead .stat-card-value--sm { white-space: nowrap; font-size: var(--text-lg); }
.brand-onsafe .stat-card--lead .stat-card-value--sm { font-size: var(--text-xl); }
.cell-stack > span + span { font-weight: var(--font-normal); }

.settings-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.settings-help {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.form-group small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.form-group.form-check {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}

.form-group.form-check input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
}

[id$="-drawer-root"] .drawer.drawer--wide { width: min(52rem, 100%); }

[id$="-drawer-root"] .drawer-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.clickable-row { cursor: pointer; }
.clickable-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

.inv-filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-4);
    font-size: var(--text-sm);
}

.inv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}

a.inv-filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

.inv-filter-chip--active {
    border-color: var(--color-primary);
    background: var(--brand-icon-blue-bg);
    color: var(--color-primary);
}

.inv-filter-chip a { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1; text-decoration: none; }
.inv-filter-chip a:hover { color: var(--brand-danger); }

.inv-filter-link { font-size: var(--text-sm); }

.inv-drawer-heading { display: flex; flex-direction: column; gap: var(--space-2); }

.inv-drawer-id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.inv-drawer-id { font-family: var(--font-mono); font-weight: var(--font-bold); color: var(--brand-dashboard-navy); }

.inv-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.inv-info-card,
.inv-yield-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    font-size: var(--text-sm);
    min-width: 0;
    overflow-wrap: anywhere;
}

.inv-info-card strong { font-size: var(--text-base); color: var(--brand-heading); }

.inv-card-link { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-semibold); }

.inv-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.inv-section { margin-top: var(--space-6); }

.inv-section h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

.inv-props {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-6);
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--brand-gray-light);
}

.inv-props--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.inv-props dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.inv-props dd { margin: var(--space-0-5) 0 0; font-weight: var(--font-semibold); }

.inv-yield-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.inv-yield-card strong { font-size: var(--text-xl); }

.inv-footnote,
.inv-panel-more {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.inv-panel-more { padding: var(--space-3) var(--space-5); }

.inv-history { max-height: 24rem; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }

.client-detail-tabs { margin-bottom: var(--space-6); }

@media (max-width: 48rem) {
    .inv-cards,
    .inv-props,
    .inv-props--3,
    .inv-yield-cards { grid-template-columns: minmax(0, 1fr); }

    .table.table--full th,
    .table.table--full td { display: table-cell; width: auto; }

    .table.table--full { min-width: 40rem; }
}

.field-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--brand-danger);
}

.inv-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.sidebar-user-profile {
    display: block;
    margin-top: var(--space-0-5);
    font-size: var(--text-xs);
    color: inherit;
    opacity: 0.85;
}

.sidebar-user-profile:hover { opacity: 1; }

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--space-6);
    align-items: start;
}

.profile-grid .card h3 { margin: 0 0 var(--space-4); }

.user-invite-link code {
    display: block;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--brand-gray-light);
    overflow-wrap: anywhere;
    user-select: all;
}

.auth-card-text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.auth-card-header .auth-card-text { margin-top: var(--space-2); }
.auth-card-text--strong { color: var(--color-text); font-weight: var(--font-semibold); word-break: break-all; }

.auth-forgot-link {
    align-self: flex-end;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.auth-link {
    display: block;
    margin-top: var(--space-5);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.auth-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.auth-state .btn-block { margin-top: var(--space-3); }
.auth-state .auth-link { margin-top: var(--space-1); }

.auth-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full);
}

.auth-state-icon .icon { width: 1.75rem; height: 1.75rem; }
.auth-state-icon--success { background: var(--brand-icon-green-bg); color: var(--brand-icon-green); }
.auth-state-icon--danger { background: var(--brand-danger-light); color: var(--brand-danger); }

.auth-centered .auth-card-header .auth-card-text { text-align: center; }

.form-group small.field-error { color: var(--brand-danger); }

.stat-card,
.kpi-card,
.summary-card,
.metrics-card-wrapper {
    --card-accent: var(--color-primary);
    border-top: 3px solid var(--card-accent);
}

.stat-card:has(.stat-card-icon--success),
.metrics-card-green { --card-accent: var(--brand-success); }
.stat-card:has(.stat-card-icon--danger) { --card-accent: var(--brand-danger); }
.stat-card:has(.stat-card-icon--accent),
.metrics-card-amber,
.metrics-card-indigo { --card-accent: var(--brand-secondary); }
.stat-card:has(.stat-card-icon--warning) { --card-accent: var(--brand-tertiary); }
.stat-card:has(.stat-card-icon--muted) { --card-accent: var(--brand-muted); }

.stat-card:has(.stat-card-value--success) { --card-accent: var(--brand-success); }
.stat-card:has(.stat-card-value--danger) { --card-accent: var(--brand-danger); }
.stat-card:has(.stat-card-value--accent) { --card-accent: var(--brand-secondary); }
.stat-card:has(.stat-card-value--warning) { --card-accent: var(--brand-tertiary); }
.stat-card:has(.stat-card-value--info) { --card-accent: var(--brand-blue-light); }
.stat-card:has(.stat-card-value--primary) { --card-accent: var(--color-primary); }

.kpi-card--danger { --card-accent: var(--brand-danger); }
.kpi-card--warning { --card-accent: var(--brand-tertiary); }
.stat-card--hero,
.kpi-card--hero { --card-accent: var(--brand-secondary); }

.brand-onsafe .kpi-card--blue { --card-accent: var(--onsafe-accent-blue); }
.brand-onsafe .kpi-card--danger { --card-accent: var(--brand-secondary); }
.brand-onsafe .kpi-card--warning { --card-accent: var(--brand-gradient-to); }

.stat-card-value,
.kpi-card-value,
.summary-card-value,
.metrics-card-value { font-family: var(--font-title); }

.stat-card-label,
.kpi-card-label,
.summary-card-label,
.metrics-card-label { color: var(--color-text-muted); }

.stat-card--hero .stat-card-label,
.kpi-card--hero .kpi-card-label { color: color-mix(in srgb, var(--brand-white) 80%, transparent); }

.metrics-grid,
.kpi-grid,
.summary-grid,
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.summary-grid--3,
.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 64rem) {
    .metrics-grid,
    .kpi-grid,
    .summary-grid,
    .summary-grid--3,
    .stat-grid,
    .stat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
    .metrics-grid,
    .kpi-grid,
    .summary-grid,
    .summary-grid--3,
    .stat-grid,
    .stat-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 48.0625rem) {
    .app-content { position: relative; }

    .app-header {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        padding: var(--space-4) var(--space-8) 0;
    }

    .brand-marca-blanca main > :is(.page-header, .dashboard-title-wrapper) { padding-right: 12rem; }
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.form-span-2 { grid-column: 1 / -1; }

.catalog-term {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}
.catalog-tiers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-border);
}
.catalog-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}
.catalog-row > .form-group { flex: 1 1 8rem; margin-bottom: 0; }
.catalog-row--new { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.catalog-row--settings { margin-bottom: var(--space-4); }
.catalog-row-actions { display: flex; gap: var(--space-2); align-items: center; }

.rate-matrix-grid { display: flex; flex-direction: column; gap: var(--space-2); overflow-x: auto; }
.rate-matrix-head,
.rate-matrix-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1.4fr) repeat(5, minmax(6rem, 1fr)) minmax(9rem, auto);
    gap: var(--space-2);
    align-items: center;
    min-width: 52rem;
}
.rate-matrix-head { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-semibold); }
.rate-matrix-term { display: flex; gap: var(--space-2); }
.rate-matrix-term input[type="number"] { max-width: 5rem; }
.rate-matrix-row input { width: 100%; }
.rate-matrix-row--new { padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }

@media (max-width: 48rem) {
    .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .catalog-tiers { padding-left: var(--space-2); }
}

.inv-props-span { grid-column: 1 / -1; }
.inv-props-span dd { word-break: break-all; }
.row-clickable { cursor: pointer; }
.filter-date { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.stat-grid--compact { margin-bottom: var(--space-4); }
/* Liquidaciones: pestañas como SpeiOutView.vue. */
.cell-check { width: 2.5rem; text-align: center; }
.cell-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-primary); cursor: pointer; }

.spei-pending-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.spei-pending-status { display: flex; align-items: center; gap: var(--space-2); }
.spei-pending-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--brand-secondary); }
.spei-pending-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.spei-bulk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0;
    margin-bottom: var(--space-4);
}
.spei-bulk-main { display: flex; gap: var(--space-4); padding: var(--space-6); border-right: 1px solid var(--color-border); }
.spei-bulk-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 4rem; height: 4rem; border-radius: 50%;
    background: var(--brand-icon-blue-bg); color: var(--brand-secondary);
}
.spei-bulk-icon .icon { width: 1.75rem; height: 1.75rem; }
.spei-bulk-title,
.spei-bulk-info-title { margin: 0 0 var(--space-2); color: var(--brand-secondary); font-size: var(--text-lg); }
.spei-bulk-text { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.spei-bulk-formats { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-muted); }
.spei-bulk-pick { display: inline-block; padding: var(--space-2) var(--space-6); font-weight: var(--font-semibold); color: var(--color-primary); cursor: pointer; }
.spei-bulk-pick:hover { text-decoration: underline; }
.spei-bulk-info { padding: var(--space-6); }
.spei-bulk-info-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); }
.spei-bulk-info-title .icon { width: 1.25rem; height: 1.25rem; color: var(--color-primary); }
.spei-bulk-info ul { margin: 0; padding-left: var(--space-5); color: var(--color-text-muted); line-height: 1.7; }

.spei-batch-card { position: relative; margin-bottom: var(--space-3); padding: var(--space-4) var(--space-5); }
.spei-batch-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-right: 2.5rem; }
.spei-batch-file-icon { color: var(--color-primary); }
.spei-batch-file-icon .icon { width: 1.5rem; height: 1.5rem; }
.spei-batch-card-title { display: flex; flex-direction: column; flex: 1 1 18rem; min-width: 0; }
.spei-batch-card-title strong { overflow-wrap: anywhere; }
.spei-batch-card-title span { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); }
.spei-batch-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn-accent-outline { border-color: var(--brand-secondary); color: var(--brand-secondary); }
.spei-batch-toggle {
    position: absolute; top: var(--space-4); right: var(--space-4);
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; list-style: none; cursor: pointer; color: var(--color-primary);
}
.spei-batch-toggle::-webkit-details-marker,
.spei-accordion-header::-webkit-details-marker { display: none; }
.spei-batch-toggle .icon,
.spei-accordion-arrow .icon { transform: rotate(90deg); transition: transform 0.15s ease; }
.spei-batch-details[open] > .spei-batch-toggle .icon,
.spei-accordion[open] .spei-accordion-arrow .icon { transform: rotate(-90deg); }
.spei-batch-details[open] { margin-top: var(--space-4); }

.spei-history-filter { padding: var(--space-4); }
.spei-history { display: flex; flex-direction: column; gap: var(--space-4); }
.spei-accordion { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.spei-accordion-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    padding: var(--space-4); list-style: none; cursor: pointer;
}
.spei-accordion-title { font-weight: var(--font-semibold); color: var(--color-primary); overflow-wrap: anywhere; }
.spei-accordion-arrow { margin-left: auto; color: var(--color-primary); }

@media (max-width: 48rem) {
    .spei-bulk { grid-template-columns: minmax(0, 1fr); }
    .spei-bulk-main { border-right: none; border-bottom: 1px solid var(--color-border); }
}

/* Buscador angosto con los filtros a la derecha, como UsersView.vue. */
.search-field--compact { flex: 0 1 26rem; }
@media (max-width: 40rem) {
    .search-field--compact { flex: 1 1 100%; }
}

/* Acción que no aplica a la fila: se ve, como en la app, pero apagada. */
.icon-btn:disabled,
.icon-btn:disabled:hover { background: transparent; opacity: 0.35; }

/* ==========================================================================
   Paridad visual con la app (sofinco_app, sabor onsafe).
   Cada valor sale de los estilos computados de la vista equivalente de la app
   (MainSideBar.vue, MainContentView.vue, AppCardPrimary.vue, AppDataTable.vue,
   AppButton.vue, SignInView.vue…). Va al final para ganar a las reglas base.
   ========================================================================== */

/* --- Contenedor y sidebar (MainSideBar.vue / MainContentView.vue) --- */
@media (width > 48rem) {
    /* La app estira el sidebar a toda la página; aquí sigue fijo al hacer
       scroll, pero la franja azul llega hasta el fondo igual que en la app. */
    .brand-onsafe .app-shell {
        background: linear-gradient(to right, var(--brand-primary) 16.25rem, var(--color-background) 16.25rem);
    }

    .brand-onsafe .app-sidebar {
        width: 16.25rem;
        padding: var(--space-6) var(--space-4);
        gap: 0;
    }

    /* La app no limita el ancho: el contenido llena la pantalla con 28px de margen. */
    .brand-onsafe .app-content main {
        max-width: none;
        margin: 0;
        padding: 1.75rem;
    }
}

.brand-onsafe .sidebar-brand--logo { padding: var(--space-1) 0 0; margin-bottom: var(--space-4); }
.brand-onsafe .sidebar-brand-logo { width: 5.5rem; }

.brand-onsafe .sidebar-user {
    gap: var(--space-3);
    margin: 0 calc(-1 * var(--space-4)) var(--space-4);
    padding: 0 1.625rem var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-white) 10%, transparent);
}

.brand-onsafe .sidebar-user-avatar { width: 2.375rem; height: 2.375rem; }
.brand-onsafe .sidebar-user-avatar .icon { width: 1.4375rem; height: 1.4375rem; }
.brand-onsafe .sidebar-user-name { font-size: var(--text-sm); line-height: 1.3; }

.brand-onsafe .sidebar-user-profile {
    margin-top: 3px;
    color: var(--brand-white);
    font-size: 0.8125rem;
    font-weight: var(--font-medium);
    line-height: 1.2;
}

.brand-onsafe .sidebar-user-profile:hover { color: var(--brand-white); text-decoration: underline; }

.brand-onsafe .sidebar-operator { gap: 0; margin-bottom: 1.25rem; }

.brand-onsafe .sidebar-operator-label {
    margin: 0 0 var(--space-2);
    padding: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: normal;
    color: color-mix(in srgb, var(--brand-white) 62%, transparent);
}

.brand-onsafe .sidebar-operator-box {
    min-height: 3.125rem;
    padding: var(--space-2-5) var(--space-3);
    border-color: color-mix(in srgb, var(--brand-white) 4%, transparent);
    border-radius: var(--space-2-5);
    background: color-mix(in srgb, var(--brand-white) 8%, transparent);
    line-height: 1.5rem;
}

.brand-onsafe .sidebar-operator-box .icon { width: 1.5rem; height: 1.5rem; color: var(--app-sidebar-role-icon); opacity: 1; }

.brand-onsafe .sidebar-menu {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: var(--space-3);
    /* El indicador naranja del activo sobresale 8px a la izquierda. */
    margin-left: calc(-1 * var(--space-2));
    padding-left: var(--space-2);
}

.brand-onsafe .sidebar-item {
    min-height: 2.875rem;
    padding: 0 var(--space-3);
    border-radius: var(--radius-xl);
    color: color-mix(in srgb, var(--brand-white) 76%, transparent);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: transform 0.18s ease, background 0.18s ease;
}

.brand-onsafe .sidebar-menu .icon { width: 1.375rem; height: 1.375rem; }

.brand-onsafe .sidebar-item:hover {
    background: var(--app-sidebar-hover);
    color: color-mix(in srgb, var(--brand-white) 76%, transparent);
    transform: translateY(-2px);
}

.brand-onsafe .sidebar-item--active,
.brand-onsafe .sidebar-item--active:hover,
.brand-onsafe .sidebar-submenu .sidebar-item--active {
    background: var(--brand-secondary);
    border-radius: var(--space-2-5);
    color: var(--brand-white);
    font-weight: var(--font-semibold);
    box-shadow: none;
    transform: none;
}

.brand-onsafe .sidebar-item--active::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-2));
    width: 4px;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--brand-secondary);
}

.brand-onsafe .sidebar-footer {
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: none;
}

.brand-onsafe .sidebar-status {
    padding: 0;
    font-size: 0.6875rem;
    color: color-mix(in srgb, var(--brand-white) 52%, transparent);
}

.brand-onsafe .sidebar-online { gap: 5px; color: var(--brand-success); }

.brand-onsafe .sidebar-online::before {
    width: 7px;
    height: 7px;
    background: var(--app-online);
    box-shadow: none;
}

.brand-onsafe .sidebar-logout {
    justify-content: center;
    min-height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: var(--space-2-5);
    background: color-mix(in srgb, var(--brand-white) 10%, transparent);
    font-family: var(--font-button);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.brand-onsafe .sidebar-logout:hover {
    background: var(--app-sidebar-hover);
    border: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-black) 15%, transparent);
}

/* --- Encabezado de página (h1 30px Outfit + subtítulo 16px) --- */
.brand-onsafe main > :is(.page-header, .dashboard-title-wrapper) { margin-bottom: 1.875rem; }
.brand-onsafe main > .dashboard-title-wrapper { margin-bottom: 1.5rem; }

.brand-onsafe main > :is(.page-header, .dashboard-title-wrapper) h1 {
    margin: 0;
    font-size: var(--text-3xl);
    line-height: 1.15;
    letter-spacing: normal;
}

.brand-onsafe main > :is(.page-header, .dashboard-title-wrapper) p {
    margin-top: 6px;
    font-size: var(--text-base);
    line-height: 1.4;
}

/* --- Botones (AppButton.vue: Arial bold, 44px, radio 16) --- */
.brand-onsafe .btn {
    min-height: 2.75rem;
    padding: 0 var(--space-8);
    border-radius: var(--radius-2xl);
    font-family: var(--font-button);
    font-weight: var(--font-bold);
    box-shadow: none;
}

.brand-onsafe .btn-sm { min-height: 2.25rem; padding: 0 var(--space-4); border-radius: var(--radius-xl); }

.brand-onsafe .btn-outline,
.brand-onsafe .btn-outline:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-primary);
}

.brand-onsafe .btn-outline:hover { border-color: var(--color-primary); }
.brand-onsafe .btn-success { background: var(--brand-success); }
.brand-onsafe .btn-danger { background: var(--brand-danger); }
.brand-onsafe .btn-outline.btn-success { background: var(--color-surface); color: var(--brand-success); border-color: var(--brand-success); }
.brand-onsafe .btn-outline.btn-danger { background: var(--color-surface); color: var(--brand-danger); border-color: var(--brand-danger); }

/* --- Campos (AppTextField: blanco, 40px, radio 8) --- */
.brand-onsafe :is(input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], input[type="date"], input[type="search"], input[type="tel"], select) {
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    background-color: var(--color-surface);
}

.brand-onsafe textarea { background-color: var(--color-surface); }
.brand-onsafe .search-field input[type="search"] { padding-left: 2.375rem; }
.brand-onsafe .search-field .icon { left: var(--space-3); }

/* --- Pestañas (UsersView.vue: 24px entre pestañas, subrayado naranja) --- */
.brand-onsafe .tabs { gap: var(--space-6); margin: var(--space-6) 0 var(--space-8); }

.brand-onsafe .tab {
    padding: 0 0 var(--space-3);
    font-weight: var(--font-medium);
}

.brand-onsafe .tab--active { font-weight: var(--font-medium); }

/* --- Tablas (AppDataTable.vue) --- */
.brand-onsafe .card-table {
    border-radius: var(--radius-xl);
    box-shadow: var(--app-table-shadow);
}

.brand-onsafe .table { font-size: var(--text-sm); }

.brand-onsafe .table th {
    padding: var(--space-3-5) var(--space-6);
    letter-spacing: normal;
}

.brand-onsafe .table td {
    padding: 1.125rem var(--space-6);
    color: var(--color-text);
}

.brand-onsafe .table-empty {
    padding: 2.25rem var(--space-6);
    color: var(--color-text);
    font-size: var(--text-sm);
}

/* --- Tarjetas de métricas (AppCardPrimary.vue) --- */
.brand-onsafe :is(.stat-card, .kpi-card, .summary-card, .metrics-card-wrapper) {
    border: 1px solid var(--app-card-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--app-card-shadow);
    transition: transform 0.25s, box-shadow 0.25s;
}

.brand-onsafe :is(.stat-card, .kpi-card, .summary-card, .metrics-card-wrapper):hover {
    transform: translateY(-2px);
    box-shadow: var(--app-card-shadow-hover);
}

.brand-onsafe :is(.stat-card-label, .kpi-card-label, .summary-card-label, .metrics-card-label) {
    color: var(--app-card-label);
    font-size: 0.8125rem;
    font-weight: var(--font-medium);
    line-height: 1.4;
}

.brand-onsafe :is(.stat-card-value, .kpi-card-value, .summary-card-value, .metrics-card-value) {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: 1.2;
    letter-spacing: normal;
}

.brand-onsafe .stat-grid { gap: var(--space-6); margin-bottom: var(--space-6); }

.brand-onsafe .stat-card {
    align-items: flex-start;
    min-height: 8.375rem;
    padding: var(--space-6);
}

.brand-onsafe .stat-card-body { gap: 0; }
.brand-onsafe .stat-card-body .stat-card-value { margin-top: var(--space-2-5); }
.brand-onsafe .stat-card--lead .stat-card-body .stat-card-value { margin-top: var(--space-1); }
.brand-onsafe .stat-card--lead { align-items: center; gap: 1.125rem; }
.brand-onsafe .stat-card-hint { margin-top: 6px; color: var(--app-card-hint); font-size: var(--text-xs); }

.brand-onsafe .stat-card-icon { width: 2.875rem; height: 2.875rem; }
.brand-onsafe .stat-card--lead .stat-card-icon { width: var(--space-16); height: var(--space-16); }
.brand-onsafe .stat-card-icon .icon { width: 1.625rem; height: 1.625rem; }
.brand-onsafe .stat-card--lead .stat-card-icon .icon { width: 2.125rem; height: 2.125rem; }
.brand-onsafe .stat-card-icon--blue { background: var(--app-icon-soft); color: var(--app-icon-blue); }

/* Usuarios y Roles: etiqueta en negrita y valor 26px (UsersView.vue). */
.brand-onsafe .stat-grid--titled .stat-card {
    min-height: 7rem;
    gap: var(--space-4);
    border-color: var(--app-summary-border);
    box-shadow: none;
}

.brand-onsafe .stat-grid--titled .stat-card:hover { transform: none; box-shadow: none; }
.brand-onsafe .stat-grid--titled .stat-card-label { color: var(--color-text); font-size: 0.9375rem; font-weight: var(--font-bold); }
.brand-onsafe .stat-grid--titled .stat-card-value { margin-top: 0; font-size: 1.625rem; font-weight: 800; line-height: 1.4; }
.brand-onsafe .stat-grid--titled .stat-card-value:not(.stat-card-value--success) { color: var(--color-primary); }
.brand-onsafe .stat-grid--titled .stat-card-hint { margin-top: 0; color: var(--color-text-muted); font-size: 0.8125rem; }
.brand-onsafe .stat-grid--titled .stat-card-icon { width: 3.5rem; height: 3.5rem; }
.brand-onsafe .stat-grid--titled .stat-card-icon .icon { width: 1.625rem; height: 1.625rem; }
.brand-onsafe .stat-grid--titled .stat-card-icon--blue { background: var(--app-summary-icon-bg); color: var(--color-primary); }

/* Dashboard (DashboardView.vue): tarjeta oscura + barra de acento a la izquierda. */
.brand-onsafe .kpi-grid { gap: 1.375rem; margin-bottom: 1.375rem; }

.brand-onsafe .kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 8.75rem;
    padding: var(--space-6);
    border-radius: 0.875rem;
}

.brand-onsafe .kpi-card:not(.kpi-card--hero)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--kpi-line);
}

.brand-onsafe .kpi-card--hero {
    align-self: start;
    background: var(--brand-dashboard-navy);
    border-color: var(--app-card-border);
    box-shadow: var(--app-card-shadow);
}

.brand-onsafe .kpi-card--hero :is(.kpi-card-label, .kpi-card-note) { color: var(--app-hero-text); }
.brand-onsafe .kpi-card--hero .kpi-card-note { margin-top: var(--space-5); font-weight: var(--font-medium); }
.brand-onsafe .kpi-card--hero .kpi-card-value { color: var(--brand-white); }

.brand-onsafe .kpi-card-body { gap: 0; }

/* Etiqueta y valor a la izquierda del icono; la nota ocupa todo el ancho. */
.brand-onsafe .kpi-card:not(.kpi-card--hero) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    gap: 0 var(--space-3);
}

.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-body { display: contents; }
.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-label { grid-area: 1 / 1; }
.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-value { grid-area: 2 / 1; }
.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-icon { grid-area: 1 / 2 / 3 / 3; }
.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-note { grid-area: 3 / 1 / 4 / 3; align-self: end; }
.brand-onsafe .kpi-card-value { margin-top: var(--space-2-5); color: var(--app-card-ink); }

.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-note {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    gap: 6px;
    border-top-color: var(--app-card-divider);
    color: var(--kpi-line);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.brand-onsafe .kpi-card:not(.kpi-card--hero) .kpi-card-note::before { width: var(--space-2); height: var(--space-2); }

.brand-onsafe .kpi-card-icon {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: var(--radius-xl);
    background: var(--brand-icon-blue-bg);
    color: var(--app-icon-blue);
}

.brand-onsafe .kpi-card-icon .icon { width: 2.25rem; height: 2.25rem; }

.brand-onsafe .kpi-card--blue { --kpi-line: var(--app-accent-blue); }
.brand-onsafe .kpi-card--danger { --kpi-line: var(--app-accent-orange); }
.brand-onsafe .kpi-card--danger .kpi-card-value { color: var(--app-accent-orange); }
.brand-onsafe .kpi-card--danger .kpi-card-icon { background: var(--app-icon-soft); color: var(--app-icon-blue); }
.brand-onsafe .kpi-card--warning { --kpi-line: var(--app-accent-amber); }
.brand-onsafe .kpi-card--warning .kpi-card-value { color: var(--app-accent-blue); }
.brand-onsafe .kpi-card--warning .kpi-card-icon { background: var(--app-amber-soft); color: var(--app-icon-blue); }
.brand-onsafe .kpi-card--danger .kpi-card-note,
.brand-onsafe .kpi-card--warning .kpi-card-note { color: var(--kpi-line); }

.brand-onsafe .summary-grid { gap: 1.375rem; margin-bottom: var(--space-6); }

.brand-onsafe .summary-card {
    min-height: 9.375rem;
    gap: 1.125rem;
    padding: 1.375rem;
    border-radius: 0.875rem;
}

.brand-onsafe .summary-card-label { color: var(--color-text-muted); }
.brand-onsafe .summary-card-value { margin-top: var(--space-1); color: var(--app-card-ink); }
.brand-onsafe .summary-card-footer { margin-top: 6px; }
.brand-onsafe .summary-card-note { color: var(--app-card-hint); font-size: var(--text-xs); }
.brand-onsafe .summary-card-icon { width: var(--space-16); height: var(--space-16); background: var(--app-icon-soft); color: var(--app-icon-blue); }
.brand-onsafe .summary-card-icon .icon { width: var(--space-8); height: var(--space-8); }
.brand-onsafe .summary-card-link { color: var(--app-link-blue); font-weight: var(--font-semibold); }

.brand-onsafe .status-panel {
    padding: var(--space-6);
    border-color: var(--app-card-border);
    border-radius: 0.875rem;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-black) 5%, transparent);
}

.brand-onsafe .status-panel-header h3 { font-size: var(--text-lg); letter-spacing: normal; }
.brand-onsafe .status-panel-link { color: var(--app-link-blue); font-size: var(--text-sm); font-weight: var(--font-normal); }
.brand-onsafe .status-row { min-height: 2.75rem; padding: 0 var(--space-4); font-size: var(--text-base); }
.brand-onsafe .status-row + .status-row { margin-top: var(--space-3); }
.brand-onsafe .status-row-value { font-size: var(--text-lg); }
.brand-onsafe .status-row--success .status-row-value { color: var(--brand-success); }

/* --- Login (SignInView.vue): botón azul y enlace en la etiqueta; el logo onsafe se queda --- */
.brand-onsafe .auth-centered { gap: 1.375rem; }

.brand-onsafe .auth-centered-tagline {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--brand-white) 72%, transparent);
}

.brand-onsafe.auth-centered .auth-main-inner,
.brand-onsafe .auth-centered .auth-main-inner { max-width: 21.875rem; }

.brand-onsafe .auth-centered .auth-card-wrapper {
    padding: 1.625rem;
    box-shadow: var(--app-login-shadow);
}

.brand-onsafe .auth-centered .auth-card-header { margin-bottom: 1.25rem; }
.brand-onsafe .auth-centered .auth-card-title { margin: 0; line-height: 1.1; letter-spacing: normal; }
.brand-onsafe .auth-centered .form-stack > * + * { margin-top: var(--space-4); }
.brand-onsafe .auth-centered .form-group { gap: 6px; margin-bottom: 0; }

.brand-onsafe .auth-centered .auth-card-wrapper label {
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
}

.brand-onsafe .auth-centered .auth-card-wrapper input { font-size: 0.8125rem; }

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.brand-onsafe .auth-label-row .auth-forgot-link {
    color: var(--brand-secondary);
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
}

.brand-onsafe .auth-centered .btn-block {
    min-height: 2.375rem;
    margin-top: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--brand-primary);
    font-size: var(--text-xs);
}

.brand-onsafe .auth-centered .btn-block:hover { background: var(--brand-secondary); }

.brand-onsafe .auth-centered .auth-footer {
    margin-top: var(--space-4);
    color: color-mix(in srgb, var(--brand-white) 36%, transparent);
}

/* Dispersiones (SettlementsView.vue): títulos de tarjeta en negrita. */
.brand-onsafe .stat-grid--bold-labels .stat-card { min-height: 6.125rem; padding: var(--space-6); }
.brand-onsafe .stat-grid--bold-labels .stat-card-label { color: var(--color-text); font-size: 0.8125rem; font-weight: var(--font-bold); }
.brand-onsafe .stat-grid--bold-labels .stat-card-value { font-size: var(--text-2xl); }
.brand-onsafe .stat-grid--bold-labels .stat-card-icon { width: var(--space-12); height: var(--space-12); }
.brand-onsafe .stat-grid--bold-labels .stat-card-icon .icon { width: var(--space-6); height: var(--space-6); }

/* Liquidaciones (SpeiOutView.vue): franja amarilla de pendientes. */
.brand-onsafe .card-table:has(> .spei-pending-strip) { border-color: var(--app-pending-border); }

.brand-onsafe .spei-pending-strip {
    min-height: 3.625rem;
    padding: 0 var(--space-6);
    background: var(--app-pending-bg);
    border-bottom-color: var(--app-pending-border);
    color: var(--app-pending-text);
    font-size: 0.9375rem;
}

.brand-onsafe .spei-pending-dot { width: var(--space-2); height: var(--space-2); background: var(--brand-tertiary); }
.brand-onsafe .spei-pending-actions .cell-muted { font-size: 0.8125rem; }

/* Inversiones: tabla de muchas columnas, celdas más juntas para no partirse. */
.brand-onsafe .table--navy :is(th, td) { padding-left: var(--space-3); padding-right: var(--space-3); white-space: nowrap; }

/* Filtros dentro de la tarjeta de tabla: el botón a la altura de los campos. */
.brand-onsafe :is(.table-toolbar, .filter-bar) .btn { min-height: 2.5rem; }

/* Cuentas (AccountsView.vue): tarjetas compactas y tabla con estado. */
.brand-onsafe .stat-grid--accounts { gap: var(--space-4); }

.brand-onsafe .stat-grid--accounts .stat-card {
    align-items: center;
    min-height: 5.625rem;
    padding: 2.1875rem;
    border-color: var(--app-summary-border);
    box-shadow: none;
}

.brand-onsafe .stat-grid--accounts .stat-card:hover { transform: none; box-shadow: none; }
.brand-onsafe .stat-grid--accounts .stat-card-body { position: relative; z-index: 1; gap: 2px; }
.brand-onsafe .stat-grid--accounts .stat-card-label { color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }

.brand-onsafe .stat-grid--accounts .stat-card-body .stat-card-value {
    margin-top: var(--space-1);
    color: var(--color-text);
    font-size: var(--text-2xl);
    font-weight: 800;
}

.brand-onsafe .stat-grid--accounts .stat-card-icon { width: var(--space-12); height: var(--space-12); background: var(--app-accounts-icon-bg); color: var(--app-icon-blue); }
.brand-onsafe .stat-grid--accounts .stat-card-icon .icon { width: 1.375rem; height: 1.375rem; }
.brand-onsafe .stat-grid--accounts .stat-card-icon--accent { background: color-mix(in srgb, var(--brand-secondary) 12%, var(--brand-white)); color: var(--brand-secondary); }

.brand-onsafe .stat-grid--accounts .stat-card--hero { background: var(--brand-primary); border-color: var(--brand-primary); }
.brand-onsafe .stat-grid--accounts .stat-card--hero::after { content: none; }
.brand-onsafe .stat-grid--accounts .stat-card--hero .stat-card-label { color: color-mix(in srgb, var(--brand-white) 85%, transparent); }
.brand-onsafe .stat-grid--accounts .stat-card--hero .stat-card-body .stat-card-value { color: var(--brand-white); }

/* El icono de la tarjeta azul es grande, traslúcido y sobresale del borde. */
.brand-onsafe .stat-grid--accounts .stat-card--hero .stat-card-icon {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -1.25rem;
    width: 6.25rem;
    height: 6.25rem;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--brand-white) 12%, transparent);
    color: var(--brand-white);
}

.brand-onsafe .stat-grid--accounts .stat-card--hero .stat-card-icon .icon { width: 2.875rem; height: 2.875rem; }

.brand-onsafe .account-number { color: var(--color-text); font-size: var(--text-base); font-weight: var(--font-bold); white-space: nowrap; }
.brand-onsafe .account-client a { color: var(--color-text); font-weight: var(--font-normal); }
.brand-onsafe .account-client a:hover { color: var(--color-link-hover); }
.brand-onsafe .account-amount { font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; }
.brand-onsafe .account-total { color: var(--color-text); font-size: var(--text-xl); font-weight: var(--font-bold); white-space: nowrap; }
.brand-onsafe .cell-center { text-align: center; }

.account-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    padding: 0 var(--space-2-5);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.account-badge--success { background: var(--brand-icon-green-bg); color: var(--app-badge-success-text); }
.account-badge--warning { background: var(--app-badge-warning-bg); color: var(--app-badge-warning-text); }
.account-badge--danger { background: var(--app-badge-danger-bg); color: var(--app-badge-danger-text); }
.brand-onsafe .table td.account-amount.text-success { color: var(--brand-success); }
.brand-onsafe .table td.account-amount.text-accent { color: var(--brand-secondary); }

.brand-onsafe .sidebar-user-avatar .app-icon { width: 1.4375rem; height: 1.4375rem; }

/* Tonos de AppIcon.vue: azul, verde, naranja, rojo y gris, con su fondo suave. */
.brand-onsafe .stat-card-icon--blue { background: var(--app-icon-soft); color: var(--app-icon-blue); }
.brand-onsafe .stat-card-icon--success { background: var(--app-tone-success-bg); color: var(--brand-success); }
.brand-onsafe .stat-card-icon--warning { background: var(--app-tone-warning-bg); color: var(--app-tone-warning); }
.brand-onsafe .stat-card-icon--danger { background: var(--app-tone-danger-bg); color: var(--app-badge-danger-text); }
.brand-onsafe .stat-card-icon--muted { background: var(--brand-gray-light); color: var(--app-tone-muted); }
.brand-onsafe .kpi-card .kpi-card-icon--warning { background: var(--app-amber-soft); color: var(--app-tone-warning); }
.brand-onsafe .btn-outline .app-icon { color: var(--app-icon-blue); }

/* ==========================================================================
   Inversiones > Tabla de Tasas (InvestmentsView.vue + InvestmentRateMatrixTable.vue)
   ========================================================================== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-3);
    color: var(--app-slate-500);
    font-size: 0.8125rem;
}

.breadcrumb-sep { color: var(--app-slate-400); font-size: 0.6875rem; }
.breadcrumb-current { color: var(--app-slate-900); font-weight: var(--font-semibold); }
.brand-onsafe main > .breadcrumb + .page-header { margin-bottom: var(--space-6); }

.section-title { margin: var(--space-8) 0 var(--space-4); font-size: var(--text-lg); }

/* Tarjetas compactas con el icono a la izquierda. */
.brand-onsafe .stat-grid--investments { gap: var(--space-4); margin-bottom: 1.75rem; }

.brand-onsafe .stat-grid--investments .stat-card {
    min-height: 0;
    gap: var(--space-4);
    padding: 1.25rem 1.375rem;
    border-color: var(--app-slate-200);
    border-radius: var(--radius-2xl);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 3%, transparent);
}

.brand-onsafe .stat-grid--investments .stat-card:hover { transform: none; box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 3%, transparent); }
.brand-onsafe .stat-grid--investments .stat-card-body { gap: 2px; min-width: 0; }
.brand-onsafe .stat-grid--investments .stat-card-label { color: var(--app-slate-500); font-size: 0.8125rem; font-weight: var(--font-medium); }

.brand-onsafe .stat-grid--investments .stat-card-body .stat-card-value {
    margin-top: 0;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.brand-onsafe .stat-grid--investments .stat-card-value:not([class*="--success"]):not([class*="--accent"]) { color: var(--app-slate-900); }
.brand-onsafe .stat-grid--investments .stat-card-icon { width: var(--space-12); height: var(--space-12); background: var(--app-accounts-icon-bg); }
.brand-onsafe .stat-grid--investments .stat-card-icon .icon { width: 1.375rem; height: 1.375rem; }

.brand-onsafe .tabs--investments { gap: 1.75rem; margin: 0 0 1.375rem; border-bottom-color: var(--app-slate-200); }

.brand-onsafe .tabs--investments .tab {
    min-width: 5.625rem;
    height: 2.75rem;
    justify-content: center;
    padding: 0 var(--space-1);
    border-bottom-width: 3px;
    color: var(--app-slate-500);
    font-size: 0.9375rem;
    font-weight: var(--font-semibold);
}

.brand-onsafe .tabs--investments .tab:hover { color: var(--app-slate-900); }
.brand-onsafe .tabs--investments .tab--active { color: var(--app-slate-900); font-weight: var(--font-bold); }

/* Botón "Reportes" blanco con borde. */
.brand-onsafe .page-header-actions .btn-outline {
    padding: 0 var(--space-4);
    border-color: var(--app-slate-300);
    border-radius: var(--space-2-5);
    color: var(--app-slate-700);
    font-family: var(--font-sans);
    font-weight: var(--font-semibold);
}

.brand-onsafe .page-header-actions .btn-outline:hover { background: var(--app-slate-50); border-color: var(--app-slate-400); color: var(--app-slate-900); }
.brand-onsafe .page-header-actions .btn-outline .app-icon { width: 1.0625rem; height: 1.0625rem; }

/* Matriz */
.rate-table { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }

.rate-table-settings {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: var(--space-6);
    border: 1px solid var(--app-slate-200);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 4%, transparent);
}

.rate-table-settings-header { padding-bottom: var(--space-3); border-bottom: 1px solid var(--app-slate-100); }

.rate-table-settings-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--app-rate-navy);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: var(--font-bold);
    letter-spacing: normal;
}

.rate-table-settings-title .app-icon { width: 1.5rem; height: 1.5rem; color: var(--app-icon-blue); }
.rate-table-settings-desc { margin: var(--space-1) 0 0; color: var(--app-slate-500); font-size: 0.8125rem; }

.rate-table-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
    gap: var(--space-6);
    align-items: end;
}

.rate-table-field { display: flex; flex-direction: column; gap: var(--space-2); }
.rate-table-label { color: var(--app-slate-700); font-size: 0.8125rem; font-weight: var(--font-bold); }

.rate-table-base { display: flex; gap: var(--space-1); padding: 3px; border-radius: var(--space-2-5); background: var(--app-slate-100); }
.rate-table-base-option { flex: 1; margin: 0; cursor: pointer; }
.rate-table-base-option input { position: absolute; opacity: 0; pointer-events: none; }

.rate-table-base-option span {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--app-slate-500);
    font-family: var(--font-button);
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
    text-align: center;
    transition: all 0.2s ease;
}

.rate-table-base-option input:checked + span { background: var(--app-rate-navy); color: var(--brand-white); box-shadow: 0 2px 6px var(--app-rate-navy-shadow); }
.rate-table-base-option input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.rate-table-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    border: 1.5px solid var(--app-slate-300);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--app-rate-navy);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rate-table-input:focus-within { border-color: var(--app-rate-navy); box-shadow: 0 0 0 3px var(--app-rate-navy-focus); }

.brand-onsafe .rate-table-input input[type="number"],
.rate-table-input input[type="number"] {
    width: 3.75rem;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--app-rate-navy);
    font-size: 0.9375rem;
    font-weight: var(--font-bold);
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
}

.rate-table-input input::-webkit-outer-spin-button,
.rate-table-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rate-table-input span { margin-left: 2px; }
.rate-table-input--wide { display: flex; }
.brand-onsafe .rate-table-input--wide input[type="number"] { width: 3.75rem; }

.rate-table-switch { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 6px 0; cursor: pointer; user-select: none; }
.rate-table-switch input { position: absolute; opacity: 0; pointer-events: none; }
.rate-table-switch-slider { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: 1.25rem; background: var(--app-slate-300); transition: background-color 0.3s ease; }

.rate-table-switch-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full);
    background: var(--brand-white);
    transition: transform 0.3s ease;
}

.rate-table-switch input:checked + .rate-table-switch-slider { background: var(--brand-secondary); }
.rate-table-switch input:checked + .rate-table-switch-slider::before { transform: translateX(1.25rem); }
.rate-table-switch input:focus-visible + .rate-table-switch-slider { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rate-table-switch-on,
.rate-table-switch-off { color: var(--app-slate-700); font-size: 0.8125rem; font-weight: var(--font-semibold); }
.rate-table-switch input:checked ~ .rate-table-switch-off,
.rate-table-switch input:not(:checked) ~ .rate-table-switch-on { display: none; }

.rate-table-alert { padding: var(--space-3) 1.125rem; border-radius: var(--space-2-5); font-size: var(--text-sm); font-weight: var(--font-medium); }
.rate-table-alert--success { border: 1px solid var(--app-alert-success-border); background: var(--app-alert-success-bg); color: var(--app-alert-success-text); }
.rate-table-alert--error { border: 1px solid var(--app-alert-error-border); background: var(--brand-danger-light); color: var(--app-alert-error-text); }

.rate-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-radius: 0.875rem;
    background: var(--color-surface);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 4%, transparent);
}

.rate-table-status { font-size: var(--text-sm); font-weight: var(--font-medium); }
.rate-table-status-clean { color: var(--app-status-clean); }
.rate-table-status-dirty { display: none; color: var(--app-status-dirty); }
.rate-table--dirty .rate-table-status-clean { display: none; }
.rate-table--dirty .rate-table-status-dirty { display: inline; }
.rate-table-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.brand-onsafe .rate-table .btn-soft,
.brand-onsafe .rate-table .btn-soft:hover { border: none; background: var(--app-gray-100); color: var(--app-gray-700); }
.brand-onsafe .rate-table .btn-soft:hover { background: var(--app-gray-200); }
.brand-onsafe .rate-table .btn[disabled] { background: var(--brand-secondary); opacity: 0.7; }

.rate-table-add {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 1.25rem;
    border: 1px solid var(--app-slate-200);
    border-radius: 0.875rem;
    background: var(--app-slate-50);
}

.rate-table-add[hidden] { display: none; }
.rate-table-add-title { margin: 0; color: var(--app-slate-800); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-semibold); letter-spacing: normal; }
.rate-table-add-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.125rem, 1fr)); gap: 0.875rem; }
.rate-table-add-field { display: flex; flex-direction: column; gap: 6px; }
.rate-table-add-field label { color: var(--app-slate-600); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.brand-onsafe .rate-table-add-field input { min-height: 0; padding: var(--space-2) var(--space-3); border-color: var(--app-slate-300); }
.rate-table-add-actions { display: flex; justify-content: flex-end; gap: var(--space-2-5); }

.rate-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 5%, transparent);
}

.rate-table-matrix { width: 100%; border-collapse: collapse; text-align: center; }
.rate-table-matrix thead tr { background: var(--app-rate-navy); color: var(--brand-white); }

.rate-table-matrix th {
    padding: var(--space-4) 0.875rem;
    border-right: 1px solid color-mix(in srgb, var(--brand-white) 15%, transparent);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.rate-table-th-term { width: 8.75rem; }
.rate-table-th-actions { width: 5rem; }
.rate-table-matrix tbody tr { transition: background-color 0.15s ease; }
.rate-table-matrix tbody tr:nth-child(odd) { background: var(--app-rate-row-even); }
.rate-table-matrix tbody tr:nth-child(even) { background: var(--app-rate-row-odd); }
.rate-table-matrix tbody tr:hover { background: var(--app-rate-row-hover); }

.rate-table-matrix td {
    padding: var(--space-3) 0.875rem;
    border-right: 1px solid var(--app-slate-200);
    border-bottom: 1px solid var(--app-slate-200);
    vertical-align: middle;
}

.rate-table-term { color: var(--app-rate-navy); font-size: 0.9375rem; font-weight: var(--font-bold); }

.rate-table-delete {
    min-height: 0;
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--app-badge-danger-text);
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.rate-table-delete:hover { opacity: 1; transform: scale(1.15); background: var(--app-badge-danger-bg); }
.rate-table-delete .app-icon { width: var(--space-6); height: var(--space-6); }
.rate-table-empty { padding: var(--space-8); color: var(--app-slate-500); font-size: var(--text-sm); }

/* ==========================================================================
   Configuración (ConfigurationsView.vue)
   ========================================================================== */
.settings-content { display: flex; flex-direction: column; gap: var(--space-6); }

.settings-app-card {
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--app-table-shadow);
}

.settings-app-card-title { margin: 0 0 var(--space-2); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 800; letter-spacing: normal; }
.settings-app-card-subtitle { margin: 0 0 var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); }

.settings-app-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.settings-app-row--last { border-bottom: none; }
.settings-app-row-text { flex: 1; padding-right: var(--space-6); }
.settings-app-row-title { margin: 0 0 var(--space-1); color: var(--color-text); font-size: 0.9375rem; font-weight: var(--font-bold); }
.settings-app-row-subtitle { margin: 0; color: var(--color-text-muted); font-size: 0.8125rem; }

.settings-app-toggle { position: relative; display: inline-block; flex: none; width: 2.75rem; height: 1.5rem; margin: 0; }
.settings-app-toggle input { position: absolute; width: 0; height: 0; opacity: 0; }

.settings-app-slider {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: var(--color-border);
    cursor: pointer;
    transition: 0.2s;
}

.settings-app-slider::before {
    content: "";
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full);
    background: var(--brand-white);
    transition: 0.2s;
}

.settings-app-toggle input:checked + .settings-app-slider { background: var(--brand-secondary); }
.settings-app-toggle input:checked + .settings-app-slider::before { transform: translateX(1.25rem); }
.settings-app-toggle input:focus-visible + .settings-app-slider { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.settings-app-toggle input:disabled + .settings-app-slider { cursor: not-allowed; }

.settings-app-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.settings-app-section:last-child { padding-bottom: 0; border-bottom: none; }
.settings-app-section--off { opacity: 0.5; pointer-events: none; }
.settings-app-section-label { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.5px; }
.settings-app-hint { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: 0.8125rem; }

.settings-app-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--app-config-schedule-bg);
}

.settings-app-schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: var(--space-4); }
.settings-app-field { display: flex; flex-direction: column; gap: 6px; }
.settings-app-field label { color: var(--app-config-field-label); font-size: 0.8125rem; font-weight: var(--font-bold); }

.brand-onsafe .settings-app-field select,
.settings-app-field select {
    height: 2.625rem;
    min-height: 0;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    font-weight: var(--font-medium);
}

.settings-app-field select:disabled { background-color: var(--color-background); color: var(--app-config-disabled-text); cursor: not-allowed; }

.settings-app-schedule-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-3-5);
    border: 1px solid var(--app-config-error-border);
    border-radius: var(--radius-lg);
    background: var(--app-config-error-bg);
    color: var(--app-config-error-text);
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
}

.settings-app-schedule-error[hidden],
.settings-app-schedule-summary[hidden] { display: none; }
.settings-app-schedule-error .app-icon { width: var(--space-4); height: var(--space-4); color: var(--app-tone-warning); }

.settings-app-schedule-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--app-config-summary-border);
    border-radius: var(--radius-lg);
    background: var(--app-config-summary-bg);
}

.settings-app-summary-text { margin: 0; color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.settings-app-hours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.settings-app-hours-label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--font-bold); }
.settings-app-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.settings-app-chip {
    padding: 2px var(--space-2-5);
    border: 1px solid var(--color-primary);
    border-radius: var(--space-3);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}

.settings-app-schedule-actions { display: flex; justify-content: flex-end; padding-top: var(--space-1); }
.brand-onsafe .settings-app-schedule-actions .btn,
.brand-onsafe .settings-app-list-add .btn { min-height: 2.5rem; margin: 0; }
.brand-onsafe .settings-app-card .btn:disabled { background: var(--brand-secondary); opacity: 0.4; }

.settings-app-list { display: flex; flex-direction: column; gap: var(--space-3); }

.settings-app-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: var(--space-2-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.settings-app-remove {
    min-height: 0;
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    box-shadow: none;
    color: var(--color-primary);
    font-family: var(--font-button);
    font-size: 0.8125rem;
    font-weight: var(--font-bold);
}

.settings-app-remove:hover { background: var(--brand-danger-light); color: var(--color-primary); }

.settings-app-list-item { position: relative; flex-wrap: wrap; gap: var(--space-2); }
.settings-app-list-email { min-width: 0; overflow-wrap: anywhere; }
.settings-app-item-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.settings-app-delete-form { margin: 0; }
.settings-app-edit summary { list-style: none; cursor: pointer; }
.settings-app-edit summary::-webkit-details-marker { display: none; }
.settings-app-edit-cancel,
.settings-app-edit[open] .settings-app-edit-open { display: none; }
.settings-app-edit[open] .settings-app-edit-cancel { display: inline; }

/* Editing: the field takes the row under the email, "Cancelar" stays on the first row. */
.settings-app-list-item:has(.settings-app-edit[open]) .settings-app-delete-form { display: none; }
.settings-app-list-item:has(.settings-app-edit[open]) .settings-app-item-actions { flex: 1 1 100%; margin-left: 0; }
.settings-app-edit[open] { flex: 1; }
.settings-app-edit[open] summary { position: absolute; top: var(--space-1-5); right: var(--space-2); }
.settings-app-list-item:has(.settings-app-edit[open]) .settings-app-list-email { padding-right: 6rem; }

.settings-app-edit-form {
    display: flex;
    gap: var(--space-2);
    margin: 0;
}

.settings-app-edit-form input[type="email"] { flex: 1; min-width: 0; }
.settings-app-edit-form .btn { margin: 0; }

.settings-app-next {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    color: var(--color-text);
    font-size: 0.8125rem;
}

.settings-app-next .icon { width: 1rem; height: 1rem; color: var(--color-primary); }
.settings-app-list-add { display: flex; gap: var(--space-3); margin: 0; }
.settings-app-list-add > * { flex: 1; }

.brand-onsafe .settings-app-list-add input[type="email"] {
    padding: var(--space-2-5) var(--space-4);
    background-color: var(--color-background);
}

.brand-onsafe .settings-app-list-add input[type="email"]:focus { background-color: var(--color-surface); border-color: var(--color-primary); box-shadow: none; }

/* Aviso de resultado (AppConfirmDialog.vue): centrado, 400px, botón Aceptar. */
.settings-app-dialog .confirm-dialog-body { padding: 2.5rem; text-align: center; }
.settings-app-dialog .confirm-dialog-title { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 800; }
.settings-app-dialog .confirm-dialog-actions { justify-content: center; }

@media (max-width: 40rem) {
    .settings-app-card { padding: var(--space-5); }
    .settings-app-list-add { flex-direction: column; }
}
.settings-general-card { margin-top: var(--space-6); }

.batch-upload-format {
    background: var(--brand-gray-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.batch-upload-format pre { margin: var(--space-2) 0 0; overflow-x: auto; }
.batch-upload-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
}
.detail-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.drawer-hint {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.table--centered th,
.table--centered td {
    text-align: center;
}

/* Dispersiones > Tiempo real (SettlementsView.vue, pestaña REAL_TIME). */
.stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .stat-grid--2 { grid-template-columns: 1fr; } }
.live-panel { display: grid; gap: var(--space-4); }
.live-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.live-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 600; }
.live-status--on { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }
.live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.live-status--on .live-dot { animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .live-status--on .live-dot { animation: none; } }
.live-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; }
.live-empty-icon { color: var(--color-primary); }
.live-empty-icon .app-icon { width: 2.5rem; height: 2.5rem; }
.live-empty h3 { margin: 0; }
.live-empty p { margin: 0; max-width: 28rem; color: var(--color-text-muted); font-size: 0.875rem; }
.tab-live-dot { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; border-radius: 50%; background: var(--color-success); vertical-align: middle; }

/* Página del filtro de captura (web.SafeInputs) para formularios enviados sin HTMX. */
.input-reject-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); background: var(--color-bg, var(--brand-surface)); }
.input-reject-card { display: grid; gap: var(--space-3); max-width: 32rem; padding: var(--space-8); }
.input-reject-card h1 { margin: 0; font-family: var(--font-title); font-size: 1.375rem; color: var(--color-primary); }
.input-reject-card p { margin: 0; }
.input-reject-card .btn { justify-self: start; }

/* Dispersiones > Captura manual (SettlementsManualCaptureDrawer.vue). */
.manual-capture-form { display: flex; flex-direction: column; gap: var(--space-3); }
.manual-capture-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-height: 22rem; overflow-y: auto; }
.manual-capture-row { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.manual-capture-row:has(.manual-capture-check:checked) { border-color: var(--color-primary); }
.manual-capture-row-main { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; margin: 0; }
.manual-capture-row-info { display: grid; flex: 1; min-width: 0; }
.manual-capture-row-info strong, .manual-capture-row-info span { overflow-wrap: anywhere; }
.manual-capture-amount { display: none; }
.manual-capture-row:has(.manual-capture-check:checked) .manual-capture-amount { display: block; }
.manual-capture-empty { padding: var(--space-4); text-align: center; color: var(--color-text-muted); }
.manual-capture-summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.manual-capture-error { margin: 0; color: var(--color-error); font-size: 0.875rem; font-weight: 700; }

/* Paneles de formulario como la app (UsersSideDrawer.vue, AppTextField, AppFieldTooltip). */
.app-form-drawer .drawer-header h2 { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; }
.app-form { display: flex; flex-direction: column; gap: var(--space-5, 1.25rem); }
.app-form-fields { display: flex; flex-direction: column; gap: var(--space-5, 1.25rem); margin: 0; padding: 0; border: 0; min-width: 0; }
.app-field { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.app-field > label { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); }
.app-field input, .app-field select { height: 3.125rem; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--brand-white); font-size: 0.9375rem; }
.app-field input:focus, .app-field select:focus { outline: none; border-color: var(--color-primary); }
.app-field input:disabled, .app-field select:disabled { background: var(--color-bg, var(--brand-surface)); color: var(--color-text-muted); cursor: not-allowed; }
.app-field input[aria-invalid="true"], .app-field select[aria-invalid="true"] { border-color: var(--color-error); }
.app-field-hint { font-size: 0.8125rem; color: var(--color-text-muted); }
.app-field-tooltip { position: relative; align-self: flex-start; max-width: 20rem; padding: 0.75rem 0.875rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--color-text) 96%, transparent); color: var(--brand-white); font-size: 0.75rem; line-height: 1.4; box-shadow: 0 10px 24px color-mix(in srgb, var(--color-text) 28%, transparent); }
.app-field-tooltip::before { content: ""; position: absolute; top: -6px; left: 1rem; border: 6px solid transparent; border-top: 0; border-bottom-color: color-mix(in srgb, var(--color-text) 96%, transparent); }
.app-form-footer { margin-top: auto; display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.app-form-actions { display: flex; gap: var(--space-3); }
.app-form-actions .btn { height: 3rem; }
.app-form-actions .btn-outline { flex: 0 0 auto; min-width: 7.875rem; }
.app-form-submit { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.app-form-submit .app-icon { width: 1.125rem; height: 1.125rem; }
.app-form-error { margin: 0; color: var(--color-error); font-size: 0.875rem; font-weight: 700; }

/* Roles: "Permisos del Rol" de la app (RolesSideDrawer.vue). */
.app-field textarea { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--brand-white); font: inherit; font-size: 0.9375rem; resize: vertical; }
.app-field textarea:focus { outline: none; border-color: var(--color-primary); }
.app-field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.app-field textarea:disabled { background: var(--color-bg, var(--brand-surface)); color: var(--color-text-muted); }
.role-permissions { display: grid; gap: var(--space-4); padding-top: var(--space-5, 1.25rem); border-top: 1px solid var(--color-border); }
.role-permissions-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.role-permissions-header h3 { margin: 0; font-family: var(--font-title); font-size: 1.0625rem; }
.role-permissions-count { padding: var(--space-1) var(--space-3); border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.role-permission-group { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 0.75rem; background: var(--color-bg, var(--brand-surface)); }
.role-permission-group h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 0.9375rem; }
.role-permission-group h4 .app-icon { width: 1.125rem; height: 1.125rem; color: var(--app-icon-blue, var(--color-primary)); }
.role-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
@media (max-width: 40rem) { .role-permission-grid { grid-template-columns: 1fr; } }
.role-permission { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: 0.875rem; color: var(--color-text-muted); cursor: pointer; }
.role-permission input { margin-top: 0.15rem; }
.role-form-footer { display: grid; gap: var(--space-3); }
.btn-muted { background: var(--color-border); color: var(--color-text); border-color: var(--color-border); }
/* El pie de los paneles de formulario queda siempre visible, como en la app. */
[id$="-drawer-root"] .drawer-body .app-form-footer { position: sticky; bottom: calc(-1 * var(--space-6)); z-index: 2; margin-bottom: calc(-1 * var(--space-6)); padding-bottom: var(--space-6); background: var(--brand-white); }
.app-form-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.app-form-footer--fixed { margin-top: 0; padding: var(--space-4) var(--space-6) var(--space-6); background: var(--brand-white); }

/* Reportes: copia de ReportsView.vue (tarjetas, desglose, producto y vencimientos por mes). */
.reports-view { width: 100%; max-width: 1280px; margin: 0 auto; color: var(--brand-ink); }
.reports-view__header { margin-bottom: var(--space-6); }
.reports-view__title { margin: 0; color: var(--brand-ink); font-family: var(--font-title); font-size: 30px; font-weight: var(--font-bold); }
.reports-view__subtitle { margin: 6px 0 0; color: var(--brand-muted); font-size: 15px; }
.reports-view__tabs { min-height: 46px; margin-bottom: 26px; border-bottom: 1px solid var(--brand-border); display: flex; gap: 24px; }
.reports-view__tab { min-height: 46px; padding: 0 4px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; color: var(--brand-muted); font-size: 16px; font-weight: var(--font-semibold); text-decoration: none; }
.reports-view__tab:hover { color: var(--color-primary); text-decoration: none; }
.reports-view__tab--active { border-bottom-color: var(--color-secondary); color: var(--color-primary); }

.reports-view__summary-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 24px; margin-bottom: 24px; }
.reports-view__summary-card,
.reports-view__breakdown-card,
.reports-view__product-card,
.reports-view__maturities-card,
.reports-view__table-card,
.reports-view__download,
.reports-view__empty {
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    background: var(--brand-white);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}
.reports-view__summary-card { min-height: 142px; padding: 28px 24px; }
.reports-view__card-label,
.reports-view__card-bottom,
.reports-view__metric-label,
.reports-view__metric-bottom,
.reports-view__month-header p { margin: 0; color: var(--brand-muted); font-size: 13px; }
.reports-view__card-value { display: block; margin-top: 12px; color: var(--brand-ink); font-size: 30px; font-weight: 800; line-height: 1.1; }
.reports-view__card-value--secondary { color: var(--color-secondary); }
.reports-view__card-value--tertiary { color: var(--brand-tertiary); }
.reports-view__card-value--primary { color: var(--color-primary); }
.reports-view__card-bottom { margin-top: 8px; }

.reports-view__breakdown-card { padding: 28px 24px 24px; }
.reports-view__section-title { margin: 0 0 26px; color: var(--brand-ink); font-size: 17px; font-weight: 800; }
.reports-view__section-title--spaced { margin: 32px 0 16px; }
.reports-view__section-hint { margin: -18px 0 16px; color: var(--brand-muted); font-size: 13px; }
.reports-view__breakdown-grid { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 28px; margin-bottom: 24px; }
.reports-view__breakdown-item { min-height: 76px; padding-left: 16px; border-left: 4px solid var(--breakdown-color, var(--color-primary)); }
.reports-view__breakdown-item .reports-view__metric-value { color: var(--breakdown-color, var(--color-primary)); }
.reports-view__breakdown-item--secondary { --breakdown-color: var(--color-secondary); }
.reports-view__breakdown-item--tertiary { --breakdown-color: var(--brand-tertiary); }
.reports-view__breakdown-item--primary { --breakdown-color: var(--brand-primary); }
.reports-view__metric-value { display: block; margin-top: 8px; font-size: 24px; font-weight: 800; line-height: 1.1; }
.reports-view__metric-bottom { margin-top: 8px; font-size: 12px; }
.reports-view__effective-row { min-height: 52px; padding: 0 16px; border-radius: 8px; background: var(--color-background); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--brand-muted); font-size: 13px; }
.reports-view__effective-row strong { color: var(--brand-ink); }

.reports-view__products,
.reports-view__maturities { display: grid; gap: 20px; }
.reports-view__product-card { overflow: hidden; }
.reports-view__product-header { min-height: 108px; padding: 20px 24px; background: var(--brand-beige); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.reports-view__product-title { margin: 0; color: var(--color-primary); font-size: 17px; font-weight: 800; }
.reports-view__product-description { margin: 6px 0 12px; color: var(--color-primary); font-size: 14px; }
.reports-view__product-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 20px; color: var(--color-primary); font-size: 13px; }
.reports-view__product-title + .reports-view__product-meta { margin-top: 12px; }
.reports-view__product-count { min-width: 90px; color: var(--color-secondary); text-align: right; }
.reports-view__product-count strong { display: block; font-size: 32px; line-height: 1; }
.reports-view__product-count span,
.reports-view__product-count small { display: block; margin-top: 4px; font-size: 13px; }
.reports-view__product-metrics,
.reports-view__month-metrics { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 24px; padding: 26px 24px; }
.reports-view__product-metrics { border-bottom: 1px solid var(--brand-border); }
.reports-view__metric-value--dark { color: var(--brand-ink); font-size: 18px; }
.reports-view__metric-value--green { color: var(--color-secondary); font-size: 18px; }
.reports-view__metric-value--red { color: var(--brand-tertiary); font-size: 18px; }
.reports-view__metric-value--blue { color: var(--color-primary); font-size: 18px; }
.reports-view__clients-block { padding: 18px 24px 24px; display: grid; gap: 8px; }
.reports-view__clients-title { margin: 0 0 6px; color: var(--brand-ink); font-size: 16px; font-weight: 800; }
.reports-view__client-row { min-height: 64px; padding: 12px; border-radius: 8px; background: var(--color-background); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.reports-view__client-row strong,
.reports-view__client-row span { display: block; }
.reports-view__client-row strong { color: var(--brand-ink); }
.reports-view__client-row span { margin-top: 4px; color: var(--brand-muted); font-size: 12px; }
.reports-view__client-amounts { text-align: right; }
.reports-view__client-amounts span { color: var(--color-secondary); }

.reports-view__maturities-card,
.reports-view__table-card { padding: 26px 24px 24px; }
.reports-view__maturities-card { display: grid; gap: 16px; }
.reports-view__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reports-view__card-head .reports-view__section-title { margin: 0 0 10px; }
.reports-view__month-card { padding: 20px 16px 16px; border: 1px solid var(--brand-border); border-radius: 8px; }
.reports-view__month-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.reports-view__month-title { margin: 0 0 6px; color: var(--brand-ink); font-size: 16px; font-weight: 800; }
.reports-view__month-total { color: var(--color-secondary); text-align: right; }
.reports-view__month-total span,
.reports-view__month-total strong { display: block; }
.reports-view__month-total span { color: var(--brand-muted); font-size: 13px; }
.reports-view__month-total strong { margin-top: 6px; font-size: 22px; font-weight: 800; }
.reports-view__month-metrics { grid-template-columns: repeat(3, minmax(160px, 1fr)); padding: 0; }
.reports-view__month-detail { margin-top: 16px; border-top: 1px solid var(--brand-border); padding-top: 12px; }
.reports-view__month-detail summary { cursor: pointer; color: var(--color-primary); font-size: 13px; font-weight: var(--font-semibold); }
.reports-view__month-detail .table-responsive { margin-top: 12px; }
.reports-view__empty { margin: 0; padding: 32px 24px; color: var(--brand-muted); text-align: center; box-shadow: none; }
.reports-view__maturities-card .reports-view__empty { border: 0; padding: 16px; }
.reports-view__table-card { margin-top: 24px; }
.reports-view__maturities .reports-view__table-card { margin-top: 0; }

.reports-view__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.reports-view__filters label,
.reports-view__download-form label { display: grid; gap: 6px; color: var(--brand-muted); font-size: 13px; font-weight: var(--font-semibold); }
.reports-view__filters input,
.reports-view__filters select { min-height: 40px; min-width: 10rem; }

.reports-view__downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 20px; }
.reports-view__download { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: none; }
.reports-view__download h3 { margin: 0; color: var(--color-primary); font-size: 15px; font-weight: 800; }
.reports-view__download > p { margin: 0; flex: 1; color: var(--brand-muted); font-size: 13px; }
.reports-view__download-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.reports-view__download-form label { min-width: 0; }
.reports-view__download-form input,
.reports-view__download-form select { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.reports-view__download-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reports-view__download-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }

@media (max-width: 980px) {
    .reports-view__summary-grid,
    .reports-view__breakdown-grid,
    .reports-view__product-metrics,
    .reports-view__month-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .reports-view__tabs { gap: 16px; overflow-x: auto; }
    .reports-view__tab { flex: 0 0 auto; }
    .reports-view__product-header,
    .reports-view__month-header,
    .reports-view__client-row { flex-direction: column; align-items: stretch; }
    .reports-view__product-count,
    .reports-view__month-total,
    .reports-view__client-amounts { text-align: left; }
    .reports-view__download-dates { grid-template-columns: 1fr; }
}