/*
 * theme.css — Gastos Patto. A ledger, not a dashboard toy: warm paper ground,
 * one deep ledger green for actions, amber reserved for "falta facturar".
 * Dense and fast like Linear, figures set in a mono like a bank statement.
 * The camera viewfinder is dark in both modes (--x-cam-*), like any camera.
 */

:root {
  --canvas: #f6f5f0;
  --surface: #ffffff;
  --surface-2: #eeece4;
  --border: #dedbcf;
  --border-strong: #a9a597;
  --ink: #1b1f1d;
  --muted: #5b605c;
  --accent: #0f5c4d;
  --accent-hover: #0b4a3e;
  --accent-ink: #ffffff;
  --accent-text: #0f5c4d;
  --accent-strong: #0b4a3e;
  --accent-soft: #dcebe5;
  --accent-border: #9cc5b8;
  --success: #1f7a3d;
  --success-ink: #ffffff;
  --success-soft: #dff0e3;
  --success-strong: #17602f;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f8e9d4;
  --warning-strong: #8a3f06;
  --danger: #b42318;
  --danger-ink: #ffffff;
  --danger-soft: #f9e1de;
  --danger-strong: #9a1d14;
  --chart-1: #0f5c4d;
  --chart-2: #d08a1e;
  --chart-3: #3f6fb5;
  --chart-4: #b4475e;
  --chart-5: #6b8f2a;
  --chart-6: #7a5bb0;
  --x-cam-bg: #0b0d0c;
  --x-cam-ink: #f4f4f1;

  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 650;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 10px;
  --radius-card: 14px;
  --radius-input: 10px;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-btn: none;
  --btn-weight: 600;
  --card-pad: 1.25rem;
}

html[data-theme="dark"] {
  --canvas: #111513;
  --surface: #181d1b;
  --surface-2: #202724;
  --border: #2c3430;
  --border-strong: #4b5651;
  --ink: #ecefe9;
  --muted: #9aa39d;
  --accent: #4fc3a1;
  --accent-hover: #6dd3b4;
  --accent-ink: #08201a;
  --accent-text: #6dd3b4;
  --accent-strong: #8fe0c6;
  --accent-soft: #16322a;
  --accent-border: #2a5a4b;
  --success: #2f9e5a;
  --success-ink: #06170c;
  --success-soft: #15291d;
  --success-strong: #7fd39c;
  --warning: #d48a2a;
  --warning-ink: #1f1405;
  --warning-soft: #2e2213;
  --warning-strong: #f0b766;
  --danger: #e05a4b;
  --danger-ink: #1a0705;
  --danger-soft: #2f1715;
  --danger-strong: #f19a8f;
  --chart-1: #4fc3a1;
  --chart-2: #e6a843;
  --chart-3: #6f9ae0;
  --chart-4: #e07a92;
  --chart-5: #9cc35a;
  --chart-6: #a68be0;
  --x-cam-bg: #0b0d0c;
  --x-cam-ink: #f4f4f1;
}

/*
 * app.css — what no primitive covers: the shell (sidebar, tab bar with the
 * scan button), the ledger rows, KPI tiles, the bimestre control, the
 * receipt slip and the 9:16 camera on the scanner, the copy chips, the
 * "Sin comprobar" stamp and analysis, the month-vs-month bars, and the
 * provider directory with its régimen pop-up. Tokens only.
 */

h1, h2, .page-title { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* ---- Shell ---- */
.app-frame { display: flex; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; width: 15rem; flex-shrink: 0;
  flex-direction: column; gap: 0.25rem;
  padding: 1.5rem 0.75rem 1rem;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.side-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: 10px;
  font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.side-link:hover { background: var(--surface-2); color: var(--ink); }
.side-link.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.brand-mark {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
}
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  padding: 0.375rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: 0.375rem 0; font-size: 0.6875rem; font-weight: 500; color: var(--muted); text-decoration: none;
}
.tab-item.is-active { color: var(--accent-text); font-weight: 600; }
.tab-scan {
  justify-self: center; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin-top: -1.5rem; border-radius: 18px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.tab-scan .icon { width: 1.5rem; height: 1.5rem; }
.tab-dot {
  position: absolute; top: -2px; right: -4px; width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: var(--warning); box-shadow: 0 0 0 2px var(--surface);
}

/* ---- Page head ---- */
.eyebrow {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--accent-text);
}
.page-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05;
  font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
}

