/* ═══════════════════════════════════════════════
   VARIABLES — Paleta escolar
   ═══════════════════════════════════════════════ */
:root {
  /* Colores principales */
  --verde-pizarron : #1a7a4a;
  --verde-claro    : #2ecc71;
  --verde-suave    : #d4f5e2;
  --azul-cielo     : #3498db;
  --azul-oscuro    : #1a5276;
  --amarillo-lapiz : #f1c40f;
  --amarillo-suave : #fef9e7;
  --naranja-plastilina: #e67e22;
  --rojo-cartulina : #e74c3c;
  --morado-creyón  : #8e44ad;
  --rosa-goma      : #fd79a8;
  --cafe-madera    : #8B4513;

  /* Neutros */
  --blanco         : #ffffff;
  --gris-claro     : #f5f6fa;
  --gris-medio     : #dfe6e9;
  --gris-texto     : #636e72;
  --negro-suave    : #2d3436;

  /* UI */
  --sombra-sm  : 0 2px 8px rgba(0,0,0,.08);
  --sombra-md  : 0 4px 20px rgba(0,0,0,.12);
  --sombra-lg  : 0 8px 40px rgba(0,0,0,.16);
  --radio-sm   : 8px;
  --radio-md   : 14px;
  --radio-lg   : 24px;
  --radio-full : 999px;
  --transicion : .25s ease;

  /* Tipografía */
  --fuente-base  : 'Nunito', 'Segoe UI', sans-serif;
  --fuente-titulo: 'Poppins', 'Nunito', sans-serif;
  --fs-xs  : .75rem;
  --fs-sm  : .875rem;
  --fs-base: 1rem;
  --fs-md  : 1.125rem;
  --fs-lg  : 1.25rem;
  --fs-xl  : 1.5rem;
  --fs-2xl : 2rem;
  --fs-3xl : 2.5rem;

  /* Espaciado */
  --gap-xs : .25rem;
  --gap-sm : .5rem;
  --gap-md : 1rem;
  --gap-lg : 1.5rem;
  --gap-xl : 2rem;
  --gap-2xl: 3rem;

  /* Layout */
  --sidebar-w   : 260px;
  --topbar-h    : 64px;
  --max-content : 1200px;
}

/* ═══════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family  : var(--fuente-base);
  background   : var(--gris-claro);
  color        : var(--negro-suave);
  line-height  : 1.6;
  min-height   : 100vh;
  overflow-x   : hidden;
}

a { color: var(--verde-pizarron); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--verde-claro); }

img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: var(--fuente-base); }
input, select, textarea { font-family: var(--fuente-base); }
ul, ol { list-style: none; }

/* ═══════════════════════════════════════════════
   TIPOGRAFÍA
   ═══════════════════════════════════════════════ */
