/*
 * Rumbo · utilidades y componentes base v1.1 (6 oct 2026). Solo usa tokens de tokens.css.
 * Incluye: datos tabulares, fondo de cuadrícula, notch de estado, campos con foco de una línea,
 * totales de la OPD y selector claro/oscuro. Los prototipos y el brand-board lo incrustan con design/marca/build.py.
 */

/* ---- IDs, folios, guías, placas, OTP: Inter con cero con barra, l/I/1 distintos y dígitos abiertos (reemplaza a JetBrains Mono) ---- */
.rb-data, .rb-data * {
  font-family: var(--font-data);
  font-feature-settings: var(--font-data-features);
  letter-spacing: .02em;
}
/* ---- Cifras en columnas (totales, tablas, pesos, volúmenes): números tabulares. No uses tnum en IDs: ensancha los guiones ---- */
.rb-num, .rb-num * { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: var(--font-num-features); }

/* ---- Fondo de cuadrícula del hero (pensado para el modo oscuro; en claro --grid-opacity = 0) ---- */
.rb-grid-bg { position: relative; isolation: isolate; background-image: var(--bg-glow); }
.rb-grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grid-opacity);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}

/* ---- Notch de estado: fondo neutro único; SOLO el icono cambia de color ----
   <span class="rb-notch" data-estado="EN_TRANSITO"><svg><use href="#ic-en-transito"/></svg><span>En tránsito</span></span> */
.rb-notch {
  --ic: var(--status-icon-nueva);
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 8px; border-radius: var(--radius-pill);
  background: var(--status-notch-bg); border: 1px solid var(--status-notch-border); color: var(--status-notch-text);
  font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap;
}
.rb-notch > svg { width: 20px; height: 20px; flex: none; color: var(--ic); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-notch[data-estado="NUEVA"] { --ic: var(--status-icon-nueva); }
.rb-notch[data-estado="CREADA"] { --ic: var(--status-icon-creada); }
.rb-notch[data-estado="EN_EMBARQUE"] { --ic: var(--status-icon-en-embarque); }
.rb-notch[data-estado="EN_TRANSITO"] { --ic: var(--status-icon-en-transito); }
.rb-notch[data-estado="ENTURNADA"] { --ic: var(--status-icon-enturnada); }
.rb-notch[data-estado="EN_DESCARGUE"] { --ic: var(--status-icon-en-descargue); }
.rb-notch[data-estado="DESCARGADA"] { --ic: var(--status-icon-descargada); }
.rb-notch[data-estado="CERRADA"] { --ic: var(--status-icon-cerrada); }
.rb-notch[data-estado="CANCELADA"] { --ic: var(--status-icon-cancelada); }
.rb-notch[data-estado="ANULADA"] { --ic: var(--status-icon-anulada); }

/* ---- Campos: una sola línea de foco + sombreado suave, igual en TODOS los inputs (placa incluida) ---- */
.rb-input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-field-bg); color: var(--color-text);
  font: 500 var(--text-base) var(--font-body); outline: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.rb-input.rb-data { font-weight: 500; letter-spacing: .04em; }
.rb-input:focus, .rb-input:focus-visible, .rb-input.is-focus { border-color: var(--field-focus-border); box-shadow: var(--field-focus-shadow); outline: none; }
.rb-input[aria-invalid="true"] { border-color: var(--color-danger); }
.rb-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 var(--field-focus-ring) color-mix(in srgb, var(--color-danger) 22%, transparent); }

/* ---- Totales de la OPD y de la tarjeta de embarque: PCS, Peso, Vol, FBE, # hijas, # máster, # directas, destinos ---- */
.rb-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.rb-totals > div { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: grid; gap: 2px; min-width: 0; }
.rb-totals > div:nth-child(4n) { border-right: 0; }
.rb-totals > div:nth-last-child(-n+4) { border-bottom: 0; }
.rb-totals small { font-size: 11px; color: var(--color-text-subtle); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.rb-totals strong { font: 650 clamp(1rem, 1.5vw, var(--text-xl)) var(--font-display); font-stretch: 108%; font-feature-settings: var(--font-num-features); white-space: nowrap; color: var(--color-text); }
.rb-totals strong em { font: 500 var(--text-xs) var(--font-body); font-style: normal; color: var(--color-text-muted); margin-left: 3px; }
@media (max-width: 520px) { .rb-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rb-totals > div:nth-child(4n) { border-right: 1px solid var(--color-border); } .rb-totals > div:nth-child(2n) { border-right: 0; } .rb-totals > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--color-border); } .rb-totals > div:nth-last-child(-n+2) { border-bottom: 0; } }

/* ---- Selector claro / oscuro (la preferencia se guarda en localStorage 'rumbo-theme') ---- */
.rb-theme { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--color-surface-3); border: 1px solid var(--color-border); }
.rb-theme button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; color: var(--color-text-muted); font: 600 var(--text-sm)/1 var(--font-body);
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.rb-theme button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-theme button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-contrast); }
.rb-theme button:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 520px) { .rb-theme button span { display: none; } .rb-theme button { padding: 0 10px; } }