/* ---- Bimestre switcher ---- */
.periodos {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0.5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
@media (min-width: 64rem) {
  .periodos { flex-direction: row; align-items: center; justify-content: space-between; }
}
.seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem;
  padding: 0.25rem; border-radius: 11px; background: var(--surface-2);
}
@media (min-width: 40rem) { .seg { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.seg-item {
  display: grid; place-items: center; height: 2.25rem; padding: 0 0.75rem; border-radius: 8px;
  font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background-color 150ms, color 150ms;
}
.seg-item:hover { color: var(--ink); }
.seg-item.is-active { background: var(--accent); color: var(--accent-ink); }
.seg-item.is-near { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* ---- KPI tiles ---- */
.kpi {
  min-width: 0; padding: 1rem 1.125rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
}
.kpi-label { font-size: 0.8125rem; color: var(--muted); }
.kpi-value {
  margin-top: 0.25rem; font-family: var(--font-mono); font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-note { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.kpi.is-warn { border-color: transparent; background: var(--warning-soft); }
.kpi.is-warn .kpi-label, .kpi.is-warn .kpi-note, .kpi.is-warn .kpi-value { color: var(--warning-strong); }
.kpi.is-good { border-color: transparent; background: var(--success-soft); }
.kpi.is-good .kpi-label, .kpi.is-good .kpi-note, .kpi.is-good .kpi-value { color: var(--success-strong); }
.kpi.is-lost { border-color: transparent; background: var(--danger-soft); }
.kpi.is-lost .kpi-label, .kpi.is-lost .kpi-note, .kpi.is-lost .kpi-value { color: var(--danger-strong); }

.delta { display: inline-flex; align-items: center; gap: 0.125rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.delta .icon { width: 0.875rem; height: 0.875rem; }
.delta.up { color: var(--danger-strong); }
.delta.down { color: var(--success-strong); }

/* ---- Ledger rows ---- */
.ledger { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ledger-flush { border: 0; border-radius: 0; }
.row-gasto {
  display: grid; align-items: center; gap: 0.25rem 0.75rem;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  grid-template-areas: "date main amount" "date status actions";
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.row-gasto:last-child { border-bottom: 0; }
.row-gasto:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.rg-date { grid-area: date; align-self: start; padding-top: 0.125rem; font-size: 0.75rem; color: var(--muted); line-height: 1.2; }
.rg-main { grid-area: main; min-width: 0; }
.rg-amount { grid-area: amount; text-align: right; font-weight: 500; }
.rg-status { grid-area: status; min-width: 0; }
.rg-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 0.125rem; }
.row-gasto.is-done .rg-amount { color: var(--muted); }
.row-gasto.is-late { box-shadow: inset 3px 0 0 var(--danger); }
@media (min-width: 56rem) {
  .row-gasto {
    grid-template-columns: 4rem minmax(0, 1fr) 8rem 9.5rem auto;
    grid-template-areas: "date main amount status actions";
  }
  .rg-date { align-self: center; padding-top: 0; }
}

/* ---- Sin comprobar: a closed bimestre with no CFDI ----
   The row turns to hatched paper with a red edge, the amount is set in red,
   and the status is a rubber stamp — the one look in the ledger that says
   "this money is gone for tax purposes". */
.row-gasto.is-lost {
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--danger) 6%, transparent) 10px 12px),
    var(--surface);
  box-shadow: inset 3px 0 0 var(--danger);
}
.row-gasto.is-lost .rg-amount { color: var(--danger-strong); }
.stamp {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.5rem;
  border: 2px solid var(--danger); border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  color: var(--danger-strong); background: var(--surface);
  transform: rotate(-3deg);
}
.stamp-muted { border-color: var(--border-strong); color: var(--muted); }
.badge-saas { background: color-mix(in srgb, var(--chart-3) 14%, var(--surface)); color: var(--ink); }

/* ---- Copy chips: the ticket number (and friends) one tap from the clipboard ---- */
.copy-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; max-width: 11rem;
  min-height: 1.5rem; padding: 0 0.5rem; border-radius: 6px;
  border: 1px dashed var(--border-strong); background: var(--surface);
  font-size: 0.75rem; color: var(--ink); cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.copy-chip .icon { width: 0.75rem; height: 0.75rem; flex-shrink: 0; color: var(--muted); }
.copy-chip:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); }
.copy-chip-lg { min-height: 2.5rem; max-width: none; padding: 0 0.875rem; font-size: 0.875rem; border-radius: 10px; }
.copy-chip-lg .icon { width: 1rem; height: 1rem; }
.copy-chip.is-copied, .folio-card.is-copied {
  border-style: solid; border-color: transparent; background: var(--success-soft); color: var(--success-strong);
}
.copy-chip.is-copied .icon { color: var(--success-strong); }

.folio-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: 100%;
  padding: 1.25rem 1rem; border-radius: 12px; cursor: pointer;
  border: 2px dashed var(--accent-border); background: var(--accent-soft); color: var(--accent-strong);
  transition: background-color 150ms, border-color 150ms;
}
.folio-card:hover { border-style: solid; }
.folio-value {
  max-width: 100%; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: 500;
  letter-spacing: 0.02em; color: var(--ink);
}
.folio-hint { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; }
.folio-card.is-copied .folio-value { color: var(--success-strong); }

/* ---- Alerts list on the Panel ---- */
.alert-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; }
.alert-pip { width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 999px; background: var(--warning); }
.alert-row.is-late .alert-pip { background: var(--danger); }

