/*
 * components.css — AUTHORED. Not generated. Edit this file directly.
 *
 * The ten components a data surface actually needs, in the minimal idiom.
 * Everything else in the shadcn/ui catalogue (guide/16-componentes.md) is a
 * lookup table for when a form is needed, not inventory to build up front.
 *
 * Every value here is a token. There is no hex, no radius above --u-radius-max,
 * no shadow and no gradient except the 45-degree hatch that UMB-COL-010 requires
 * for suppressed data. umbral-lint enforces all of that.
 *
 * Requires tokens.css (or the generated Observable Framework stylesheet) to be
 * loaded first, so var(--u-*) resolves. Both modes work without changes here:
 * tokens.css redefines the semantic tokens under [data-mode="instrumento"].
 *
 * umbralmx/umbral-style-guide · code MIT · content CC BY 4.0
 */

/* ── 0. a mode container paints itself ───────────────────────────────────
   tokens.css redefines the semantic tokens under [data-mode="instrumento"] and
   .u-dark, and custom properties do inherit. A computed `color` does not: a
   child inherits the resolved colour from the outer mode, not the var. So a
   nested mode switch keeps the outer ink and renders dark-on-dark unless the
   container re-asserts both. UMB-COL-007 already says a mode switch is a whole
   surface, which is why painting the background here is correct and not a
   side effect. */

[data-mode],
.u-dark {
  color: var(--u-ink);
  background: var(--u-base);
}

/* ── 1. separator — the 1px rule that does the structural work ──────────── */

.u-rule {
  border: 0;
  border-top: var(--u-rule) solid var(--u-border);
  margin: var(--u-space-3) 0;
}

/* ── 2. section label — mono, lowercase, naming structure (UMB-LAY-006) ─── */

.u-label {
  font-family: var(--u-font-mono);
  font-size: var(--u-size-label);
  font-weight: var(--u-weight-mono);
  text-transform: lowercase;
  color: var(--u-caption);
  margin: 0 0 var(--u-space-1);
}

/* ── 3. rows — a list is rows separated by 1px rules (UMB-LAY-007) ────────
   Not cards. The rule reaches the container edge, which is why the padding is
   on the row and not on a wrapper. */

.u-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--u-rule) solid var(--u-border);
}

.u-row {
  display: flex;
  gap: var(--u-space-2);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--u-space-2) 0;
  border-bottom: var(--u-rule) solid var(--u-border);
}

.u-row > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* A figure in a row aligns against the figures above and below it, so it is
   mono with tabular figures (UMB-TYP-004). */
.u-row [data-numeric] {
  font-family: var(--u-font-mono);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

a.u-row {
  color: inherit;
  text-decoration: none;
}

a.u-row:hover {
  color: var(--u-signal-text);
}

/* ── 4. button — a secondary control is a 1px rectangle (UMB-LAY-008) ───── */

.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--u-touch-target);
  padding: 0 var(--u-space-2);
  font-family: var(--u-font-mono);
  font-size: var(--u-size-label);
  color: var(--u-ink);
  background: transparent;
  border: var(--u-rule) solid var(--u-border);
  border-radius: var(--u-radius);
  cursor: pointer;
}

.u-btn:hover,
.u-btn:focus-visible {
  color: var(--u-signal-text);
  border-color: var(--u-signal);
}

/* A disabled control is a dead end with no explanation. Prefer removing it, or
   saying in words why it is unavailable. See audit/open-questions.md OQ-012 —
   this styling is provisional until that question is decided. */
.u-btn[disabled] {
  color: var(--u-caption);
  border-color: var(--u-gridline);
  cursor: not-allowed;
}

/* ── 5. segmented control — tabs and toggle groups (UMB-LAY-008) ──────────
   One form covers shadcn's tabs, toggle-group and toggle. */

.u-seg {
  display: inline-flex;
  border: var(--u-rule) solid var(--u-border);
  border-radius: var(--u-radius);
}

.u-seg > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--u-touch-target);
  padding: 0 var(--u-space-2);
  font-family: var(--u-font-mono);
  font-size: var(--u-size-label);
  color: var(--u-caption);
  background: transparent;
  border: 0;
  border-left: var(--u-rule) solid var(--u-border);
  /* The active underline is a rule, so it is drawn as one. Reserving the space
     on every segment keeps the row from shifting when the selection moves. */
  border-bottom: var(--u-rule-strong) solid transparent;
  cursor: pointer;
}

.u-seg > :first-child {
  border-left: 0;
}

.u-seg > [aria-selected="true"],
.u-seg > [aria-pressed="true"] {
  color: var(--u-signal-text);
  border-bottom-color: var(--u-signal);
}

/* ── 6. input and select ────────────────────────────────────────────────── */

