/* Reactan — tokens de identidad v1.0, copia web de identidad/01_fundamentos/tokens.css.
   Diferencia única: @font-face apunta a los WOFF2 subconjuntados de fuentes/ (ver herramientas/preparar_assets.py).
   Si cambian los tokens maestros, se recopia el bloque :root y los estilos base. */

@font-face { font-family: "Inter"; src: url("../fuentes/inter-var.woff2?v=d27200cb") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/plex-mono-regular.woff2?v=aa146228") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/plex-mono-medium.woff2?v=0d35b6e9") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/plex-mono-semibold.woff2?v=89412661") format("woff2"); font-weight: 600 700; font-display: swap; }
:root {
  /* Color */
  --rx-rojo: #E81813;
  --rx-rojo-profundo: #B5120E;
  --rx-rojo-claro: #FDECEB;
  --rx-grafito: #1C2127;
  --rx-acero: #4A5561;
  --rx-gris: #7C8792;
  --rx-linea: #D3D9DF;
  --rx-niebla: #EEF1F4;
  --rx-hielo: #F7F9FA;
  --rx-blanco: #FFFFFF;
  --rx-azul: #1F5BA8;
  --rx-azul-claro: #E6EEF8;
  --rx-exito: #1E7F57;
  --rx-exito-claro: #E3F3EB;
  --rx-advertencia: #B86E00;
  --rx-advertencia-claro: #FFF4E0;
  --rx-ambar: #C27A00;
  --rx-error: var(--rx-rojo-profundo);
  --rx-error-claro: var(--rx-rojo-claro);

  /* Series de datos (en orden de uso) */
  --rx-serie-1: var(--rx-rojo);      /* categórica: orden fijo, máx. 4 */
  --rx-serie-2: var(--rx-azul);
  --rx-serie-3: var(--rx-ambar);
  --rx-serie-4: var(--rx-exito);
  --rx-contexto-1: var(--rx-acero);  /* patrón destacado: rojo + contexto neutro */
  --rx-contexto-2: var(--rx-gris);
  --rx-contexto-3: var(--rx-linea);

  /* Tipografía */
  --rx-font: "Inter", Arial, Helvetica, sans-serif;
  --rx-font-mono: "IBM Plex Mono", "Courier New", monospace;
  --rx-display: 3rem;      /* 48 px */
  --rx-h1: 2.25rem;        /* 36 px */
  --rx-h2: 1.75rem;        /* 28 px */
  --rx-h3: 1.375rem;       /* 22 px */
  --rx-h4: 1.125rem;       /* 18 px */
  --rx-cuerpo: 1rem;       /* 16 px */
  --rx-cuerpo-sm: 0.875rem;/* 14 px */
  --rx-etiqueta: 0.75rem;  /* 12 px, mayúsculas, tracking 0.08em */
  --rx-pie: 0.75rem;
  --rx-dato: 0.875rem;     /* mono */
  --rx-lh-display: 1.05;
  --rx-lh-titular: 1.15;
  --rx-lh-cuerpo: 1.5;
  --rx-tracking-display: -0.02em;
  --rx-tracking-titular: -0.015em;
  --rx-tracking-etiqueta: 0.08em;

  /* Espaciado (base 8 px) */
  --rx-s1: 4px; --rx-s2: 8px; --rx-s3: 12px; --rx-s4: 16px; --rx-s5: 24px; --rx-s6: 32px; --rx-s7: 48px; --rx-s8: 64px; --rx-s9: 96px;

  /* Radios y bordes */
  --rx-radio-xs: 2px; --rx-radio-sm: 4px; --rx-radio-md: 8px;
  --rx-borde: 1px solid var(--rx-linea);
  --rx-sombra-panel: 0 1px 2px rgba(28,33,39,.06), 0 4px 16px rgba(28,33,39,.06);

  /* Layout web */
  --rx-contenedor: 1200px; --rx-medianil: 24px; --rx-margen-movil: 20px;
}

