/* Componentes base (CSS plano: funciona aunque Tailwind CDN tarde o falle). */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; background: #f1f5f9; }
[hidden] { display: none !important; }

.card { min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.field { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 500; color: #475569; }
.ctl { border: 1px solid #cbd5e1; border-radius: .5rem; padding: .4rem .6rem; font-size: .875rem; background: #fff; color: #1e293b; }
.ctl:focus { outline: 2px solid #14b8a6; outline-offset: 1px; }
.btn { border: 1px solid #cbd5e1; border-radius: .5rem; padding: .4rem .75rem; font-size: .875rem; background: #fff; cursor: pointer; }
.btn:hover:not(:disabled) { background: #f8fafc; }
.btn:disabled { opacity: .45; cursor: default; }

.kpi-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 0; }
.kpi-value { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin: .25rem 0; font-variant-numeric: tabular-nums; }
.section-title { font-size: .875rem; font-weight: 600; color: #334155; margin: 0 0 .5rem; }
.chart-box { position: relative; height: 280px; }

code { font-size: .8em; background: rgb(0 0 0 / .06); padding: 0 .25em; border-radius: .25em; }
.chip { border: 1px solid #fcd34d; background: #fff; color: #78350f; border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; cursor: pointer; }
.chip:hover { background: #fef3c7; }
.chip-strong { background: #92400e; border-color: #92400e; color: #fff; }
.chip-strong:hover { background: #78350f; }