:root {
  --paper: #eef1f4; --surface: #ffffff; --ink: #1c2430; --muted: #5b6573; --rule: #d5dbe2;
  --blue: #1f4e79; --blue-soft: #e3ecf5; --amber: #a15c07; --amber-soft: #fbf0df;
  --green: #2f6b3b; --green-soft: #e4f1e6; --red: #a23b2c; --red-soft: #f8e5e2;
  --radius-s: 4px; --radius-m: 10px;
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.45 var(--font); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--blue); }
.num { font-variant-numeric: tabular-nums; }
.btn { border: 1px solid var(--blue); background: var(--blue); color: #fff; border-radius: var(--radius-s); padding: .55rem .9rem; cursor: pointer; }
.btn.secondary { background: var(--surface); color: var(--blue); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #8fb3d9; outline-offset: 1px; }
input, textarea, select { border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--surface); padding: .5rem .6rem; width: 100%; }
label { display: block; font-size: .875rem; color: var(--muted); margin: .6rem 0 .2rem; }
.state { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }
.state::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.state.ok, .state.completado, .state.sincronizado, .state.aceptado, .state.enviado, .state.hecha, .state.generado, .state.conectada, .state.correcto { background: var(--green-soft); color: var(--green); }
.state.pendiente, .state.parcial, .state.resultado_por_confirmar, .state.borrador, .state.aclaracion, .state.no_verificada, .state.bloqueada, .state.pendiente_autorizacion { background: var(--amber-soft); color: var(--amber); }
.state.fallido, .state.error, .state.rechazado, .state.desconectada, .state.cancelado, .state.anulado { background: var(--red-soft); color: var(--red); }
.login { max-width: 360px; margin: 12vh auto; background: var(--surface); padding: 1.5rem; border-radius: var(--radius-m); border: 1px solid var(--rule); }
.login h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
.login p { color: var(--muted); margin: 0 0 1rem; font-size: .9rem; }
.err { color: var(--red); font-size: .9rem; margin-top: .6rem; min-height: 1.2em; }
.env { font-size: .75rem; color: var(--amber); }
[hidden] { display: none !important; }