/* ==========================================================================
   TMG · tokens comunes (panel, portal, portada y embudo). Version de la
   especificacion UX/UI MEXIMOLD (oct-2026). Copiar tal cual a
   public/css/tmg-tokens.css. Sin build: solo custom properties y 3 utilidades.

   No pinta nada por si solo (no toca selectores de elementos): agregarlo no
   cambia ninguna pantalla hasta que un puente (tmg-panel.css, portal.css) o
   landing.css (despues del merge) lo use.

   Capas:
   1. Primitivos (--tmg-*): la paleta de la marca. No se usan en pantallas.
   2. Semanticos (--fondo, --texto, --accion...): lo que usan los componentes.
      El tema oscuro (modo stand) solo redefine esta capa.
   3. Componentes de firma (--rotulo-*, --visor-*, --chequeo-*).

   Este archivo se sirve en paginas publicas: sin frases de venta ni promesas.
   ========================================================================== */

:root {
  /* ---- 1. Primitivos ---------------------------------------------------- */
  --tmg-negro: #141414;          /* negro del logo */
  --tmg-grafito-900: #1f1f1d;    /* texto            15.1:1 sobre fondo */
  --tmg-grafito-700: #4a4a46;    /* texto secundario  8.2:1 */
  --tmg-grafito-600: #63635e;    /* texto tenue       5.5:1 (minimo 12 px) */
  --tmg-grafito-500: #8a8a84;    /* borde de control  3.2:1 (no es texto) */
  --tmg-grafito-300: #d9d9d4;    /* divisor */
  --tmg-grafito-200: #ecece9;    /* superficie hundida */
  --tmg-grafito-100: #f5f5f3;    /* fondo de pagina */
  --tmg-blanco: #ffffff;

  --tmg-rojo-500: #b01d28;       /* marca y accion principal: blanco 6.9:1 */
  --tmg-rojo-600: #94161e;       /* hover, enlaces, foco: 8.0:1 como texto */
  --tmg-rojo-700: #7a1219;       /* pulsado */
  --tmg-rojo-100: #f7e9ea;       /* tinte de seleccion */

  --tmg-verde-700: #1b6e46;  --tmg-verde-100: #e3f1e8;    /* 5.4:1 */
  --tmg-ambar-800: #7a4f0e;  --tmg-ambar-100: #fbf0dc;    /* 6.3:1 */
  --tmg-alarma-800: #8f1d24; --tmg-alarma-100: #fbe4e4;   /* 7.3:1 */
  --tmg-alarma-900: #7f1d1d;     /* toast de error: ui.js lo usa literal y la prueba lo busca */

  /* Mapa DFM: los mismos de viewer3d.COLORES_SALIDA. Son DATOS, no marca. */
  --tmg-dfm-cavidad: #d7263d;
  --tmg-dfm-corazon: #2e9e4f;
  --tmg-dfm-sin-salida: #f2c230;

  /* ---- 2. Semanticos (tema claro) ---------------------------------------- */
  --fondo: var(--tmg-grafito-100);
  --superficie: var(--tmg-blanco);
  --superficie-2: var(--tmg-grafito-200);
  --superficie-invertida: var(--tmg-negro);    /* rotulo, lateral del panel */
  --texto: var(--tmg-grafito-900);
  --texto-2: var(--tmg-grafito-700);
  --texto-tenue: var(--tmg-grafito-600);
  --texto-invertido: var(--tmg-blanco);
  --texto-invertido-2: #a8a8a2;                /* 7.7:1 sobre negro */
  --borde: var(--tmg-grafito-300);             /* separa; no delimita controles */
  --borde-control: var(--tmg-grafito-500);     /* campos, casillas, zona de carga */
  --borde-fuerte: var(--tmg-negro);

  --accion: var(--tmg-rojo-500);               /* UN boton rojo lleno por vista */
  --accion-hover: var(--tmg-rojo-600);
  --accion-activa: var(--tmg-rojo-700);
  --accion-texto: var(--tmg-blanco);
  --seleccion: var(--tmg-negro);               /* segmentados, filtros, menu activo */
  --seleccion-texto: var(--tmg-blanco);
  --enlace: var(--tmg-rojo-600);
  --marca: var(--tmg-rojo-500);                /* barra inclinada del logo */

  --foco: var(--tmg-rojo-600);
  --foco-ancho: 3px;
  --foco-separacion: 2px;
  --foco-anillo: 0 0 0 var(--foco-separacion) var(--superficie), 0 0 0 calc(var(--foco-separacion) + var(--foco-ancho)) var(--foco);

  --exito: var(--tmg-verde-700);    --exito-fondo: var(--tmg-verde-100);
  --aviso: var(--tmg-ambar-800);    --aviso-fondo: var(--tmg-ambar-100);
  --peligro: var(--tmg-alarma-800); --peligro-fondo: var(--tmg-alarma-100);
  --info: #2f2f2c;                  --info-fondo: var(--tmg-grafito-200);

  --dato: var(--tmg-negro);                    /* serie principal de barras */
  --dato-2: var(--tmg-grafito-500);
  --dato-pista: var(--tmg-grafito-200);
  --dato-resalte: var(--tmg-rojo-500);         /* EL valor que importa, uno */

  /* ---- 3. Componentes de firma ------------------------------------------ */
  /* Rotulo TMG: el cuadro de rotulacion de plano (folio, tecnologia,
     cavidades, ciclo, maquina, precio). Una sola barra roja por pagina. */
  --rotulo-fondo: var(--superficie-invertida);
  --rotulo-texto: var(--texto-invertido);
  --rotulo-etiqueta: var(--texto-invertido-2);
  --rotulo-regla: rgb(255 255 255 / .16);
  --rotulo-barra: var(--marca);
  --rotulo-barra-ancho: 64px;
  --rotulo-barra-alto: 7px;
  --rotulo-barra-sesgo: -18deg;
  --rotulo-celda-min: 132px;

  /* Camara de inspeccion (visor 3D): escenario grafito en los dos temas.
     Amarillo sin salida 10.2:1, verde 5.0:1, rojo 3.4:1 sobre el fondo. */
  --visor-fondo: #1c1c1e;
  --visor-fondo-captura: #e9e9ea;              /* capturar(): PDF e IA siguen en claro */
  --visor-pieza: #a7a9ac;
  --visor-texto: #d8d8d3;
  --visor-reticula: rgb(255 255 255 / .06);
  --visor-marca: rgb(255 255 255 / .55);       /* crucetas y cotas */

  /* Veredicto DFM: nunca rojo ni verde (rojo/verde son los lados del molde). */
  --chequeo-ok: var(--texto);                  /* check en tinta: Sin hallazgos */
  --chequeo-estimado: var(--texto-2);          /* i en grafito: Estimado */
  --chequeo-confirmar: var(--aviso);           /* ! en ambar: Por confirmar */
  --chequeo-ingenieria: var(--aviso);          /* ambar lleno: Requiere ingenieria */
  --chequeo-ingenieria-fondo: var(--aviso-fondo);

  /* ---- Tipografia -------------------------------------------------------- */
  --fuente-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --fuente-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-codigo: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; /* solo JSON y formulas */
  --peso-display: 600;
  --peso-texto: 400;
  --peso-medio: 500;
  --peso-fuerte: 700;

  /* Escala 1.25 sobre 16 px. Nada por debajo de 12 px. */
  --t-12: 0.75rem;     /* etiquetas en mayusculas, notas legales */
  --t-14: 0.875rem;    /* secundario, tablas densas */
  --t-16: 1rem;        /* texto base */
  --t-18: 1.125rem;    /* parrafo destacado */
  --t-20: 1.25rem;     /* titulo de tarjeta, valor de celda del rotulo */
  --t-25: 1.5625rem;   /* h3 */
  --t-31: 1.953rem;    /* h2 */
  --t-39: 2.441rem;    /* h1 del panel, cifra de tarjeta */
  --t-display: clamp(2.441rem, 1.7rem + 3vw, 3.815rem); /* 39 a 61: precio y portada */
  --interlineado-titulo: 1.05;
  --interlineado-denso: 1.3;
  --interlineado-texto: 1.5;
  --tracking-etiqueta: 0.1em;

  /* ---- Espacio (reticula de 4 px) ----------------------------------------- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --toque: 44px;                 /* alto minimo de control tactil */
  --toque-denso: 40px;           /* panel en escritorio */
  --ancho-panel: 1240px;
  --ancho-lectura: 68ch;
  /* Cortes (documentados; las media queries no leen variables):
     560 celular · 860 tablet vertical · 1100 tablet horizontal · 1180 escritorio */

  /* ---- Forma -------------------------------------------------------------- */
  --radio-0: 0;        /* tablas, rotulo, visor: dibujo tecnico */
  --radio-1: 4px;      /* botones, campos, insignias */
  --radio-2: 8px;      /* tarjetas, avisos, modales */
  --radio-pildora: 999px; /* solo el boton flotante de WhatsApp */
  --linea: 1px;
  --linea-gruesa: 3px;

  --sombra-1: 0 1px 2px rgb(20 20 20 / .08);
  --sombra-2: 0 10px 28px rgb(20 20 20 / .2);   /* solo lo que flota */

  /* ---- Movimiento --------------------------------------------------------- */
  --mov-rapido: 120ms;
  --mov-base: 200ms;
  --mov-lento: 320ms;
  --mov-recalculo: 600ms;        /* subrayado de la cifra que cambio */
  --curva: cubic-bezier(.2, .7, .2, 1);

  --z-cabecera: 20; --z-barra-inferior: 80; --z-flotante: 90; --z-modal: 150; --z-toast: 200;
  color-scheme: light;
}

