/* =============================================================================
 * RTIAP — Componentes de UI
 * =============================================================================
 * Capa ADITIVA. Requiere rtiap-tokens.css cargado antes.
 * Ver docs/adr/0002-refresh-visual-aditivo.md y .claude/skills/ui-rtiap/SKILL.md
 *
 * REGLA DURA: aquí NO se escribe ningún valor literal de color, espaciado,
 * radio, sombra ni tamaño de fuente. Todo sale de var(--rt-*).
 * Si falta un valor, se agrega un token en rtiap-tokens.css primero.
 *
 * Prefijo .rt- para todo. Nunca se redefine una clase de INSPINIA/Bootstrap.
 * ========================================================================== */

/* --- Superficie / tarjeta ---------------------------------------------------
   Equivalente moderno del .ibox de INSPINIA. Los dos pueden convivir. */
.rt-card {
  background: var(--rt-bg-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-sm);
  overflow: hidden;
}
.rt-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-3);
  padding: var(--rt-space-3) var(--rt-space-4);
  border-bottom: 1px solid var(--rt-border);
  background: var(--rt-bg-surface);
}
.rt-card__title {
  margin: 0;
  font-family: var(--rt-font-sans);
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-semibold);
  line-height: var(--rt-leading-tight);
  color: var(--rt-text-primary);
}
.rt-card__subtitle {
  margin: var(--rt-space-1) 0 0;
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-normal);
  color: var(--rt-text-secondary);
}
.rt-card__body   { padding: var(--rt-space-4); }
.rt-card__footer {
  padding: var(--rt-space-3) var(--rt-space-4);
  border-top: 1px solid var(--rt-border);
  background: var(--rt-bg-sunken);
  font-size: var(--rt-text-sm);
  color: var(--rt-text-secondary);
}

/* --- Lectura de sensor ------------------------------------------------------
   El componente central de una vista de túnel o cámara: valor + unidad + label.
   Las cifras usan tabular-nums para que no bailen al refrescarse por ajax. */
.rt-metric { display: flex; flex-direction: column; gap: var(--rt-space-1); }
.rt-metric__label {
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
  color: var(--rt-text-secondary);
  line-height: var(--rt-leading-tight);
}
.rt-metric__value {
  display: flex;
  align-items: baseline;
  gap: var(--rt-space-1);
  font-size: var(--rt-text-2xl);
  font-weight: var(--rt-weight-semibold);
  line-height: var(--rt-leading-tight);
  color: var(--rt-text-primary);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--rt-numeric);
}
.rt-metric__unit {
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-normal);
  color: var(--rt-text-secondary);
}
.rt-metric__meta {
  font-size: var(--rt-text-xs);
  color: var(--rt-text-muted);
}
/* Sin lectura disponible: se ve distinto de un cero real */
.rt-metric--offline .rt-metric__value { color: var(--rt-text-muted); }

/* --- Indicador de estado ----------------------------------------------------
   NUNCA usar solo el color para comunicar estado: el texto del badge es
   obligatorio, y el punto es un refuerzo, no el mensaje. */
.rt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  padding: var(--rt-space-1) var(--rt-space-3);
  border-radius: var(--rt-radius-full);
  font-size: var(--rt-text-sm);
  font-weight: var(--rt-weight-medium);
  line-height: var(--rt-leading-tight);
  white-space: nowrap;
}
.rt-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--rt-radius-full);
  background: currentColor;
  flex: none;
}
.rt-badge--ok      { background: var(--rt-state-ok-bg);      color: var(--rt-state-ok-fg); }
.rt-badge--warn    { background: var(--rt-state-warn-bg);    color: var(--rt-state-warn-fg); }
.rt-badge--alarm   { background: var(--rt-state-alarm-bg);   color: var(--rt-state-alarm-fg); }
.rt-badge--inhib   { background: var(--rt-state-inhib-bg);   color: var(--rt-state-inhib-fg); }
.rt-badge--offline { background: var(--rt-state-offline-bg); color: var(--rt-state-offline-fg); }
.rt-badge--info    { background: var(--rt-state-info-bg);    color: var(--rt-state-info-fg); }

/* Alarma activa: parpadeo suave, solo para alarmas SIN reconocer.
   Se respeta la preferencia del sistema de movimiento reducido. */
.rt-badge--alarm.is-unacked { animation: rt-pulse 1.6s ease-in-out infinite; }
@keyframes rt-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .rt-badge--alarm.is-unacked { animation: none; text-decoration: underline; }
}

/* Franja de estado a la izquierda de una tarjeta */
.rt-card--ok      { border-left: 4px solid var(--rt-state-ok-solid); }
.rt-card--warn    { border-left: 4px solid var(--rt-state-warn-solid); }
.rt-card--alarm   { border-left: 4px solid var(--rt-state-alarm-solid); }
.rt-card--inhib   { border-left: 4px solid var(--rt-state-inhib-solid); }
.rt-card--offline { border-left: 4px solid var(--rt-state-offline-solid); }

/* Equipo en proceso: fondo verde tenue en toda la tarjeta (sobre el blanco de la superficie).
   Se combina con la franja de estado: un túnel en proceso y en alarma lleva las dos. El texto
   del estado («En proceso») sigue en su badge: el fondo es refuerzo, no el mensaje. */
.rt-card--proceso { background: linear-gradient(var(--rt-proceso-fondo), var(--rt-proceso-fondo)), var(--rt-bg-surface); }
.rt-card--proceso > .rt-card__header,
.rt-card--proceso > .rt-card__footer { background: transparent; }
/* En pausa (sigue en proceso): el mismo fondo, en amarillo. El chip dice «Pausa: <motivo>»; el fondo es refuerzo. */
.rt-card--proceso.rt-card--pausa { background: linear-gradient(var(--rt-pausa-fondo), var(--rt-pausa-fondo)), var(--rt-bg-surface); }

/* --- Escala de lectura (gauge lineal) -----------------------------------------
   Dónde cae el valor dentro de la escala configurada en Alarmas 3.0
   (alarms_engine.status.config: min_scale..max_scale) y de sus límites
   (low_limit..high_limit). La banda es "dentro de límites"; el marcador es el
   valor. Las posiciones llegan como % inline desde la vista: son DATO, no color.
   El estado nunca va solo en el color del marcador: el badge con texto es
   obligatorio al lado (rt-badge--warn "Fuera de rango"). */
