:root {
  --app-primary: #123a63;
  --app-primary-2: #1b6ca8;
  --app-accent: #18a77d;
  --app-sidebar: 278px;
  --app-topbar: 80px;
  --app-radius: 20px;
  --app-shadow: 0 14px 38px rgba(22, 45, 79, .08);
  --app-transition: 180ms ease;
}

[data-bs-theme="dark"] {
  --app-shadow: 0 14px 38px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.min-w-0 { min-width: 0; }
.eyebrow {
  display: block;
  margin-bottom: .25rem;
  color: var(--bs-secondary-color);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.btn { border-radius: 11px; font-weight: 700; }
.btn-primary {
  --bs-btn-bg: var(--app-primary-2);
  --bs-btn-border-color: var(--app-primary-2);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
}
.btn-soft {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color-translucent);
}
.btn-soft:hover { background: var(--bs-secondary-bg); }
.btn-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color-translucent);
}

.app-shell { min-height: 100vh; }
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  width: var(--app-sidebar);
  padding: 1rem;
  flex-direction: column;
  background: var(--bs-body-bg);
  border-right: 1px solid var(--bs-border-color-translucent);
  box-shadow: 8px 0 28px rgba(20, 45, 78, .035);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.sidebar-brand {
  display: flex;
  gap: .8rem;
  min-height: 66px;
  padding: .35rem .25rem 1rem;
  align-items: center;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.sidebar-brand > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.sidebar-brand strong { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand small { color: var(--bs-secondary-color); font-size: .72rem; }
.brand-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: white;
  border-radius: 14px;
  place-items: center;
  background: linear-gradient(135deg, var(--app-accent), var(--app-primary-2));
  box-shadow: 0 10px 22px rgba(24, 167, 125, .22);
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: .9rem 0; }
.sidebar-label {
  margin: 1.1rem .7rem .4rem;
  color: var(--bs-secondary-color);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .12em;
}
.sidebar-link {
  display: flex;
  gap: .8rem;
  margin-bottom: .22rem;
  padding: .72rem .8rem;
  align-items: center;
  color: var(--bs-secondary-color);
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--app-transition);
}
.sidebar-link i { width: 20px; text-align: center; }
.sidebar-link:hover { color: var(--app-primary-2); background: rgba(27, 108, 168, .075); }
.sidebar-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  box-shadow: 0 10px 24px rgba(18, 58, 99, .22);
}
.sidebar-footer { display: grid; gap: .85rem; padding-top: .9rem; border-top: 1px solid var(--bs-border-color-translucent); }
.local-badge { display: flex; gap: .65rem; padding: .75rem; align-items: center; border-radius: 13px; background: var(--bs-tertiary-bg); }
.local-badge div { display: flex; flex-direction: column; }
.local-badge small { color: var(--bs-secondary-color); }
.sidebar-backdrop { display: none; }

.app-main { min-height: 100vh; margin-left: var(--app-sidebar); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  min-height: var(--app-topbar);
  padding: .85rem clamp(1rem, 3vw, 2rem);
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
  border-bottom: 1px solid var(--bs-border-color-translucent);
  backdrop-filter: blur(18px) saturate(140%);
}
.topbar-heading { min-width: 0; }
.topbar-heading h1 { margin: 0; overflow: hidden; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; gap: .65rem; align-items: center; }
.environment-chip { gap: .4rem; padding: .45rem .75rem; align-items: center; border: 1px solid var(--bs-border-color-translucent); border-radius: 999px; color: var(--bs-secondary-color); background: var(--bs-body-bg); font-size: .8rem; font-weight: 700; }
.app-content { padding: clamp(1rem, 2.8vw, 2rem); }

.hero-card {
  position: relative;
  display: flex;
  min-height: 190px;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 20%, rgba(88, 224, 190, .33), transparent 30%),
    linear-gradient(135deg, #0b2847, #123a63 56%, #147b83);
  box-shadow: 0 24px 60px rgba(18, 58, 99, .2);
}
.hero-card > div:first-child { position: relative; z-index: 1; max-width: 760px; }
.hero-card h2 { max-width: 720px; margin: .25rem 0 .7rem; font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 850; }
.hero-card p { max-width: 720px; margin: 0; color: rgba(255,255,255,.72); font-size: 1.02rem; }
.hero-icon { position: absolute; right: 4%; color: rgba(255,255,255,.13); font-size: clamp(6rem, 14vw, 11rem); transform: rotate(-8deg); }

.metric-card, .panel-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}
.metric-card { display: flex; min-height: 110px; padding: 1rem; gap: .85rem; align-items: center; }
.metric-icon { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 16px; font-size: 1.2rem; }
.metric-card div { display: flex; min-width: 0; flex-direction: column; }
.metric-card small { color: var(--bs-secondary-color); font-weight: 700; }
.metric-card strong { overflow: hidden; font-size: 1.55rem; text-overflow: ellipsis; white-space: nowrap; }
.panel-card { padding: clamp(1rem, 2.4vw, 1.5rem); }
.panel-header { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: flex-start; justify-content: space-between; }
.panel-header h2 { margin: 0; font-size: 1.14rem; font-weight: 820; }