/* ---- Sin comprobar analysis ---- */
.fuga-hero {
  display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: 16px;
  background: var(--danger-soft); color: var(--danger-strong);
}
@media (min-width: 56rem) { .fuga-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; } }
.fuga-figure {
  font-family: var(--font-mono); font-size: clamp(2.25rem, 7vw, 3.75rem); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--danger-strong);
}
.fuga-split { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.fuga-bar { display: flex; height: 0.875rem; overflow: hidden; border-radius: 999px; background: var(--surface); }
.fuga-bar > span { display: block; height: 100%; width: var(--w); }
.seg-ok { background: var(--success); }
.seg-lost { background: var(--danger); }
.seg-personal { background: var(--warning); }
.seg-saas { background: var(--chart-3); }
.fuga-split .key { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 3px; flex-shrink: 0; }
.fuga-split li { color: var(--ink); }

/* ---- The scanner's receipt slip: a vertical 9:16 ticket ---- */
.ticket-slip {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 9 / 16; max-height: 34rem; width: 100%; margin-inline: auto;
  padding: 0.75rem 0.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
@media (min-width: 64rem) { .ticket-slip { max-height: 36rem; } }
.ticket-slip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background:
    linear-gradient(135deg, var(--canvas) 6px, transparent 0) 0 0 / 12px 12px repeat-x,
    linear-gradient(225deg, var(--canvas) 6px, transparent 0) 0 0 / 12px 12px repeat-x;
}
.slip-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; image-orientation: from-image; }
.slip-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.slip-icon {
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 16px;
  background: var(--accent-soft); color: var(--accent-strong);
}
.slip-icon .icon { width: 1.75rem; height: 1.75rem; }
.slip-progress {
  position: absolute; left: 1rem; right: 1rem; bottom: 1.5rem;
  padding: 0.75rem; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
}
.ticket-slip.is-reading .slip-img { filter: saturate(0.6); }
.ticket-slip.is-reading::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: var(--accent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: scanline 1.8s ease-in-out infinite alternate;
}
@keyframes scanline { from { transform: translateY(1rem); } to { transform: translateY(30rem); } }
html.reduced-motion .ticket-slip.is-reading::before { animation: none; }
.read-ok {
  display: inline-flex; align-items: center; gap: 0.125rem; margin-left: 0.375rem;
  font-size: 0.6875rem; font-weight: 600; color: var(--success-strong);
}
.read-ok .icon { width: 0.75rem; height: 0.75rem; }
.read-miss { margin-left: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--warning-strong); }

/* ---- The app's camera: full screen, a 9:16 frame to line the ticket up in ---- */
.camara {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--x-cam-bg); color: var(--x-cam-ink); overflow: hidden;
}
.camara::backdrop { background: var(--x-cam-bg); }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-shade { position: absolute; inset: 0; display: grid; place-items: center; padding: 4.5rem 1.5rem 8rem; pointer-events: none; }
.cam-frame {
  position: relative; aspect-ratio: 9 / 16; height: 100%; max-width: 100%;
  border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}
