/* =============================================================================
 * RTIAP — Tokens de diseño
 * =============================================================================
 * Capa ADITIVA sobre INSPINIA 2.6.2 / Bootstrap 3. Ver docs/adr/0002-refresh-visual-aditivo.md
 *
 * REGLA DURA: este es el ÚNICO archivo donde se escriben valores literales de
 * color, tipografía, espaciado, radio y sombra. Todo lo demás los consume con var().
 * Si falta un valor, se agrega un token aquí primero.
 *
 * NO se modifica app.css, vendor.css ni las clases de INSPINIA/Bootstrap.
 * Se carga DESPUÉS de app.css. Quitar su <link> revierte el refresh por completo.
 *
 * Requiere CSS custom properties (sin soporte en IE11).
 * ========================================================================== */

:root {

  /* --- Marca ------------------------------------------------------------- */
  /* El Azul RTIAP (Pantone 286 C) de la paleta de gerencia (2026-10-02, ADR 0034).
     El 500 y el 800 son los dos hex exactos de la paleta; el resto es la escala
     derivada. Reemplaza al verde de INSPINIA (#1ab394), que queda solo dentro de
     app.css y lo tapa la capa de tema (rtiap-tema.css). El 500 da 10,6:1 sobre
     blanco: sirve para botones con texto blanco y para enlaces. El verde agro del
     ADR 0025 ya no es marca: queda como estado «en rango» (--rt-state-ok-*). */
  --rt-brand-50:    #e8eefb;
  --rt-brand-100:   #cfdaf5;
  --rt-brand-300:   #7f9ee0;   /* el azul sobre fondo oscuro */
  --rt-brand-500:   #0033a0;   /* Azul RTIAP: botones, enlaces, foco, pestaña activa */
  --rt-brand-600:   #002b88;   /* hover */
  --rt-brand-700:   #00236f;   /* títulos del PDF */
  --rt-brand-800:   #001e5a;   /* el azul oscuro de la paleta: menú lateral, hero del login */
  --rt-brand-900:   #001540;

  /* --- Acento ------------------------------------------------------------ */
  /* El naranjo de la paleta (ADR 0034 §3): es acento de MARCA, no de interfaz.
     Aparece en el logo y en el borde del ítem activo del menú (sobre azul oscuro,
     6,0:1). Sobre blanco da 2,6:1: NUNCA como texto, enlace, botón ni estado, y se
     confunde con la advertencia (--rt-state-warn-*). El 700 (4,8:1) existe por si
     algún día hace falta como texto sobre claro. */
  --rt-acento-50:   #fff1e5;
  --rt-acento-500:  #ff7a00;
  --rt-acento-600:  #e66d00;
  --rt-acento-700:  #b85600;

  /* --- Neutros ----------------------------------------------------------- */
  --rt-neutral-0:   #ffffff;
  --rt-neutral-50:  #f7f8f9;
  --rt-neutral-100: #eef0f2;
  --rt-neutral-200: #e5e7eb;   /* el gris de apoyo de la paleta; a ΔE 1,4 del borde histórico de INSPINIA (#e7eaec) */
  --rt-neutral-300: #d3d8dc;
  --rt-neutral-400: #aab2b8;
  --rt-neutral-500: #7c868d;
  --rt-neutral-600: #5b656b;
  --rt-neutral-700: #414a4f;
  --rt-neutral-800: #2b3236;
  --rt-neutral-900: #1a1f22;

  /* --- Roles semánticos --------------------------------------------------- */
  --rt-bg-page:       var(--rt-neutral-50);
  --rt-bg-surface:    var(--rt-neutral-0);
  --rt-bg-sunken:     var(--rt-neutral-100);
  --rt-bg-hover:      var(--rt-neutral-100);

  --rt-text-primary:   var(--rt-neutral-800);
  --rt-text-secondary: var(--rt-neutral-600);
  --rt-text-muted:     var(--rt-neutral-500);
  --rt-text-inverse:   var(--rt-neutral-0);
  --rt-text-link:      var(--rt-brand-500);   /* 10,6:1 sobre blanco */

  --rt-border:        var(--rt-neutral-200);
  --rt-border-strong: var(--rt-neutral-300);
  --rt-focus-ring:    0 0 0 3px rgba(0, 51, 160, 0.35);

  /* --- Estados de proceso (SCADA) ----------------------------------------
     Cada estado trae su par: -bg (fondo suave) y -fg (texto/icono, con
     contraste sobre ese fondo). NUNCA comunicar estado solo por color:
     acompañar siempre con texto o icono. */

  /* Normal / en rango: verde, con valores propios. Fue el verde de la marca (ADR 0025);
     desde el ADR 0034 la marca es azul y el verde queda solo como estado. Es SCADA:
     «en rango» es verde y no se negocia por identidad. */
  --rt-state-ok-bg:        #e8f5e9;
  --rt-state-ok-fg:        #1b5e20;
  --rt-state-ok-solid:     #2e7d32;
  /* Un equipo en proceso: el mismo verde, transparente, de fondo de toda la tarjeta (.rt-card--proceso).
     Se distingue del disponible a la distancia sin tapar la franja de alarma, que va en el borde. */
  --rt-proceso-fondo:      rgba(46, 125, 50, 0.11);

  /* Advertencia / fuera de rango sin alarmar */
  --rt-state-warn-bg:      #fdf3e3;
  --rt-state-warn-fg:      #8a5a12;
  --rt-state-warn-solid:   #f8ac59;
  /* Un equipo en pausa: amarillo transparente en vez del verde de proceso (.rt-card--proceso.rt-card--pausa).
     Mas amarillo que el ambar de warn: con ese, el fondo se leia durazno y se confundia con el naranjo de la
     marca, que nunca es estado. La franja del borde sigue siendo la severidad (enmienda del ADR 0038). */
  --rt-pausa-fondo:        rgba(242, 183, 5, 0.16);

  /* Alarma activa */
  --rt-state-alarm-bg:     #fdecee;
  --rt-state-alarm-fg:     #b32330;
  --rt-state-alarm-solid:  #ed5565;

  /* Alarma inhibida — deliberadamente distinta de warn, se confunden */
  --rt-state-inhib-bg:     #f0edfa;
  --rt-state-inhib-fg:     #5a3fa8;
  --rt-state-inhib-solid:  #8b6fd4;

  /* Sin datos / dispositivo offline */
  --rt-state-offline-bg:   var(--rt-neutral-100);
  --rt-state-offline-fg:   var(--rt-neutral-600);
  --rt-state-offline-solid:var(--rt-neutral-400);

  /* Informativo */
  --rt-state-info-bg:      #e3f6f7;
  --rt-state-info-fg:      #10696b;
  --rt-state-info-solid:   #23c6c8;

  /* --- Tipografía ---------------------------------------------------------
     Inter (ADR 0034), autohospedada en html/fonts/inter/ y declarada al final de
     este archivo: cero CDN, la plataforma es interna y no debe depender de salida
     a Internet. El stack de sistema queda de respaldo mientras carga, o si el
     navegador no soporta fuentes variables. */
  --rt-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --rt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --rt-text-xs:   11px;
  --rt-text-sm:   12px;
  --rt-text-base: 14px;
  --rt-text-md:   16px;
  --rt-text-lg:   20px;
  --rt-text-xl:   26px;
  --rt-text-2xl:  34px;   /* lecturas grandes en vistas de planta */
  --rt-text-3xl:  48px;   /* wall display */

  --rt-weight-normal:   400;
  --rt-weight-medium:   500;
  --rt-weight-semibold: 600;
  --rt-weight-bold:     700;

  --rt-leading-tight:  1.2;
  --rt-leading-normal: 1.5;

  /* Cifras de sensor: ancho fijo para que no bailen al actualizarse */
  --rt-numeric: "tnum" 1, "lnum" 1;

  /* --- Espaciado (escala de 4) -------------------------------------------- */
  --rt-space-1:  4px;
  --rt-space-2:  8px;
  --rt-space-3:  12px;
  --rt-space-4:  16px;
  --rt-space-5:  20px;
  --rt-space-6:  24px;
  --rt-space-8:  32px;
  --rt-space-10: 40px;
  --rt-space-12: 48px;

  /* --- Radios ------------------------------------------------------------- */
  --rt-radius-sm:   3px;
  --rt-radius-md:   6px;
  --rt-radius-lg:   10px;
  --rt-radius-full: 999px;

  /* --- Sombras ------------------------------------------------------------ */
  --rt-shadow-sm: 0 1px 2px rgba(26, 31, 34, 0.06);
  --rt-shadow-md: 0 2px 8px rgba(26, 31, 34, 0.08);
  --rt-shadow-lg: 0 8px 24px rgba(26, 31, 34, 0.12);

  /* --- Otros -------------------------------------------------------------- */
  --rt-transition: 150ms ease;
  --rt-z-dropdown: 1000;
  --rt-z-modal:    1050;
  --rt-z-toast:    1080;
}

