/* BRM Control — tokens compartidos por el seguimiento y el panel. Misma tarjeta de ruta que la app. */
:root {
  --color-niebla: #EEF1F5;
  --color-papel: #FFFFFF;
  --color-tinta: #14202B;
  --color-tinta-suave: #4A5868;
  --color-borde: #D3DAE3;
  --color-timbre: #1F4FD1;
  --color-timbre-suave: #E3EAFB;
  --color-chaleco: #F5C400;
  --color-chaleco-texto: #3D3100;
  --color-ok: #1B7F4C;
  --color-sos: #C62828;
  --color-sos-suave: #FBE7E7;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-s: 6px; --radius-m: 10px; --radius-l: 16px;
  --toque: 44px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--color-niebla); color: var(--color-tinta); font: 15px/1.45 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
a { color: var(--color-timbre); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-timbre); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

.barra { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4);
  background: var(--color-papel); border-bottom: 2px solid var(--color-timbre); }
.marca { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--color-timbre); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.barra .espacio { flex: 1; }

.btn { min-height: var(--toque); padding: 0 var(--space-4); border-radius: var(--radius-m); border: 1.5px solid var(--color-borde);
  background: var(--color-papel); font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: .02em; cursor: pointer; }
.btn:hover { border-color: var(--color-tinta-suave); }
.btn.principal { background: var(--color-timbre); border-color: var(--color-timbre); color: var(--color-papel); }
.btn.peligro { background: var(--color-sos); border-color: var(--color-sos); color: var(--color-papel); }
.btn.chico { min-height: 36px; font-size: 15px; padding: 0 var(--space-3); }
.btn:disabled { opacity: .55; cursor: default; }
.campo { display: grid; gap: var(--space-1); font-size: 13px; color: var(--color-tinta-suave); }
.campo input, .campo select, .campo textarea, select.solo { min-height: var(--toque); border: 1.5px solid var(--color-borde); border-radius: var(--radius-m);
  background: var(--color-papel); padding: 0 var(--space-3); font-size: 16px; color: var(--color-tinta); }
.campo textarea { padding: var(--space-3); min-height: 110px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }

.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.chip.n0 { background: var(--color-timbre-suave); color: var(--color-timbre); }
.chip.n1 { background: var(--color-chaleco); color: var(--color-chaleco-texto); }
.chip.n2, .chip.n3 { background: var(--color-sos); color: var(--color-papel); }
.chip.ok { background: #DDF1E6; color: var(--color-ok); }
.chip.gris { background: var(--color-niebla); color: var(--color-tinta-suave); }

/* La fila de timbres: un círculo por control, lleno cuando está timbrado. */
.timbres { display: flex; gap: 3px; flex-wrap: wrap; }
.timbres i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--color-borde); display: block; }
.timbres i.si { border: 2px solid var(--color-timbre); background: radial-gradient(circle, var(--color-timbre) 0 35%, transparent 38%); }
.timbres i.rev { border: 2px solid var(--color-sos); background: radial-gradient(circle, var(--color-sos) 0 35%, transparent 38%); }

.vacio { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-tinta-suave); }
.vacio strong { display: block; font-family: var(--font-display); font-size: 22px; text-transform: uppercase; color: var(--color-tinta); margin-bottom: var(--space-1); }
.pie { font-size: 12px; color: var(--color-tinta-suave); text-align: center; padding: var(--space-4); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }