/* ============================================================
   base.css — Variables globales, reset y tipografía
   SitecAcademico · Universidad Panamericana
   ============================================================ */

:root {
  /* Paleta principal */
  --azul:          #1B3A6B;
  --azul-oscuro:   #12284E;
  --azul-medio:    #234d8f;
  --azul-claro:    #EBF0F8;
  --amarillo:      #F5C518;
  --amarillo-hover:#D9AE0F;

  /* Grises y neutros */
  --blanco:        #FFFFFF;
  --gris-bg:       #F4F6FA;
  --gris-borde:    #D8DDE6;
  --gris-claro:    #F0F2F7;
  --gris-texto:    #6B7280;
  --negro:         #111827;
  --texto:         #1F2937;

  /* Estados */
  --exito:         #16A34A;
  --exito-bg:      #F0FDF4;
  --error:         #DC2626;
  --error-bg:      #FEF2F2;
  --advertencia:   #D97706;
  --advertencia-bg:#FFFBEB;
  --info:          #2563EB;
  --info-bg:       #EFF6FF;

  /* Tipografía */
  --fuente:        'Segoe UI', system-ui, -apple-system, sans-serif;
  --fuente-mono:   'Consolas', monospace;

  /* Espaciados */
  --radio:         8px;
  --radio-lg:      12px;
  --sombra:        0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --sombra-md:     0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --sombra-lg:     0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente);
  font-size: 14px;
  color: var(--texto);
  background: var(--gris-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Tipografía ──────────────────────────────────────── */
h1 { font-size: 1.5rem;   font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.25rem;  font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.05rem;  font-weight: 600; line-height: 1.3; }
h4 { font-size: 0.9rem;   font-weight: 600; }

/* ── Utilidades generales ────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges de estado */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-activo    { background: var(--exito-bg);       color: var(--exito); }
.badge-inactivo  { background: var(--gris-claro);     color: var(--gris-texto); }
.badge-pendiente { background: var(--advertencia-bg); color: var(--advertencia); }
.badge-pagado    { background: var(--exito-bg);       color: var(--exito); }
.badge-error     { background: var(--error-bg);       color: var(--error); }

/* Spinner */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: girar 0.6s linear infinite;
  display: none;
}
.spinner.oscuro {
  border-color: rgba(27,58,107,0.2);
  border-top-color: var(--azul);
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Alertas */
.alerta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radio);
  font-size: 0.82rem;
  margin-bottom: 1rem;
}
.alerta-error    { background: var(--error-bg);       border: 1px solid #FECACA; color: var(--error); }
.alerta-exito    { background: var(--exito-bg);       border: 1px solid #BBF7D0; color: var(--exito); }
.alerta-info     { background: var(--info-bg);        border: 1px solid #BFDBFE; color: var(--info); }
.alerta-advertencia { background: var(--advertencia-bg); border: 1px solid #FDE68A; color: var(--advertencia); }