/* Componentes base — Araguaney Group. Solo variables de tokens.css. Se moverá a static/css/ en Django. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 500 var(--text-base)/var(--leading-base) var(--font-sans);
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
h2 { font-size: var(--text-xl); line-height: var(--leading-xl); }
h3 { font-size: var(--text-lg); line-height: var(--leading-lg); }
p { margin: 0; }
.muted { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }
.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(--focus); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--focus-on-dark); }

/* ---------- Botón */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid transparent; font: 700 var(--text-sm)/1 var(--font-sans);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.btn:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-input); }
.btn--secondary:hover { background: var(--surface-muted); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-muted); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-ink); }
.btn--navy { background: var(--navy); color: var(--on-navy); }
.btn--whatsapp { background: var(--whatsapp); color: var(--on-whatsapp); border-radius: var(--radius-pill); }
.btn--sm { height: 32px; padding: 0 var(--space-3); }
.btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ---------- Formularios */
.field { display: grid; gap: var(--space-1); max-width: 420px; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.input {
  height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); width: 100%;
}
.input:hover { border-color: var(--text-muted); }
.input:focus-visible { border-color: var(--navy); outline: 2px solid var(--focus); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .input[readonly] { background: var(--surface-muted); }
.input--money { text-align: right; font-variant-numeric: tabular-nums; }
.field .help { font-size: var(--text-xs); color: var(--text-muted); }
.field .error { font-size: var(--text-xs); color: var(--danger-ink); font-weight: 600; display: flex; gap: var(--space-1); align-items: center; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap-min); font-size: var(--text-sm); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); flex: none; }

.dropzone {
  border: 2px dashed var(--border-input); border-radius: var(--radius-lg); padding: var(--space-8);
  background: var(--surface); text-align: center; display: grid; gap: var(--space-3); justify-items: center;
}
.dropzone.is-over { border-color: var(--navy); background: var(--info-bg); }
.dropzone.is-error { border-color: var(--danger); background: var(--danger-bg); }
.dropzone.is-done { border-style: solid; border-color: var(--success); }
progress { width: 100%; max-width: 320px; height: 8px; accent-color: var(--navy); }

/* ---------- Insignias y estados */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip--high { background: var(--danger-bg); color: var(--danger-ink); }
.chip--medium { background: var(--warning-bg); color: var(--warning-ink); }
.chip--low { background: var(--info-bg); color: var(--info-ink); }
.chip--positive { background: var(--success-bg); color: var(--success-ink); }
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; background: var(--surface-muted); color: var(--text);
}
.tag--ok { background: var(--success-bg); color: var(--success-ink); }
.tag--warn { background: var(--warning-bg); color: var(--warning-ink); }
.tag--bad { background: var(--danger-bg); color: var(--danger-ink); }

/* ---------- Tarjetas */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-6);
}
.card--featured { border-top: 3px solid var(--gold-logo); }
@media (max-width: 640px) { .card { padding: var(--space-4); } }

