/* Manual de Sistemas TERNIUM — Seccion 1: Tokens de diseno y variables globales.
   Estos valores son innegociables; cualquier color de la UI sale de aqui. */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

:root {
  /* 1.1 Colores base y tipografia */
  --color-text-main: #6a6c6f;
  --color-text-light: #9d9fa2;
  --color-text-white: #ffffff;

  /* Marca y acciones */
  /* El manual usa DOS naranjas y no son intercambiables: el "Naranja Ternium"
     de las cabeceras de grilla maestra, y el ambar de las cifras gigantes de
     tile y de la barra de pestana activa. */
  --color-brand-orange: #ff9900;
  --color-brand-amber: #ffa500;
  --color-action-primary: #34495e;
  /* Del manual (3.1). El prototipo no tiene favoritos todavia; el token se
     conserva porque la paleta migra completa a Angular. */
  --color-favorite-on: #ffb606;

  /* Estructura */
  --color-bg-page: #f1f3f6;
  --color-bg-panel: #ffffff;
  --color-bg-alt: #f7f9fa;
  --color-bg-progress: #f5f5f5;
  --color-border: #e4e5e7;

  /* Semaforizacion (Homer) */
  /* Texto sobre los fondos de estado. No sale del manual: el manual fija los
     fondos, no el color del texto encima. */
  --color-text-badge: #1b1b1b;
  --color-status-danger: #e74c3c;
  --color-status-success: #62cb31;
  --color-status-warning: #ffd634;
  --color-status-info: #3498db;
  --color-status-neutral: #d4d4d4;

  /* 1.2 Jerarquia tipografica */
  --font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: 40px;   /* Cifras gigantes de dashboard */
  --fs-h2: 22px;   /* Numeros destacados de price list */
  --fs-h3: 20px;   /* Textos de alerta grandes */
  --fs-h4: 15px;   /* Titulos principales */
  --fs-h5: 13px;   /* Titulos secundarios. Parte de la escala del manual; este
                      prototipo no lo usa todavia, pero migra a Angular con ella. */
  --fs-body: 13px; /* Cuerpo, tablas, parrafos */
  --fs-small: 12px;
  --fs-micro: 11px;
  --fs-nano: 10px;

  /* Metricas de componentes */
  --tx-control-height: 34px;
  --tx-tile-w: 230px;
  --tx-tile-h: 210px;
  --tx-tile-gap: 15px;
  --tx-price-list-w: 298px;
  --tx-bola-size: 60px;
  --tx-radius: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: 400;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; color: var(--color-text-main); }
a { color: var(--color-action-primary); text-decoration: none; }