:root {
  --ground: #f6f7f5; --surface: #ffffff; --ink: #22302f; --ink-soft: #5c6b69;
  --line: #dde3e0; --accent: #0c6e5a; --accent-soft: #e3f0ec;
  --ok: #0c6e5a; --warn: #8a5d09; --warn-soft: #f7efdc;
  --bad: #b3402e; --bad-soft: #f9e8e4; --rej: #7c4f43; --rej-soft: #f1e7e3;
  --muted-soft: #eceeec;
  --mono: "SF Mono", "Cascadia Code", "Consolas", monospace;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #131a19; --surface: #1b2423; --ink: #dee7e4; --ink-soft: #93a3a0;
    --line: #2d3a38; --accent: #45b598; --accent-soft: #1d322d;
    --ok: #45b598; --warn: #d9a94a; --warn-soft: #33290f;
    --bad: #e07a63; --bad-soft: #3a1f18; --rej: #c79a8b; --rej-soft: #322019;
    --muted-soft: #242e2c;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.55; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 0.75rem 0 0.5rem; }
a { color: var(--accent); }
.soft { color: var(--ink-soft); }

nav { background: var(--surface); border-bottom: 2px solid var(--accent); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0.6rem 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
.brand span { color: var(--accent); }
.links a { margin-left: 1rem; text-decoration: none; color: var(--ink-soft); }
.links a:hover { color: var(--accent); }

.flash { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 0.7rem 1rem; border-radius: 0 6px 6px 0; margin-bottom: 1rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; margin: 0.75rem 0; }

.counters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.counter { text-decoration: none; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.85rem; }
.counter strong { font-family: var(--mono); margin-right: 0.3rem; color: var(--ink); }
.counter.active, .counter:hover { border-color: var(--accent); color: var(--accent); }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.filters input, .filters select { min-width: 0; }

.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.center { text-align: center; }
td.empty { color: var(--ink-soft); text-align: center; padding: 2rem; }

.estado { display: inline-block; font-family: var(--mono); font-size: 0.72rem; padding: 0.12rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.estado.enviada { background: var(--accent-soft); color: var(--ok); }
.estado.rechazada { background: var(--rej-soft); color: var(--rej); }
.estado.revisar { background: var(--warn-soft); color: var(--warn); }
.estado.error { background: var(--bad-soft); color: var(--bad); }
.estado.duplicada, .estado.ignorado, .estado.pendiente { background: var(--muted-soft); color: var(--ink-soft); }
.estado.troceada { background: var(--accent-soft); color: var(--accent); outline: 1px dashed var(--accent); }

input, select, button { font: inherit; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.6rem; }
input.short { width: 6rem; }
button { background: var(--accent); color: #fff; border: none; cursor: pointer; }
button:hover { opacity: 0.9; }
button.danger { background: var(--bad); }
button:disabled { opacity: 0.6; cursor: wait; }
.btn-link { font-size: 0.85rem; }

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem 1.5rem; }
.grid-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; color: var(--ink-soft); }
.grid-form small { color: var(--ink-soft); font-size: 0.75rem; }
label { font-size: 0.9rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.5rem 0; }
.actions form { display: flex; gap: 0.4rem; align-items: center; margin: 0; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.kv th { width: 9rem; font-size: 0.75rem; }
.preview object { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 6px; }
.preview img { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; }

.login-card { max-width: 380px; margin: 12vh auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 1.75rem 1.75rem; }
.login-card h1 { margin-top: 0; }
.login-card form { display: flex; flex-direction: column; gap: 0.75rem; }
.login-card label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--ink-soft); }

details.raw { margin-top: 1.5rem; }
details.raw pre { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; overflow-x: auto; font-size: 0.8rem; }