.status-pill { display: inline-flex; gap: .45rem; padding: .4rem .7rem; align-items: center; border: 1px solid var(--bs-border-color-translucent); border-radius: 999px; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); font-size: .72rem; font-weight: 800; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: var(--bs-secondary-color); box-shadow: 0 0 0 4px rgba(108, 117, 125, .12); }
.status-dot-success { background: #18a77d; box-shadow: 0 0 0 4px rgba(24, 167, 125, .14); }
.status-dot-warning { background: #f0a51b; box-shadow: 0 0 0 4px rgba(240, 165, 27, .14); }
.status-dot-danger { background: #dc4962; box-shadow: 0 0 0 4px rgba(220, 73, 98, .14); }
.status-dot-info { background: #3182ce; box-shadow: 0 0 0 4px rgba(49, 130, 206, .14); }
.connection-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-bottom: 1rem; }
.connection-summary div { display: flex; min-width: 0; padding: .75rem; flex-direction: column; border-radius: 13px; background: var(--bs-tertiary-bg); }
.connection-summary span { color: var(--bs-secondary-color); font-size: .7rem; font-weight: 750; }
.connection-summary strong { overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.qr-zone { display: grid; min-height: 310px; padding: 1rem; place-items: center; border: 1px dashed var(--bs-border-color); border-radius: 18px; background: var(--bs-tertiary-bg); }
.qr-image { width: min(100%, 310px); border: 14px solid white; border-radius: 16px; box-shadow: 0 12px 35px rgba(0,0,0,.13); }
.qr-placeholder { display: flex; max-width: 320px; gap: .55rem; align-items: center; flex-direction: column; text-align: center; color: var(--bs-secondary-color); }
.qr-placeholder i { font-size: 4.5rem; opacity: .5; }
.qr-placeholder strong { color: var(--bs-body-color); font-size: 1rem; }

.conversation-list { display: grid; }
.conversation-row { display: flex; gap: .85rem; padding: .9rem .35rem; align-items: center; color: inherit; border-bottom: 1px solid var(--bs-border-color-translucent); text-decoration: none; transition: var(--app-transition); }
.conversation-row:last-child { border-bottom: 0; }
.conversation-row:hover { padding-inline: .75rem; border-radius: 13px; background: var(--bs-tertiary-bg); }
.avatar { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; color: #fff; border-radius: 15px; background: linear-gradient(135deg, var(--app-primary-2), var(--app-accent)); font-weight: 850; }
.avatar-lg { width: 54px; height: 54px; flex-basis: 54px; font-size: 1.15rem; }
.conversation-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.conversation-title { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.conversation-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-title small, .conversation-preview { color: var(--bs-secondary-color); }
.conversation-title small { flex: 0 0 auto; font-size: .7rem; }
.conversation-preview { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta { display: flex; gap: .35rem; flex-direction: column; align-items: flex-end; color: var(--bs-secondary-color); font-size: .72rem; }
.conversation-list-page .conversation-row { padding-block: 1rem; }

.table { --bs-table-bg: transparent; }
.table thead th { color: var(--bs-secondary-color); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.empty-state { display: grid; min-height: 280px; padding: 2rem; place-items: center; align-content: center; text-align: center; color: var(--bs-secondary-color); }
.empty-state i { margin-bottom: .75rem; font-size: 3.8rem; opacity: .48; }
.empty-state h3 { color: var(--bs-body-color); font-size: 1.05rem; }
.empty-state p { max-width: 480px; }

.chat-layout { overflow: hidden; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 22px; box-shadow: var(--app-shadow); }
.chat-header { display: flex; gap: .8rem; padding: 1rem 1.2rem; align-items: center; border-bottom: 1px solid var(--bs-border-color-translucent); }
.chat-header h2 { margin: 0; font-size: 1rem; font-weight: 820; }
.chat-header p, .chat-header small { margin: 0; color: var(--bs-secondary-color); font-size: .76rem; }
.chat-header .ms-auto { display: flex; flex-direction: column; }
.chat-header .ms-auto strong { font-size: .78rem; }
.chat-thread { min-height: 520px; max-height: calc(100vh - 270px); padding: 1.25rem; overflow-y: auto; background:
  radial-gradient(circle at 14% 15%, rgba(24, 167, 125, .06), transparent 28%),
  radial-gradient(circle at 85% 85%, rgba(27, 108, 168, .07), transparent 30%),
  var(--bs-tertiary-bg); }
.message-line { display: flex; margin-bottom: .7rem; }
.message-line-out { justify-content: flex-end; }
.message-bubble { max-width: min(76%, 680px); padding: .75rem .85rem .55rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 16px 16px 16px 4px; background: var(--bs-body-bg); box-shadow: 0 6px 18px rgba(22,45,79,.05); }
.message-line-out .message-bubble { border-color: rgba(24,167,125,.18); border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--app-accent) 12%, var(--bs-body-bg)); }
.message-bubble p { margin: 0 0 .35rem; white-space: pre-wrap; }
.message-bubble small { display: block; color: var(--bs-secondary-color); font-size: .67rem; text-align: right; }
.message-type { display: block; margin-bottom: .35rem; color: var(--app-primary-2); font-size: .72rem; font-weight: 800; }
.chat-footer { padding: .85rem 1.1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.chat-footer div { display: flex; gap: .65rem; align-items: center; color: var(--bs-secondary-color); font-size: .78rem; }
.chat-footer i { color: var(--app-accent); font-size: 1.05rem; }

.settings-list { display: grid; gap: .8rem; }
.setting-row { padding: .9rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 14px; background: var(--bs-tertiary-bg); }
.setting-row code { color: var(--app-primary-2); font-weight: 800; }
.setting-row p { margin: .5rem 0; white-space: pre-wrap; }
.setting-row small { color: var(--bs-secondary-color); }
.config-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: .65rem 1rem; margin: 0; }
.config-grid dt { color: var(--bs-secondary-color); font-size: .8rem; }
.config-grid dd { margin: 0; font-weight: 720; }
.error-card { display: grid; min-height: 480px; place-items: center; align-content: center; text-align: center; }
.error-card > span { color: color-mix(in srgb, var(--app-primary-2) 25%, transparent); font-size: 7rem; font-weight: 900; line-height: 1; }
.error-card p { max-width: 520px; color: var(--bs-secondary-color); }
.toast-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: var(--bs-tertiary-bg); }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-105%); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; display: block; visibility: hidden; background: rgba(3, 15, 30, .48); opacity: 0; transition: var(--app-transition); }
  .sidebar-backdrop.show { visibility: visible; opacity: 1; }
}

@media (max-width: 767.98px) {
  .hero-card { min-height: 220px; }
  .connection-summary { grid-template-columns: 1fr; }
  .conversation-title small { display: none; }
  .conversation-meta small { display: none; }
  .chat-header .ms-auto { display: none; }
  .message-bubble { max-width: 90%; }
}

/* Sprint 2 */
.page-intro { display: flex; align-items: center; justify-content: space-between; }
.page-intro h2 { margin: 0 0 .35rem; font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 850; }
.page-intro p { max-width: 850px; margin: 0; color: var(--bs-secondary-color); }
.metric-money { font-size: clamp(1rem, 1.45vw, 1.35rem) !important; white-space: nowrap; }
.metric-text { max-width: 190px; overflow: hidden; font-size: .92rem !important; text-overflow: ellipsis; white-space: nowrap; }
.empty-state.compact { min-height: 190px; }
.integration-state { display: flex; gap: 1rem; padding: 1rem; align-items: flex-start; border: 1px solid var(--bs-border-color-translucent); border-radius: 16px; background: var(--bs-tertiary-bg); }
.integration-state > span { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 14px; background: var(--bs-body-bg); font-size: 1.35rem; }
.integration-state strong { display: block; margin-bottom: .25rem; }
.integration-state p { margin: 0; color: var(--bs-secondary-color); }
.integration-state-healthy > span { color: var(--bs-success); }
.integration-state-error > span { color: var(--bs-danger); }
.integration-state-not_configured > span { color: var(--bs-warning); }
.student-account-card { overflow: hidden; border: 1px solid var(--bs-border-color-translucent); border-radius: 18px; background: var(--bs-body-bg); }
.student-account-header { display: flex; gap: 1rem; padding: 1rem 1.15rem; align-items: center; justify-content: space-between; background: var(--bs-tertiary-bg); }
.student-account-header > div { display: flex; min-width: 0; flex-direction: column; }
.student-account-header strong { font-size: 1rem; }
.student-account-header small { color: var(--bs-secondary-color); }
.student-account-header > span { color: var(--app-primary-2); font-size: 1.05rem; font-weight: 850; white-space: nowrap; }
.setup-steps { display: grid; gap: .75rem; padding-left: 1.25rem; }
.setup-steps li { padding-left: .35rem; color: var(--bs-secondary-color); }
.setup-steps strong, .setup-steps code { color: var(--bs-body-color); }

@media (max-width: 767.98px) {
  .student-account-header { align-items: flex-start; flex-direction: column; }
  .metric-text { max-width: 130px; }
}

/* Sprint 2 Foundation */
.foundation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.foundation-grid > div {
  display: flex;
  min-height: 92px;
  padding: .9rem;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 15px;
  background: var(--bs-tertiary-bg);
}
.foundation-grid span { color: var(--bs-secondary-color); font-size: .75rem; font-weight: 700; }
.foundation-grid strong { font-size: 1.55rem; }
.campus-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: .4rem;
  border-radius: 999px;
  background: var(--campus-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--campus-color) 18%, transparent);
}
.progress-thin { height: 6px; margin-bottom: .35rem; }
.application-hero {
  display: flex;
  min-height: 160px;
  padding: clamp(1.3rem, 3vw, 2rem);
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--campus-primary), var(--campus-secondary));
  box-shadow: 0 20px 52px color-mix(in srgb, var(--campus-primary) 32%, transparent);
}
.application-hero h2 { margin: .2rem 0 .35rem; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 850; }
.application-hero p { margin: 0; color: rgba(255,255,255,.78); }
.application-hero > div:last-child { display: flex; gap: .55rem; flex-direction: column; align-items: flex-end; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.detail-grid > div {
  display: flex;
  min-height: 82px;
  padding: .85rem;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 14px;
  background: var(--bs-tertiary-bg);
}
.detail-grid span { color: var(--bs-secondary-color); font-size: .72rem; font-weight: 750; }
.detail-grid strong { margin-top: .2rem; font-size: .92rem; }
.guardian-card {
  display: flex;
  min-height: 180px;
  padding: 1rem;
  gap: .45rem;
  flex-direction: column;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 16px;
  background: var(--bs-tertiary-bg);
}
.guardian-card > span { color: var(--app-primary-2); font-size: .8rem; font-weight: 800; }
.guardian-card small { color: var(--bs-secondary-color); }
.guardian-flags { display: flex; gap: .35rem; margin-top: auto; flex-wrap: wrap; }
.guardian-flags span { padding: .25rem .45rem; border-radius: 999px; background: var(--bs-body-bg); color: var(--bs-secondary-color); font-size: .67rem; font-weight: 700; }
.timeline { display: grid; }
.timeline article { position: relative; display: flex; gap: .75rem; padding: 0 0 1.1rem; }
.timeline article:not(:last-child)::before { position: absolute; top: 14px; bottom: 0; left: 5px; width: 2px; content: ''; background: var(--bs-border-color); }
.timeline-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 5px; flex: 0 0 12px; border: 3px solid var(--bs-body-bg); border-radius: 999px; background: var(--app-primary-2); box-shadow: 0 0 0 2px var(--app-primary-2); }
.timeline article > div { display: flex; flex-direction: column; }
.timeline small { color: var(--bs-secondary-color); font-size: .7rem; }
.timeline p { margin: .3rem 0 0; color: var(--bs-secondary-color); font-size: .82rem; }
.campus-card { overflow: hidden; border: 1px solid var(--bs-border-color-translucent); border-radius: 20px; background: var(--bs-body-bg); box-shadow: var(--app-shadow); }
.campus-card-header { display: flex; padding: 1rem; gap: 1rem; align-items: center; justify-content: space-between; }
.campus-card-header > div:first-child { display: flex; gap: .75rem; align-items: center; }
.campus-card-header > div:first-child > div { display: flex; flex-direction: column; }
.campus-card-header small { color: var(--bs-secondary-color); }
.campus-logo { display: grid; width: 46px; height: 46px; color: #fff; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--campus-primary), var(--campus-secondary)); }
.campus-color-strip { display: grid; height: 7px; grid-template-columns: 3fr 2fr 1fr; }
.campus-color-strip span:nth-child(1) { background: var(--campus-primary); }
.campus-color-strip span:nth-child(2) { background: var(--campus-secondary); }
.campus-color-strip span:nth-child(3) { background: color-mix(in srgb, var(--campus-primary) 45%, white); }
.level-block { padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.level-block:last-child { border-bottom: 0; }
.level-block small { color: var(--bs-secondary-color); }
.grade-pills { display: flex; gap: .45rem; margin-top: .65rem; flex-wrap: wrap; }
.grade-pills span { padding: .38rem .62rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 999px; background: var(--bs-tertiary-bg); font-size: .74rem; font-weight: 700; }
.cost-center-tree { display: grid; gap: .55rem; }
.cost-center-row { display: flex; gap: .7rem; padding: .75rem; align-items: center; border: 1px solid var(--bs-border-color-translucent); border-radius: 14px; background: var(--bs-tertiary-bg); }
.cost-center-row > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.cost-center-row small { overflow: hidden; color: var(--bs-secondary-color); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.cost-center-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; color: var(--app-primary-2); place-items: center; border-radius: 12px; background: var(--bs-body-bg); }
.bank-account-card { display: flex; gap: 1rem; padding: .85rem; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--bs-border-color-translucent); }
.bank-account-card:last-of-type { border-bottom: 0; }
.bank-account-card > div { display: flex; flex-direction: column; }
.bank-account-card small { color: var(--bs-secondary-color); }
.accordion-item { overflow: hidden; margin-bottom: .65rem; border: 1px solid var(--bs-border-color-translucent) !important; border-radius: 14px !important; }
.accordion-button { font-weight: 700; background: var(--bs-body-bg); }
.accordion-button:not(.collapsed) { color: var(--app-primary-2); background: color-mix(in srgb, var(--app-primary-2) 8%, var(--bs-body-bg)); box-shadow: none; }

@media (max-width: 767.98px) {
  .foundation-grid, .detail-grid { grid-template-columns: 1fr; }
  .application-hero { align-items: flex-start; flex-direction: column; }
  .application-hero > div:last-child { align-items: flex-start; text-align: left !important; }
}


/* IAM institucional */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(29, 161, 242, .12), transparent 30%),
    linear-gradient(180deg, #f6f9fc 0%, #eef4f8 100%);
}
.auth-shell {
  display: grid;
  min-height: 100vh;
  padding: 2rem 1rem;
  place-items: center;
}
.auth-card {
  width: min(100%, 520px);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .12);
}
.auth-brand {
  display: flex;
  gap: .8rem;
  align-items: center;
  margin-bottom: 2rem;
}
.auth-brand > div {
  display: flex;
  flex-direction: column;
}
.auth-brand small {
  color: var(--bs-secondary-color);
}
.auth-copy h1 {
  margin: .25rem 0 .6rem;
  font-weight: 850;
}
.auth-copy p {
  margin-bottom: 1.4rem;
  color: var(--bs-secondary-color);
}
.auth-dev-box {
  padding: 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 16px;
  background: var(--bs-tertiary-bg);
}
.auth-dev-box > div > div {
  display: flex;
  flex-direction: column;
}
.auth-dev-box small {
  color: var(--bs-secondary-color);
}
.auth-security-note {
  display: flex;
  gap: .7rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  align-items: flex-start;
  color: var(--bs-secondary-color);
  border-top: 1px solid var(--bs-border-color-translucent);
  font-size: .82rem;
}
.auth-security-note i {
  color: var(--app-primary-2);
}
.staff-user-chip {
  display: inline-flex;
  gap: .55rem;
  padding: .35rem .65rem;
  align-items: center;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 999px;
  background: var(--bs-body-bg);
}
.staff-user-chip img,
.staff-user-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  overflow: hidden;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  object-fit: cover;
}
.staff-user-chip > span {
  display: flex;
  max-width: 180px;
  flex-direction: column;
  line-height: 1.05;
}
.staff-user-chip strong,
.staff-user-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-user-chip small {
  color: var(--bs-secondary-color);
  font-size: .68rem;
}

