/* ============================================================
   base.css — Reset, variables CSS, tipografía, utilidades
   BanIgualdad — Mobile-first
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  /* Paleta principal */
  --c-primario:    #1F3864;
  --c-primario-hover: #162a4f;
  --c-exito:       #27AE60;
  --c-exito-hover: #1e8449;
  --c-alerta:      #C05A00;
  --c-alerta-bg:   #FFF3E0;
  --c-peligro:     #C0392B;
  --c-peligro-bg:  #FDEDEC;
  --c-info:        #2980B9;
  --c-info-bg:     #EBF5FB;

  /* Neutros */
  --c-blanco:      #FFFFFF;
  --c-fondo:       #F5F7FA;
  --c-borde:       #DDE1E8;
  --c-texto:       #1A1A2E;
  --c-texto-suave: #6B7280;
  --c-sidebar-texto: rgba(255,255,255,0.85);
  --c-sidebar-activo: rgba(255,255,255,0.15);

  /* Tipografía */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.25rem;    /* 20px */
  --fs-2xl:  1.5rem;     /* 24px */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* Dimensiones layout */
  --sidebar-w: 240px;
  --header-h:  60px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  /* Bordes */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition: 200ms ease;
}

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

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

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-texto);
  background-color: var(--c-fondo);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--c-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── Tipografía ──────────────────────────────────────────────── */
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.3; }
h2 { font-size: var(--fs-xl);  font-weight: var(--fw-bold); line-height: 1.3; }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-base); font-weight: var(--fw-medium); }
p  { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ── Utilidades ──────────────────────────────────────────────── */
.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;
}
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-muted  { color: var(--c-texto-suave); font-size: var(--fs-sm); }
.fw-bold     { font-weight: var(--fw-bold); }
.mt-4        { margin-top: var(--sp-4); }
.mt-6        { margin-top: var(--sp-6); }
.mb-4        { margin-bottom: var(--sp-4); }
.mb-6        { margin-bottom: var(--sp-6); }
.gap-2       { gap: var(--sp-2); }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full      { width: 100%; }
.hidden      { display: none !important; }