.auth-box { max-width: 460px; }
.mfa-card { max-width: 560px; }
.bg-platform { background: #1d3557; }

.col-w8{width:8rem}.col-w9{width:9rem}.col-w11{width:11rem}
.col-w6{width:6rem}

/* ===== Panel de la universidad: barra lateral ===== */
:root { --sb-w: 272px; --sb-bg: #111b25; --sb-bg-2: #172433; --sb-fg: #c9d4df; --sb-muted: #8393a5; --sb-line: rgba(255,255,255,.08); --sb-hover: rgba(255,255,255,.07); --topbar-h: 56px; }
.app-body { background: #f3f5f8; }
.skip-link { position: absolute; left: .5rem; top: -3rem; background: #fff; color: #000; padding: .5rem .75rem; border-radius: .375rem; z-index: 2000; }
.skip-link:focus { top: .5rem; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sb-w); background: var(--sb-bg); color: var(--sb-fg); display: flex; flex-direction: column; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; }
.sb-brand { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--sb-line); background: linear-gradient(135deg, var(--brand), #0b2a22 140%); }
.sb-logo { width: 38px; height: 38px; flex: none; border-radius: .6rem; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.sb-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; color: #fff; }
.sb-brand-text strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb-brand-text small { color: rgba(255,255,255,.7); font-size: .72rem; }
.sb-close { margin-left: auto; background: transparent; border: 0; color: #fff; padding: .25rem .4rem; border-radius: .375rem; display: none; }

.sb-search { position: relative; padding: .75rem 1rem .25rem; }
.sb-search .bi-search { position: absolute; left: 1.75rem; top: 1.45rem; color: var(--sb-muted); pointer-events: none; font-size: .85rem; }
.sb-search input { width: 100%; background: var(--sb-bg-2); color: #fff; border: 1px solid var(--sb-line); border-radius: .5rem; padding: .45rem .6rem .45rem 2rem; font-size: .88rem; }
.sb-search input::placeholder { color: var(--sb-muted); }
.sb-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }

.sb-nav { flex: 1 1 auto; overflow-y: auto; padding: .5rem .6rem 1rem; scrollbar-width: thin; scrollbar-color: #35475b transparent; overscroll-behavior: contain; }
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-thumb { background: #35475b; border-radius: 8px; }
.sb-link { display: flex; align-items: center; gap: .6rem; color: var(--sb-fg); text-decoration: none; padding: .42rem .7rem; border-radius: .5rem; font-size: .9rem; }
.sb-link:hover { background: var(--sb-hover); color: #fff; }
.sb-link:focus-visible, .sb-group summary:focus-visible, .sb-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.sb-link.active { background: var(--brand); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 rgba(255,255,255,.75); }
.sb-home { margin-bottom: .25rem; padding-top: .55rem; padding-bottom: .55rem; font-weight: 500; }

.sb-group { margin: .1rem 0; }
.sb-group summary { list-style: none; display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .5rem .7rem; border-radius: .5rem; color: #e6edf5; font-size: .9rem; font-weight: 500; user-select: none; }
.sb-group summary::-webkit-details-marker { display: none; }
.sb-group summary:hover { background: var(--sb-hover); }
.sb-icon { color: var(--sb-muted); font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sb-group[open] > summary .sb-icon, .sb-group[data-active] > summary .sb-icon { color: #fff; }
.sb-chev { margin-left: auto; font-size: .7rem; color: var(--sb-muted); transition: transform .15s ease; }
.sb-group[open] > summary .sb-chev { transform: rotate(90deg); }
.sb-sub { list-style: none; margin: .1rem 0 .4rem 1.05rem; padding: 0 0 0 .6rem; border-left: 1px solid var(--sb-line); }
.sb-sub .sb-link { padding: .36rem .6rem; font-size: .86rem; }
.sb-empty { color: var(--sb-muted); font-size: .85rem; padding: .75rem; margin: 0; }
.sb-foot { padding: .6rem 1rem; border-top: 1px solid var(--sb-line); color: var(--sb-muted); font-size: .72rem; }
.sb-overlay { position: fixed; inset: 0; background: rgba(8,14,20,.55); z-index: 1035; }

.app-main { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; height: var(--topbar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1rem; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid #e3e8ee; }
.crumbs { display: flex; align-items: center; gap: .45rem; font-size: .92rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .bi { font-size: .7rem; color: #8a97a6; }
.top-user { margin: 0 0 0 auto; display: flex; align-items: center; gap: .6rem; }
.top-user-name { font-size: .88rem; color: #3b4857; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; }
.content { flex: 1 1 auto; padding: 1.5rem 1rem 2rem; max-width: 1500px; width: 100%; margin: 0 auto; }
.content:focus { outline: none; }
.app-foot { padding: 0 1rem 1.25rem; text-align: center; }

body.sb-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
body.sb-open { overflow: hidden; }
body.sb-open .sb-close { display: block; }

@media (min-width: 992px) {
  .sidebar { transform: none; transition: none; }
  .app-main { margin-left: var(--sb-w); }
  .sb-toggle { display: none; }
  .sb-overlay { display: none !important; }
  .content { padding: 1.75rem 2rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .sb-chev { transition: none; } }
@media print { .sidebar, .topbar, .sb-overlay, .app-foot { display: none !important; } .app-main { margin-left: 0; } }

/* ===== Dashboards: indicadores, tarjetas y gráficos ===== */
.dash-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sub-chip { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid #e3e8ee; border-radius: 2rem; padding: .4rem .9rem; font-size: .9rem; }
.dash-card { border: 1px solid #e3e8ee; border-radius: .9rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
.dash-card > .card-header { background: #fff; border-bottom: 1px solid #eef1f5; padding: .85rem 1.1rem; font-weight: 600; }
details.dash-card > summary.card-header { cursor: pointer; list-style: none; }
details.dash-card > summary.card-header::-webkit-details-marker { display: none; }
.kpi { display: flex; gap: .9rem; align-items: flex-start; height: 100%; padding: 1rem 1.1rem; background: #fff; border: 1px solid #e3e8ee; border-radius: .9rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
a.kpi:hover { box-shadow: 0 6px 18px rgba(16,24,40,.09); transform: translateY(-1px); color: inherit; }
a.kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kpi-icon { flex: none; width: 44px; height: 44px; border-radius: .8rem; display: grid; place-items: center; font-size: 1.35rem; }
.kpi-body { display: flex; flex-direction: column; min-width: 0; }
.kpi-label { font-size: .8rem; color: #5b6b7c; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #17212b; overflow-wrap: anywhere; }
.kpi-sub { font-size: .78rem; color: #6b7a8a; margin-top: .15rem; }
.tone-blue { background: #e4eefc; color: #1d5fd1; } .tone-violet { background: #eee8fb; color: #6a3fc4; } .tone-teal { background: #dff5f1; color: #0f7a6c; }
.tone-green { background: #e0f4e6; color: #167a3a; } .tone-amber { background: #fdf0d5; color: #a8650a; } .tone-rose { background: #fbe4ea; color: #b4234d; } .tone-slate { background: #e9edf2; color: #3f4f61; }
.chart-box { position: relative; height: 260px; }
.alert-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.dot-danger { background: #d92d20; } .dot-warning { background: #f79009; } .dot-info { background: #2e90fa; }
.mod-card { transition: box-shadow .15s ease, transform .15s ease; }
.mod-card:hover { box-shadow: 0 6px 18px rgba(16,24,40,.09); transform: translateY(-1px); }
.mod-icon { width: 34px; height: 34px; border-radius: .6rem; background: color-mix(in srgb, var(--brand) 14%, white); color: var(--brand); display: grid; place-items: center; }
.mod-n { font-size: 1.35rem; font-weight: 700; color: #17212b; line-height: 1.1; }
.mod-l { font-size: .72rem; color: #6b7a8a; line-height: 1.2; }
body.platform { --brand: #1d3557; }
.sb-main { padding: .6rem .8rem; font-size: .93rem; gap: .75rem; margin-bottom: .1rem; }
.sb-main .bi { font-size: 1.1rem; width: 1.2rem; text-align: center; color: var(--sb-muted); }
.sb-main.active .bi, .sb-main:hover .bi { color: #fff; }
body.platform .sb-link.active { background: #2b4c7e; }
@media (prefers-reduced-motion: reduce) { .kpi, .mod-card { transition: none; } a.kpi:hover, .mod-card:hover { transform: none; } }