/* Block C · Staff MFA / TOTP */
.auth-shell-wide {
  width: min(100%, 980px);
}

.auth-card-wide,
.mfa-setup-card,
.account-security-card {
  width: min(100%, 900px);
}

.mfa-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.mfa-qr-panel,
.mfa-verify-panel,
.security-setting-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-body-bg);
  padding: 1.25rem;
}

.mfa-qr-panel h2,
.mfa-verify-panel h2,
.security-setting-card h2 {
  font-size: 1rem;
  margin: .45rem 0 .35rem;
}

.mfa-qr-panel p,
.mfa-verify-panel p,
.security-setting-card p {
  color: var(--bs-secondary-color);
  margin-bottom: 1rem;
}

.step-badge {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13,110,253,.12);
  color: var(--bs-primary);
  font-weight: 800;
}

.mfa-qr-frame {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
}

.mfa-qr-frame img {
  display: block;
  width: min(100%, 320px);
  height: auto;
}

.mfa-code-input {
  text-align: center;
  letter-spacing: .28em;
  font-size: 1.5rem;
  font-weight: 800;
}

.manual-secret-box {
  border: 1px dashed var(--bs-border-color);
  border-radius: .8rem;
  padding: .8rem 1rem;
  background: var(--bs-tertiary-bg);
}