.rt-gauge {
  position: relative;
  height: 6px;
  margin: var(--rt-space-2) 0 var(--rt-space-1);
  border-radius: var(--rt-radius-full);
  background: var(--rt-bg-sunken);
}
.rt-gauge__banda {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: var(--rt-radius-full);
  background: var(--rt-state-ok-bg);
}
.rt-gauge__marca {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  transform: translateY(-50%);
  border-radius: var(--rt-radius-full);
  background: var(--rt-state-ok-solid);
  box-shadow: 0 0 0 2px var(--rt-bg-surface);
}
.rt-gauge--fuera .rt-gauge__marca { background: var(--rt-state-warn-solid); }
.rt-gauge--alarm .rt-gauge__marca { background: var(--rt-state-alarm-solid); }
/* Extremos de la escala y límites, en texto pequeño bajo la barra */
.rt-gauge__ejes {
  display: flex;
  justify-content: space-between;
  font-size: var(--rt-text-xs);
  color: var(--rt-text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.rt-gauge__limites {
  font-size: var(--rt-text-xs);
  color: var(--rt-text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- KPI -------------------------------------------------------------------------
   Una cifra grande con su etiqueta, para la fila de resumen de una planta o zona.
   tabular-nums para que no baile al refrescarse. */
.rt-kpi {
  display: flex; flex-direction: column; gap: var(--rt-space-1);
  padding: var(--rt-space-3) var(--rt-space-4);
  background: var(--rt-bg-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow-sm);
}
.rt-kpi__label {
  font-size: var(--rt-text-xs); font-weight: var(--rt-weight-medium);
  letter-spacing: .04em; text-transform: uppercase; color: var(--rt-text-muted);
}
.rt-kpi__value {
  font-size: var(--rt-text-2xl); font-weight: var(--rt-weight-semibold);
  line-height: var(--rt-leading-tight); color: var(--rt-text-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.rt-kpi__value--ok    { color: var(--rt-state-ok-fg); }
.rt-kpi__value--warn  { color: var(--rt-state-warn-fg); }
.rt-kpi__value--alarm { color: var(--rt-state-alarm-fg); }
.rt-kpi__meta { font-size: var(--rt-text-xs); color: var(--rt-text-muted); }

/* --- Cuenta de equipos ------------------------------------------------------------
   Una fila «Túneles · [2] en proceso · de 6» para la tarjeta de una planta o zona:
   la etiqueta a la izquierda y, a la derecha, el número en proceso como pastilla
   (verde solo si es mayor que cero; gris si es cero), la palabra que lo explica y el
   total instalado en gris. Es la esencia de la vista vieja de plantas, con el dato
   real. tabular-nums para que no baile al refrescarse. */
.rt-cuenta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rt-space-3);
  padding: var(--rt-space-2) 0;
  border-bottom: 1px solid var(--rt-border);
  font-size: var(--rt-text-base); color: var(--rt-text-primary);
}
.rt-cuenta:last-child { border-bottom: 0; }
.rt-cuenta__label { font-weight: var(--rt-weight-medium); color: var(--rt-text-secondary); }
.rt-cuenta__valor { display: inline-flex; align-items: center; gap: var(--rt-space-2); white-space: nowrap; }
.rt-cuenta__proc {
  display: inline-block; min-width: var(--rt-cuenta-ancho); padding: 0 var(--rt-space-2);
  border-radius: var(--rt-radius-sm); text-align: center;
  font-size: var(--rt-text-sm); font-weight: var(--rt-weight-semibold); line-height: var(--rt-cuenta-alto);
  background: var(--rt-bg-sunken); color: var(--rt-text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.rt-cuenta__proc.is-activo { background: var(--rt-state-ok-solid); color: var(--rt-text-inverse); }
.rt-cuenta__texto { font-size: var(--rt-text-xs); color: var(--rt-text-muted); }
.rt-cuenta__total {
  font-size: var(--rt-text-sm); color: var(--rt-text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Puntos de sonda --------------------------------------------------------------
   Un punto por sonda, con su estado. Es REFUERZO del texto que lo acompaña
   ("9 / 12 en rango"): nunca el único portador. El title lleva el valor. */
.rt-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.rt-dot {
  width: 8px; height: 8px; border-radius: var(--rt-radius-full);
  background: var(--rt-neutral-300); flex: none;
}
.rt-dot--ok      { background: var(--rt-state-ok-solid); }
.rt-dot--warn    { background: var(--rt-state-warn-solid); }
.rt-dot--alarm   { background: var(--rt-state-alarm-solid); }
.rt-dot--offline { background: var(--rt-state-offline-solid); }
.rt-dot--info    { background: var(--rt-state-info-solid); }   /* "cerca del objetivo": informativo, no problema */
.rt-dot--neutral { background: var(--rt-neutral-300); }        /* nada lo evaluo: sin limites ni receta. NO es "ok" */
.rt-dot--blanca  { background: var(--rt-bg-surface); box-shadow: inset 0 0 0 1px var(--rt-border-strong); }   /* pulpa sobre la receta o sin ella */
.rt-dot--inhib   { background: var(--rt-state-inhib-solid); }  /* el motor de alarmas la inhibio (p. ej. sin proceso) */

/* --- Chip de filtro -----------------------------------------------------------------
   Botón-pastilla para filtrar una lista; el activo se invierte. Es un <button>. */
.rt-chip {
  display: inline-flex; align-items: center; gap: var(--rt-space-2);
  padding: var(--rt-space-1) var(--rt-space-3);
  border: 1px solid var(--rt-border-strong); border-radius: var(--rt-radius-full);
  background: var(--rt-bg-surface); color: var(--rt-text-secondary);
  font: inherit; font-size: var(--rt-text-sm); font-weight: var(--rt-weight-medium);
  line-height: var(--rt-leading-tight); cursor: pointer; transition: var(--rt-transition);
}
.rt-chip:hover { background: var(--rt-bg-hover); }
.rt-chip:focus-visible { outline: none; box-shadow: var(--rt-focus-ring); }
.rt-chip.is-active { background: var(--rt-neutral-900); border-color: var(--rt-neutral-900); color: var(--rt-text-inverse); }
.rt-chip__n {
  font-size: var(--rt-text-xs); padding: 0 var(--rt-space-2);
  border-radius: var(--rt-radius-full); background: var(--rt-bg-sunken); color: var(--rt-text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}
.rt-chip.is-active .rt-chip__n { background: var(--rt-neutral-700); color: var(--rt-text-inverse); }

/* --- Barra de progreso --------------------------------------------------------------- */
.rt-progress { position: relative; height: 6px; border-radius: var(--rt-radius-full); background: var(--rt-bg-sunken); overflow: hidden; }
.rt-progress__fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--rt-radius-full); background: var(--rt-state-ok-solid); }
.rt-progress__fill--warn { background: var(--rt-state-warn-solid); }   /* pasado del plazo (la guarda de la receta, cumplida) */

/* --- Botones ---------------------------------------------------------------- */
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-2);
  padding: var(--rt-space-2) var(--rt-space-4);
  border: 1px solid transparent;
  border-radius: var(--rt-radius-md);
  font-family: var(--rt-font-sans);
  font-size: var(--rt-text-base);
  font-weight: var(--rt-weight-medium);
  line-height: var(--rt-leading-tight);
  cursor: pointer;
  transition: background var(--rt-transition), border-color var(--rt-transition);
  text-decoration: none;
}
.rt-btn:focus-visible { outline: none; box-shadow: var(--rt-focus-ring); }
.rt-btn[disabled], .rt-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* brand-500: el Azul RTIAP mismo da 10,6:1 con texto blanco (ADR 0034); hover el 600 */
.rt-btn--primary { background: var(--rt-brand-500); color: var(--rt-text-inverse); }
.rt-btn--primary:hover:not([disabled]) { background: var(--rt-brand-600); color: var(--rt-text-inverse); }

.rt-btn--secondary {
  background: var(--rt-bg-surface);
  border-color: var(--rt-border-strong);
  color: var(--rt-text-primary);
}
.rt-btn--secondary:hover:not([disabled]) { background: var(--rt-bg-hover); color: var(--rt-text-primary); }

.rt-btn--ghost { background: transparent; color: var(--rt-text-link); }
.rt-btn--ghost:hover:not([disabled]) { background: var(--rt-bg-hover); }

.rt-btn--danger { background: var(--rt-state-alarm-fg); color: var(--rt-text-inverse); }
.rt-btn--danger:hover:not([disabled]) { background: var(--rt-state-alarm-fg); filter: brightness(0.9); }

.rt-btn--sm { padding: var(--rt-space-1) var(--rt-space-3); font-size: var(--rt-text-sm); }

/* --- Tabla de datos --------------------------------------------------------- */
.rt-table { width: 100%; border-collapse: collapse; font-size: var(--rt-text-base); }
.rt-table th {
  padding: var(--rt-space-2) var(--rt-space-3);
  text-align: left;
  font-weight: var(--rt-weight-semibold);
  font-size: var(--rt-text-sm);
  color: var(--rt-text-secondary);
  background: var(--rt-bg-sunken);
  border-bottom: 1px solid var(--rt-border);
  white-space: nowrap;
}
.rt-table td {
  padding: var(--rt-space-2) var(--rt-space-3);
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-text-primary);
}
.rt-table tbody tr:hover td { background: var(--rt-bg-hover); }
/* Columnas numéricas: alineadas a la derecha y de ancho estable */
.rt-table .rt-num {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--rt-numeric);
}
/* Tabla ancha: scroll propio, la página nunca scrollea horizontal */
.rt-table-scroll { overflow-x: auto; }
/* Tabla que crece (una bitácora): alto acotado, scroll vertical propio y el encabezado a la vista */
.rt-table-scroll--alto { max-height: var(--rt-tabla-alto); overflow-y: auto; }
.rt-table-scroll--alto .rt-table th { position: sticky; top: 0; z-index: 1; }

/* --- Gráfico de líneas en el tiempo (html/js/rtiap-curva.js) ------------------
   SVG dibujado por un script propio, sin librería. Líneas de 2px, grilla y ejes
   en hairline, velo de proceso, cursor que sigue al dedo o al puntero con un
   tooltip de todas las series, leyenda siempre y la tabla equivalente. El color de
   cada serie llega por style="--rt-chart-N"; el texto nunca lleva el color de la serie. */
.rt-chart { position: relative; }
/* hidden manda sobre el display de cada pieza (sin esto, «Cargando…» quedaba a la vista) */
.rt-chart [hidden] { display: none !important; }
/* `hidden` tiene que ganar siempre en los componentes .rt-: un `display: flex` de clase le gana al
   [hidden] del navegador (pasó con «Cargando la curva…», con el panel de medir de la PDA visible en
   modo estiba, y con las pestañas de nivel vacías en un túnel de un nivel). */
[class*="rt-"][hidden] { display: none !important; }
/* min(…, 100%): en una tarjeta mas angosta que el minimo (celular) el panel ocupa la tarjeta en vez de salirse de ella */
.rt-chart__paneles--varios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--rt-chart-panel-min), 100%), 1fr)); gap: var(--rt-space-4) var(--rt-space-5); }
.rt-chart__panel-titulo { font-size: var(--rt-text-sm); font-weight: var(--rt-weight-semibold); color: var(--rt-text-primary); margin-bottom: var(--rt-space-1); }
.rt-chart__plot--panel { height: var(--rt-chart-alto-panel); }
.rt-chart__leyenda { display: flex; flex-wrap: wrap; gap: var(--rt-space-1) var(--rt-space-4); margin-bottom: var(--rt-space-2);
                     font-size: var(--rt-text-sm); color: var(--rt-text-secondary); }
.rt-chart__key { display: inline-flex; align-items: center; gap: var(--rt-space-2); }
.rt-chart__key-linea { display: inline-block; width: 16px; border-top: 2px solid var(--rt-chart-cursor); border-radius: var(--rt-radius-full); }
.rt-chart__key-velo { display: inline-block; width: 16px; height: 12px; background: var(--rt-chart-proceso-bg);
                      border-left: 2px solid var(--rt-chart-proceso-linea); }
