/* ==========================================================================
   VELMO · theme.css — Design system, capa de TOKENS
   Fase 1 del PLAN_REDISENO_UI.md
   --------------------------------------------------------------------------
   Se carga con <link> DESPUES del <style> embebido de cada pagina, asi que
   gana el ultimo: este :root prevalece sin borrar nada del CSS antiguo.

   Los valores de los colores existentes son IDENTICOS a los que ya habia en
   index.html / admin.html / enterprise.html. Esta hoja no cambia el aspecto
   de ninguna vista: solo unifica el superconjunto (index tenia --navy2 y
   --dangerbg; enterprise tenia --warn y --warnbg; ahora los tienen los tres)
   y anade tokens nuevos que aun no usa nadie.

   REGLA: todo estilo nuevo va aqui o en components.css, nunca inline.
   ========================================================================== */

:root{

  /* ---- Marca (valores heredados, NO tocar sin decision de negocio) ------ */
  --navy:#1B2A4A;          /* azul corporativo, textos de titulo y cabeceras */
  --navy2:#24365c;         /* azul un punto mas claro (venia solo de index)  */
  --gold:#c2a15e;          /* dorado de marca, accion primaria               */
  --gold-d:#a8874a;        /* dorado oscuro, hover                          */

  /* ---- Superficies y texto -------------------------------------------- */
  --bg:#f4f6fb;            /* fondo de pagina                               */
  --card:#ffffff;          /* fondo de tarjeta                              */
  --ink:#1f2733;           /* texto principal                               */
  --muted:#6b7688;         /* texto secundario                              */
  --line:#e6e9f0;          /* bordes y separadores                          */

  /* ---- Estado ---------------------------------------------------------- */
  --ok:#1e7d54;      --okbg:#e6f4ec;
  --warn:#a86a10;    --warnbg:#fdf3e2;      /* venia solo de enterprise     */
  --danger:#b23b3b;  --dangerbg:#fbeaea;    /* --dangerbg venia solo de index */
  --info:#284b9b;    --infobg:#e7eefb;      /* nuevo: ya se usaba a pelo en
                                               .tag.en_curso y .tp.seguro    */
  --neutral:var(--muted); --neutralbg:#eef1f6;

  /* ---- Tipografia ------------------------------------------------------ */
  /* Fuente del sistema a proposito: la CSP fija font-src 'self' data:, asi
     que Google Fonts quedaria bloqueado por el navegador (ver §3.3 del plan). */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;

  --fs-xs:12px;   /* badges, pies de tabla        */
  --fs-sm:14px;   /* texto secundario, botones sm */
  --fs-md:16px;   /* cuerpo                       */
  --fs-lg:18px;   /* titulo de tarjeta            */
  --fs-xl:24px;   /* titulo de vista              */
  --fs-2xl:32px;  /* cifras de dashboard          */

  --lh-tight:1.25;
  --lh-base:1.5;

  --fw-normal:400; --fw-med:600; --fw-bold:700; --fw-black:800;

  /* ---- Espaciado (escala 4/8/12/16/24/32/48) --------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* ---- Radios ---------------------------------------------------------- */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:16px; --r-pill:999px;

  /* ---- Sombras (3 niveles; --shadow conserva su valor historico) -------- */
  --shadow-sm:0 1px 3px rgba(27,42,74,.08);
  --shadow:0 10px 30px rgba(27,42,74,.10);
  --shadow-lg:0 18px 44px rgba(27,42,74,.16);

  /* ---- Movimiento ------------------------------------------------------ */
  --t-fast:150ms; --t-base:200ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* ---- Capas ----------------------------------------------------------- */
  --z-sticky:20; --z-nav:40; --z-overlay:80; --z-modal:90; --z-toast:100;

  /* ---- Anchos ---------------------------------------------------------- */
  --w-vecino:940px;   /* index.html  */
  --w-panel:1100px;   /* admin.html  */
  --w-wide:1150px;    /* com-* / aad-* */

  /* Objetivo tactil minimo (WCAG): usar en Fase 3 */
  --tap:44px;
}

/* ==========================================================================
   Foco visible — accesibilidad
   Aditivo: solo se pinta al navegar con teclado, el raton no lo dispara.
   ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold-d);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}