.score { display: grid; gap: var(--space-1); }
.score__bureau { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--tu { background: var(--series-tu); } .dot--ex { background: var(--series-ex); } .dot--eq { background: var(--series-eq); }
.score__value { font: 800 var(--text-score)/var(--leading-score) var(--font-heading); }
.score__model { font-size: var(--text-xs); color: var(--text-muted); }

/* Aviso de afiliado: una línea discreta, debajo del enlace de SmartCredit y antes del clic */
.affiliate-note { margin: var(--space-1) 0 0; font-size: var(--text-xs); line-height: var(--leading-xs);
  font-weight: 500; color: var(--text-muted); }
.on-navy .affiliate-note { color: var(--on-navy-muted); }
.delta { font-size: var(--text-sm); font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.delta--up { color: var(--success); } .delta--down { color: var(--danger); } .delta--flat { color: var(--text-muted); }

/* ---------- Tablas */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
thead th { background: var(--surface-muted); font-weight: 700; position: sticky; top: 0; }
tbody th { font-weight: 600; color: var(--text-muted); width: 34%; }
td { font-variant-numeric: tabular-nums; }
tr.group th { background: var(--bg); color: var(--text); font-family: var(--font-heading); font-size: var(--text-base); }
tr.is-negative > *:first-child { box-shadow: inset 3px 0 0 var(--danger); }
td.is-diff { background: var(--warning-bg); color: var(--warning-ink); font-weight: 700; }
td.is-empty { color: var(--text-muted); }

.util { display: grid; gap: var(--space-1); }
.util__track { position: relative; height: 10px; background: var(--surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
.util__fill { height: 100%; border-radius: var(--radius-pill); }
.util__mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); }
.util__row { display: flex; justify-content: space-between; font-size: var(--text-sm); }

/* ---------- Navegación */
.sidebar { background: var(--navy-deep); color: var(--on-navy-muted); width: var(--sidebar-w); padding: var(--space-4); border-radius: var(--radius-lg); }
.sidebar a { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 var(--space-3);
  color: inherit; text-decoration: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; }
.sidebar a:hover { background: rgba(255,255,255,.06); color: var(--on-navy); }
.sidebar a[aria-current="page"] { color: var(--on-navy); box-shadow: inset 3px 0 0 var(--gold-logo); background: rgba(255,255,255,.06); }
.count { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-pill); padding: 0 8px; font-size: var(--text-xs); font-weight: 800; }

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a { padding: var(--space-3) var(--space-3); text-decoration: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.bottom-nav { display: flex; justify-content: space-around; height: var(--bottom-nav-h); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: var(--tap-min); text-decoration: none; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.bottom-nav a[aria-current="page"] { color: var(--text); }
.bottom-nav svg { width: 20px; height: 20px; }

.stepper { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.stepper li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); }
.stepper li::after { content: ""; width: 24px; height: 1px; background: var(--border-input); }
.stepper li:last-child::after { display: none; }
.stepper .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-input); font-size: var(--text-xs); }
.stepper .done .n { background: var(--success); border-color: var(--success); color: #fff; }
.stepper [aria-current="step"] { color: var(--text); }
.stepper [aria-current="step"] .n { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--border); display: grid; gap: var(--space-4); }
.timeline li { position: relative; font-size: var(--text-sm); }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 6px); top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--navy); }
.timeline time { display: block; color: var(--text-muted); font-size: var(--text-xs); }

/* ---------- Avisos */
.alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); }
.alert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.alert--block { background: var(--danger-bg); color: var(--danger-ink); }
.alert--warn { background: var(--warning-bg); color: var(--warning-ink); }
.alert--info { background: var(--info-bg); color: var(--info-ink); }
.alert strong { display: block; }

.toast { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--navy-deep); color: var(--on-navy); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: var(--text-sm); max-width: 380px; }
.toast button { margin-left: auto; background: none; border: 0; color: var(--on-navy-muted); cursor: pointer; font-size: 18px; }

.dialog { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-6); max-width: 440px; display: grid; gap: var(--space-4); background: var(--surface); color: var(--text); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

.empty { text-align: center; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-4); }
.empty svg { width: 40px; height: 40px; color: var(--gold-ink); }

.skeleton { background: var(--surface-muted); border-radius: var(--radius-sm); height: 14px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.locale { font-size: var(--text-sm); }
.locale a { color: var(--text-muted); text-decoration: none; padding: 4px; }
.locale a[aria-current="true"] { color: var(--text); font-weight: 800; }

/* ---------- Gráfico (SVG estático en la vista previa; Chart.js en la app) */
.chart { width: 100%; height: auto; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart .tick { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); }
.chart .lbl { fill: var(--text); font-size: 12px; font-weight: 700; font-family: var(--font-sans); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt { stroke: var(--surface); stroke-width: 2; }