h1, h2, h3, h4, h5 {
  font-family : var(--fuente-titulo);
  font-weight : 700;
  line-height : 1.3;
  color       : var(--negro-suave);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
p  { margin-bottom: var(--gap-md); }

/* ═══════════════════════════════════════════════
   LAYOUT PRINCIPAL (sidebar + contenido)
   ═══════════════════════════════════════════════ */
.app-wrapper {
  display  : flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
  width      : var(--sidebar-w);
  background : linear-gradient(180deg, var(--verde-pizarron) 0%, var(--azul-oscuro) 100%);
  min-height : 100vh;
  position   : fixed;
  top        : 0; left: 0;
  z-index    : 1000;
  display    : flex;
  flex-direction: column;
  transition : transform var(--transicion);
  box-shadow : var(--sombra-lg);
}

.sidebar-logo {
  padding      : var(--gap-lg) var(--gap-md);
  text-align   : center;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.sidebar-logo img  { width: 72px; margin: 0 auto var(--gap-sm); border-radius: 50%; border: 3px solid rgba(255,255,255,.3); }
.sidebar-logo h2   { color: var(--blanco); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.sidebar-logo span { color: var(--amarillo-lapiz); font-size: var(--fs-xs); }

.sidebar-nav { flex: 1; padding: var(--gap-md) 0; overflow-y: auto; }
.sidebar-nav ul { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--gap-sm); }

.nav-item a {
  display      : flex;
  align-items  : center;
  gap          : var(--gap-sm);
  padding      : 10px var(--gap-md);
  border-radius: var(--radio-sm);
  color        : rgba(255,255,255,.8);
  font-size    : var(--fs-sm);
  font-weight  : 600;
  transition   : all var(--transicion);
}
.nav-item a:hover,
.nav-item.active a {
  background: rgba(255,255,255,.15);
  color     : var(--blanco);
  transform : translateX(4px);
}
.nav-item.active a { background: var(--verde-claro); color: var(--blanco); }
.nav-item a .nav-icon { font-size: 1.2rem; width: 24px; text-align: center; }
.nav-badge {
  margin-left  : auto;
  background   : var(--rojo-cartulina);
  color        : var(--blanco);
  font-size    : var(--fs-xs);
  font-weight  : 700;
  padding      : 2px 7px;
  border-radius: var(--radio-full);
  min-width    : 20px;
  text-align   : center;
}

.sidebar-user {
  padding      : var(--gap-md);
  border-top   : 1px solid rgba(255,255,255,.15);
  display      : flex;
  align-items  : center;
  gap          : var(--gap-sm);
}
.sidebar-user img  { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.4); }
.sidebar-user-info { flex: 1; overflow: hidden; }
.sidebar-user-info strong { color: var(--blanco); font-size: var(--fs-sm); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info span   { color: rgba(255,255,255,.6); font-size: var(--fs-xs); }
.btn-logout { background: none; border: none; color: rgba(255,255,255,.6); font-size: 1.1rem; padding: 4px; transition: color var(--transicion); }
.btn-logout:hover { color: var(--rojo-cartulina); }

/* ── Contenido principal ── */
.main-content {
  margin-left: var(--sidebar-w);
  flex       : 1;
  display    : flex;
  flex-direction: column;
  min-height : 100vh;
}

/* ── Topbar ── */
.topbar {
  height     : var(--topbar-h);
  background : var(--blanco);
  border-bottom: 2px solid var(--gris-medio);
  display    : flex;
  align-items: center;
  padding    : 0 var(--gap-xl);
  position   : sticky;
  top        : 0;
  z-index    : 900;
  box-shadow : var(--sombra-sm);
  gap        : var(--gap-md);
}

.topbar-title { font-size: var(--fs-lg); font-weight: 700; color: var(--verde-pizarron); flex: 1; }
.topbar-year  { background: var(--verde-suave); color: var(--verde-pizarron); font-weight: 700; font-size: var(--fs-sm); padding: 4px 12px; border-radius: var(--radio-full); }

.btn-menu-toggle {
  display   : none;
  background: none;
  border    : none;
  font-size : 1.4rem;
  color     : var(--verde-pizarron);
  padding   : 4px;
}

/* ── Notificaciones topbar ── */
.notif-btn {
  position  : relative;
  background: none;
  border    : none;
  font-size : 1.3rem;
  color     : var(--gris-texto);
  padding   : 4px 8px;
  transition: color var(--transicion);
}
.notif-btn:hover { color: var(--verde-pizarron); }
.notif-count {
  position     : absolute;
  top: -2px; right: -2px;
  background   : var(--rojo-cartulina);
  color        : var(--blanco);
  font-size    : .6rem;
  font-weight  : 700;
  width        : 18px; height: 18px;
  border-radius: 50%;
  display      : flex;
  align-items  : center;
  justify-content: center;
}

/* ── Área de página ── */
.page-content {
  padding : var(--gap-xl);
  flex    : 1;
  max-width: var(--max-content);
  width   : 100%;
  margin  : 0 auto;
}

/* ═══════════════════════════════════════════════
   DECORACIÓN ESCOLAR (fondo con elementos)
   ═══════════════════════════════════════════════ */
.edu-bg {
  background-color : var(--gris-claro);
  background-image :
    radial-gradient(circle at 10% 20%, rgba(241,196,15,.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(46,204,113,.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(52,152,219,.05) 0%, transparent 60%);
}

.page-header {
  margin-bottom: var(--gap-xl);
  display      : flex;
  align-items  : center;
  justify-content: space-between;
  flex-wrap    : wrap;
  gap          : var(--gap-md);
}
.page-header h1 { font-size: var(--fs-2xl); color: var(--verde-pizarron); display: flex; align-items: center; gap: var(--gap-sm); }
.page-header h1 .icon { font-size: 1.8rem; }

/* ── CARDS ── */
.card { background:var(--blanco); border-radius:var(--radio-md); box-shadow:var(--sombra-sm); padding:var(--gap-lg); transition:box-shadow var(--transicion); }
.card:hover { box-shadow:var(--sombra-md); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--gap-md); padding-bottom:var(--gap-md); border-bottom:2px solid var(--gris-medio); }
.card-header h3 { font-size:var(--fs-md); color:var(--verde-pizarron); display:flex; align-items:center; gap:var(--gap-sm); }

/* ── STAT CARDS ── */
.stat-card { background:var(--blanco); border-radius:var(--radio-md); padding:var(--gap-lg); box-shadow:var(--sombra-sm); display:flex; align-items:center; gap:var(--gap-md); border-left:5px solid var(--verde-pizarron); transition:transform var(--transicion),box-shadow var(--transicion); }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--sombra-md); }
.stat-card.verde    { border-color:var(--verde-claro); }
.stat-card.azul     { border-color:var(--azul-cielo); }
.stat-card.amarillo { border-color:var(--amarillo-lapiz); }
.stat-card.naranja  { border-color:var(--naranja-plastilina); }
.stat-card.rojo     { border-color:var(--rojo-cartulina); }
.stat-card.morado   { border-color:var(--morado-creyón); }
.stat-icon { width:56px; height:56px; border-radius:var(--radio-md); display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
.stat-card.verde    .stat-icon { background:#d4f5e2; }
.stat-card.azul     .stat-icon { background:#d6eaf8; }
.stat-card.amarillo .stat-icon { background:#fef9e7; }
.stat-card.naranja  .stat-icon { background:#fdebd0; }
.stat-card.rojo     .stat-icon { background:#fce4e4; }
.stat-card.morado   .stat-icon { background:#f5eef8; }
.stat-info strong { font-size:var(--fs-2xl); font-weight:800; display:block; line-height:1.1; }
.stat-info span   { font-size:var(--fs-sm); color:var(--gris-texto); }

/* ── GRIDS ── */
.grid-2    { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-lg); }
.grid-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-lg); }
.grid-4    { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-lg); }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap-lg); }

/* ── BOTONES ── */
.btn { display:inline-flex; align-items:center; gap:var(--gap-sm); padding:10px 20px; border-radius:var(--radio-sm); font-size:var(--fs-sm); font-weight:700; border:2px solid transparent; transition:all var(--transicion); white-space:nowrap; }
.btn:hover { transform:translateY(-1px); box-shadow:var(--sombra-sm); }
.btn:active { transform:translateY(0); }
.btn-primary   { background:var(--verde-pizarron); color:var(--blanco); }
.btn-primary:hover { background:#145f39; color:var(--blanco); }
.btn-secondary { background:var(--azul-cielo); color:var(--blanco); }
.btn-secondary:hover { background:#2980b9; color:var(--blanco); }
.btn-warning   { background:var(--amarillo-lapiz); color:var(--negro-suave); }
.btn-danger    { background:var(--rojo-cartulina); color:var(--blanco); }
.btn-danger:hover { background:#c0392b; color:var(--blanco); }
.btn-outline   { background:transparent; border-color:var(--verde-pizarron); color:var(--verde-pizarron); }
.btn-outline:hover { background:var(--verde-pizarron); color:var(--blanco); }
.btn-ghost     { background:var(--gris-claro); color:var(--gris-texto); border-color:var(--gris-medio); }
.btn-ghost:hover { background:var(--gris-medio); }
.btn-sm   { padding:6px 14px; font-size:var(--fs-xs); }
.btn-lg   { padding:14px 28px; font-size:var(--fs-md); }
.btn-full { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── FORMULARIOS ── */
.form-group { margin-bottom:var(--gap-md); }
.form-label { display:block; font-size:var(--fs-sm); font-weight:700; color:var(--negro-suave); margin-bottom:var(--gap-xs); }
.form-label .required { color:var(--rojo-cartulina); margin-left:2px; }
.form-control { width:100%; padding:10px 14px; border:2px solid var(--gris-medio); border-radius:var(--radio-sm); font-size:var(--fs-base); font-family:var(--fuente-base); color:var(--negro-suave); background:var(--blanco); transition:border-color var(--transicion),box-shadow var(--transicion); outline:none; }
.form-control:focus { border-color:var(--verde-pizarron); box-shadow:0 0 0 3px rgba(26,122,74,.15); }
.form-control::placeholder { color:#b2bec3; }
.form-hint  { font-size:var(--fs-xs); color:var(--gris-texto); margin-top:var(--gap-xs); }
.form-error { font-size:var(--fs-xs); color:var(--rojo-cartulina); margin-top:var(--gap-xs); }
.form-row        { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-md); }
.form-row.three  { grid-template-columns:1fr 1fr 1fr; }

/* ── TABLAS ── */
.table-wrapper { overflow-x:auto; border-radius:var(--radio-md); box-shadow:var(--sombra-sm); }
.table { width:100%; border-collapse:collapse; background:var(--blanco); font-size:var(--fs-sm); }
.table th { background:var(--verde-pizarron); color:var(--blanco); padding:12px 16px; text-align:left; font-weight:700; white-space:nowrap; }
.table th:first-child { border-radius:var(--radio-sm) 0 0 0; }
.table th:last-child  { border-radius:0 var(--radio-sm) 0 0; }
.table td { padding:11px 16px; border-bottom:1px solid var(--gris-medio); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--verde-suave); }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--radio-full); font-size:var(--fs-xs); font-weight:700; white-space:nowrap; }
.badge-success { background:var(--verde-suave);    color:var(--verde-pizarron); }
.badge-warning { background:var(--amarillo-suave); color:#856404; }
.badge-danger  { background:#fce4e4;               color:var(--rojo-cartulina); }
.badge-info    { background:#d6eaf8;               color:var(--azul-oscuro); }
.badge-gray    { background:var(--gris-medio);     color:var(--gris-texto); }
.badge-purple  { background:#f5eef8;               color:var(--morado-creyón); }

/* ── ALERTAS ── */
.alert { padding:var(--gap-md) var(--gap-lg); border-radius:var(--radio-sm); border-left:4px solid; font-size:var(--fs-sm); display:flex; align-items:flex-start; gap:var(--gap-sm); margin-bottom:var(--gap-md); }
.alert-success { background:var(--verde-suave);    border-color:var(--verde-claro);    color:#145f39; }
.alert-warning { background:var(--amarillo-suave); border-color:var(--amarillo-lapiz); color:#856404; }
.alert-danger  { background:#fce4e4;               border-color:var(--rojo-cartulina); color:#922b21; }
.alert-info    { background:#d6eaf8;               border-color:var(--azul-cielo);     color:var(--azul-oscuro); }

/* ── TOASTS ── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:var(--gap-sm); }
.toast { background:var(--negro-suave); color:var(--blanco); padding:12px 20px; border-radius:var(--radio-sm); box-shadow:var(--sombra-lg); font-size:var(--fs-sm); min-width:260px; animation:slideIn .3s ease; display:flex; align-items:center; gap:var(--gap-sm); }
.toast.success { border-left:4px solid var(--verde-claro); }
.toast.error   { border-left:4px solid var(--rojo-cartulina); }
.toast.warning { border-left:4px solid var(--amarillo-lapiz); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2000; display:flex; align-items:center; justify-content:center; padding:var(--gap-md); opacity:0; pointer-events:none; transition:opacity var(--transicion); }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--blanco); border-radius:var(--radio-lg); box-shadow:var(--sombra-lg); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; transform:scale(.95); transition:transform var(--transicion); }
.modal-overlay.open .modal { transform:scale(1); }
.modal-header { padding:var(--gap-lg); border-bottom:2px solid var(--gris-medio); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,var(--verde-pizarron),var(--azul-oscuro)); border-radius:var(--radio-lg) var(--radio-lg) 0 0; }
.modal-header h3  { color:var(--blanco); font-size:var(--fs-lg); }
.modal-close      { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.4rem; transition:color var(--transicion); }
.modal-close:hover{ color:var(--blanco); }
.modal-body       { padding:var(--gap-lg); }
.modal-footer     { padding:var(--gap-md) var(--gap-lg); border-top:1px solid var(--gris-medio); display:flex; gap:var(--gap-sm); justify-content:flex-end; }

/* ── PAGINACIÓN ── */
.pagination { display:flex; align-items:center; gap:var(--gap-xs); flex-wrap:wrap; margin-top:var(--gap-lg); }
.pagination button { width:36px; height:36px; border:2px solid var(--gris-medio); border-radius:var(--radio-sm); background:var(--blanco); color:var(--gris-texto); font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; justify-content:center; transition:all var(--transicion); }
.pagination button:hover   { border-color:var(--verde-pizarron); color:var(--verde-pizarron); }
.pagination button.active  { background:var(--verde-pizarron); border-color:var(--verde-pizarron); color:var(--blanco); }
.pagination button:disabled{ opacity:.4; cursor:not-allowed; }

/* ── NOTAS ── */
.nota-badge { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; font-size:var(--fs-md); font-weight:800; }
.nota-badge.aprobado  { background:var(--verde-suave); color:var(--verde-pizarron); }
.nota-badge.reprobado { background:#fce4e4; color:var(--rojo-cartulina); }
.nota-badge.pendiente { background:var(--gris-medio); color:var(--gris-texto); }
.progress-bar-wrap { background:var(--gris-medio); border-radius:var(--radio-full); height:8px; overflow:hidden; }
.progress-bar      { height:100%; border-radius:var(--radio-full); background:var(--verde-claro); transition:width .6s ease; }
.progress-bar.warning { background:var(--amarillo-lapiz); }
.progress-bar.danger  { background:var(--rojo-cartulina); }

/* ── PANEL NOTIFICACIONES ── */
.notif-panel { position:fixed; top:0; right:-380px; width:360px; height:100vh; background:var(--blanco); box-shadow:var(--sombra-lg); z-index:1500; display:flex; flex-direction:column; transition:right var(--transicion); }
.notif-panel.open { right:0; }
.notif-panel-header { padding:var(--gap-md) var(--gap-lg); background:linear-gradient(135deg,var(--verde-pizarron),var(--azul-oscuro)); display:flex; align-items:center; justify-content:space-between; }
.notif-panel-header h3 { color:var(--blanco); font-size:var(--fs-md); }
.notif-panel-body { flex:1; overflow-y:auto; padding:var(--gap-sm); }

.notif-item { padding:var(--gap-md); border-radius:var(--radio-sm); border-left:3px solid var(--gris-medio); margin-bottom:var(--gap-xs); cursor:pointer; transition:background var(--transicion); }
.notif-item:hover         { background:var(--gris-claro); }
.notif-item.unread        { border-color:var(--verde-pizarron); background:var(--verde-suave); }
.notif-item.type-pago     { border-color:var(--verde-claro); }
.notif-item.type-circular { border-color:var(--azul-cielo); }
.notif-item.type-nota     { border-color:var(--amarillo-lapiz); }
.notif-item-title { font-size:var(--fs-sm); font-weight:700; margin-bottom:2px; }
.notif-item-body  { font-size:var(--fs-xs); color:var(--gris-texto); }
.notif-item-time  { font-size:var(--fs-xs); color:#b2bec3; margin-top:4px; }

/* ── DECORACIÓN ESCOLAR ── */
.school-divider { display:flex; align-items:center; gap:var(--gap-md); margin:var(--gap-xl) 0; color:var(--gris-texto); font-size:var(--fs-sm); }
.school-divider::before,
.school-divider::after { content:''; flex:1; height:3px; background:repeating-linear-gradient(90deg, var(--amarillo-lapiz) 0,var(--amarillo-lapiz) 10px, var(--azul-cielo) 10px,var(--azul-cielo) 20px, var(--rojo-cartulina) 20px,var(--rojo-cartulina) 30px, var(--verde-claro) 30px,var(--verde-claro) 40px); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-260px); width:260px; }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .btn-menu-toggle { display:flex; }
  .page-content { padding:var(--gap-md); }
  .grid-2,.grid-3,.grid-4,.grid-auto { grid-template-columns:1fr; }
  .form-row,.form-row.three { grid-template-columns:1fr; }
  .topbar { padding:0 var(--gap-md); }
  .topbar-title { font-size:var(--fs-base); }
  .table th,.table td { padding:8px 10px; font-size:var(--fs-xs); }
  .notif-panel { width:100%; right:-100%; }
  .modal { max-width:100%; }
  .page-header { flex-direction:column; align-items:flex-start; }
  .page-header h1 { font-size:var(--fs-xl); }
}
@media (max-width:480px) {
  .stat-card { flex-direction:column; text-align:center; }
  .btn-lg { padding:12px 20px; font-size:var(--fs-base); }
  .pagination button { width:32px; height:32px; }
}

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; }
.sidebar-overlay.open { display:block; }

/* ── UTILIDADES ── */
.text-center     { text-align:center; }
.text-right      { text-align:right; }
.text-muted      { color:var(--gris-texto); }
.text-success    { color:var(--verde-pizarron); }
.text-danger     { color:var(--rojo-cartulina); }
.text-sm         { font-size:var(--fs-sm); }
.text-xs         { font-size:var(--fs-xs); }
.fw-bold         { font-weight:700; }
.fw-800          { font-weight:800; }
.d-flex          { display:flex; }
.align-center    { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-sm          { gap:var(--gap-sm); }
.gap-md          { gap:var(--gap-md); }
.mt-sm           { margin-top:var(--gap-sm); }
.mt-md           { margin-top:var(--gap-md); }
.mt-lg           { margin-top:var(--gap-lg); }
.mb-md           { margin-bottom:var(--gap-md); }
.mb-lg           { margin-bottom:var(--gap-lg); }
.p-md            { padding:var(--gap-md); }
.hidden          { display:none !important; }
.loading         { opacity:.6; pointer-events:none; }