/* =============================================================
   TECNET — TOKENS
   Mobile-first. Ningun color ni espaciado se escribe fuera de aqui.

   Los colores de marca no son inventados: salen del CSS del tema en
   produccion (xts-theme_settings_default) y coinciden con el logo.
     azul primario  rgb(11,124,237)
     azul boton     rgb(8,107,238)
     azul claro     rgb(54,157,226)
     naranja        rgb(230,105,3)
   ============================================================= */

:root{

  /* ---------- MARCA ---------- */
  --tt-azul:#0B7CED;          /* marca. Titulares, bordes, acentos de estructura */
  --tt-azul-btn:#086BEE;      /* boton primario. Ver nota de contraste abajo */
  --tt-azul-claro:#369DE2;    /* enlaces y texto azul sobre fondo oscuro */
  --tt-naranja:#E66903;       /* CTA. El mas saturado. No usarlo en nada mas */

  /* ---------- FONDOS ---------- */
  --tt-negro:#0A0B0D;         /* fondo de pagina */
  --tt-carbon:#121418;        /* seccion alterna */
  --tt-superficie:#1A1D23;    /* tarjetas, inputs, menus */
  --tt-superficie-2:#22262E;  /* hover de tarjeta */
  --tt-linea:#262A31;         /* bordes */

  /* ---------- TEXTO ---------- */
  --tt-texto:#F2F4F7;         /* 18:1 sobre --tt-negro */
  --tt-texto-2:#9BA3AF;       /* 7.7:1. Nunca usar un gris mas claro que este */
  --tt-texto-inv:#0A0B0D;     /* texto sobre fondos claros y sobre el naranja */
  --tt-blanco:#FFFFFF;        /* SOLO donde un tercero exige fondo claro: fotos de producto y widgets (Addi) */

  /* ---------- ESTADO ---------- */
  --tt-exito:#2DB742;
  --tt-alerta:#F5A524;
  --tt-error:#F0526B;

  /* Barras de FPS de los ensambles */
  --tt-fps-alto:#2DB742;
  --tt-fps-medio:#F5A524;
  --tt-fps-bajo:#F0526B;

  /* ---------- ESPACIADO — escala de 4px. Nada de margin:37px ---------- */
  --s-1:4px;  --s-2:8px;  --s-3:16px; --s-4:24px;
  --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;

  /* ---------- TIPOGRAFIA ---------- */
  --tt-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tt-font-display:'Barlow Condensed','Inter',system-ui,sans-serif;

  --fs-display:clamp(2.75rem, 9vw, 6rem);   /* el nombre en el hero */
  --fs-h1:clamp(2rem, 5vw, 3.25rem);
  --fs-h2:clamp(1.5rem, 3.5vw, 2.25rem);
  --fs-h3:1.25rem;
  --fs-body:1rem;                            /* nunca menos de 16px en movil */
  --fs-small:.875rem;
  --fs-micro:.75rem;                         /* solo etiquetas, nunca parrafos */

  /* ---------- EFECTOS ---------- */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --radio:14px;
  --radio-sm:8px;
  --radio-pill:999px;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
  --brillo-azul:0 0 0 1px rgba(11,124,237,.35), 0 8px 32px rgba(11,124,237,.18);
  --header-h:80px;
  --ancho:1200px;

  /* ---------- CAPAS — usar SOLO estos valores ---------- */
  --z-header:40; --z-menu:50; --z-flotante:60; --z-modal:70;
}

/* =============================================================
   CONTRASTE — decisiones tomadas, no preferencias

   Medido sobre --tt-negro (#0A0B0D):
     --tt-texto        18.0:1   AAA
     --tt-texto-2       7.7:1   AAA
     --tt-azul-claro    6.6:1   AA
     --tt-naranja       6.0:1   AA
     --tt-azul          4.8:1   AA (justo; no usarlo en texto de 12-14px)

   Dos combinaciones que parecen obvias y NO pasan AA:

     blanco sobre --tt-naranja   3.3:1   FALLA
       -> el boton naranja lleva texto --tt-texto-inv (casi negro): 6.0:1
     blanco sobre --tt-azul      4.1:1   FALLA
       -> el boton primario usa --tt-azul-btn, mas oscuro: 4.8:1 con blanco

   Por eso existen dos azules. No unificarlos.
   ============================================================= */

/* Respetar a quien pide menos movimiento. No es opcional. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}