/* ---- Modo stand: tema oscuro opt-in (data-tema), nunca automatico en lo
   publico: un celular en modo oscuro que llega por el QR no debe ver un
   tema que no se reviso. Tambien sirve en una seccion. ------------------- */
:root[data-tema="oscuro"], [data-tema="oscuro"] {
  --fondo: #0f0f10;
  --superficie: #18181a;
  --superficie-2: #222225;
  --superficie-invertida: #f2f2ef;
  --texto: #f2f2ef;                /* 15.8:1 */
  --texto-2: #c4c4bd;              /* 10.1:1 */
  --texto-tenue: #9a9a94;          /*  6.3:1 */
  --texto-invertido: #141414;
  --texto-invertido-2: #4a4a46;
  --borde: #34343a;
  --borde-control: #76767a;        /*  3.9:1 */
  --borde-fuerte: #f2f2ef;

  --accion: #c8232f;               /* blanco 5.6:1 */
  --accion-hover: var(--tmg-rojo-500);
  --accion-activa: var(--tmg-rojo-600);
  --seleccion: #f2f2ef;
  --seleccion-texto: #141414;
  --enlace: #ff6b74;               /*  6.4:1 */
  --foco: #ff6b74;
  --marca: #c8232f;

  --exito: #5fd09a;   --exito-fondo: #12301f;
  --aviso: #f0b54a;   --aviso-fondo: #33270f;
  --peligro: #ff8a8f; --peligro-fondo: #3a1518;
  --info: #c4c4bd;    --info-fondo: #222225;

  --dato: #f2f2ef;
  --dato-2: #76767a;
  --dato-pista: #2c2c30;
  --dato-resalte: #ff6b74;

  --rotulo-fondo: #000000;         /* el rotulo sigue negro en oscuro */
  --rotulo-texto: #f2f2ef;
  --rotulo-etiqueta: #a8a8a2;
  --rotulo-regla: rgb(255 255 255 / .2);
  --visor-fondo: #111113;
  --sombra-1: 0 0 0 1px #2a2a2e;
  --sombra-2: 0 0 0 1px #34343a, 0 16px 40px rgb(0 0 0 / .6);
  color-scheme: dark;
}

