/* ==========================================================================
   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;

  /* ---- Puntos de corte (Fase 3) -----------------------------------------
     El CSS no permite var() dentro de una condicion @media (limitacion real
     del lenguaje, no un descuido) — estos tres son la referencia documentada
     de qué valor literal usar en cualquier @media nuevo o tocado, no algo
     que el navegador aplique solo. Elegidos partiendo de lo que YA dominaba
     en el codigo, no inventados desde cero:
       --bp-sm: ya era el mas usado en los 3 ficheros (formularios/modales a
                ancho completo, tablas con letra pequeña).
       --bp-md: ya era el mas usado en enterprise.html (grids de contenido:
                .addgrid/.cgrid/.grid2 a 1 columna) — sigue en 760, sin tocar.
       --bp-lg: el mismo que usa velmo-nav.js para recoger el sidebar. Además
                de los grids anchos (.pv-grid/.pv-servs/.dash2/.idet-grid en
                admin, .cmp-detail en enterprise), es TAMBIÉN el punto de
                corte de .v-table--cards (tablas -> tarjetas): se probó
                primero en --bp-md (760) y el barrido de anchos de esta fase
                encontró que a 768px (iPad en vertical, uno de los anchos que
                hay que probar siempre) se quedaba fuera por 8px — la propia
                trampa que se intentaba cerrar. Con --bp-lg, por debajo de
                900px el sidebar se recoge, las tablas pasan a tarjeta y los
                grids anchos bajan a 1 columna, todo a la vez.
     Los valores sueltos que había antes de esta fase (620/640/820/860 según
     fichero) se han fundido en estos donde no representaban una necesidad de
     diseño distinta — verificado con barrido de anchos intermedios (375/768/
     900/1024/1280), no solo a ojo. index.html no se toca en esta fase (su
     620px queda pendiente de reconciliar cuando le toque su propia sesión,
     Fase 4a). */
  --bp-sm:560px;
  --bp-md:760px;
  --bp-lg:900px;
}

/* ==========================================================================
   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;
  }
}