.manual-secret-box summary {
  cursor: pointer;
  font-weight: 700;
}

.manual-secret {
  display: block;
  word-break: break-all;
  user-select: all;
}

.recovery-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.recovery-code-grid code {
  display: block;
  padding: .8rem 1rem;
  border-radius: .75rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-size: 1rem;
  letter-spacing: .08em;
  text-align: center;
  user-select: all;
}

.security-setting-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.security-setting-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .9rem;
  background: rgba(13,110,253,.12);
  color: var(--bs-primary);
  font-size: 1.25rem;
}

.security-setting-icon.is-success {
  background: rgba(25,135,84,.12);
  color: var(--bs-success);
}

.security-setting-icon.is-warning {
  background: rgba(255,193,7,.15);
  color: #9a6700;
}

.security-setting-copy p {
  margin-bottom: .25rem;
}

@media (max-width: 767.98px) {
  .mfa-setup-grid,
  .security-setting-card {
    grid-template-columns: 1fr;
  }

  .recovery-code-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.auth-page {
    background: #fff !important;
  }

  .auth-brand,
  .auth-security-note,
  .btn,
  .alert {
    display: none !important;
  }

  .auth-card {
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* =========================================================
   BLOQUE D · LANDING PÚBLICA Y CONTROL DE PLATAFORMA
   ========================================================= */
.landing-body {
  background: #f7fafc;
  color: #15212b;
}
.landing-nav {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.landing-brand,
.platform-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: inherit;
  text-decoration: none;
}
.landing-brand span:last-child,
.platform-brand span:last-child { display:flex; flex-direction:column; line-height:1.1; }
.landing-brand small,
.platform-brand small { color:#6b7b88; font-size:.72rem; font-weight:500; margin-top:.2rem; }
.landing-hero {
  padding: 7rem 0 5.5rem;
  background:
    radial-gradient(circle at 85% 20%, rgba(13,110,253,.13), transparent 34%),
    radial-gradient(circle at 10% 10%, rgba(13,107,120,.13), transparent 30%),
    linear-gradient(180deg,#fff 0%,#f5f9fc 100%);
}
.landing-kicker {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem; border-radius:999px;
  color:#0c6773; background:#e8f7f8; font-weight:800; font-size:.82rem;
}
.landing-hero h1 { font-size:clamp(2.7rem,5.5vw,5.4rem); line-height:.98; letter-spacing:-.055em; font-weight:850; margin:1.35rem 0; max-width:850px; }
.landing-hero .lead { max-width:680px; color:#526370; font-size:1.2rem; line-height:1.7; }
.landing-trust { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:2rem; color:#536572; font-weight:650; font-size:.9rem; }
.landing-trust span { display:inline-flex; align-items:center; gap:.4rem; }
.landing-trust i { color:#0d7884; }
.hero-product-card { background:#13232c; color:#fff; border-radius:1.7rem; padding:1rem; box-shadow:0 30px 80px rgba(15,23,42,.2); transform:rotate(1deg); }
.hero-product-top { display:flex; align-items:center; justify-content:space-between; padding:.35rem .45rem 1rem; color:#a9bbc7; }
.hero-product-top .dot { width:.55rem; height:.55rem; display:inline-block; border-radius:50%; margin-right:.25rem; }
.dot.green{background:#42c997}.dot.yellow{background:#ffc857}.dot.red{background:#ff6b6b}
.hero-product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.hero-product-grid article { min-height:140px; padding:1rem; border:1px solid rgba(255,255,255,.08); border-radius:1.1rem; background:rgba(255,255,255,.055); display:flex; flex-direction:column; justify-content:flex-end; }
.hero-product-grid i { font-size:1.6rem; color:#58d3d5; margin-bottom:auto; }.hero-product-grid span{color:#9eb1bd;font-size:.82rem}.hero-product-grid strong{font-size:1.1rem}
.hero-product-footer { display:flex; align-items:center; gap:.55rem; padding:1rem .5rem .35rem; color:#9fc8cd; font-size:.85rem; }
.landing-section { padding:6rem 0; }
.landing-section-soft { background:#eef5f7; }
.section-heading { max-width:760px; margin-bottom:2.5rem; }.section-heading h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.035em;font-weight:820;margin:.5rem 0 1rem}.section-heading p{color:#60717d;font-size:1.05rem}
.module-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.module-card { background:#fff; border:1px solid #e6ecef; border-radius:1.25rem; padding:1.35rem; min-height:220px; box-shadow:0 10px 35px rgba(15,23,42,.035); }
.module-card>span { width:3rem;height:3rem;border-radius:.9rem;background:#eaf5ff;color:#0d6efd;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem; }.module-card h3{font-size:1.05rem;margin:1.3rem 0 .6rem}.module-card p{font-size:.9rem;color:#657582;line-height:1.6;margin:0}
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.step-card{background:#fff;border-radius:1.2rem;padding:1.4rem;border:1px solid #e1eaed}.step-card>span{font-size:.8rem;font-weight:900;color:#0d7884}.step-card h3{font-size:1rem;margin:.75rem 0 .5rem}.step-card p{margin:0;color:#6b7983;font-size:.9rem}
.security-showcase { border-radius:1.8rem; padding:clamp(1.5rem,4vw,3.5rem); background:#11262d; color:#fff; display:grid; grid-template-columns:1.35fr .65fr; gap:3rem; align-items:center; }.security-showcase h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;margin:1rem 0}.security-showcase p{color:#b5c4ca;line-height:1.75}.security-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.8rem}.security-list li{display:flex;gap:.6rem;color:#d8e3e6}.security-list i{color:#58d3b1}.security-visual{display:flex;flex-direction:column;gap:.8rem;align-items:center}.security-node{width:100%;padding:1rem;border-radius:1rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;gap:.7rem;align-items:center}.security-node.active{background:#0d7884}.security-visual>i{color:#6f929b}
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:stretch; }.pricing-card{position:relative;background:#fff;border:1px solid #dfe7eb;border-radius:1.4rem;padding:1.6rem;display:flex;flex-direction:column;min-height:510px}.pricing-card.featured{border:2px solid #0d6efd;box-shadow:0 18px 45px rgba(13,110,253,.12);transform:translateY(-8px)}.pricing-badge{position:absolute;right:1.1rem;top:1.1rem;background:#0d6efd;color:#fff;border-radius:999px;padding:.3rem .65rem;font-size:.7rem;font-weight:800}.pricing-card h3{font-size:1.6rem;margin:.6rem 0}.pricing-card>p{color:#657580;min-height:48px}.pricing-price{display:flex;align-items:baseline;gap:.35rem;margin:1rem 0 1.3rem}.pricing-price strong{font-size:2.5rem;letter-spacing:-.04em}.pricing-price span{color:#73818a}.pricing-card ul{list-style:none;padding:0;display:grid;gap:.7rem;margin-bottom:1.5rem;flex:1}.pricing-card li{font-size:.9rem}.pricing-card li i{color:#198754;margin-right:.5rem}
.demo-panel { background:#fff;border:1px solid #e1e9ed;border-radius:1.8rem;padding:clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:.75fr 1.25fr;gap:3rem;box-shadow:0 20px 55px rgba(15,23,42,.06)}.demo-panel h2{font-size:clamp(2rem,3vw,3rem);letter-spacing:-.04em;margin:1rem 0}.demo-panel>div>p{color:#62737e;line-height:1.7}.demo-contact{display:flex;gap:.6rem;align-items:center;color:#0d7884;font-weight:700}.demo-form{background:#f6f9fa;border-radius:1.2rem;padding:1.25rem}
.landing-footer { padding:2rem 0; background:#10242b; color:#c9d6db; }.landing-footer .container-xl>div:first-child{display:flex;flex-direction:column}.landing-footer a{color:#dce7eb;text-decoration:none;margin-right:1.1rem}.landing-footer small{color:#8ca1a9}

.platform-body { background:#f3f6f8; }
.platform-shell { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh; }
.platform-sidebar { position:sticky; top:0; height:100vh; padding:1rem; background:#10242b; color:#d9e4e8; display:flex; flex-direction:column; }
.platform-brand { color:#fff; padding:.4rem .35rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.08); }
.platform-brand .brand-icon{background:#17a2a8;color:#fff}.platform-nav{padding-top:1rem;display:flex;flex-direction:column;gap:.25rem}.platform-sidebar .sidebar-label{color:#78939d;margin:1rem .65rem .35rem}.platform-sidebar .sidebar-link{color:#b8cbd2;border-radius:.75rem}.platform-sidebar .sidebar-link:hover{background:rgba(255,255,255,.07);color:#fff}.platform-sidebar .sidebar-link.active{background:#0d7884;color:#fff}.platform-sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:1rem .5rem 0;display:grid;gap:.65rem}.platform-sidebar-footer small{color:#86a0aa;line-height:1.45}
.platform-main{min-width:0}.platform-topbar{min-height:88px;padding:1rem 1.75rem;background:#fff;border-bottom:1px solid #e3e8eb;display:flex;align-items:center;justify-content:space-between;gap:1rem}.platform-topbar h1{font-size:1.45rem;margin:.15rem 0 0}.platform-content{padding:1.75rem;max-width:1700px}.feature-admin-grid{display:grid;gap:.7rem}.feature-admin-row{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(300px,.8fr);gap:1rem;align-items:center;padding:1rem;border:1px solid var(--bs-border-color);border-radius:.9rem}.feature-admin-row>div{display:flex;flex-direction:column}.feature-admin-row small{color:var(--bs-secondary-color)}.feature-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.feature-check{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem;border:1px solid var(--bs-border-color);border-radius:.8rem;cursor:pointer}.feature-check span{display:flex;flex-direction:column}.feature-check small{color:var(--bs-secondary-color)}
.invite-summary{display:grid;gap:.45rem;padding:1rem;border-radius:1rem;background:var(--bs-tertiary-bg);margin:1rem 0 1.25rem}.invite-success-icon{width:4.5rem;height:4.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#dff5e8;color:#198754;font-size:2rem}

@media(max-width:1199.98px){.module-grid{grid-template-columns:repeat(2,1fr)}.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991.98px){.landing-hero{padding-top:4.5rem}.security-showcase,.demo-panel{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.pricing-card.featured{transform:none}.platform-shell{grid-template-columns:1fr}.platform-sidebar{position:relative;height:auto}.platform-nav{display:grid;grid-template-columns:repeat(2,1fr)}.platform-sidebar-footer{display:none}.platform-topbar{padding:1rem}.platform-content{padding:1rem}.feature-admin-row{grid-template-columns:1fr}.feature-check-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){.module-grid,.steps-grid,.hero-product-grid{grid-template-columns:1fr}.landing-section{padding:4rem 0}.platform-nav{grid-template-columns:1fr}.landing-hero h1{font-size:2.8rem}}

/* Platform Operations D2 + D3 */
.platform-wizard-grid{display:grid;gap:1rem}.wizard-confirm-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,#f7fbfc,#eef7f8)}.success-orbit{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#e6f7ef;color:#16845c;font-size:1.7rem}.platform-stat-list{display:grid;gap:.65rem}.platform-stat-list>div{display:flex;align-items:center;justify-content:space-between;padding:.75rem .85rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:var(--bs-tertiary-bg)}.platform-stat-list strong{font-size:1.15rem}.membership-admin-list{display:grid;gap:1rem}.membership-admin-card{border:1px solid var(--bs-border-color);border-radius:1rem;padding:1rem;background:var(--bs-body-bg)}.membership-admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.8rem}.membership-admin-head>div{display:flex;flex-direction:column}.membership-admin-head small{color:var(--bs-secondary-color)}.role-chip-list{display:flex;flex-wrap:wrap;gap:.45rem}.role-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .55rem;border:1px solid var(--bs-border-color);border-radius:999px;background:var(--bs-tertiary-bg);font-size:.78rem;font-weight:700}.role-chip form{display:inline-flex;margin:0}.role-chip button{border:0;background:transparent;color:var(--bs-danger);font-weight:900;line-height:1;padding:0 .1rem}.platform-danger-note{padding:.85rem 1rem;border:1px solid rgba(220,53,69,.25);background:rgba(220,53,69,.05);border-radius:.8rem}
@media(max-width:767.98px){.wizard-confirm-card{align-items:flex-start;flex-direction:column}.wizard-confirm-card .btn{width:100%}.membership-admin-head{flex-direction:column}}


/* CONTAESCOLAR FINANCIAL COLLAPSIBLE UI */

.financial-layout-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.financial-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

form[data-financial-panel] > .financial-panel-heading {
  margin-bottom: .75rem;
}

.financial-panel-heading > strong,
.financial-panel-heading > h3 {
  margin: 0;
}

.financial-panel-heading.panel-header {
  margin-bottom: 1rem;
}

.financial-panel-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

[data-financial-panel].financial-panel-collapsed
  > :not(.financial-panel-heading) {
  display: none !important;
}

[data-financial-panel].financial-panel-collapsed
  > .financial-panel-heading {
  margin-bottom: 0;
}

.financial-history-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .9rem;
  background: var(--bs-body-bg);
}

.financial-history-panel > .financial-panel-heading {
  margin-bottom: .75rem;
}

.financial-history-panel .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.financial-history-panel .table {
  min-width: 820px;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .financial-layout-toolbar {
    justify-content: stretch;
  }

  .financial-layout-toolbar .btn {
    flex: 1 1 auto;
  }

  .financial-panel-heading {
    align-items: flex-start;
  }

  .financial-panel-toggle .financial-toggle-label {
    display: none;
  }

  .financial-history-panel {
    padding: .85rem;
  }
}


/* PASO 10B.4C · Cobranza workspace operativo */
.collections-workspace-panel {
  overflow: hidden;
}
.collections-progress-wrap {
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-tertiary-bg);
}
.collections-progress {
  height: .7rem;
}
.collections-queue-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}
.collections-queue-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .9rem;
  background: var(--bs-body-bg);
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.collections-queue-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--bs-primary-rgb), .45);
  box-shadow: 0 .45rem 1.25rem rgba(15, 23, 42, .08);
}
.collections-queue-card > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.collections-queue-card small {
  color: var(--bs-secondary-color);
  font-weight: 700;
  line-height: 1.2;
}
.collections-queue-card strong {
  font-size: 1.35rem;
  line-height: 1.2;
}
.collections-queue-icon {
  display: grid;
  flex: 0 0 2.45rem;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: .75rem;
  font-size: 1.05rem;
}
.collections-data-quality {
  padding: .85rem 1rem;
  border: 1px solid rgba(var(--bs-warning-rgb), .3);
  border-radius: .9rem;
  background: rgba(var(--bs-warning-rgb), .08);
}
.collections-progress-mini {
  min-width: 95px;
  height: .5rem;
}
.collections-progress-table td,
.collections-progress-table th {
  vertical-align: middle;
}
.scroll-mt {
  scroll-margin-top: 1rem;
}
@media (max-width: 1399.98px) {
  .collections-queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .collections-queue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .collections-queue-card {
    padding: .75rem;
  }
}
@media (max-width: 449.98px) {
  .collections-queue-grid {
    grid-template-columns: 1fr;
  }
}

/* === CONTAESCOLAR APP CONFIRMATION MODAL === */

.app-confirm-dialog {
  max-width: 560px;
}

.app-confirm-modal {
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow:
    0 1.5rem 4rem rgba(15, 23, 42, .22),
    0 .25rem 1rem rgba(15, 23, 42, .08);
}

.app-confirm-header {
  padding: 1.5rem 1.5rem .75rem;
}

.app-confirm-body {
  padding: .75rem 1.5rem 1.25rem;
}

.app-confirm-footer {
  padding: 0 1.5rem 1.5rem;
  gap: .65rem;
}

.app-confirm-icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: .95rem;
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
  font-size: 1.3rem;
}

#appConfirmModal[data-variant="warning"]
.app-confirm-icon {
  background: rgba(var(--bs-warning-rgb), .18);
  color: var(--bs-warning-text-emphasis);
}

#appConfirmModal[data-variant="danger"]
.app-confirm-icon {
  background: rgba(var(--bs-danger-rgb), .13);
  color: var(--bs-danger);
}

.app-confirm-eyebrow {
  display: block;
  margin-bottom: .1rem;
}

.app-confirm-message {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 1rem;
  line-height: 1.55;
}

.app-confirm-details {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .85rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: .9rem;
  line-height: 1.45;
}

.app-confirm-reason {
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bs-border-color);
}

.app-confirm-reason textarea {
  min-height: 92px;
  resize: vertical;
}

.app-confirm-footer .btn {
  min-width: 118px;
  border-radius: .7rem;
  font-weight: 700;
}

.app-confirm-accept {
  min-width: 145px !important;
}

@media (max-width: 575.98px) {
  .app-confirm-dialog {
    margin: .75rem;
  }

  .app-confirm-header {
    padding: 1.15rem 1.15rem .65rem;
  }

  .app-confirm-body {
    padding: .65rem 1.15rem 1rem;
  }

  .app-confirm-footer {
    padding: 0 1.15rem 1.15rem;
  }

  .app-confirm-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* === END CONTAESCOLAR APP CONFIRMATION MODAL === */


/* =========================================================
   CONTAESCOLAR 10B.5F3B1-R5 — RECEIPT PRINT
   ========================================================= */

.financial-receipt-page {
  width: min(100%, 980px);
  margin: 0 auto;
}

.financial-receipt-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-bottom: 1rem;
}

.financial-receipt-sheet {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  background: var(--bs-body-bg);
  box-shadow:
    0 1rem 3rem rgba(0, 0, 0, .06);
}

.financial-receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.financial-receipt-folio {
  min-width: 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  text-align: right;
}

.financial-receipt-folio strong {
  font-family: var(--bs-font-monospace);
}

.financial-receipt-divider {
  margin: 1.75rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.financial-receipt-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2rem;
}

.financial-receipt-grid > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.financial-receipt-grid small,
.financial-receipt-notes small,
.financial-receipt-footer small {
  color: var(--bs-secondary-color);
}

.financial-receipt-detail {
  margin-top: 2rem;
}

.financial-receipt-section-title {
  margin-bottom: .8rem;
}

.financial-receipt-table {
  margin-bottom: 0;
}

.financial-receipt-credit-note {
  display: flex;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .85rem;
  background: var(--bs-tertiary-bg);
}

.financial-receipt-total {
  width: min(100%, 430px);
  margin-top: 1.5rem;
  margin-left: auto;
  padding-top: .75rem;
  border-top: 2px solid var(--bs-border-color);
}

.financial-receipt-total > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
}

.financial-receipt-total > div:first-child strong {
  font-size: 1.35rem;
}

.financial-receipt-notes {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: .85rem;
  background: var(--bs-tertiary-bg);
}

.financial-receipt-notes p {
  margin: .3rem 0 0;
  white-space: pre-wrap;
}

.financial-receipt-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bs-border-color);
}

.financial-receipt-footer > div {
  display: flex;
  flex-direction: column;
}

.financial-receipt-id {
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 767.98px) {

  .financial-receipt-header,
  .financial-receipt-footer {
    flex-direction: column;
  }

  .financial-receipt-folio {
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }

  .financial-receipt-grid {
    grid-template-columns: 1fr;
  }

  .financial-receipt-actions {
    flex-direction: column;
  }

  .financial-receipt-actions .btn {
    width: 100%;
  }

  .financial-receipt-id {
    align-items: flex-start;
    text-align: left;
  }
}

@media print {

  @page {
    size: A4;
    margin: 12mm;
  }

  html,
  body {
    background: #fff !important;
  }

  .app-sidebar,
  .sidebar-backdrop,
  .app-topbar,
  .financial-receipt-actions,
  .toast-container,
  .modal {
    display: none !important;
  }

  .app-shell,
  .app-main {
    display: block !important;
    min-height: 0 !important;
  }

  .app-main {
    width: 100% !important;
    margin: 0 !important;
  }

  .app-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .financial-receipt-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .financial-receipt-sheet {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  .financial-receipt-sheet,
  .financial-receipt-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* =========================================================
   CONTAESCOLAR 10B.5F3B3 — RECEIPT PRINT FIX
   CSP-safe printing + high contrast + compact A4
   ========================================================= */

@media print {

  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  html,
  body {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    color: #111827 !important;

    font-size: 10pt !important;
    line-height: 1.25 !important;

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    overflow: visible !important;
  }

  .app-sidebar,
  .sidebar-backdrop,
  .app-topbar,
  .financial-receipt-actions,
  .toast-container,
  .modal {
    display: none !important;
  }

  .app-shell,
  .app-main,
  .app-content {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
  }

  .financial-receipt-page {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    color: #111827 !important;

    color-scheme: light;
  }

  .financial-receipt-sheet {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: #111827 !important;

    box-shadow: none !important;

    font-size: 10pt !important;
    line-height: 1.25 !important;

    color-scheme: light;
  }

  .financial-receipt-header {
    display: flex !important;

    flex-direction: row !important;
    justify-content:
      space-between !important;
    align-items:
      flex-start !important;

    gap: 10mm !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .financial-receipt-header h1 {
    margin:
      1.5mm 0 0 !important;

    color: #111827 !important;

    font-size: 18pt !important;
    line-height: 1.15 !important;
  }

  .financial-receipt-folio {
    min-width: 64mm !important;

    align-items:
      flex-end !important;

    text-align:
      right !important;

    gap: 1.5mm !important;
  }

  .financial-receipt-folio strong {
    color: #111827 !important;

    font-size: 10.5pt !important;
  }

  .financial-receipt-divider {
    margin:
      5mm 0 !important;

    border-color:
      #6b7280 !important;
  }

  .financial-receipt-grid {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      4mm 12mm !important;

    margin: 0 !important;
  }

  .financial-receipt-grid > div {
    gap: .7mm !important;

    break-inside: avoid;
    page-break-inside: avoid;
  }

  .financial-receipt-sheet .eyebrow,
  .financial-receipt-sheet small,
  .financial-receipt-sheet
    .text-body-secondary,
  .financial-receipt-sheet th {
    color: #374151 !important;

    opacity: 1 !important;
  }

  .financial-receipt-sheet .eyebrow {
    font-size: 8pt !important;

    font-weight: 700 !important;

    letter-spacing:
      .12em !important;
  }

  .financial-receipt-grid small,
  .financial-receipt-notes small,
  .financial-receipt-footer small {
    color: #4b5563 !important;

    font-size: 8.5pt !important;

    opacity: 1 !important;
  }

  .financial-receipt-grid strong,
  .financial-receipt-grid span {
    color: #111827 !important;

    opacity: 1 !important;
  }

  .financial-receipt-detail {
    margin-top:
      6mm !important;

    break-inside: avoid;
    page-break-inside: avoid;
  }

  .financial-receipt-section-title {
    margin-bottom:
      2mm !important;
  }

  .financial-receipt-section-title h2 {
    margin:
      1mm 0 0 !important;

    color: #111827 !important;

    font-size: 14pt !important;
  }

  .financial-receipt-table {
    width: 100% !important;

    margin:
      0 !important;

    color:
      #111827 !important;

    border-color:
      #9ca3af !important;

    font-size:
      9pt !important;
  }

  .financial-receipt-table thead {
    display:
      table-header-group !important;
  }

  .financial-receipt-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .financial-receipt-table th {
    padding:
      2mm 2mm !important;

    color:
      #374151 !important;

    border-color:
      #9ca3af !important;

    font-size:
      8pt !important;

    font-weight:
      700 !important;

    opacity:
      1 !important;
  }

  .financial-receipt-table td {
    padding:
      2.2mm 2mm !important;

    color:
      #111827 !important;

    border-color:
      #d1d5db !important;

    opacity:
      1 !important;
  }

  .financial-receipt-table strong {
    color:
      #111827 !important;

    opacity:
      1 !important;
  }

  .financial-receipt-table small {
    color:
      #4b5563 !important;

    opacity:
      1 !important;
  }

  .financial-receipt-total {
    width:
      48% !important;

    margin-top:
      4mm !important;

    margin-left:
      auto !important;

    padding-top:
      2mm !important;

    border-color:
      #6b7280 !important;

    break-inside:
      avoid;

    page-break-inside:
      avoid;
  }

  .financial-receipt-total > div {
    padding:
      1.3mm 0 !important;
  }

  .financial-receipt-total span {
    color:
      #374151 !important;

    opacity:
      1 !important;
  }

  .financial-receipt-total strong {
    color:
      #111827 !important;

    opacity:
      1 !important;
  }

  .financial-receipt-total
    > div:first-child
    strong {
    font-size:
      14pt !important;
  }

  .financial-receipt-notes {
    margin-top:
      4mm !important;

    padding:
      3mm !important;

    background:
      #f9fafb !important;

    color:
      #111827 !important;

    border:
      1px solid
      #d1d5db !important;

    break-inside:
      avoid;

    page-break-inside:
      avoid;
  }

  .financial-receipt-notes p {
    color:
      #111827 !important;
  }

  .financial-receipt-footer {
    display:
      flex !important;

    flex-direction:
      row !important;

    justify-content:
      space-between !important;

    align-items:
      flex-end !important;

    gap:
      8mm !important;

    margin-top:
      5mm !important;

    padding-top:
      4mm !important;

    border-color:
      #6b7280 !important;

    break-inside:
      avoid;

    page-break-inside:
      avoid;
  }

  .financial-receipt-footer strong,
  .financial-receipt-footer span {
    color:
      #111827 !important;

    opacity:
      1 !important;
  }

  .financial-receipt-id {
    align-items:
      flex-end !important;

    text-align:
      right !important;
  }

  .financial-receipt-sheet
    .badge {
    color:
      #ffffff !important;

    opacity:
      1 !important;
  }

  .financial-receipt-sheet
    .text-bg-success {
    background-color:
      #198754 !important;

    color:
      #ffffff !important;

    border:
      1px solid
      #198754 !important;
  }
}


/* CONTAESCOLAR 10B.5F3B5 — RECEIPT PRINT BORDER CLEANUP */
@media print {
  @page {
    size: A4;
    margin: 10mm;
  }

  html,
  body {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Limpiar cualquier contenedor oscuro heredado de la vista web */
  .financial-receipt-page,
  .financial-receipt-shell,
  .financial-receipt-card,
  .financial-receipt-paper,
  .financial-receipt-wrapper,
  .financial-receipt-container,
  .financial-receipt-document,
  .financial-receipt-content,
  [class*="financial-receipt"] {
    background: #ffffff !important;
    color: #111827 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
  }

  /* El wrapper externo no debe dejar marco oscuro */
  .financial-receipt-page,
  .financial-receipt-shell,
  .financial-receipt-wrapper,
  .financial-receipt-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: auto !important;
  }

  /* La tarjeta / hoja del recibo debe ocupar limpio el papel */
  .financial-receipt-card,
  .financial-receipt-paper,
  .financial-receipt-document,
  .financial-receipt-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    page-break-inside: avoid !important;
  }

  /* Texto tenue demasiado claro en impresión */
  .financial-receipt-page small,
  .financial-receipt-page .small,
  .financial-receipt-page .text-muted,
  .financial-receipt-page .text-body-secondary,
  .financial-receipt-page [class*="muted"],
  .financial-receipt-page [class*="secondary"] {
    color: #4b5563 !important;
  }

  /* Encabezados y labels con mejor contraste */
  .financial-receipt-page h1,
  .financial-receipt-page h2,
  .financial-receipt-page h3,
  .financial-receipt-page h4,
  .financial-receipt-page h5,
  .financial-receipt-page h6,
  .financial-receipt-page strong,
  .financial-receipt-page b {
    color: #111827 !important;
  }

  /* Líneas y bordes más suaves, nada negro pesado */
  .financial-receipt-page hr,
  .financial-receipt-page table,
  .financial-receipt-page thead,
  .financial-receipt-page tbody,
  .financial-receipt-page tfoot,
  .financial-receipt-page tr,
  .financial-receipt-page td,
  .financial-receipt-page th {
    border-color: #cbd5e1 !important;
  }

  /* Badge de estado legible */
  .financial-receipt-page .badge,
  .financial-receipt-page [class*="status"] {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Si existe barra de acciones, no imprimirla */
  .financial-receipt-actions,
  .financial-receipt-toolbar,
  .financial-receipt-page .btn,
  .financial-receipt-page button {
    box-shadow: none !important;
  }

  /* Ajustes extra para evitar bordes negros por overflow/outline */
  .financial-receipt-page *,
  .financial-receipt-page *::before,
  .financial-receipt-page *::after {
    box-shadow: none !important;
  }
}

/* =========================================================
   CONTAESCOLAR 10B.5F5D3 — FINANCIAL ANALYTICS
   Server-rendered / CSP-safe
   ========================================================= */

.financial-chart-list {
  display: grid;
  gap: 1rem;
}

.financial-chart-row,
.financial-month-row,
.financial-method-card {
  padding: 1rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 16px;
  background: var(--bs-tertiary-bg);
}

.financial-chart-row-head,
.financial-method-head,
.financial-method-foot {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.financial-chart-row-head {
  margin-bottom: .9rem;
}

.financial-chart-row-head > div,
.financial-method-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.financial-chart-row-head strong,
.financial-method-head strong {
  font-weight: 820;
}

.financial-chart-row-head small,
.financial-method-head small,
.financial-method-foot {
  color: var(--bs-secondary-color);
  font-size: .76rem;
}

.financial-chart-metric + .financial-chart-metric {
  margin-top: .75rem;
}

.financial-chart-label {
  display: flex;
  gap: 1rem;
  margin-bottom: .3rem;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
}

.financial-chart-label span {
  color: var(--bs-secondary-color);
  font-weight: 700;
}

.financial-chart-label strong {
  font-size: .8rem;
}

.financial-progress {
  display: block;
  width: 100%;
  height: .72rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  appearance: none;
  -webkit-appearance: none;
}

.financial-progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--bs-secondary-bg);
}

.financial-progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--app-primary-2);
}

.financial-progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--app-primary-2);
}

.financial-progress-received::-webkit-progress-value {
  background: #18a77d;
}

.financial-progress-received::-moz-progress-bar {
  background: #18a77d;
}

.financial-progress-applied::-webkit-progress-value {
  background: #3182ce;
}

.financial-progress-applied::-moz-progress-bar {
  background: #3182ce;
}

.financial-progress-unapplied::-webkit-progress-value {
  background: #f0a51b;
}

.financial-progress-unapplied::-moz-progress-bar {
  background: #f0a51b;
}

.financial-progress-method::-webkit-progress-value {
  background:
    linear-gradient(
      90deg,
      var(--app-primary-2),
      var(--app-accent)
    );
}

.financial-progress-method::-moz-progress-bar {
  background: var(--app-primary-2);
}

.financial-month-row {
  display: grid;
  gap: .2rem;
}

.financial-method-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(240px, 1fr)
    );
  gap: 1rem;
}

.financial-method-card {
  display: grid;
  gap: .85rem;
}

.financial-method-foot strong {
  color: var(--bs-body-color);
}

.financial-chart-empty {
  min-height: 180px;
}

@media (max-width: 575.98px) {
  .financial-chart-row,
  .financial-month-row,
  .financial-method-card {
    padding: .85rem;
  }

  .financial-chart-row-head,
  .financial-method-head {
    align-items: flex-start;
  }
}