.cam-frame > span { position: absolute; width: 2rem; height: 2rem; border: 3px solid var(--x-cam-ink); }
.cam-frame > span:nth-child(1) { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.cam-frame > span:nth-child(2) { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.cam-frame > span:nth-child(3) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.cam-frame > span:nth-child(4) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.cam-hint {
  position: absolute; top: calc(1.25rem + env(safe-area-inset-top)); left: 0; right: 0;
  text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--x-cam-ink);
}
.cam-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center;
  padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
}
.cam-side {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px;
  color: var(--x-cam-ink); background: rgba(255, 255, 255, 0.14);
}
.cam-shoot {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 999px;
  border: 4px solid var(--x-cam-ink); background: transparent;
}
.cam-shoot > span { width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--x-cam-ink); transition: transform 120ms; }
.cam-shoot:active > span { transform: scale(0.9); }

/* ---- Compare ---- */
.compare-bar {
  display: grid; gap: 0.75rem; align-items: end;
  padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
@media (min-width: 40rem) { .compare-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; } }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; }
.cmp-bars { display: flex; flex-direction: column; gap: 3px; margin-top: 0.375rem; }
.cmp-bar { display: block; height: 6px; width: var(--w); min-width: 2px; border-radius: 999px; }
.cmp-bar.a, .cmp-key.a { background: var(--border-strong); }
.cmp-bar.b, .cmp-key.b { background: var(--chart-1); }
.cmp-key { display: inline-block; width: 0.75rem; height: 0.375rem; border-radius: 999px; }

/* ---- Provider directory ---- */
.neg-row, .neg-head, .neg-new {
  display: grid; gap: 0.625rem; align-items: center; padding: 0.875rem 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
.neg-row { align-items: start; }
.neg-row .field { gap: 0.25rem; }
.neg-id { display: flex; flex-direction: column; gap: 0.25rem; }
.neg-head { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.neg-new { padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
@media (min-width: 64rem) {
  .neg-row, .neg-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 9.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto; }
  .neg-new { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 9.5rem minmax(0, 1.2fr) 11rem auto; }
}

/* The régimen chip on each provider: opens the pop-up. */
.regimen-btn {
  display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; margin-top: 0.25rem;
  min-height: 1.875rem; padding: 0.125rem 0.5rem 0.125rem 0.25rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 0.75rem; text-align: left; color: var(--ink); cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.regimen-btn:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.regimen-btn .icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--muted); }
.regimen-btn.is-empty { padding-left: 0.5rem; border-style: dashed; border-color: var(--warning); background: var(--warning-soft); color: var(--warning-strong); }

/* The pop-up: persona física / moral, then only the régimenes that apply.
   The list filters itself with :has() — no script, and the server still
   refuses a régimen that does not belong to the chosen persona type. */
.persona-seg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem;
  padding: 0.25rem; border-radius: 11px; background: var(--surface-2);
}
.persona-opt { position: relative; display: block; cursor: pointer; }
.persona-opt input { position: absolute; opacity: 0; pointer-events: none; }
.persona-opt span {
  display: grid; place-items: center; height: 2.5rem; border-radius: 8px;
  font-size: 0.875rem; font-weight: 600; color: var(--muted);
}
.persona-opt input:checked + span { background: var(--accent); color: var(--accent-ink); }
.persona-opt input:focus-visible + span { box-shadow: var(--ring); }
.regimen-lista { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding: 0; border: 0; }
.regimen-opt {
  display: grid; grid-template-columns: auto 2.25rem minmax(0, 1fr); align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.regimen-opt:hover { border-color: var(--accent-border); }
.regimen-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.regimen-opt input { accent-color: var(--accent); }
.regimenes:has(input[name=tipo_persona][value=moral]:checked) .regimen-opt[data-moral="0"],
.regimenes:has(input[name=tipo_persona][value=fisica]:checked) .regimen-opt[data-fisica="0"] { display: none; }

.file-input { padding-top: 0.45rem; height: auto; min-height: 2.5rem; }