/* Lectura a 2-3 m (monitor del stand). */
:root[data-escala="stand"] { font-size: 112.5%; }

@media (prefers-reduced-motion: reduce) {
  :root { --mov-rapido: 0ms; --mov-base: 0ms; --mov-lento: 0ms; --mov-recalculo: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Utilidades (prefijo tmg- para no chocar con clases existentes) ----- */
.tmg-cifra { font-family: var(--fuente-display); font-weight: var(--peso-display);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.tmg-num { font-variant-numeric: tabular-nums lining-nums; }
.tmg-etiqueta { font: var(--peso-display) var(--t-12)/1.2 var(--fuente-display);
  letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--texto-2); }
.tmg-codigo { font-family: var(--fuente-codigo); }

/* Reglas del rojo:
   1. Rojo lleno = la accion que avanza. Uno por vista.
   2. Rojo como texto solo en enlaces.
   3. Seleccion (segmentados, menu, filtros) en negro.
   4. Errores con --peligro + icono + texto que dice que paso y que hacer.
   5. Rojo, verde y amarillo del mapa DFM son datos: solo en el visor y su leyenda.
   6. Sin fondos rojos de seccion; la barra inclinada una vez por pagina (el rotulo).
   7. En graficas el rojo resalta un solo valor; las series van en tinta. */