.rt-chart__plot { position: relative; height: var(--rt-chart-alto); touch-action: pan-y; outline: none; }
.rt-chart__plot:focus-visible { box-shadow: 0 0 0 2px var(--rt-border-strong); border-radius: var(--rt-radius-md); }
.rt-chart--cargando .rt-chart__plot { opacity: .5; }
.rt-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rt-chart__svg text { font-size: var(--rt-text-xs); fill: var(--rt-chart-eje); font-variant-numeric: tabular-nums lining-nums; }
.rt-chart__grid { stroke: var(--rt-chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.rt-chart__serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rt-chart__velo { fill: var(--rt-chart-proceso-bg); }
.rt-chart__inicio { stroke: var(--rt-chart-proceso-linea); stroke-width: 1.5; }
.rt-chart__marca { stroke: var(--rt-chart-eje); stroke-width: 1.5; stroke-dasharray: 4 3; }   /* los hitos de fase de una hoja (CurvaHoja) */
.rt-chart__marca--carga { stroke: var(--rt-state-info-solid); }
.rt-chart__marca--frio { stroke: var(--rt-state-ok-solid); }
.rt-chart__marca--pausa { stroke: var(--rt-state-warn-solid); }
.rt-chart__marca--post_frio { stroke: var(--rt-neutral-500); }
.rt-chart__marca-texto { fill: var(--rt-text-secondary); font-size: var(--rt-text-xs); }
.rt-chart__key-marca { display: inline-block; width: 16px; height: 0; border-top: 2px dashed var(--rt-chart-eje); vertical-align: middle; }
.rt-chart__svg .rt-chart__inicio-texto { fill: var(--rt-text-secondary); font-weight: var(--rt-weight-medium); }
.rt-chart__cursor { stroke: var(--rt-chart-cursor); stroke-width: 1; }
.rt-chart__punto { stroke: var(--rt-bg-surface); stroke-width: 2; }
.rt-chart__tooltip { position: absolute; top: var(--rt-space-6); z-index: 5; pointer-events: none; min-width: 180px;
                     padding: var(--rt-space-2) var(--rt-space-3); background: var(--rt-bg-surface); border: 1px solid var(--rt-border);
                     border-radius: var(--rt-radius-md); box-shadow: var(--rt-shadow-md); font-size: var(--rt-text-sm); }
.rt-chart__tt-hora { font-size: var(--rt-text-xs); color: var(--rt-text-muted); margin-bottom: var(--rt-space-1); }
.rt-chart__tt-fila { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: var(--rt-space-2); line-height: var(--rt-leading-tight); padding: 2px 0; }
.rt-chart__tt-valor { font-weight: var(--rt-weight-semibold); color: var(--rt-text-primary); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.rt-chart__tt-nombre { color: var(--rt-text-secondary); white-space: nowrap; }
.rt-chart__tt-proceso { margin-top: var(--rt-space-1); font-size: var(--rt-text-xs); color: var(--rt-text-secondary); }
.rt-chart__tabla { margin-top: var(--rt-space-2); }
.rt-chart__tabla summary { cursor: pointer; font-size: var(--rt-text-sm); color: var(--rt-text-secondary); }
.rt-chart__tabla .rt-table-scroll { max-height: 320px; overflow-y: auto; margin-top: var(--rt-space-2); }
.rt-chart__estado { min-height: var(--rt-chart-alto); display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* La referencia (el aire de salida) es la única línea discontinua; el setpoint, una escalera fina (2026-10-02). */
.rt-chart__serie--ref { stroke-dasharray: 6 4; }
.rt-chart__serie--escalon { stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: butt; }
.rt-chart__escalon-texto { fill: var(--rt-text-secondary); font-size: var(--rt-text-xs); }
.rt-chart__key-linea--ref { border-top-style: dashed; }
.rt-chart__key-escalon { display: inline-block; width: 16px; height: 8px; border-top: 2px solid var(--rt-chart-setpoint); border-right: 2px solid var(--rt-chart-setpoint); vertical-align: middle; }
/* El zoom: la barra con la pista y «Ver todo»; con ventana, el gráfico se arrastra. */
.rt-chart__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-space-2); flex-wrap: wrap; margin-bottom: var(--rt-space-1); }
.rt-chart__ayuda { font-size: var(--rt-text-xs); color: var(--rt-text-muted); }
.rt-chart--zoom .rt-chart__plot { cursor: grab; }
.rt-chart--zoom .rt-chart__plot:active { cursor: grabbing; }

/* --- Menú lateral en tablet vertical y celular (html/js/rtiap-menu.js) ---------
   Contraído, el riel de íconos se ve siempre, fijo a la pantalla (no se va con el
   scroll de una página larga), y el contenido empieza después de él (INSPINIA, bajo
   769 px, lo esconde o lo pone encima del contenido). Desplegado, el menú va ENCIMA
   del contenido, a toda la altura y con su propio scroll, con un velo detrás: la
   página no se mueve ni cambia de diseño. */
body.rt-menu-compacto #page-wrapper { margin: 0 0 0 var(--rt-menu-riel); }
body.rt-menu-compacto .navbar-static-side { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--rt-z-menu);
                                            width: var(--rt-menu-riel); overflow-x: hidden; overflow-y: auto; background: var(--rt-menu-fondo); }
body.rt-menu-compacto.rt-menu-abierto .navbar-static-side { width: var(--rt-menu-ancho); box-shadow: var(--rt-shadow-lg); }
.rt-menu-velo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--rt-z-menu-velo); background: var(--rt-overlay); }
.rt-menu-velo[hidden] { display: none; }

/* --- El menú armado desde la zona (ADR 0052, Plantas\MenuZona) -----------------
   Un grupo por pestaña del resumen; junto al nombre, cuántos equipos tiene. */
.rt-menu-cuenta { margin-left: var(--rt-space-1); font-weight: var(--rt-weight-normal); color: var(--rt-menu-texto-suave); font-variant-numeric: tabular-nums; }
/* bajo el nombre del grupo: cuántos hay en curso (verde) y en pausa (amarillo), con los colores de la tarjeta */
.rt-menu-estado { display: block; font-size: var(--rt-text-xs); font-weight: var(--rt-weight-normal); color: var(--rt-menu-proceso); }
.rt-menu-estado__pausa { color: var(--rt-menu-pausa); }
/* El ícono de cada equipo: iniciar (▶), en curso (●, verde) o en pausa (⏸, amarillo). Va a la derecha, aparte del
   nombre: el nombre abre la vista del equipo y el ícono inicia o abre el proceso. Quieto, sin parpadeo; el naranjo
   sigue siendo solo del ítem activo. Cuelga de #side-menu porque INSPINIA y el tema pintan todo enlace del submenú
   (padding, color, display) con más especificidad que una clase. Con el dedo, el blanco mide --rt-tap-min. */
#side-menu .rt-menu-item--accion { position: relative; }
#side-menu .rt-menu-item--accion > a:first-child { padding-right: calc(var(--rt-menu-accion) + var(--rt-space-3)); }
#side-menu .rt-menu-item--accion > .rt-menu-accion {
  position: absolute; top: 50%; right: var(--rt-space-2); transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: var(--rt-menu-accion); height: var(--rt-menu-accion); padding: 0;
  border-radius: var(--rt-radius-sm); background: transparent;
  font-size: var(--rt-menu-accion-icono); font-weight: var(--rt-weight-normal); line-height: 1; color: var(--rt-menu-texto);
}
#side-menu .rt-menu-item--accion > .rt-menu-accion:hover,
#side-menu .rt-menu-item--accion > .rt-menu-accion:focus { background: var(--rt-menu-hover); color: var(--rt-menu-texto-activo); }
#side-menu .rt-menu-item--accion > .rt-menu-accion--en_curso,
#side-menu .rt-menu-item--accion > .rt-menu-accion--en_curso:hover { color: var(--rt-menu-proceso); }
#side-menu .rt-menu-item--accion > .rt-menu-accion--en_pausa,
#side-menu .rt-menu-item--accion > .rt-menu-accion--en_pausa:hover { color: var(--rt-menu-pausa); }
/* el histórico y la rotación acotados a la planta en que se entró (ADR 0053): junto a la etiqueta del selector
   bloqueado, el ícono para cambiar de planta, en el mismo renglón: el campo mide lo mismo que los demás filtros */
.rt-foco-cambiar { margin-left: var(--rt-space-1); font-weight: var(--rt-weight-normal); }
/* el aviso de vuelta de un inicio lanzado desde el menú, sobre el contenido de cualquier página (layouts.app) */
.rt-aviso-menu { margin: var(--rt-space-3) var(--rt-space-4) 0; }
@media (pointer: coarse) {
  #side-menu .rt-menu-item--accion > a:first-child { padding-right: calc(var(--rt-tap-min) + var(--rt-space-2)); }
  #side-menu .rt-menu-item--accion > .rt-menu-accion { width: var(--rt-tap-min); height: var(--rt-tap-min); right: var(--rt-space-1); }
}

/* --- Pantallas de acceso: login y contraseña (layouts.acceso) ------------------
   En horizontal (≥ 900 px): el panel de imagen a la izquierda y el formulario a la
   derecha. En vertical y en celular: una columna, logo vertical arriba. El logo cambia
   solo con <picture>: horizontal o vertical según la orientación, azul o blanco según
   el modo. Sin INSPINIA ni Bootstrap: la página carga solo los tokens y esta hoja. */
.rt-acceso { margin: 0; min-height: 100vh; background: var(--rt-acceso-fondo); color: var(--rt-acceso-texto);
             font-family: var(--rt-font-sans); font-size: var(--rt-text-base); line-height: var(--rt-leading-normal);
             -webkit-font-smoothing: antialiased; }
.rt-acceso *, .rt-acceso *::before, .rt-acceso *::after { box-sizing: border-box; }
.rt-acceso__pagina { min-height: 100vh; display: flex; }
.rt-acceso__hero { display: none; position: relative; flex: 1 1 55%; overflow: hidden; color: var(--rt-acceso-hero-texto);
                   background: var(--rt-acceso-hero-trama), var(--rt-acceso-hero); background-size: cover; background-position: center; }
/* la foto se ancla a la izquierda: en una pantalla más angosta se pierde azul de la derecha, nunca los bins del borde */
.rt-acceso__hero--foto { background-position: left center; }
.rt-acceso__hero--foto::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--rt-acceso-hero-velo); }
.rt-acceso__hero-texto { position: absolute; left: var(--rt-space-8); right: var(--rt-space-8); bottom: var(--rt-space-8); max-width: 34rem; }
.rt-acceso__hero-titulo { margin: 0 0 var(--rt-space-3); font-size: var(--rt-text-2xl); font-weight: var(--rt-weight-semibold); line-height: var(--rt-leading-tight); }
.rt-acceso__hero-bajada { margin: 0; font-size: var(--rt-text-md); color: var(--rt-acceso-hero-texto-2); }
.rt-acceso__panel { flex: 1 1 45%; display: flex; align-items: center; justify-content: center; padding: var(--rt-space-8) var(--rt-space-4); }
.rt-acceso__caja { width: 100%; max-width: var(--rt-acceso-caja); }
.rt-acceso__logo { display: block; margin: 0 auto var(--rt-space-6); text-align: center; }
.rt-acceso__logo img { display: inline-block; height: auto; width: var(--rt-acceso-logo-vertical); max-width: 60vw; max-height: var(--rt-acceso-logo-tope); object-fit: contain; }
.rt-acceso__tarjeta { background: var(--rt-acceso-superficie); border: 1px solid var(--rt-acceso-borde); border-radius: var(--rt-radius-lg);
                      box-shadow: var(--rt-acceso-sombra); padding: var(--rt-space-6); }