.u-input,
.u-select {
  min-height: var(--u-touch-target);
  padding: 0 var(--u-space-1);
  font-family: var(--u-font-body);
  font-size: var(--u-size-body-small);
  color: var(--u-ink);
  background: var(--u-base);
  border: var(--u-rule) solid var(--u-border);
  border-radius: var(--u-radius);
}

.u-input:focus-visible,
.u-select:focus-visible {
  border-color: var(--u-signal);
}

.u-input[type="search"],
.u-input[inputmode="numeric"] {
  font-family: var(--u-font-mono);
}

.u-input::placeholder {
  color: var(--u-caption);
}

/* ── 7. table — horizontal rules only, darker baseline (UMB-CHT-004) ────── */

.u-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--u-size-body-small);
}

.u-table th {
  font-family: var(--u-font-mono);
  font-size: var(--u-size-label);
  font-weight: var(--u-weight-mono-medium);
  text-transform: lowercase;
  text-align: left;
  color: var(--u-caption);
  padding: var(--u-space-1);
  border-bottom: var(--u-rule-strong) solid var(--u-baseline);
}

.u-table td {
  padding: var(--u-space-1);
  border-bottom: var(--u-rule) solid var(--u-gridline);
}

/* Figures align in a column, so they are mono and right-aligned (UMB-TYP-004). */
.u-table [data-numeric],
.u-table th[data-numeric] {
  font-family: var(--u-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* A delta needs a word or an arrow, never colour alone (UMB-A11Y-005). The
   markup carries the arrow; this only colours it. */
.u-table [data-delta="sube"] { color: var(--u-alert-text); }
.u-table [data-delta="baja"] { color: var(--u-model-text); }

/* ── 8. the three empties — they mean three different things (UMB-COL-010) ─ */

.u-cell[data-estado="sin-registro"] {
  background: var(--u-missing);
}

/* UMB-COL-010 specifies a 45-degree hatch for suppressed data, so the gradient
   here implements a rule rather than decorating. UMB-COL-003 bans decorative
   gradients, which is a different thing. */
/* umbral-lint: ignore[no-gradient] — the hatch is required by UMB-COL-010 */
.u-cell[data-estado="suprimido"] {
  background: repeating-linear-gradient(
    45deg,
    var(--u-missing) 0,
    var(--u-missing) var(--u-rule),
    transparent var(--u-rule),
    transparent var(--u-space-1)
  );
}

.u-cell[data-estado="cero"] {
  background: var(--u-ramp-seq-signal-0);
}

/* The block form. The words carry the distinction, not the fill. */
.u-empty {
  padding: var(--u-space-3) 0;
  border-top: var(--u-rule) solid var(--u-border);
  font-family: var(--u-font-mono);
  font-size: var(--u-size-label);
  color: var(--u-caption);
}

/* ── 9. dialog — one overlay form covers sheet, drawer and popover ────────
   The CSS is the surface. The contract is behaviour: focus enters on open, is
   trapped while open, Escape closes, and focus returns to the opener
   (UMB-A11Y-008). A native <dialog> opened with showModal() gives all four. */

.u-dialog {
  max-width: var(--u-measure);
  padding: var(--u-space-3);
  color: var(--u-ink);
  background: var(--u-panel);
  border: var(--u-rule) solid var(--u-border);
  border-radius: var(--u-radius);
}

.u-dialog::backdrop {
  background: var(--u-ink);
  opacity: 0.6;
}

.u-dialog__title {
  font-family: var(--u-font-display);
  font-weight: var(--u-weight-display);
  font-size: var(--u-size-h3);
  letter-spacing: var(--u-tracking-display);
  margin: 0 0 var(--u-space-2);
}

/* ── 10. KPI — a row of figures compared column against column ────────────
   Mono, not display: these are read against each other (UMB-TYP-004). */

.u-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--u-space-1);
}

.u-kpi__value {
  font-family: var(--u-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--u-weight-mono-medium);
  font-size: var(--u-size-h2);
  color: var(--u-ink);
  line-height: 1;
}

.u-kpi__label {
  font-family: var(--u-font-mono);
  font-size: var(--u-size-label);
  text-transform: lowercase;
  color: var(--u-caption);
}

/* A KPI without its denominator is not a rate (UMB-NUM-002). */
.u-kpi__note {
  font-family: var(--u-font-mono);
  font-size: var(--u-size-source);
  color: var(--u-caption);
}

/* ── shared: focus and motion ───────────────────────────────────────────── */

.u-btn:focus-visible,
.u-seg > :focus-visible,
.u-input:focus-visible,
.u-select:focus-visible,
a.u-row:focus-visible {
  outline: var(--u-rule-strong) solid var(--u-signal);
  outline-offset: var(--u-rule-strong);
}

@media (prefers-reduced-motion: reduce) {
  .u-btn,
  .u-seg > *,
  a.u-row {
    transition: none;
  }
}