/* Estilos base reutilizables (opcionales) */
.rx-body { font-family: var(--rx-font); font-size: var(--rx-cuerpo); line-height: var(--rx-lh-cuerpo); color: var(--rx-grafito); background: var(--rx-blanco); -webkit-font-smoothing: antialiased; }
.rx-display { font-weight: 700; font-size: var(--rx-display); line-height: var(--rx-lh-display); letter-spacing: var(--rx-tracking-display); }
.rx-h1 { font-weight: 600; font-size: var(--rx-h1); line-height: var(--rx-lh-titular); letter-spacing: var(--rx-tracking-titular); }
.rx-h2 { font-weight: 600; font-size: var(--rx-h2); line-height: var(--rx-lh-titular); letter-spacing: var(--rx-tracking-titular); }
.rx-h3 { font-weight: 600; font-size: var(--rx-h3); line-height: 1.25; letter-spacing: -0.01em; }
.rx-h4 { font-weight: 600; font-size: var(--rx-h4); line-height: 1.3; }
.rx-etiqueta { font-weight: 600; font-size: var(--rx-etiqueta); letter-spacing: var(--rx-tracking-etiqueta); text-transform: uppercase; color: var(--rx-gris); }
.rx-etiqueta--rojo { color: var(--rx-rojo); }
.rx-dato { font-family: var(--rx-font-mono); font-weight: 500; font-size: var(--rx-dato); font-variant-numeric: tabular-nums; }
.rx-pie { font-size: var(--rx-pie); color: var(--rx-gris); line-height: 1.4; }

/* Tabla técnica */
.rx-tabla { width: 100%; border-collapse: collapse; font-size: var(--rx-cuerpo-sm); }
.rx-tabla caption { text-align: left; font-weight: 600; font-size: var(--rx-etiqueta); letter-spacing: var(--rx-tracking-etiqueta); text-transform: uppercase; color: var(--rx-grafito); padding: 0 0 var(--rx-s2); }
.rx-tabla th { text-align: left; font-weight: 600; font-size: var(--rx-etiqueta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rx-acero); background: var(--rx-niebla); padding: var(--rx-s2) var(--rx-s3); border-bottom: 2px solid var(--rx-grafito); }
.rx-tabla td { padding: var(--rx-s2) var(--rx-s3); border-bottom: 1px solid var(--rx-linea); vertical-align: top; }
.rx-tabla td.rx-num, .rx-tabla th.rx-num { text-align: right; font-family: var(--rx-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.rx-tabla td.rx-unidad { color: var(--rx-gris); font-size: var(--rx-etiqueta); }
.rx-tabla tr.rx-destacada td { background: var(--rx-rojo-claro); }

/* Botones */
.rx-btn { display: inline-flex; align-items: center; gap: var(--rx-s2); font-family: var(--rx-font); font-weight: 600; font-size: var(--rx-cuerpo-sm); line-height: 1; padding: 12px 20px; border-radius: var(--rx-radio-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.rx-btn--primario { background: var(--rx-rojo); color: #fff; }
.rx-btn--primario:hover { background: var(--rx-rojo-profundo); }
.rx-btn--secundario { background: #fff; color: var(--rx-grafito); border-color: var(--rx-grafito); }
.rx-btn--secundario:hover { background: var(--rx-niebla); }
.rx-btn--terciario { background: transparent; color: var(--rx-rojo-profundo); padding-left: 0; padding-right: 0; }
.rx-btn:focus-visible { outline: 2px solid var(--rx-azul); outline-offset: 2px; }
.rx-btn[disabled], .rx-btn--deshabilitado { background: var(--rx-linea); color: var(--rx-gris); border-color: transparent; cursor: not-allowed; }

/* Campos */
.rx-campo { font-family: var(--rx-font); font-size: var(--rx-cuerpo); color: var(--rx-grafito); background: #fff; border: 1px solid var(--rx-gris); border-radius: var(--rx-radio-sm); padding: 10px 12px; }
.rx-campo:focus { outline: none; border-color: var(--rx-azul); box-shadow: 0 0 0 3px var(--rx-azul-claro); }
.rx-campo--error { border-color: var(--rx-error); }

/* Chips de estado */
.rx-estado { display: inline-block; font-weight: 600; font-size: var(--rx-etiqueta); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--rx-radio-xs); }
.rx-estado--ok { background: var(--rx-exito-claro); color: var(--rx-exito); }
.rx-estado--aviso { background: var(--rx-advertencia-claro); color: var(--rx-advertencia); }
.rx-estado--error { background: var(--rx-error-claro); color: var(--rx-error); }
.rx-estado--info { background: var(--rx-azul-claro); color: var(--rx-azul); }