.rt-acceso__titulo { margin: 0 0 var(--rt-space-1); font-size: var(--rt-text-xl); font-weight: var(--rt-weight-semibold); line-height: var(--rt-leading-tight); }
.rt-acceso__bajada { margin: 0 0 var(--rt-space-5); color: var(--rt-acceso-texto-2); font-size: var(--rt-text-sm); }
.rt-acceso__campo { margin-bottom: var(--rt-space-4); }
.rt-acceso__etiqueta { display: block; margin-bottom: var(--rt-space-1); font-size: var(--rt-text-sm); font-weight: var(--rt-weight-medium); }
.rt-acceso__input { display: block; width: 100%; height: var(--rt-acceso-campo-alto); padding: 0 var(--rt-space-3);
                    font: inherit; color: var(--rt-acceso-texto); background: var(--rt-acceso-campo);
                    border: 1px solid var(--rt-acceso-borde); border-radius: var(--rt-radius-md); }
.rt-acceso__input:focus { outline: none; border-color: var(--rt-acceso-primario); box-shadow: 0 0 0 var(--rt-acceso-anillo) var(--rt-acceso-foco); }
.rt-acceso__input[aria-invalid="true"] { border-color: var(--rt-state-alarm-solid); }
.rt-acceso__clave { position: relative; }
.rt-acceso__clave .rt-acceso__input { padding-right: calc(var(--rt-acceso-campo-alto) + var(--rt-space-1)); }
.rt-acceso__ver { position: absolute; top: 0; right: 0; width: var(--rt-acceso-campo-alto); height: var(--rt-acceso-campo-alto);
                  display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none;
                  color: var(--rt-acceso-texto-2); cursor: pointer; border-radius: var(--rt-radius-md); }
.rt-acceso__ver:focus-visible { outline: none; box-shadow: 0 0 0 var(--rt-acceso-anillo) var(--rt-acceso-foco); }
.rt-acceso__ver svg { width: var(--rt-acceso-icono); height: var(--rt-acceso-icono); }
.rt-acceso__boton { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--rt-acceso-campo-alto); margin-top: var(--rt-space-2);
                    font: inherit; font-weight: var(--rt-weight-semibold); color: var(--rt-acceso-primario-texto); background: var(--rt-acceso-primario);
                    border: 0; border-radius: var(--rt-radius-md); cursor: pointer; }
.rt-acceso__boton:hover { background: var(--rt-acceso-primario-hover); }
.rt-acceso__boton:focus-visible { outline: none; box-shadow: 0 0 0 var(--rt-acceso-anillo) var(--rt-acceso-foco); }
.rt-acceso__boton[disabled] { opacity: .7; cursor: progress; }
.rt-acceso__aviso { margin-bottom: var(--rt-space-4); padding: var(--rt-space-3); border-radius: var(--rt-radius-md); font-size: var(--rt-text-sm);
                    border: 1px solid var(--rt-state-alarm-solid); background: var(--rt-state-alarm-bg); color: var(--rt-state-alarm-fg); }
.rt-acceso__aviso--ok { border-color: var(--rt-state-ok-solid); background: var(--rt-state-ok-bg); color: var(--rt-state-ok-fg); }
.rt-acceso__enlaces { margin-top: var(--rt-space-4); text-align: center; font-size: var(--rt-text-sm); }
.rt-acceso a { color: var(--rt-acceso-enlace); font-weight: var(--rt-weight-medium); text-decoration: none; }
.rt-acceso a:hover { text-decoration: underline; }
.rt-acceso__pie { margin-top: var(--rt-space-6); text-align: center; font-size: var(--rt-text-xs); color: var(--rt-acceso-texto-2); }
.rt-acceso__pie p { margin: 0 0 var(--rt-space-1); }
/* horizontal con espacio: dos paneles, logo horizontal */
@media (orientation: landscape) and (min-width: 900px) {
  .rt-acceso__hero { display: block; }
  .rt-acceso__panel { flex: 0 0 min(var(--rt-acceso-panel), 45%); background: var(--rt-acceso-superficie); }
  .rt-acceso__tarjeta { border: 0; box-shadow: none; padding: 0; background: none; }
  .rt-acceso__logo { text-align: left; }
  .rt-acceso__logo img { width: auto; height: var(--rt-acceso-logo-alto); max-width: 100%; }
  .rt-acceso__pie { text-align: left; }
}
/* celular en horizontal: una columna, logo horizontal bajo */
@media (orientation: landscape) and (max-width: 899px) {
  .rt-acceso__logo img { width: auto; height: var(--rt-acceso-logo-bajo); }
  .rt-acceso__panel { padding: var(--rt-space-4); }
}

/* --- Layout ------------------------------------------------------------------ */
.rt-grid { display: grid; gap: var(--rt-space-4); }
.rt-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rt-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .rt-grid--2, .rt-grid--3, .rt-grid--4 { grid-template-columns: 1fr; }
}
.rt-stack { display: flex; flex-direction: column; gap: var(--rt-space-3); }
.rt-row   { display: flex; align-items: center; gap: var(--rt-space-3); flex-wrap: wrap; }
.rt-spacer{ flex: 1 1 auto; }

/* --- Estado vacío -------------------------------------------------------------
   Un vacío siempre dice POR QUÉ está vacío. Nunca una tabla en blanco. */
.rt-empty {
  padding: var(--rt-space-10) var(--rt-space-4);
  text-align: center;
  color: var(--rt-text-secondary);
  font-size: var(--rt-text-base);
}
.rt-empty__title {
  margin: 0 0 var(--rt-space-2);
  font-size: var(--rt-text-md);
  font-weight: var(--rt-weight-semibold);
  color: var(--rt-text-primary);
}

/* --- Tipografía de página ------------------------------------------------------ */
.rt-page-title {
  margin: 0 0 var(--rt-space-1);
  font-family: var(--rt-font-sans);
  font-size: var(--rt-text-xl);
  font-weight: var(--rt-weight-semibold);
  line-height: var(--rt-leading-tight);
  color: var(--rt-text-primary);
}
.rt-page-subtitle { margin: 0; font-size: var(--rt-text-base); color: var(--rt-text-secondary); }
.rt-muted { color: var(--rt-text-muted); }
.rt-timestamp {
  font-size: var(--rt-text-xs);
  color: var(--rt-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Terreno: captura de estiba en PDA (ADR 0020) ------------------------------
   La pantalla que el operador usa dentro del túnel. Todo con --rt-tap-min para
   dedos con guante; el escáner escribe en .rt-scan__input, que tiene el foco. */
.rt-terreno { margin: 0; background: var(--rt-bg-page); color: var(--rt-text-primary); font-family: var(--rt-font-sans); font-size: var(--rt-text-base); line-height: var(--rt-leading-normal); }
.rt-terreno__app { max-width: 760px; margin: 0 auto; padding: var(--rt-space-3); display: flex; flex-direction: column; gap: var(--rt-space-3); }
.rt-terreno__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-space-2); }
.rt-terreno__titulo { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--rt-space-2); font-size: var(--rt-text-md); }
.rt-terreno__cuentas { display: flex; gap: var(--rt-space-5); color: var(--rt-text-secondary); }
.rt-terreno__cuentas strong { font-size: var(--rt-text-lg); color: var(--rt-text-primary); }
.rt-terreno__pie { font-size: var(--rt-text-xs); text-align: center; word-break: break-word; }

.rt-tabs { display: flex; gap: var(--rt-space-2); }
.rt-tab {
  flex: 1; min-height: var(--rt-tap-min); padding: 0 var(--rt-space-3);
  border: 1px solid var(--rt-border-strong); border-radius: var(--rt-radius-md);
  background: var(--rt-bg-surface); color: var(--rt-text-primary);
  font-family: var(--rt-font-sans); font-size: var(--rt-text-md); font-weight: var(--rt-weight-semibold);
}
.rt-tab.is-activo { background: var(--rt-brand-600); border-color: var(--rt-brand-600); color: var(--rt-text-inverse); }
/* En linea con otros filtros (la zona por grupos): no se estiran, altura de chip, envuelven. */
.rt-tabs--inline { flex-wrap: wrap; }
.rt-tabs--inline .rt-tab {
  flex: 0 1 auto; min-height: 0; padding: var(--rt-space-1) var(--rt-space-3);
  font-size: var(--rt-text-sm); cursor: pointer; transition: var(--rt-transition);
}
.rt-tabs--inline .rt-tab:hover:not(.is-activo) { background: var(--rt-bg-hover); }
.rt-tabs--inline .rt-tab:focus-visible { outline: none; box-shadow: var(--rt-focus-ring); }