/* Gráficos (.rt-chart). Paleta categórica de la guía de visualización, validada con
   su script (bandas de luminosidad y croma, separación para daltonismo ΔE ≥ 9,1 entre
   vecinos, visión normal ≥ 19,6) contra la superficie blanca. El orden es fijo: el color
   sigue al concepto, no a su posición. Tres slots (3, 4, 5) quedan bajo 3:1 de contraste:
   por eso todo gráfico lleva leyenda y su tabla equivalente. El verde de la paleta se
   omitió a propósito: la franja de proceso es verde. */
:root {
  --rt-chart-1: #2a78d6;   /* azul    */
  --rt-chart-2: #eb6834;   /* naranja */
  --rt-chart-3: #1baf7a;   /* aqua    */
  --rt-chart-4: #eda100;   /* amarillo */
  --rt-chart-5: #e87ba4;   /* magenta */
  --rt-chart-6: #4a3aa7;   /* violeta */
  /* Del 7 al 12: los mismos seis tonos, más claros, para los túneles con más de seis pulpas por cara
     (61 de 456, medido 2026-10-02). El color sigue al lado y la posición en toda la tarjeta. */
  --rt-chart-7:  #94bbea;
  --rt-chart-8:  #f5b399;
  --rt-chart-9:  #8dd7bc;
  --rt-chart-10: #f6d07f;
  --rt-chart-11: #f3bdd1;
  --rt-chart-12: #a49cd3;
  --rt-chart-aire:     var(--rt-neutral-700);   /* el aire de salida: la referencia, la única línea discontinua */
  --rt-chart-setpoint: var(--rt-neutral-900);   /* el setpoint del operador: escalera fina */
  --rt-chart-grid:  var(--rt-neutral-200);
  --rt-chart-eje:   var(--rt-text-muted);
  --rt-chart-cursor: var(--rt-neutral-500);
  --rt-chart-proceso-bg:    rgba(46, 125, 50, 0.10);    /* el verde de estado «en rango», en velo (ya no es marca: ADR 0034) */
  --rt-chart-proceso-linea: var(--rt-state-ok-solid);
  --rt-chart-alto: 280px;
  --rt-chart-alto-panel: 200px;   /* cada panel chico cuando el gráfico va en varios */
  --rt-chart-panel-min:  320px;   /* ancho mínimo de un panel antes de bajar a otra fila */
}

