/* Base: reset, tipografía, botones, campos. Todo contra tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--canvas); color: var(--ink-1);
  font: 400 14px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-brand); color: var(--ink-1); margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.1rem; font-weight: 700; }
h3 { font-size: .95rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.tabular, td.num, .num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[v-cloak] { display: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 38px; padding: 0 .95rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink-1);
  font: 600 13.5px var(--font-ui); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:hover { border-color: var(--border-strong); background: var(--sunken); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primario:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-peligro { color: var(--danger); }
.btn-peligro:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-peligro-solido { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-fantasma:hover { background: var(--sunken); color: var(--ink-1); }
.btn-icono { width: 38px; padding: 0; }
.btn-sm { height: 32px; padding: 0 .7rem; font-size: 12.5px; border-radius: 8px; }
.btn-sm.btn-icono { width: 32px; }
.btn-bloque { width: 100%; height: 44px; font-size: 14.5px; }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.campo-label .req { color: var(--danger); margin-left: 2px; }
.campo-input {
  height: 40px; width: 100%; padding: 0 .8rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--sunken); color: var(--ink-1);
  font: 400 14px var(--font-ui); transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea.campo-input { height: auto; min-height: 80px; padding: .6rem .8rem; resize: vertical; }
select.campo-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.campo-input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.campo-input::placeholder { color: var(--ink-3); }
.campo.invalido .campo-input { border-color: var(--danger); }
.campo-error { font-size: 12px; color: var(--danger); display: flex; gap: .3rem; align-items: center; }
.campo-hint { font-size: 12px; color: var(--ink-3); }
.check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; color: var(--ink-1); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Selector segmentado ---------- */
.seg-toggle { display: inline-flex; padding: 3px; gap: 2px; background: var(--sunken); border: 1px solid var(--border); border-radius: 10px; }
.seg-toggle button { height: 30px; padding: 0 .7rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 12.5px var(--font-ui); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.seg-toggle button[aria-pressed="true"] { background: var(--card); color: var(--ink-1); box-shadow: var(--shadow); }
.seg-toggle .cuenta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Pills de estado (siempre con texto) ---------- */
.pill { display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .6rem; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--sunken); color: var(--ink-2); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.mal { background: var(--danger-soft); color: var(--danger); }
.pill.aviso { background: var(--warning-soft); color: var(--warning); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.marca { background: var(--accent-soft); color: var(--accent); }