.rt-scan {
  display: flex; flex-direction: column; gap: var(--rt-space-2); padding: var(--rt-space-3);
  border: 2px solid var(--rt-border-strong); border-radius: var(--rt-radius-lg); background: var(--rt-bg-surface);
  transition: var(--rt-transition);
}
.rt-scan--ok    { border-color: var(--rt-state-ok-solid);    background: var(--rt-state-ok-bg); }
.rt-scan--warn  { border-color: var(--rt-state-warn-solid);  background: var(--rt-state-warn-bg); }
.rt-scan--alarm { border-color: var(--rt-state-alarm-solid); background: var(--rt-state-alarm-bg); }
.rt-scan__input {
  width: 100%; box-sizing: border-box; min-height: var(--rt-tap-min); padding: var(--rt-space-2) var(--rt-space-3);
  font-family: var(--rt-font-mono); font-size: var(--rt-text-lg); font-variant-numeric: var(--rt-numeric);
  border: 1px solid var(--rt-border); border-radius: var(--rt-radius-md); background: var(--rt-bg-surface); color: var(--rt-text-primary);
}
.rt-scan__input:focus { outline: 3px solid var(--rt-focus-ring); outline-offset: 1px; }
.rt-scan__input--sm { font-size: var(--rt-text-base); font-family: var(--rt-font-sans); }
.rt-scan__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--rt-space-2); font-size: var(--rt-text-sm); }

.rt-conteo { display: flex; flex-wrap: wrap; gap: var(--rt-space-2); }
.rt-conteo__btn { flex: 1; min-height: var(--rt-tap-min); font-size: var(--rt-text-md); }
.rt-conteo__form { display: flex; gap: var(--rt-space-2); width: 100%; }

.rt-grilla { display: flex; flex-direction: column; gap: var(--rt-space-1); }
.rt-pos {
  display: flex; align-items: stretch; gap: var(--rt-space-2); min-height: var(--rt-tap-min);
  border: 1px solid var(--rt-border); border-radius: var(--rt-radius-md); background: var(--rt-bg-surface);
}
.rt-pos__num {
  width: var(--rt-tap-min); flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: var(--rt-weight-bold); font-variant-numeric: var(--rt-numeric); color: var(--rt-text-secondary);
  border-right: 1px solid var(--rt-border);
}
.rt-pos__pallets { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-space-1); padding: var(--rt-space-1); }
.rt-pos__vacia { color: var(--rt-text-muted); font-size: var(--rt-text-sm); }
.rt-pos--cursor { border-color: var(--rt-brand-500); outline: 2px solid var(--rt-brand-300); outline-offset: -1px; }
.rt-pos--cursor .rt-pos__num { color: var(--rt-brand-700); }
.rt-pos--sel { background: var(--rt-brand-50); border-color: var(--rt-brand-500); }

.rt-pallet {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--rt-space-1); text-align: left;
  min-height: calc(var(--rt-tap-min) - var(--rt-space-2)); padding: 0 var(--rt-space-3);
  border: 1px solid var(--rt-border-strong); border-radius: var(--rt-radius-full);
  background: var(--rt-bg-sunken); color: var(--rt-text-primary);
  font-family: var(--rt-font-mono); font-size: var(--rt-text-sm); font-variant-numeric: var(--rt-numeric);
}
.rt-pallet--parcial   { border-style: dashed; }
.rt-pallet--conflicto { background: var(--rt-state-warn-bg); border-color: var(--rt-state-warn-solid); color: var(--rt-state-warn-fg); }
.rt-pallet--pendiente { opacity: .65; border-style: dotted; }
.rt-pallet--otro      { border-color: var(--rt-state-info-solid); }
.rt-pallet--erp       { border-color: var(--rt-brand-300); background: var(--rt-brand-50); }
.rt-pallet__erp       { color: var(--rt-state-warn-fg); }
.rt-terreno__erp      { justify-content: space-between; align-items: center; gap: var(--rt-space-2); font-size: var(--rt-text-sm); }
.rt-pallet__sonda { color: var(--rt-brand-700); font-weight: var(--rt-weight-bold); }
.rt-pallet__pulpa { color: var(--rt-text-secondary); }

/* Bloque de pallet del plano mímico (ADR 0035): un bloque por posición, alineado con sus sondas.
   Lleno = hay pallet cargado (o referencia, sin hoja); --vacio = posición libre, punteado, nunca solo
   por color: el número de pallets va dentro y el título lo dice en palabras. El riel une los bloques. */
.rt-pallet-bloque {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: var(--rt-pallet-bloque-min); width: 100%; position: relative; z-index: 1;
  border: 1px solid var(--rt-pallet-borde); border-radius: var(--rt-radius-sm);
  background: repeating-linear-gradient(to bottom, var(--rt-pallet-madera) 0 var(--rt-pallet-tabla), var(--rt-pallet-junta) var(--rt-pallet-tabla) var(--rt-pallet-tabla-paso));
}
.rt-pallet-bloque--vacio { background: var(--rt-bg-surface); border-style: dashed; border-color: var(--rt-border-strong); }
.rt-pallet-bloque__n {
  font-size: var(--rt-text-xs); line-height: var(--rt-leading-tight); color: var(--rt-text-secondary);
  background: var(--rt-bg-surface); border-radius: var(--rt-radius-sm); padding: 0 var(--rt-space-1); margin-bottom: var(--rt-space-1);
  font-variant-numeric: var(--rt-numeric);
}
.rt-pallet-bloque--leyenda { display: inline-flex; width: calc(var(--rt-pallet-bloque-ancho) / 2); min-height: var(--rt-space-3); vertical-align: middle; }
.rt-pallet-riel { width: var(--rt-pallet-riel); justify-self: center; align-self: stretch; background: var(--rt-border); border-radius: var(--rt-radius-full); z-index: 0; }

/* El mímico del túnel (ADR 0035): la segunda forma del resumen de la zona, un mímico por túnel en su tarjeta
   (el Resumen de siempre). Por lado: sonda de afuera | bloque de pallet | sonda hacia el pasillo; el pasillo
   al centro. La celda lleva el estado en color Y en texto, y la P de la sonda. --compacto achica bloques y
   celdas para la tarjeta (redefine tokens, ningún hijo lo sabe); --unico es el nicho simple (un lado y el
   pasillo). La vista de cada túnel conserva su plano por pasillos y no usa este componente. */
.rt-mimico { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--rt-space-4); align-items: stretch; }
.rt-mimico--unico { grid-template-columns: minmax(0, 1fr) auto; }
.rt-mimico--compacto {
  gap: var(--rt-space-2);
  --rt-pallet-bloque-ancho: var(--rt-mimico-bloque-compacto);
  --rt-pallet-bloque-min:   var(--rt-mimico-celda-compacto);
  --rt-mimico-central:      var(--rt-mimico-central-compacto);
}
.rt-mimico__titulo {
  font-size: var(--rt-text-xs); font-weight: var(--rt-weight-medium); letter-spacing: .04em; text-transform: uppercase;
  color: var(--rt-text-muted); text-align: center; margin-bottom: var(--rt-space-2);
}
.rt-mimico--compacto .rt-mimico__titulo { margin-bottom: var(--rt-space-1); }
.rt-mimico__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--rt-pallet-bloque-ancho) minmax(0, 1fr); gap: var(--rt-space-2); align-items: stretch; }
.rt-mimico--compacto .rt-mimico__grid { gap: var(--rt-space-1); }
.rt-mimico__cab { grid-row: 1; font-size: var(--rt-text-xs); color: var(--rt-text-muted); text-align: center; }
.rt-mimico__riel { grid-column: 2; }
.rt-mimico__celda {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--rt-pallet-bloque-min); padding: calc(var(--rt-space-2) + var(--rt-text-xs)) var(--rt-space-2) var(--rt-space-1);
  border: 1px solid var(--rt-border); border-radius: var(--rt-radius-md); background: var(--rt-bg-surface);
}
.rt-mimico__sonda { position: absolute; top: var(--rt-space-1); left: var(--rt-space-2); font-size: var(--rt-text-xs); font-weight: var(--rt-weight-medium); color: var(--rt-text-muted); line-height: 1; }
.rt-mimico__valor { font-size: var(--rt-text-lg); font-weight: var(--rt-weight-semibold); font-variant-numeric: var(--rt-numeric); color: var(--rt-text-primary); line-height: var(--rt-leading-tight); }
.rt-mimico--compacto .rt-mimico__valor { font-size: var(--rt-text-md); }
/* compacto: cuatro tarjetas por fila en una pantalla de escritorio (dueño, 2026-10-08), menos relleno lateral */
.rt-mimico--compacto .rt-mimico__celda { padding-left: var(--rt-space-1); padding-right: var(--rt-space-1); }
.rt-mimico--compacto .rt-mimico__sonda { left: var(--rt-space-1); }
.rt-mimico__estado { font-size: var(--rt-text-xs); line-height: 1; }
/* la pulpa solo contra la receta (CeldaPlano, dueño 2026-10-08): verde en la banda; rojo bajo ella (se quema fruta)
   o con una alarma activa; blanco sobre ella (enfriando) o sin receta. La marca (✓ ▼ !) en la esquina para que el
   color nunca vaya solo; el estado en palabras va en el title */