/* Marca RTIAP (ADR 0034): el Azul RTIAP para fondo claro y su par claro para fondo
   oscuro. Los logos están en html/img/marca/ (fuentes en html/img/marca/fuente/). */
:root {
  --rt-marca:        var(--rt-brand-500);
  --rt-marca-hover:  var(--rt-brand-600);
  --rt-marca-claro:  var(--rt-brand-300);
  --rt-marca-oscuro: var(--rt-brand-900);
}

/* Inter (SIL OFL), la tipografía de la marca (ADR 0034). Un solo archivo variable,
   servido desde html/fonts/inter/ por el mismo servidor que esta hoja: sin CDN. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Pantallas de acceso (.rt-acceso: login y contraseña). Tienen modo claro y oscuro según
   el sistema del equipo; el resto de la plataforma todavía no. El panel de imagen es
   siempre oscuro, con texto blanco, en los dos modos. */
.rt-acceso {
  --rt-acceso-fondo:        #f3f5fa;
  --rt-acceso-superficie:   var(--rt-neutral-0);
  --rt-acceso-texto:        var(--rt-neutral-900);
  --rt-acceso-texto-2:      var(--rt-neutral-600);
  --rt-acceso-borde:        var(--rt-neutral-300);
  --rt-acceso-campo:        var(--rt-neutral-0);
  --rt-acceso-primario:     var(--rt-marca);
  --rt-acceso-primario-hover: var(--rt-marca-hover);
  --rt-acceso-primario-texto: var(--rt-neutral-0);
  --rt-acceso-enlace:       var(--rt-marca);
  --rt-acceso-foco:         rgba(0, 51, 160, 0.28);   /* brand-500 en velo */
  --rt-acceso-sombra:       0 12px 32px rgba(26, 31, 34, 0.10);
  --rt-acceso-hero:         linear-gradient(145deg, #001540 0%, #001e5a 45%, #0033a0 100%);
  /* el velo sobre la foto del pasillo (2026-10-20): solo oscurece la franja de abajo, donde va el texto; la foto ya es azul */
  --rt-acceso-hero-velo:    linear-gradient(to top, rgba(0, 21, 64, 0.82) 0%, rgba(0, 21, 64, 0.42) 26%, rgba(0, 21, 64, 0) 52%);
  --rt-acceso-hero-trama:   radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0) 38%),
                            radial-gradient(circle at 82% 78%, rgba(255, 122, 0, 0.18) 0, rgba(255, 122, 0, 0) 42%);   /* el brillo naranjo: el único acento del hero */
  --rt-acceso-hero-texto:   var(--rt-neutral-0);
  --rt-acceso-hero-texto-2: rgba(255, 255, 255, 0.82);
  --rt-acceso-logo-alto:    88px;     /* el logo horizontal, en horizontal */
  --rt-acceso-logo-vertical: 190px;   /* el logo vertical, de ancho */
  --rt-acceso-logo-tope:    26vh;     /* y a lo mas este alto: en un celular no se come la pantalla */
  --rt-acceso-caja:         400px;
  --rt-acceso-panel:        560px;    /* el panel del formulario, en horizontal */
  --rt-acceso-logo-bajo:    48px;     /* el logo horizontal en un celular horizontal */
  --rt-acceso-campo-alto:   48px;
  --rt-acceso-icono:        20px;
  --rt-acceso-anillo:       3px;
}
@media (prefers-color-scheme: dark) {
  .rt-acceso {
    --rt-acceso-fondo:        #0a1022;
    --rt-acceso-superficie:   #111a30;
    --rt-acceso-texto:        #eef1f8;
    --rt-acceso-texto-2:      #a9b4cc;
    --rt-acceso-borde:        #2a3552;
    --rt-acceso-campo:        #0d1529;
    --rt-acceso-primario:     var(--rt-marca-claro);   /* con texto oscuro: blanco encima daría 2,7:1 */
    --rt-acceso-primario-hover: #9db5ea;
    --rt-acceso-primario-texto: #0a1022;
    --rt-acceso-enlace:       var(--rt-marca-claro);   /* 7,2:1 sobre el fondo */
    --rt-acceso-foco:         rgba(127, 158, 224, 0.30);
    --rt-acceso-sombra:       0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

/* Menú lateral en tablet vertical y celular (rtiap-menu.js): los anchos y capas de INSPINIA. */
:root {
  --rt-menu-riel:   70px;    /* el menú contraído de INSPINIA (.mini-navbar) */
  --rt-menu-ancho:  220px;   /* el menú desplegado */
  --rt-menu-fondo:  var(--rt-brand-800); /* el menú lateral: el azul oscuro de la paleta (antes el #2f4050 de INSPINIA) */
  --rt-menu-fondo-2: #0b2d75; /* hover, ítem activo y submenú flotante */
  --rt-menu-cabecera: var(--rt-brand-900); /* la cabecera con el logo */
  --rt-menu-texto:  #b7c3dd;  /* 8,8:1 sobre el fondo */
  --rt-menu-texto-activo: #ffffff;
  --rt-menu-texto-suave: #96a3c2; /* lo secundario de un ítem (cuántos equipos tiene el grupo): 6,2:1 sobre el fondo, 5,1:1 sobre el fondo-2 */
  /* el ícono de cada equipo del menú por zona (ADR 0052): los colores de la tarjeta de la zona, aclarados para el azul oscuro */
  --rt-menu-proceso: #6fcf8f;  /* en curso: el verde del proceso (6,7:1 sobre el fondo-2) */
  --rt-menu-pausa:   var(--rt-state-warn-solid); /* en pausa: el amarillo de la pausa (6,7:1 sobre el fondo-2) */
  --rt-menu-hover:   rgba(255, 255, 255, 0.10);
  --rt-menu-accion:  28px;     /* el blanco del ícono con mouse; con el dedo, --rt-tap-min */
  --rt-menu-accion-icono: 18px;
  --rt-menu-acento: var(--rt-acento-500); /* el borde del ítem activo: el punto naranjo del logo (6,0:1 sobre el fondo) */
  --rt-menu-logo-ancho: 150px; /* el logo blanco en la cabecera del menú */
  --rt-menu-icono:  32px;   /* la R blanca del menú contraído */
  --rt-z-menu:      2001;    /* la capa del menú en INSPINIA */
  --rt-z-menu-velo: 2000;
}

/* Terreno: el tamaño mínimo de un objetivo táctil y el velo de una hoja de acciones. */
:root {
  --rt-tap-min: 40px;
  --rt-overlay: rgba(15, 23, 42, 0.45);
}

/* Tabla que crece con el tiempo (una bitácora): hasta este alto, después scroll propio.
   --rt-fila-alto es el alto de una fila de .rt-table con un badge, para acotar por filas:
   calc(var(--rt-fila-alto) * (N + 1)) deja ver el encabezado y N filas, y asoma la siguiente. */
:root {
  --rt-tabla-alto: 320px;
  --rt-fila-alto: 40px;
}

/* Formularios de administración: el ancho mínimo de un campo antes de bajar a otra fila,
   y el de un número corto (horas, minutos) que no necesita más. */
:root {
  --rt-campo-min: 280px;
  --rt-campo-numero: 90px;
  /* el ancho de la lista de avisos de la receta en la barra superior (R7) */
  --rt-avisos-lista-ancho: 340px;
  --rt-avisos-lista-max: 90vw;
}

/* Cuenta de equipos (.rt-cuenta): la pastilla del número en proceso. */
:root {
  --rt-cuenta-ancho: 2.4em;
  --rt-cuenta-alto:  1.7;
}

/* El rango de una receta (.rt-rango, ADR 0037): el tirador, el riel, la banda y el alto de la pista
   (un objetivo táctil). */
:root {
  --rt-rango-tirador: 22px;
  --rt-rango-riel:    8px;
  --rt-rango-banda:   14px;
  --rt-rango-pista:   var(--rt-tap-min);
}

/* Disposición de un túnel (.rt-estiba): la celda de una posición y la etiqueta de un nivel. */
:root {
  --rt-estiba-celda:      28px;
  --rt-estiba-celda-mini: 12px;   /* el plano chico de la lista de túneles */
  --rt-estiba-sep-mini:   1px;
  --rt-estiba-etq:        64px;
}

/* Bloque de pallet del plano mímico (.rt-pallet-bloque, ADR 0035): madera apagada con listones,
   lejos del naranjo de advertencia para que un pallet no se lea como una sonda fuera de rango.
   El riel es la línea fina que une los bloques de un lado como la barra continua del mímico viejo. */
:root {
  --rt-pallet-madera:       #d6c4a0;
  --rt-pallet-junta:        #efe6d5;   /* la junta clara entre tablas */
  --rt-pallet-borde:        #b39a6e;
  --rt-pallet-tabla:        7px;       /* alto de una tabla */
  --rt-pallet-tabla-paso:   9px;       /* tabla + junta */
  --rt-pallet-bloque-ancho: 48px;
  --rt-pallet-bloque-min:   44px;      /* el mismo alto mínimo que una celda de sonda */
  --rt-pallet-riel:         4px;
}

/* El mímico del túnel (.rt-mimico): el pasillo central y la versión compacta de la tarjeta de la zona. */
:root {
  --rt-mimico-central:          72px;
  --rt-mimico-central-compacto: 40px;
  --rt-mimico-bloque-compacto:  30px;   /* el bloque de pallet en la tarjeta */
  --rt-mimico-celda-compacto:   40px;   /* el alto mínimo de la celda en la tarjeta */
  --rt-mimico-tarjeta-min:      340px;  /* la tarjeta de la zona en forma mímico: 4 por fila desde ~1.400 px de grilla, 3 en un notebook de 1366 (dueño, 2026-10-08) */
  --rt-mimico-bloque-estrecho:  20px;   /* el bloque de pallet en una tarjeta angosta (tablet, celular) */
  --rt-mimico-central-estrecho: 16px;   /* el pasillo central en una tarjeta angosta: sin título */
}

/* Modo terreno: PDA de 5" con guantes, dentro del túnel (ADR 0020 §3).
   Se activa con <body class="rt-terreno">. Sube el objetivo táctil y la letra
   redefiniendo tokens — igual que el wall display, ningún componente lo sabe. */
.rt-terreno {
  --rt-tap-min:   52px;
  --rt-text-base: 17px;
  --rt-text-md:   20px;
  --rt-text-lg:   26px;
}

/* Modo wall display: pantallas grandes vistas de lejos.
   Se activa con <body class="rt-walldisplay">. Sube tamaños y contraste
   redefiniendo tokens — ni un componente necesita saber que existe. */
.rt-walldisplay {
  --rt-text-base: 18px;
  --rt-text-md:   22px;
  --rt-text-lg:   28px;
  --rt-text-xl:   38px;
  --rt-text-2xl:  56px;
  --rt-text-3xl:  76px;
  --rt-text-primary:   var(--rt-neutral-900);
  --rt-text-secondary: var(--rt-neutral-700);
  --rt-border:         var(--rt-neutral-300);
  --rt-chart-alto:     360px;
}