/* Componentes comunes. Tokens generados desde DESIGN.md. */
@import url("./tokens.css");
:root {
  --page: var(--tq-page);
  --panel: var(--tq-panel);
  --alt: var(--tq-alt);
  --ink: var(--tq-ink);
  --muted: var(--tq-muted);
  --line: var(--tq-line);
  --deep: var(--tq-primaryHover);
  --deep-soft: var(--tq-brandInk);
  --accent: var(--tq-primary);
  --accent-dark: var(--tq-primaryHover);
  --accent-soft: var(--tq-alt);
  --lime: var(--tq-alt);
  --warn: var(--tq-warning);
  --warn-bg: var(--tq-warningBg);
  --alert: var(--tq-danger);
  --alert-bg: var(--tq-dangerBg);
  --radius-s: var(--tq-rounded-small);
  --radius-m: var(--tq-rounded-medium);
  --radius-l: var(--tq-rounded-large);
  --font: var(--tq-font-body);
  --display: var(--tq-font-display);
  --max: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--ink);
  line-height: 1.5;
}

a { color: var(--accent); }

button:focus-visible, a:focus-visible, summary:focus-visible,
select:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Botones */
.btn, .boton {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius-s);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

.btn-primary, .boton.primario {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--tq-white);
}

.btn-primary:hover, .boton.primario:hover { background: var(--accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover { border-color: var(--ink); }

.btn-sm, .boton.chico { padding: 9px 16px; font-size: 0.9rem; }

.btn:disabled, .boton:disabled { opacity: 0.55; cursor: wait; }

.btn, .boton, button, select, input { min-height: 44px; }

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-s);
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

button:disabled { opacity: 0.55; cursor: wait; }

/* Tarjetas */
.card, .tarjeta {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.1rem 1.25rem;
}

.card h3, .tarjeta h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.card p, .tarjeta p { margin: 0.25rem 0; }
.card p:last-child, .tarjeta p:last-child { margin-bottom: 0; }

/* Etiquetas */
.badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* Texto secundario y datos */
.meta { color: var(--muted); font-size: 0.9rem; }
.dato { font-variant-numeric: tabular-nums; }

/* Estados (cargando / vacío / error) */
.estado {
  border: 1px dashed var(--line);
  border-radius: var(--radius-m);
  padding: 1rem 1.1rem;
  color: var(--muted);
  background: var(--panel);
}

.estado-error {
  border-style: solid;
  border-color: var(--alert);
  background: var(--alert-bg);
  color: var(--alert);
}

.aviso-ok {
  border: 1px solid var(--tq-success);
  background: var(--tq-successBg);
  color: var(--tq-success);
  border-radius: var(--radius-m);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.badge-success { color: var(--tq-success); background: var(--tq-successBg); }
.badge-warning { color: var(--tq-warning); background: var(--tq-warningBg); }
.badge-danger { color: var(--tq-danger); background: var(--tq-dangerBg); }
.estado-warning { color: var(--tq-warning); background: var(--tq-warningBg); border-color: var(--tq-warning); }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Tablas */
table.lista { width: 100%; border-collapse: collapse; }
table.lista th, table.lista td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
table.lista th { color: var(--muted); font-weight: 600; }

/* Formularios */
select, input {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none; animation: none; }
}