.rt-mimico__celda--en-objetivo { background: var(--rt-state-ok-bg); border-color: var(--rt-state-ok-solid); color: var(--rt-state-ok-fg); }
.rt-mimico__celda--bajo,
.rt-mimico__celda--alarm       { background: var(--rt-state-alarm-bg); border-color: var(--rt-state-alarm-solid); color: var(--rt-state-alarm-fg); }
.rt-mimico__marca { position: absolute; top: var(--rt-space-1); right: var(--rt-space-1); font-size: var(--rt-text-xs); font-weight: var(--rt-weight-bold); line-height: 1; }
.rt-mimico__celda--vacia .rt-mimico__valor { color: var(--rt-text-muted); }
.rt-mimico__central { display: flex; flex-direction: column; align-items: center; gap: var(--rt-space-2); min-width: var(--rt-mimico-central); padding: 0 var(--rt-space-1); align-self: stretch; }
.rt-mimico__evaporador, .rt-mimico__pasillo { flex: 1 1 auto; width: 100%; min-height: var(--rt-mimico-central); border: 1px dashed var(--rt-border-strong); border-radius: var(--rt-radius-md); }
.rt-mimico__evaporador { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: var(--rt-text-muted); font-size: var(--rt-text-lg); }
.rt-mimico--compacto .rt-mimico__evaporador { font-size: var(--rt-text-sm); }
/* compacto: «Pasillo central» en dos líneas, para que el pasillo no le quite ancho a las sondas */
.rt-mimico--compacto .rt-mimico__central .rt-mimico__titulo { width: min-content; }
.rt-mimico__pasillo { background: var(--rt-bg-sunken); border-radius: var(--rt-radius-sm); }
/* El mímico de la tarjeta se mide a sí mismo (.rt-mimico-marco, container query): en una tarjeta angosta —dos por fila
   en tablet, una en celular— conserva la disposición de escritorio, lado | pasillo | lado (dueño, 2026-10-08), y se
   aprieta en dos escalones: bajo 300 px el bloque y el pasillo se angostan, el pasillo pierde el título y las celdas el
   relleno; bajo 260 px el valor baja a --rt-text-base y la columna de bloques pierde el rótulo. Un navegador sin container queries ve el compacto de siempre. */
.rt-mimico-marco { container-type: inline-size; }
@container (max-width: 300px) {
  .rt-mimico--compacto { gap: var(--rt-space-1); --rt-pallet-bloque-ancho: var(--rt-mimico-bloque-estrecho); --rt-mimico-central: var(--rt-mimico-central-estrecho); }
  .rt-mimico--compacto .rt-mimico__grid { gap: calc(var(--rt-space-1) / 2); }
  .rt-mimico--compacto .rt-mimico__central { padding: 0; }
  .rt-mimico--compacto .rt-mimico__central .rt-mimico__titulo { display: none; }
  .rt-mimico--compacto .rt-mimico__celda { padding-left: calc(var(--rt-space-1) / 2); padding-right: calc(var(--rt-space-1) / 2); }
  .rt-mimico--compacto .rt-mimico__sonda { left: calc(var(--rt-space-1) / 2); }
  .rt-mimico--compacto .rt-mimico__marca { right: calc(var(--rt-space-1) / 2); }
  .rt-mimico--compacto .rt-mimico__evaporador { font-size: var(--rt-text-xs); }
}
@container (max-width: 260px) {
  .rt-mimico--compacto .rt-mimico__valor { font-size: var(--rt-text-base); }
  .rt-mimico--compacto .rt-mimico__titulo { letter-spacing: 0; }
  .rt-mimico--compacto .rt-mimico__cab--pallets { visibility: hidden; }   /* «pallets» no cabe sobre el bloque: lo dice la leyenda */
}
/* el mímico grande (sin --compacto) sí se apila en el celular */
@media (max-width: 560px) { .rt-mimico:not(.rt-mimico--compacto) { grid-template-columns: 1fr; } .rt-mimico:not(.rt-mimico--compacto) .rt-mimico__central { display: none; } }

/* El conmutador de la forma del resumen, «Modo vista: Simple | Clásico»: la etiqueta y un formulario
   por forma dentro de .rt-tabs--inline. */
.rt-conmutador { align-items: center; }
.rt-conmutador__etiqueta { font-size: var(--rt-text-sm); font-weight: var(--rt-weight-medium); color: var(--rt-text-secondary); }
.rt-conmutador__forma { display: inline-flex; margin: 0; }

/* Formulario de terreno (ADR 0020 §3, Etapa 4d): la hoja nace en el dispositivo. Un campo por fila,
   inputs del tamano de toque (.rt-scan__input--sm), error bajo el campo, nunca solo en color. */
.rt-form {
  display: flex; flex-direction: column; gap: var(--rt-space-3); padding: var(--rt-space-3);
  border: 2px solid var(--rt-brand-300); border-radius: var(--rt-radius-lg); background: var(--rt-bg-surface);
}
.rt-form__cab { display: flex; flex-direction: column; gap: var(--rt-space-1); font-size: var(--rt-text-md); }
.rt-form__grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--rt-space-2); }
.rt-form__legend { padding: 0; font-size: var(--rt-text-xs); font-weight: var(--rt-weight-bold); color: var(--rt-text-secondary); text-transform: uppercase; }
.rt-form__campo { display: flex; flex-direction: column; gap: var(--rt-space-1); }
.rt-form__label { font-size: var(--rt-text-sm); color: var(--rt-text-secondary); }
.rt-form__req { color: var(--rt-state-alarm-fg); font-weight: var(--rt-weight-bold); }
.rt-form__check { display: flex; align-items: center; gap: var(--rt-space-2); min-height: var(--rt-tap-min); font-size: var(--rt-text-base); }
.rt-form__error { font-size: var(--rt-text-sm); color: var(--rt-state-alarm-fg); }
.rt-form__campo.is-error .rt-scan__input { border-color: var(--rt-state-alarm-solid); }
.rt-form__enviar { min-height: var(--rt-tap-min); font-size: var(--rt-text-md); }

/* Temperatura de pallet (Etapa 4e): la ronda abierta y la lectura del pallet escaneado, en la misma pantalla */
.rt-medir { display: flex; flex-direction: column; gap: var(--rt-space-2); padding: var(--rt-space-3); border: 2px solid var(--rt-brand-500); border-radius: var(--rt-radius-lg); background: var(--rt-brand-50); }
.rt-medir__ronda { display: flex; flex-direction: column; gap: var(--rt-space-2); }
.rt-medir__nueva { display: flex; gap: var(--rt-space-2); flex-wrap: wrap; }
.rt-medir__nueva .rt-scan__input { flex: 1; min-width: calc(var(--rt-tap-min) * 2); }
.rt-medir__lectura { display: flex; flex-direction: column; gap: var(--rt-space-1); }
.rt-medir__folio { font-family: var(--rt-font-mono); font-size: var(--rt-text-md); }
.rt-medir__acciones { display: flex; gap: var(--rt-space-2); margin-top: var(--rt-space-2); }
.rt-medir__acciones .rt-btn { flex: 1; min-height: var(--rt-tap-min); }
.rt-pallet--medido { border-color: var(--rt-state-ok-solid); background: var(--rt-state-ok-bg); }
.rt-pallet__temp { color: var(--rt-state-ok-fg); font-weight: var(--rt-weight-semibold); }
.rt-btn[aria-pressed="true"] { background: var(--rt-brand-600); border-color: var(--rt-brand-600); color: var(--rt-text-inverse); }

.rt-conflictos {
  padding: var(--rt-space-3); border: 1px solid var(--rt-state-warn-solid); border-radius: var(--rt-radius-md);
  background: var(--rt-state-warn-bg); color: var(--rt-state-warn-fg); font-size: var(--rt-text-sm);
}
.rt-conflictos__lista { display: flex; flex-direction: column; gap: var(--rt-space-1); margin-top: var(--rt-space-2); }

.rt-sheet { position: fixed; inset: 0; background: var(--rt-overlay); z-index: var(--rt-z-modal); }
.rt-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow: auto;
  display: flex; flex-direction: column; gap: var(--rt-space-3); padding: var(--rt-space-4);
  background: var(--rt-bg-surface); border-radius: var(--rt-radius-lg) var(--rt-radius-lg) 0 0; box-shadow: var(--rt-shadow-lg);
}
.rt-sheet__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--rt-space-2); font-size: var(--rt-text-md); font-family: var(--rt-font-mono); }
.rt-sheet__acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--rt-tap-min) * 3), 1fr)); gap: var(--rt-space-2); }
.rt-sheet__btn {
  min-height: var(--rt-tap-min); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rt-space-1);
  border: 1px solid var(--rt-border-strong); border-radius: var(--rt-radius-md); background: var(--rt-bg-surface); color: var(--rt-text-primary);
  font-family: var(--rt-font-sans); font-size: var(--rt-text-sm);
}
.rt-sheet__btn.is-activo { background: var(--rt-brand-600); border-color: var(--rt-brand-600); color: var(--rt-text-inverse); }
/* marcado por estar donde esta (pucho / saldo de una posicion compartida): se ve activo y no se desmarca */
.rt-sheet__btn:disabled { cursor: default; }
.rt-sheet__btn--danger { color: var(--rt-state-alarm-fg); border-color: var(--rt-state-alarm-solid); }
.rt-sheet__mover { display: flex; gap: var(--rt-space-2); }
.rt-sheet__historia { display: flex; flex-direction: column; gap: var(--rt-space-1); font-size: var(--rt-text-sm); color: var(--rt-text-secondary); }

/* E2 del plan de captura (ADR 0039, 0040): la PDA completa el pallet.
   El resumen bajo el folio (lo que el pallet trae y lo que le falta, en palabras, nunca solo color);
   la barra de datos de carga que cada pallet hereda; la ficha con el origen de cada dato; el contador
   de pendientes; la temperatura que se pide al escanear; las lecturas que esperan a que se cierre un panel. */
.rt-pallet__res   { flex-basis: 100%; font-family: var(--rt-font-sans); font-size: var(--rt-text-xs); line-height: var(--rt-leading-tight); color: var(--rt-text-secondary); }
.rt-pallet__falta { flex-basis: 100%; font-family: var(--rt-font-sans); font-size: var(--rt-text-xs); line-height: var(--rt-leading-tight); font-weight: var(--rt-weight-semibold); color: var(--rt-state-warn-fg); }
.rt-pallet--falta { border-color: var(--rt-state-warn-solid); }

