/* base.css — Design tokens, tipografía, utilidades globales */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --acento:        #C5F135;
  --acento-oscuro: #a8d420;
  --acento-claro:  #d8f76b;
  --negro:         #0A0A0A;
  --blanco:        #FFFFFF;
  --fondo-1:       #FFFFFF;
  --fondo-2:       #F7F7F5;
  --fondo-3:       #EFEFEB;
  --texto-1:       #0A0A0A;
  --texto-2:       #5A5A54;
  --texto-3:       #A8A8A0;
  --borde:         #E4E4E0;
  --borde-claro:   #EFEFEB;
  --error:         #EF4444;
  --exito:         #22C55E;
  --info:          #3B82F6;
  --aviso:         #F59E0B;

  --sombra-xs: 0 1px 2px rgba(0,0,0,.06);
  --sombra-sm: 0 2px 8px rgba(0,0,0,.07);
  --sombra-md: 0 4px 20px rgba(0,0,0,.09);
  --sombra-lg: 0 8px 40px rgba(0,0,0,.11);
  --sombra-xl: 0 16px 60px rgba(0,0,0,.14);
  --sombra-acento: 0 6px 28px rgba(197,241,53,.4);

  --fuente-titulo: 'Syne', sans-serif;
  --fuente-cuerpo: 'DM Sans', sans-serif;

  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  --trans-rapida: 150ms cubic-bezier(.4,0,.2,1);
  --trans-base:   250ms cubic-bezier(.4,0,.2,1);
  --trans-lenta:  400ms cubic-bezier(.4,0,.2,1);

  --alto-navbar:  60px;
  --ancho-sidebar:240px;
  --alto-bottom:  62px;
}

/* ── GLOBAL ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--fuente-cuerpo);
  background: var(--fondo-2);
  color: var(--texto-1);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.2;
}

::selection { background: var(--acento); color: var(--negro); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }

:focus-visible { outline: 2px solid var(--acento-oscuro); outline-offset: 2px; border-radius: var(--r-sm); }

/* ── UTILIDADES ─────────────────────────────────────────────────────────── */
.oculto   { display: none !important; }
.visible  { display: block !important; }
.flex     { display: flex; }
.centrado { display: flex; align-items: center; justify-content: center; }
.texto-mutado  { color: var(--texto-3); }
.texto-secundario { color: var(--texto-2); }
.fuente-titulo { font-family: var(--fuente-titulo); }
.negrita  { font-weight: 700; }
.semibold { font-weight: 600; }
.truncar  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }