/* ════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO — Dashboard Novela Mollendo
   Dirección visual tipo dashboard SaaS limpio (referencia: paneles
   de analítica B2B). Una sola tipografía sans-serif, acento neutro
   en negro/gris oscuro, jerarquía por tamaño y peso, no por familia
   de fuente. El color por estado (sello, badges) se mantiene aparte.
   ════════════════════════════════════════════════════════════ */

:root {
  /* — Color — */
  --verde-oscuro:   #1a1a1a;   /* sidebar, marca, máxima jerarquía */
  --verde-oscuro-2: #2b2b2b;   /* hover sobre superficie oscura */
  --crema:          #f4f4f4;   /* fondo principal de la app */
  --crema-2:        #e9e9e9;   /* fondo de inputs, hover sutil */
  --blanco-calido:  #ffffff;   /* superficie de tarjetas */
  --borde:          #e2e2e2;   /* bordes sutiles sobre fondo */
  --borde-fuerte:   #cfcfcf;

  --coral:          #c0524a;   /* crítico / línea 1868-1880 / error */
  --coral-suave:    #f3ddda;   /* fondo de chip coral */
  --mostaza:        #c99a3e;   /* en progreso / línea 1925 / aviso */
  --mostaza-suave:  #f3e6c8;
  --salvia:         #5b8a64;   /* revisado / éxito */
  --salvia-suave:   #dcebe0;
  --azul-petroleo:  #3e6fc9;   /* continuidad / info */
  --azul-suave:     #dce6f7;
  --violeta:        #7a5fc9;   /* recordatorio */
  --violeta-suave:  #e6e1f7;

  /* — Acento neutro de marca (antes mostaza/naranja) — */
  --acento:         #111111;
  --acento-hover:   #000000;
  --acento-suave:   #ececec;

  --texto-principal: #161616;
  --texto-secundario: #6b6b6b;
  --texto-terciario:  #9a9a9a;
  --texto-sobre-oscuro: #f4f4f4;
  --texto-sobre-oscuro-tenue: #a0a0a0;

  /* — Tipografía: una sola familia sans-serif para toda la UI — */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Radios y sombras — */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 14px;
  --sombra-card: 0 1px 2px rgba(20, 20, 20, 0.05), 0 1px 1px rgba(20, 20, 20, 0.03);
  --sombra-modal: 0 20px 60px rgba(0, 0, 0, 0.22);
  --sombra-sidebar: 1px 0 0 rgba(0, 0, 0, 0.06);

  /* — Espaciado — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --sidebar-width: 72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--crema);
  color: var(--texto-principal);
  font-family: var(--font-cuerpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--texto-principal);
}

a { color: inherit; }

button {
  font-family: var(--font-cuerpo);
  cursor: pointer;
}

/* Foco visible — accesibilidad, nunca eliminar */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--texto-terciario); }