.rt-barra { display: flex; flex-direction: column; gap: var(--rt-space-2); padding: var(--rt-space-2); border: 1px dashed var(--rt-brand-300); border-radius: var(--rt-radius-md); background: var(--rt-brand-50); }
.rt-barra__tit { font-size: var(--rt-text-xs); font-weight: var(--rt-weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--rt-brand-700); }
.rt-barra__datos { display: flex; flex-wrap: wrap; gap: var(--rt-space-2); }
.rt-dato {
  display: inline-flex; align-items: center; gap: var(--rt-space-2); min-height: var(--rt-tap-min); padding: 0 var(--rt-space-3);
  border: 1px solid var(--rt-brand-300); border-radius: var(--rt-radius-full); background: var(--rt-bg-surface); color: var(--rt-text-primary);
  font-family: var(--rt-font-sans); font-size: var(--rt-text-base);
}
.rt-dato__label { font-size: var(--rt-text-sm); color: var(--rt-text-secondary); }
.rt-dato--vacio { border-style: dashed; color: var(--rt-text-muted); }

.rt-pend {
  min-height: calc(var(--rt-tap-min) - var(--rt-space-2)); padding: 0 var(--rt-space-3);
  border: 1px solid var(--rt-state-warn-solid); border-radius: var(--rt-radius-full); background: var(--rt-state-warn-bg); color: var(--rt-state-warn-fg);
  font-family: var(--rt-font-sans); font-size: var(--rt-text-sm); font-weight: var(--rt-weight-semibold);
}
.rt-pend--cero { border-color: var(--rt-state-ok-solid); background: var(--rt-state-ok-bg); color: var(--rt-state-ok-fg); }

.rt-ficha { display: flex; flex-direction: column; gap: var(--rt-space-2); }
.rt-ficha__campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rt-space-1) var(--rt-space-2); align-items: center; }
.rt-ficha__campo .rt-scan__input, .rt-ficha__valor, .rt-ficha__campo .rt-form__error { grid-column: 1 / -1; }
.rt-ficha__valor {
  display: flex; justify-content: space-between; align-items: center; gap: var(--rt-space-2); min-height: var(--rt-tap-min);
  padding: 0 var(--rt-space-3); border-radius: var(--rt-radius-md); background: var(--rt-bg-sunken); overflow-wrap: anywhere;
}
.rt-ficha__campo.is-falta .rt-scan__input { border-color: var(--rt-state-warn-solid); background: var(--rt-state-warn-bg); }
.rt-ficha__nota  { font-size: var(--rt-text-sm); color: var(--rt-text-secondary); }
.rt-ficha__crudo { font-size: var(--rt-text-sm); color: var(--rt-text-secondary); overflow-wrap: anywhere; }
.rt-origen {
  justify-self: end; padding: 0 var(--rt-space-2); border: 1px solid var(--rt-border-strong); border-radius: var(--rt-radius-sm);
  font-family: var(--rt-font-sans); font-size: var(--rt-text-xs); font-weight: var(--rt-weight-bold); letter-spacing: .03em; text-transform: uppercase; color: var(--rt-text-secondary);
}
.rt-origen--sistema { border-color: var(--rt-brand-300); color: var(--rt-brand-700); }
.rt-origen--barra   { border-color: var(--rt-state-info-solid); color: var(--rt-state-info-fg); }
.rt-origen--tipeado { border-color: var(--rt-state-ok-solid); color: var(--rt-state-ok-fg); }
.rt-origen--falta   { border-color: var(--rt-state-warn-solid); color: var(--rt-state-warn-fg); }
.rt-sheet__guardar { display: flex; gap: var(--rt-space-2); }
.rt-sheet__guardar .rt-btn { flex: 1; min-height: var(--rt-tap-min); }

.rt-temp-pedir {
  width: 100%; box-sizing: border-box; min-height: calc(var(--rt-tap-min) * 1.4); text-align: center;
  font-family: var(--rt-font-sans); font-size: var(--rt-text-2xl); font-weight: var(--rt-weight-bold); font-variant-numeric: var(--rt-numeric);
  border: 2px solid var(--rt-brand-500); border-radius: var(--rt-radius-md); background: var(--rt-bg-surface); color: var(--rt-text-primary);
}
.rt-temp-pedir:focus { outline: 3px solid var(--rt-focus-ring); outline-offset: 1px; }
.rt-espera { padding: var(--rt-space-2) var(--rt-space-3); border: 1px solid var(--rt-brand-300); border-radius: var(--rt-radius-md); background: var(--rt-brand-50); color: var(--rt-brand-700); font-size: var(--rt-text-sm); }

.rt-toast {
  position: fixed; left: 50%; bottom: var(--rt-space-6); transform: translateX(-50%); z-index: var(--rt-z-toast);
  padding: var(--rt-space-2) var(--rt-space-4); border-radius: var(--rt-radius-full);
  background: var(--rt-neutral-900); color: var(--rt-text-inverse); box-shadow: var(--rt-shadow-md); font-size: var(--rt-text-sm);
}
@media (prefers-reduced-motion: reduce) { .rt-scan { transition: none; } }

/* ------------------------------------------------------------ disposición de un túnel
   Vista lateral de la estiba (Plantas\Disposicion): un bloque por lado; dentro, una fila
   por nivel —el de arriba, arriba— y una celda por posición: la 1 es la más cercana al
   evaporador y la última, la más cercana a la puerta.
   `--mini` es el plano chico de la lista, sin números. */
.rt-estiba { display: flex; flex-direction: column; gap: var(--rt-space-3); }
.rt-estiba__lado { border: 1px solid var(--rt-border); border-radius: var(--rt-radius-md); background: var(--rt-bg-surface); padding: var(--rt-space-2) var(--rt-space-3); min-width: 0; }
.rt-estiba__nombre { font-weight: var(--rt-weight-semibold); font-size: var(--rt-text-sm); color: var(--rt-text-primary); margin-bottom: var(--rt-space-1); }
.rt-estiba__niveles { display: flex; flex-direction: column; gap: var(--rt-space-1); overflow-x: auto; padding-bottom: var(--rt-space-1); }
.rt-estiba__nivel { display: flex; align-items: center; gap: var(--rt-space-1); }
.rt-estiba__etq { flex: 0 0 var(--rt-estiba-etq); font-size: var(--rt-text-xs); color: var(--rt-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-estiba__pos {
  flex: 0 0 var(--rt-estiba-celda); height: var(--rt-estiba-celda); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rt-border-strong); border-radius: var(--rt-radius-sm); background: var(--rt-bg-sunken);
  font-size: var(--rt-text-xs); font-variant-numeric: tabular-nums; color: var(--rt-text-secondary);
}
.rt-estiba--mini { gap: var(--rt-space-1); }
.rt-estiba--mini .rt-estiba__lado { padding: var(--rt-space-1); border: 0; background: transparent; }
.rt-estiba--mini .rt-estiba__nombre { font-size: var(--rt-text-xs); font-weight: var(--rt-weight-normal); color: var(--rt-text-muted); margin: 0; }
.rt-estiba--mini .rt-estiba__niveles { gap: var(--rt-estiba-sep-mini); padding: 0; }
.rt-estiba--mini .rt-estiba__nivel { gap: var(--rt-estiba-sep-mini); }
.rt-estiba--mini .rt-estiba__pos { flex-basis: var(--rt-estiba-celda-mini); height: var(--rt-estiba-celda-mini); border-radius: var(--rt-radius-sm); }

/* ------------------------------------------------------------------------ stepper
   Un número con − y + grandes, y el valor editable en medio: nada de adivinar el
   valor ni atinarle a un campo chico. */
.rt-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--rt-border-strong); border-radius: var(--rt-radius-md); overflow: hidden; background: var(--rt-bg-surface); }
.rt-stepper__btn {
  min-width: var(--rt-tap-min); min-height: var(--rt-tap-min); border: 0; background: var(--rt-bg-sunken);
  color: var(--rt-text-primary); font-size: var(--rt-text-lg); line-height: 1; cursor: pointer;
}
.rt-stepper__btn:hover { background: var(--rt-brand-50); }
.rt-stepper__btn:disabled { color: var(--rt-text-muted); background: var(--rt-bg-sunken); cursor: not-allowed; }
.rt-stepper__valor {
  width: calc(var(--rt-tap-min) * 1.5); border: 0; border-left: 1px solid var(--rt-border); border-right: 1px solid var(--rt-border);
  text-align: center; font-size: var(--rt-text-md); font-variant-numeric: tabular-nums; background: var(--rt-bg-surface); color: var(--rt-text-primary);
  -moz-appearance: textfield;
}
.rt-stepper__valor::-webkit-inner-spin-button, .rt-stepper__valor::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------------ rango de una receta
   Una banda (desde / hasta) sobre un eje, ADR 0037: la de finalización y la de pre-inversión de
   pulpa (enmienda (c): las dos son bandas) y la del aire con su límite crítico. En edición, dos
   campos de texto (lo que se guarda: el formulario funciona sin script) y html/js/rtiap-receta.js
   agrega en la pista dos input range nativos superpuestos (teclado y lector de pantalla incluidos).
   Las barras de un mismo eje comparten escala: se ve cómo queda una banda respecto de otra.
   La escala va metida medio tirador por lado, para que la banda calce con el centro del tirador.
   El color nunca va solo: cada barra lleva su nombre y sus valores en texto. */
