:root {
    --app-bg: #f4f7fb;
    --app-surface: #fff;
    --app-surface-raised: #fff;
    --app-surface-subtle: #f2f6fa;
    --app-surface-accent: #eaf3fc;
    --app-input-bg: #fff;
    --app-disabled-bg: #edf1f5;
    --app-text: #172b43;
    --app-heading: #203c57;
    --app-text-muted: #66798d;
    --app-border: #dce5ee;
    --app-border-strong: #c5d2df;
    --app-primary: #1768ad;
    --app-primary-strong: #073b78;
    --app-primary-soft: #eaf3fc;
    --app-focus: rgba(37, 140, 251, .38);
    --app-success-bg: #e4f5ec;
    --app-success-text: #237348;
    --app-warning-bg: #fff2d8;
    --app-warning-text: #805c10;
    --app-danger-bg: #fff1f0;
    --app-danger-text: #9f302a;
    --app-neutral-bg: #eceff2;
    --app-neutral-text: #5f6f7e;
    --app-overlay: rgba(9, 31, 54, .55);
    --app-shadow: rgba(31, 55, 83, .08);
    --app-header-bg: rgba(255, 255, 255, .96);
    --app-sidebar: linear-gradient(180deg, #062c5c 0%, #073b78 55%, #05264d 100%);
}

:root[data-theme="dark"] {
    --app-bg: #0d1724;
    --app-surface: #142235;
    --app-surface-raised: #192a40;
    --app-surface-subtle: #1b2d42;
    --app-surface-accent: #17324c;
    --app-input-bg: #101d2c;
    --app-disabled-bg: #1a2736;
    --app-text: #e4edf6;
    --app-heading: #f4f8fc;
    --app-text-muted: #aebdcb;
    --app-border: #30445a;
    --app-border-strong: #476079;
    --app-primary: #71b9f4;
    --app-primary-strong: #2f80c5;
    --app-primary-soft: #173754;
    --app-focus: rgba(105, 181, 247, .52);
    --app-success-bg: #173b31;
    --app-success-text: #8de0b9;
    --app-warning-bg: #44351c;
    --app-warning-text: #ffd27a;
    --app-danger-bg: #482522;
    --app-danger-text: #ffaaa3;
    --app-neutral-bg: #283645;
    --app-neutral-text: #c0ccd7;
    --app-overlay: rgba(2, 8, 15, .72);
    --app-shadow: rgba(0, 0, 0, .28);
    --app-header-bg: rgba(20, 34, 53, .97);
    --app-sidebar: linear-gradient(180deg, #051d3a 0%, #073568 55%, #04172d 100%);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-secondary-color: var(--app-text-muted);
    --bs-tertiary-bg: var(--app-surface-subtle);
}

html, body { background: var(--app-bg); color: var(--app-text); font-family: Inter, "Segoe UI", Arial, sans-serif; }

#navigation-progress { position:fixed;top:4.5rem;left:50%;transform:translateX(-50%);z-index:3100;display:flex;align-items:center;gap:.75rem;max-width:calc(100vw - 2rem);padding:.85rem 1.2rem;background:var(--app-surface);color:var(--app-text);border:1px solid var(--app-border);border-radius:.75rem;box-shadow:0 .35rem 1.2rem rgba(0,0,0,.2);pointer-events:none; }
#navigation-progress[hidden] { display:none; }

.sidebar-tooltip { background:#071f3d;border:1px solid rgba(255,255,255,.18);border-radius:.45rem;box-shadow:0 .4rem 1rem rgba(0,0,0,.24);color:#fff;font-size:.82rem;font-weight:650;max-width:15rem;padding:.42rem .65rem;pointer-events:none;position:fixed;white-space:nowrap;z-index:3000; }

@media (min-width: 641px) {
    .sidebar { transition: width .18s ease; }
    :root[data-sidebar="compact"] .sidebar { width:64px !important; }
    :root[data-sidebar="compact"] .sidebar .top-row { justify-content:center;padding-left:0 !important; }
    :root[data-sidebar="compact"] .sidebar .brand-block,
    :root[data-sidebar="compact"] .sidebar .nav-section,
    :root[data-sidebar="compact"] .sidebar .nav-label { display:none; }
    :root[data-sidebar="compact"] .sidebar .sidebar-collapse-toggle { margin:0;transform:rotate(180deg); }
    :root[data-sidebar="compact"] .sidebar .nav-item,
    :root[data-sidebar="compact"] .sidebar .nav-footer { padding-left:.45rem !important;padding-right:.45rem !important; }
    :root[data-sidebar="compact"] .sidebar .nav-footer { margin-top:auto; }
    :root[data-sidebar="compact"] .sidebar :where(.nav-item,.nav-footer) .nav-link { justify-content:center;padding:.5rem !important; }
    :root[data-sidebar="compact"] .sidebar .nav-symbol { margin-right:0; }
}

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

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--app-surface), 0 0 0 0.25rem var(--app-focus);
}

.content {
    margin: 0 auto;
    max-width: 1500px;
    padding-bottom: 3rem;
    padding-top: 2rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Contexto del alumno: mismo énfasis en los cinco módulos dependientes. */
header.cobranzas-page-heading {
    margin: 0 0 1.5rem;
}

.ctp-page > header.cobranzas-page-heading {
    margin-bottom: 1.5rem;
}

header.cobranzas-page-heading > span:first-child {
    color: var(--app-primary);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

header.cobranzas-page-heading h1 {
    color: var(--app-heading);
    font-size: 2rem;
    font-weight: 750;
    line-height: 1.2;
    margin: .35rem 0;
}

header.cobranzas-page-heading p {
    color: var(--app-text-muted);
    font-size: 1rem;
    margin: 0;
}

@media (max-width: 760px) {
    header.cobranzas-page-heading h1 { font-size: 1.7rem; }
}

section.student-summary.selected-student-highlight,
section.card.selected-student-highlight {
    background: linear-gradient(90deg, #79c9ff 0 5px, transparent 5px),
                linear-gradient(120deg, #103b71, #1765a2);
    color: #fff;
}

section.student-summary.selected-student-highlight h2,
section.student-summary.selected-student-highlight dd,
section.card.selected-student-highlight h2,
section.card.selected-student-highlight dd {
    color: #fff;
}

section.student-summary.selected-student-highlight > div > span,
section.student-summary.selected-student-highlight dt,
section.card.selected-student-highlight dt,
section.card.selected-student-highlight .text-primary,
section.card.selected-student-highlight .text-secondary {
    color: #cde7ff !important;
}

/* El tema oscuro se aplica sobre los componentes existentes sin alterar su semántica. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .public-shell,
:root[data-theme="dark"] .page,
:root[data-theme="dark"] :where(.ctp-page, .convenios-page, .cv, .tipos-pago, .deudores, .usuarios-admin) {
    background: var(--app-bg);
    color: var(--app-text);
}

:root[data-theme="dark"] :where(
    .search-panel, .results-panel, .student-card, .message-panel,
    .module-card, .action-card, .panel, .concepto-card, .tarjeta,
    .account-group, .movements-table, .virtual-table, .transfer-dialog,
    .confirmacion, .carga-pagos, .selector-grupos, .espera-panel,
    .usuarios-admin__tarjeta, .usuarios-admin__usuario,
    .usuarios-admin__dialogo, .lista-grupos button,
    .student-summary:not(.selected-student-highlight), .ce-dialog,
    .welcome-hero, .capability-grid article,
    section.card:not(.selected-student-highlight)) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 .35rem 1.1rem var(--app-shadow) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] :where(
    .action-icon, .empty-icon, .message-icon, .module-icon,
    .asistente-grupo, .concepto-card dl div, .resumen span,
    .totales span, .cambio-resumen span, .montos-pago,
    .total-card.primary-soft, .group-count, .results-count) {
    background: var(--app-surface-accent) !important;
    border-color: var(--app-border) !important;
    color: var(--app-primary) !important;
}

:root[data-theme="dark"] :where(
    h1, h2, h3, h4, h5, h6,
    .page-heading h1, .section-heading h2,
    .student-details h3, .student-summary h2,
    .group-identity h3, .tipos-pago h1,
    .tarjeta h2, .confirmacion h2, .carga-pagos h2,
    .selector-grupos h2, .usuarios-admin) {
    color: var(--app-heading) !important;
}

:root[data-theme="dark"] :where(label, dt, legend, .form-label, .form-check-label) {
    color: var(--app-text) !important;
}

:root[data-theme="dark"] :where(
    .page-heading p, .page-heading span, .section-heading p,
    .module-copy p, .action-card small, .results-panel,
    .student-details dt, .account-unavailable,
    .group-identity > div > span, .group-period span, .group-totals span,
    .group-period strong, .group-totals strong, .debt-guide,
    .generacion, .generacion strong, .tipos-pago > header p,
    .estado-busqueda, .carga-pagos p, .asistente-grupo span,
    .selector-grupos .cabecera p, .lista-grupos button span,
    .estado-selector, .ayuda-selector, .ayuda-interes,
    .usuarios-admin__encabezado p, .usuarios-admin__tarjeta > p,
    .usuarios-admin__usuario small, .usuarios-admin__grupo-cabecera span,
    .usuarios-admin__relacion small, .cambio-resumen small,
    .montos-pago, .montos-pago strong) {
    color: var(--app-text-muted) !important;
}

:root[data-theme="dark"] :where(.system-name, .intro, .access-note, .capability-grid p, .section-heading p) {
    color: var(--app-text-muted) !important;
}
:root[data-theme="dark"] :where(.eyebrow, .card-number) { color: var(--app-primary) !important; }
:root[data-theme="dark"] .identity-panel { background: linear-gradient(145deg, #dceafa, #edf4fb 58%, #d5e6f5) !important; }

:root[data-theme="dark"] :where(.form-control, .form-select, textarea, input:not([type="checkbox"]):not([type="radio"])) {
    background-color: var(--app-input-bg);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

:root[data-theme="dark"] :where(.form-control, .form-select, textarea, input)::placeholder {
    color: #8699aa;
    opacity: 1;
}

:root[data-theme="dark"] :where(.form-control, .form-select, textarea, input):disabled,
:root[data-theme="dark"] :where(.form-control, .form-select, textarea, input)[readonly] {
    background-color: var(--app-disabled-bg);
    color: #93a4b5;
    opacity: 1;
}

:root[data-theme="dark"] :where(.form-control, .form-select, textarea, input, button, a):focus-visible {
    outline-color: #7fc4ff !important;
    box-shadow: 0 0 0 .22rem var(--app-focus) !important;
}

:root[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: var(--app-surface-subtle);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: #203a54;
    --bs-table-hover-color: #fff;
}

:root[data-theme="dark"] :where(.tabla, .charges-table, .movements-table, .virtual-table) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

:root[data-theme="dark"] :where(.tabla, .charges-table, .movements-table, .virtual-table) tbody td {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] :where(.tabla, .charges-table, .movements-table, .virtual-table) tbody tr:nth-child(even) td {
    background: var(--app-surface-subtle) !important;
}

:root[data-theme="dark"] :where(.tabla, .charges-table, .movements-table, .virtual-table) tbody tr:hover td {
    background: #203a54 !important;
    color: #fff !important;
}

:root[data-theme="dark"] .charges-table thead th {
    background: #20364d !important;
    border-color: var(--app-border) !important;
    color: #d5e3f0 !important;
}

:root[data-theme="dark"] .account-group summary,
:root[data-theme="dark"] .account-group:nth-of-type(odd) summary,
:root[data-theme="dark"] .account-group:nth-of-type(even) summary {
    background: var(--app-surface) !important;
}
:root[data-theme="dark"] .account-group summary:hover { background: var(--app-surface-subtle) !important; }

:root[data-theme="dark"] .charges-table tbody tr.has-debt td,
:root[data-theme="dark"] .account-group.has-enforceable-debt summary,
:root[data-theme="dark"] .account-group.has-enforceable-debt summary:hover {
    background: var(--app-danger-bg) !important;
    color: var(--app-danger-text) !important;
}
:root[data-theme="dark"] .charges-table tbody tr.is-upcoming td { background: #142f48 !important; color: var(--app-text) !important; }
:root[data-theme="dark"] .charges-table tbody tr.is-upcoming:hover td { background: #183b5a !important; }

:root[data-theme="dark"] .account-group.has-enforceable-debt { border-color: #bd5d55 !important; }
:root[data-theme="dark"] .account-group.has-enforceable-debt .group-totals strong { color: #ffaaa3 !important; }
:root[data-theme="dark"] .charges-table tbody tr.is-historical td,
:root[data-theme="dark"] .account-group.is-withdrawn,
:root[data-theme="dark"] .account-group.is-withdrawn summary {
    background: var(--app-neutral-bg) !important;
    color: var(--app-neutral-text) !important;
}
:root[data-theme="dark"] .charges-table tbody tr.is-non-enforceable td { background: #1c2937 !important; color: #aebdcb !important; }

:root[data-theme="dark"] :where(.status-badge.active, .payment-badge.paid) { background: var(--app-success-bg) !important; color: var(--app-success-text) !important; }
:root[data-theme="dark"] :where(.status-badge.withdrawn, .payment-badge.withdrawn) { background: var(--app-danger-bg) !important; color: var(--app-danger-text) !important; }
:root[data-theme="dark"] .payment-badge.upcoming { background: #173b5c !important; color: #a9d7ff !important; }
:root[data-theme="dark"] .payment-badge.pending { background: var(--app-neutral-bg) !important; color: var(--app-neutral-text) !important; }
:root[data-theme="dark"] .payment-badge.partial { background: var(--app-warning-bg) !important; color: var(--app-warning-text) !important; }
:root[data-theme="dark"] :where(.status-badge.inactive, .status-badge.unknown, .payment-badge.unknown) { background: var(--app-neutral-bg) !important; color: var(--app-neutral-text) !important; }
:root[data-theme="dark"] .payment-badge.overdue { background: #b84b44 !important; color: #fff !important; }
:root[data-theme="dark"] .agreement-badge { background: #243b63 !important; color: #b9d3ff !important; }

:root[data-theme="dark"] .concepto-card.seleccionado {
    background: #3b301c !important;
    border-color: #e3ad43 !important;
    box-shadow: 0 0 0 3px rgba(227, 173, 67, .25) !important;
}
:root[data-theme="dark"] .concepto-card.vigente { border-left-color: #69c69a !important; }
:root[data-theme="dark"] :where(.concepto-en-proceso, .revision) { color: var(--app-warning-text) !important; }
:root[data-theme="dark"] .estado { color: var(--app-success-text) !important; }

:root[data-theme="dark"] :where(.dialogo, .confirmacion-fondo, .carga-fondo, .selector-fondo, .espera-fondo, .transfer-dialog-backdrop, .usuarios-admin__sombra, .ce-backdrop) {
    background: var(--app-overlay) !important;
}

:root[data-theme="dark"] .action-card:hover,
:root[data-theme="dark"] .lista-grupos button:hover,
:root[data-theme="dark"] .lista-grupos button:focus-visible,
:root[data-theme="dark"] .usuarios-admin__usuario:hover,
:root[data-theme="dark"] .usuarios-admin__usuario.seleccionado {
    background: #1d3853 !important;
    border-color: var(--app-primary) !important;
    color: #dff1ff !important;
}

:root[data-theme="dark"] .action-card-disabled,
:root[data-theme="dark"] .action-card-disabled:hover {
    background: var(--app-disabled-bg) !important;
    border-color: var(--app-border) !important;
    color: #899aaa !important;
}

:root[data-theme="dark"] .debt-only-filter { background: var(--app-danger-bg) !important; border-color: #80443f !important; color: var(--app-danger-text) !important; }
:root[data-theme="dark"] .debt-guide { background: var(--app-surface-subtle) !important; border-left-color: var(--app-primary) !important; }
:root[data-theme="dark"] .deudores .totales article {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 .35rem 1.1rem var(--app-shadow);
}
:root[data-theme="dark"] .deudores .totales span {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--app-text-muted) !important;
}
:root[data-theme="dark"] .deudores .totales strong {
    color: var(--app-primary) !important;
}
:root[data-theme="dark"] :where(.hero-panel h1, .hero-panel h2, .selected-student-highlight h1, .selected-student-highlight h2, .selected-student-highlight strong) { color: #fff !important; }
:root[data-theme="dark"] :where(.charges-table-scroll, .virtual-table)::-webkit-scrollbar-thumb { background: #63809b !important; border-color: #1a2b3d !important; }
:root[data-theme="dark"] #components-reconnect-modal { background: var(--app-surface-raised) !important; color: var(--app-text) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}