.auth-page { background: radial-gradient(circle at 12% 10%, var(--brand-100), transparent 34%), radial-gradient(circle at 90% 88%, var(--accent-50), transparent 38%), var(--bg); min-height: 100vh; }
.auth-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: var(--sp-4); }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); max-width: 450px; padding: clamp(24px, 6vw, 42px); width: 100%; }
.login-card__brand { align-items: center; display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }.login-card__brand h1 { font-size: var(--fs-2xl); margin: 0; }.login-card__brand p { color: var(--brand-600); font-size: var(--fs-sm); font-weight: 800; margin: 0; text-transform: uppercase; }.login-card__intro { color: var(--text-muted); margin-bottom: var(--sp-6); }.login-card__help { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-5) 0 0; text-align: center; }.theme-toggle--floating { position: fixed; right: var(--sp-4); top: var(--sp-4); z-index: 2; }
.app-shell { min-height: 100vh; }.drawer-open { overflow: hidden; }.sidebar { background: var(--sidebar); color: #fff; display: flex; flex-direction: column; height: 100vh; left: 0; padding: var(--sp-4); position: fixed; top: 0; transform: translateX(-100%); transition: transform var(--transition); width: min(280px, 86vw); z-index: 100; }.sidebar.is-open { transform: translateX(0); }.drawer-overlay { background: rgb(2 6 23 / 55%); inset: 0; position: fixed; z-index: 90; }.sidebar__brand { align-items: center; color: #fff; display: flex; gap: var(--sp-3); min-height: 56px; padding: 0 var(--sp-2); }.sidebar__brand:hover { text-decoration: none; }.sidebar__brand span { display: grid; }.sidebar__brand strong { font-size: var(--fs-xl); line-height: 1; }.sidebar__brand small { color: var(--sidebar-muted); }.sidebar__nav { flex: 1; margin-top: var(--sp-5); overflow-y: auto; }.sidebar__label { color: var(--sidebar-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; margin: var(--sp-5) var(--sp-3) var(--sp-2); text-transform: uppercase; }.sidebar__link { align-items: center; border-radius: var(--radius-sm); color: #dceae1; display: flex; gap: var(--sp-3); min-height: 46px; padding: var(--sp-2) var(--sp-3); }.sidebar__link:hover, .sidebar__link.is-active { background: var(--sidebar-active); color: #fff; text-decoration: none; }.sidebar__icon { align-items: center; display: flex; font-size: 20px; justify-content: center; width: 28px; }.sidebar__user { align-items: center; border-top: 1px solid rgb(255 255 255 / 12%); display: flex; gap: var(--sp-2); padding-top: var(--sp-4); }.sidebar__user-name { display: grid; flex: 1; min-width: 0; }.sidebar__user-name strong, .sidebar__user-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.sidebar__user-name small { color: var(--sidebar-muted); }.sidebar__user .icon-button { color: #fff; }.avatar { align-items: center; background: linear-gradient(135deg, var(--accent-500), #fb923c); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 40px; font-weight: 800; height: 40px; justify-content: center; width: 40px; }
.app-main { min-width: 0; }.topbar { align-items: center; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); display: flex; gap: var(--sp-3); min-height: 72px; padding: var(--sp-3) var(--sp-4); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); }.topbar__title { min-width: 0; }.topbar__title p { color: var(--text-muted); display: none; font-size: var(--fs-xs); margin: 0; }.topbar__title h1 { font-size: var(--fs-lg); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.topbar__actions { align-items: center; display: flex; gap: var(--sp-1); margin-left: auto; }.page-content { margin: 0 auto; max-width: 1500px; padding: var(--sp-4) var(--sp-4) 96px; width: 100%; }.mobile-nav { background: var(--surface); border-top: 1px solid var(--border); bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); left: 0; min-height: 68px; position: fixed; right: 0; z-index: 70; }.mobile-nav a { align-items: center; color: var(--text-muted); display: flex; flex-direction: column; font-size: 11px; gap: 2px; justify-content: center; }.mobile-nav a span { font-size: 19px; }.mobile-nav a.is-active { color: var(--brand-600); font-weight: 800; }.mobile-nav a:hover { text-decoration: none; }
.page-heading { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }.page-heading h2 { margin-bottom: var(--sp-2); }.page-heading > div > p:last-child { color: var(--text-muted); margin: 0; }.period-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }.period-picker label { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }.period-picker span { display: block; margin-bottom: 2px; }.period-picker select { min-height: 44px; padding: var(--sp-2); }
.kpi-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-5); }.dashboard-grid { display: grid; gap: var(--sp-4); }.chart-placeholder { align-items: center; background: linear-gradient(180deg, var(--brand-50), transparent); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); display: flex; justify-content: center; min-height: 260px; padding: var(--sp-5); text-align: center; }.session-list { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }.session-list li { align-items: center; display: flex; gap: var(--sp-3); }.session-list li > span:last-child { display: grid; }.session-list small { color: var(--text-muted); }.date-tile { align-items: center; background: var(--brand-50); border-radius: var(--radius-sm); color: var(--brand-600); display: flex; flex: 0 0 48px; flex-direction: column; height: 48px; justify-content: center; line-height: 1; }.date-tile small { color: inherit; font-size: 10px; text-transform: uppercase; }
@media (min-width: 600px) { .page-content { padding: var(--sp-5) var(--sp-5) 96px; }.page-heading { align-items: end; flex-direction: row; justify-content: space-between; }.period-picker { min-width: 260px; }.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .sidebar { transform: none; width: 72px; }.sidebar__brand span, .sidebar__text, .sidebar__label, .sidebar__user-name { display: none; }.sidebar__brand { justify-content: center; padding: 0; }.sidebar__link { justify-content: center; padding: var(--sp-2); }.sidebar__user { justify-content: center; }.sidebar__user .avatar, .sidebar__user form { display: none; }.app-main { margin-left: 72px; }.topbar__menu, .mobile-nav { display: none; }.topbar__title p { display: block; }.page-content { padding-bottom: var(--sp-6); }.dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
@media (min-width: 1024px) { .sidebar { width: 260px; }.sidebar__brand { justify-content: flex-start; padding: 0 var(--sp-2); }.sidebar__brand span, .sidebar__text, .sidebar__label, .sidebar__user-name { display: initial; }.sidebar__label { display: block; }.sidebar__link { justify-content: flex-start; padding: var(--sp-2) var(--sp-3); }.sidebar__user { justify-content: flex-start; }.sidebar__user .avatar, .sidebar__user form { display: inline-flex; }.app-main { margin-left: 260px; }.page-content { padding: var(--sp-6); }.kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sidebar__settings { flex: 0 0 auto; margin-top: var(--sp-1); }.sidebar__brand img { flex: 0 0 auto; }.sidebar__brand strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.page-heading--catalog { align-items: flex-start; }.page-heading--catalog .button { flex: 0 0 auto; }
.chart-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }.chart { align-items: center; color: var(--text-muted); display: flex; justify-content: center; min-height: 250px; overflow: hidden; }.chart svg { height: auto; max-height: 280px; width: 100%; }.dashboard-pending { margin-bottom: var(--sp-4); }
@media (min-width: 900px) { .chart-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.chart-grid .card:first-child { grid-column: 1 / -1; } }
@media (min-width: 1250px) { .chart-grid { grid-template-columns: 2fr 1fr 1fr; }.chart-grid .card:first-child { grid-column: auto; } }
/* Ajuste de marca Inter FC Saltillo en sidebar */
.sidebar__brand { overflow: hidden; }
.sidebar__brand span { flex: 1 1 auto; min-width: 0; }
.sidebar__brand strong,
.sidebar__brand small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__brand strong { font-size: var(--fs-lg); line-height: 1.12; max-width: none; }
.sidebar__user { min-width: 0; overflow: hidden; }
.sidebar__user .avatar,
.sidebar__user form { flex: 0 0 auto; }
.sidebar__user-name { flex: 1 1 auto; min-width: 0; }
.sidebar__user-name strong,
.sidebar__user-name small { display: block; max-width: 100%; }

@media (min-width: 1024px) {
  .sidebar { width: 288px; }
  .app-main { margin-left: 288px; }
  .sidebar__brand span,
  .sidebar__user-name { display: grid; }
  .sidebar__text { display: inline; }
}

.login-card--admin { border-top: 6px solid #20d2c4; }
.login-card--platform { border-top: 6px solid #f4b841; }
.login-card--academy { border-top: 6px solid var(--brand-500); }
.login-card__mark { align-items: center; background: #20d2c4; border: 2px solid #10201d; border-radius: 50%; color: #10201d; display: inline-flex; flex: 0 0 72px; font-size: var(--fs-xl); font-weight: 900; height: 72px; justify-content: center; letter-spacing: 0; width: 72px; }
.login-card--admin .login-card__mark { background: #20d2c4; }
.login-card--platform .login-card__mark { background: #f4b841; }
.login-card--academy .login-card__brand h1 { overflow-wrap: anywhere; }