.rt-rango { display: flex; flex-direction: column; gap: var(--rt-space-1); min-width: 0; }
.rt-rango__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--rt-space-2) var(--rt-space-3); flex-wrap: wrap; }
.rt-rango__nombre { font-size: var(--rt-text-sm); font-weight: var(--rt-weight-semibold); color: var(--rt-text-primary); }
.rt-rango__valor { font-size: var(--rt-text-md); font-variant-numeric: tabular-nums; color: var(--rt-text-primary); white-space: nowrap; }
.rt-rango__campos { display: flex; align-items: center; gap: var(--rt-space-2); flex-wrap: wrap; }
.rt-rango__campo { display: inline-flex; align-items: center; gap: var(--rt-space-1); margin: 0; font-size: var(--rt-text-xs); font-weight: var(--rt-weight-normal); color: var(--rt-text-secondary); }
.rt-rango__campo input { width: calc(var(--rt-campo-numero) * 0.8); min-height: var(--rt-tap-min); text-align: right; font-variant-numeric: tabular-nums; }
.rt-rango__unidad { font-size: var(--rt-text-sm); color: var(--rt-text-secondary); }
.rt-rango__pista { position: relative; height: var(--rt-rango-pista); }
.rt-rango__escala { position: absolute; top: 0; bottom: 0; left: calc(var(--rt-rango-tirador) / 2); right: calc(var(--rt-rango-tirador) / 2); }
.rt-rango__riel {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--rt-rango-riel); transform: translateY(-50%);
  background: var(--rt-bg-sunken); border: 1px solid var(--rt-border); border-radius: var(--rt-radius-full);
}
.rt-rango__linea { position: absolute; top: 25%; bottom: 25%; border-left: 1px solid var(--rt-border-strong); }
.rt-rango__banda {
  position: absolute; top: 50%; height: var(--rt-rango-banda); transform: translateY(-50%);
  border-radius: var(--rt-radius-sm); background: var(--rt-state-ok-solid);
}
.rt-rango--pre  .rt-rango__banda { background: var(--rt-state-info-solid); }
.rt-rango--aire .rt-rango__banda { background: var(--rt-chart-aire); }
.rt-rango__punto { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--rt-state-alarm-solid); }
/* la marca del límite crítico lleva su texto encima de la pista, en un espacio reservado: no choca con el tirador */
.rt-rango--con-punto .rt-rango__pista { margin-top: var(--rt-space-4); }
.rt-rango__punto-texto {
  position: absolute; bottom: 100%; left: calc(-1 * var(--rt-space-1)); padding-bottom: var(--rt-space-1);
  font-size: var(--rt-text-xs); line-height: 1; color: var(--rt-state-alarm-fg); white-space: nowrap;
}
.rt-rango__eje { position: relative; height: var(--rt-space-4); margin: 0 calc(var(--rt-rango-tirador) / 2); }
.rt-rango__marca { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--rt-text-xs); color: var(--rt-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-rango__vacio { font-size: var(--rt-text-sm); color: var(--rt-text-muted); }
/* los tiradores: dos input range transparentes, uno sobre otro; solo el tirador recibe el puntero */
.rt-rango__tirador {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.rt-rango__tirador:focus { outline: none; }
.rt-rango__tirador::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.rt-rango__tirador::-moz-range-track { height: 100%; background: transparent; border: 0; }
.rt-rango__tirador::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: var(--rt-rango-tirador); height: var(--rt-rango-tirador); margin-top: calc((var(--rt-rango-pista) - var(--rt-rango-tirador)) / 2);
  border-radius: var(--rt-radius-full); background: var(--rt-bg-surface); border: 2px solid var(--rt-brand-500); box-shadow: var(--rt-shadow-sm);
}
.rt-rango__tirador::-moz-range-thumb {
  pointer-events: auto; cursor: grab; box-sizing: border-box;
  width: var(--rt-rango-tirador); height: var(--rt-rango-tirador);
  border-radius: var(--rt-radius-full); background: var(--rt-bg-surface); border: 2px solid var(--rt-brand-500); box-shadow: var(--rt-shadow-sm);
}
.rt-rango__tirador:active::-webkit-slider-thumb { cursor: grabbing; }
.rt-rango__tirador:focus-visible::-webkit-slider-thumb { box-shadow: var(--rt-focus-ring); }
.rt-rango__tirador:focus-visible::-moz-range-thumb { box-shadow: var(--rt-focus-ring); }
.rt-rango__tirador--arriba { z-index: 1; }


/* --- Barras de un periodo (.rt-barras) ------------------------------------------
   SVG generado en el servidor (sin JavaScript): una barra por dia o por mes con la
   ocupacion en % y, encima, los ciclos. La geometria va en el viewBox; aqui solo
   color y letra, desde los tokens. Indicadores (ADR 0031). */
.rt-barras { display: block; width: 100%; height: auto; font-family: var(--rt-font-sans); }
.rt-barras__barra { fill: var(--rt-chart-1); }
.rt-barras__barra--vacia { fill: var(--rt-neutral-300); }
.rt-barras__eje { stroke: var(--rt-chart-eje); stroke-width: 1; }
.rt-barras__grid { stroke: var(--rt-chart-grid); stroke-width: 1; stroke-dasharray: 2 3; }
.rt-barras__etiqueta { fill: var(--rt-text-muted); font-size: var(--rt-text-xs); }
.rt-barras__valor { fill: var(--rt-text-secondary); font-size: var(--rt-text-xs); text-anchor: middle; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ avisos de la receta en la barra superior (R7)
   Un icono propio, distinto de la campana de alarmas (ADR 0026, decision 9). Lo llena
   html/js/rtiap-avisos.js. Con avisos encendidos, el icono y el conteo van en el verde de un aviso
   (ADR 0038); la lista dice el tunel, el aviso, su detalle y la hora: el color nunca va solo.
   `.nav > li` de Bootstrap le gana al atributo hidden: se fuerza aqui. */
.rt-avisos-barra[hidden], .rt-avisos-barra__n[hidden] { display: none; }
.rt-avisos-barra__n { background: var(--rt-state-ok-solid); color: var(--rt-text-inverse); }
.rt-avisos-barra--activo > a, .rt-avisos-barra--activo > a:hover { color: var(--rt-state-ok-solid); }
.rt-avisos-barra__lista { width: var(--rt-avisos-lista-ancho); max-width: var(--rt-avisos-lista-max); padding: var(--rt-space-2) 0; }
.rt-avisos-barra__item > a { display: flex; flex-direction: column; gap: var(--rt-space-1); padding: var(--rt-space-2) var(--rt-space-3);
  white-space: normal; border-left: 4px solid transparent; font-size: var(--rt-text-sm); line-height: var(--rt-leading-normal); }
.rt-avisos-barra__item--verde > a { border-left-color: var(--rt-state-ok-solid); }
.rt-avisos-barra__item--atencion > a { border-left-color: var(--rt-state-warn-solid); }
.rt-avisos-barra__hora, .rt-avisos-barra__vacio { color: var(--rt-text-muted); font-size: var(--rt-text-xs); }
.rt-avisos-barra__vacio { padding: var(--rt-space-2) var(--rt-space-3); }

/* ============ Plegable (.rt-plegable, ADR 0054) ============
   Un bloque que muestra un resumen y se abre entero con un botón: en la tarjeta de cámara, con más de dos sondas de
   un tipo, cerrado se ven la menor y la mayor y «Ver las N» abre todas. Cerrado se ve .rt-plegable__corta; abierto
   (.is-abierto), .rt-plegable__toda. El botón (.rt-btn--ghost .rt-btn--sm) lleva aria-expanded y aria-controls. Sin
   animación: en esta plataforma el movimiento es solo el parpadeo de la alarma. */
.rt-plegable:not(.is-abierto) .rt-plegable__toda { display: none; }
.rt-plegable.is-abierto .rt-plegable__corta { display: none; }
.rt-plegable__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rt-space-1) var(--rt-space-2); }
.rt-plegable__boton { margin-left: auto; padding-left: var(--rt-space-1); padding-right: var(--rt-space-1); gap: var(--rt-space-1); }
.rt-plegable__boton .fa { font-size: var(--rt-text-xs); }
.rt-plegable.is-abierto .rt-plegable__boton .fa { transform: rotate(180deg); }
/* «mín» / «máx» delante del nombre de la sonda: en texto, nunca ▲ ▼ (son las marcas de la receta). Vacía, guarda el
   lugar para que los nombres queden alineados */
.rt-plegable__marca { display: inline-block; flex: none; min-width: var(--rt-space-6); margin-right: var(--rt-space-1);
                      font-size: var(--rt-text-xs); font-weight: var(--rt-weight-semibold); text-transform: uppercase; color: var(--rt-text-muted); }

/* ============ Estado del PLC con ícono (.rt-ic-estado, ADR 0054) ============
   Frío, ventilador, control y deshielo como íconos SVG (el sprite va en plantas.partials.iconos_plc). La FORMA dice el
   estado, no solo el color (operadores daltónicos, pantallas mal calibradas): relleno es encendido, tachado es apagado,
   borde punteado es sin dato; el deshielo encendido va en turquesa (info), como antes. El texto va en title y
   aria-label, y la pantalla que los muestra lleva su leyenda: en una pantalla táctil no hay tooltip. */
.rt-ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rt-ic-estados { display: inline-flex; align-items: center; gap: calc(var(--rt-space-1) * 0.75); }
.rt-ic-estado { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--rt-space-6); height: var(--rt-space-6);
                border: 1px solid transparent; border-radius: var(--rt-radius-md); }
.rt-ic-estado svg { width: var(--rt-space-4); height: var(--rt-space-4); }
.rt-ic-estado--on { background: var(--rt-brand-50); color: var(--rt-brand-500); }
.rt-ic-estado--deshielo { background: var(--rt-state-info-bg); color: var(--rt-state-info-fg); }
.rt-ic-estado--off { background: var(--rt-bg-surface); border-color: var(--rt-border-strong); color: var(--rt-text-muted); }
.rt-ic-estado--off::after { content: ""; position: absolute; left: 50%; top: calc(var(--rt-space-1) * 0.75); bottom: calc(var(--rt-space-1) * 0.75);
                            width: 2px; border-radius: var(--rt-radius-sm); background: var(--rt-text-muted);
                            transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 1.5px var(--rt-bg-surface); }
.rt-ic-estado--sin-dato { border-style: dashed; border-color: var(--rt-border-strong); color: var(--rt-text-muted); }
.rt-ic-estado--sin-dato svg { opacity: 0.4; }