/* Tokens del prototipo docs/design/giro-mesa-prototipo.html — no reescribir a mano. */
:root[data-theme="light"]{
  --paper:#FBFAF7;      /* fondo de la app */
  --surface:#FFFFFF;    /* paneles */
  --surface-2:#F4F3EF;  /* filas alternas, rieles */
  --ink:#16202B;        /* texto principal */
  --ink-2:#5A6672;      /* secundario */
  --ink-3:#8A949E;      /* terciario */
  --rule:#E3E6EA;       /* filete */
  --rule-2:#CED4DA;     /* filete fuerte */
  --accent:#1B3A5C;     /* tinta */
  --accent-soft:#E8EEF5;
  --ok:#1F6B4A; --ok-bg:#E7F1EC;
  --wait:#96691A; --wait-bg:#F8F0DF;
  --bad:#A33A2E; --bad-bg:#F8EAE8;
  --focus:#2F6FB0;
  --shadow:0 1px 2px rgba(22,32,43,.06), 0 8px 24px rgba(22,32,43,.05);
}
:root[data-theme="dark"]{
  --paper:#11161C;
  --surface:#171E26;
  --surface-2:#1E2731;
  --ink:#E6EBF0;
  --ink-2:#9BA8B5;
  --ink-3:#6E7C8A;
  --rule:#2A3440;
  --rule-2:#3A4754;
  --accent:#8FB8E3;
  --accent-soft:#1C2A3A;
  --ok:#5FB68C; --ok-bg:#16291F;
  --wait:#D6A44C; --wait-bg:#2A2313;
  --bad:#E08C80; --bad-bg:#2B1A18;
  --focus:#6FA8E0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

/* Alias de las superficies actuales. El tema cambia valores, no selectores. */
:root[data-theme] {
  --bg: var(--paper);
  --card: var(--surface);
  --border: var(--rule);
  --text: var(--ink);
  --muted: var(--ink-2);
  --danger: var(--bad);
  --accent-dim: var(--accent-soft);
  color-scheme: light dark;
}

.giro-theme-btn {
  border: 1px solid var(--rule);
  background: var(--surface);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.giro-theme-btn:hover { border-color: var(--rule-2); color: var(--ink); }
.giro-theme-btn svg { width: 16px; height: 16px; }
.giro-theme-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
html[data-theme] body.chat-page .header .giro-theme-btn {
  margin-left: 0;
  align-self: center;
}

html[data-theme] body.mesa-page,
html[data-theme] body.chat-page {
  background: var(--paper);
  color: var(--ink);
  transition: background .18s ease, color .18s ease;
}
html[data-theme]:has(body.mesa-page),
html[data-theme]:has(body.chat-page) {
  background: var(--paper);
}

/* Chat: anular el navy hardcodeado de styles.css sin tocar login. */
html[data-theme] body.chat-page .header {
  background: var(--surface);
  border-bottom-color: var(--rule);
}
html[data-theme] body.chat-page .giro-wordmark { color: var(--ink); }
html[data-theme] body.chat-page input,
html[data-theme] body.chat-page select,
html[data-theme] body.chat-page textarea {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule-2);
}
html[data-theme] body.chat-page .sidebar {
  background: var(--surface);
  border-right-color: var(--rule);
}
html[data-theme] body.chat-page .conv-item.active {
  background: var(--accent-soft);
  border-color: var(--rule-2);
  color: var(--ink);
}
html[data-theme] body.chat-page .conv-item:hover {
  background: var(--surface-2);
  border-color: var(--rule);
}
html[data-theme] body.chat-page .btn-jump-bottom {
  background: var(--surface);
  box-shadow: var(--shadow);
}
html[data-theme] body.chat-page .chat-input,
html[data-theme] body.chat-page .composer-choices,
html[data-theme] body.chat-page .attachment-preview {
  background: var(--surface);
  border-top-color: var(--rule);
}
html[data-theme] body.chat-page .msg.assistant {
  background: var(--surface-2);
  color: var(--ink);
}
html[data-theme] body.chat-page .msg.user {
  background: var(--accent);
  color: #fff;
}
html[data-theme="dark"] body.chat-page .msg.user,
html[data-theme="dark"] body.chat-page .btn-primary,
html[data-theme="dark"] body.chat-page .btn-jump-bottom:hover {
  color: var(--paper);
}
html[data-theme] body.chat-page .action-card {
  background: var(--surface);
  border-color: var(--rule-2);
}
html[data-theme] body.chat-page .action-card-buttons .btn-approve,
html[data-theme] body.chat-page .btn.btn-ok {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
html[data-theme] body.chat-page .action-card-buttons .btn-reject,
html[data-theme] body.chat-page .btn.btn-ghost {
  border-color: var(--rule-2);
  color: var(--ink-2);
}
html[data-theme="dark"] body.chat-page .action-card-buttons .btn-approve {
  color: var(--paper);
}
html[data-theme] body.chat-page .usage-bar-row {
  background: var(--surface-2);
  border-color: var(--rule);
}
html[data-theme] body.chat-page .header-actions .usage-bar-row {
  background: var(--surface-2);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.mesa-page,
  html[data-theme] body.chat-page { transition: none; }
}

.deletion-review { color: var(--ink); font-size: 14px; line-height: 1.5; }
.deletion-review dl { margin: 0; }
.deletion-review .deletion-field {
  display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr);
  gap: 8px 16px; padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.deletion-review dt { color: var(--ink-2); font-weight: 400; }
.deletion-review dd { margin: 0; overflow-wrap: anywhere; }
.deletion-review .deletion-total { font-weight: 600; }
.deletion-review .deletion-total dt { color: var(--ink); font-weight: 600; }
.deletion-warning { margin: 18px 0 6px; padding: 12px; border-left: 3px solid var(--danger, #b54135); background: var(--surface-2); }

/* Proposal view: one card for every ERP (src/proposal-view). */
.pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; font-size: 13.5px; color: var(--ink); container-type: inline-size; }
/* 15/10/2026 (owner, a small laptop): no part of the card widens it past its pane — a wide table, a long name or a
   chip used to stretch the whole grid (header, tiles, chips) and give Mesa's pane a horizontal scrollbar. */
.pv > * { min-width: 0; }
.pv.pv-enter { animation: pv-in 200ms ease-out; }
.pv-chip { transition: background-color 240ms ease, color 240ms ease; }
@keyframes pv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pv-head-main { flex: 1 1 auto; min-width: 0; }
.pv-kicker > span { min-width: 0; overflow-wrap: anywhere; }
.pv-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--ink-2); }
.pv-chip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--wait-bg); color: var(--wait); }
.pv-chip.ok { background: var(--ok-bg); color: var(--ok); }
.pv-chip.bad { background: var(--bad-bg); color: var(--bad); }
.pv-chip.run { background: var(--accent-soft); color: var(--accent); }
.pv-party { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pv-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.pv-total { text-align: right; flex: none; }
.pv-total span { display: block; font-size: 11.5px; color: var(--ink-2); }
.pv-total .pv-num { display: inline; font-size: inherit; }
.pv-total strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 0; }
.pv-facts div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.pv-facts dt { font-size: 11px; color: var(--ink-2); }
.pv-facts dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
/* An amount or a rate in a value («RD$ 191,947.77 · 5 costos», «1 USD = 60.25 DOP»): the text wraps around it, never inside it. */
.pv-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-sec h3 { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pv-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pv-table th { font-size: 11.5px; font-weight: 500; color: var(--ink-2); text-align: left; padding: 4px 8px 6px 0; }
.pv-table td { padding: 7px 8px 7px 0; border-top: 1px solid var(--rule); vertical-align: top; overflow-wrap: break-word; }
.pv-table .n { text-align: right; white-space: nowrap; }
.pv-table .tax { display: block; font-size: 11.5px; color: var(--ink-2); }
.pv-table .sku { display: block; font: 600 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-2); letter-spacing: .02em; }
.pv-table tfoot td { color: var(--ink-2); font-size: 12.5px; }
.pv-table tfoot tr.grand td { color: var(--ink); font-weight: 600; }
.pv-change { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 4px 12px; margin: 0; }
.pv-change dt { color: var(--ink-2); font-size: 12.5px; }
.pv-change dd { margin: 0; }
.pv-change del { color: var(--bad); text-decoration: line-through; margin-right: 6px; }
.pv-change ins { color: var(--ok); text-decoration: none; font-weight: 600; }
/* 05/10/2026: a change is an «Antes → Después» table, the new value highlighted (never «+ / −» diff lines). */
.pv-chg { table-layout: fixed; }
.pv-chg thead th:first-child { width: 34%; }
.pv-chg tbody th { font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-align: left; padding: 7px 8px 7px 0; border-top: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.pv-chg td { overflow-wrap: anywhere; }
.pv-chg-before { color: var(--ink-2); }
.pv-chg-none { color: var(--ink-3); }
.pv-chg-after { display: inline-block; max-width: 100%; padding: 1px 6px; border-radius: 6px; background: var(--ok-bg); color: var(--ok); font-weight: 600; overflow-wrap: anywhere; }
.pv-chg-out .pv-chg-after { background: var(--bad-bg); color: var(--bad); }
/* The lines of a document: a code column, the rest after «Ver las N líneas», one note under the table. */
.pv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pv-table .pv-code { font: 600 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-2); letter-spacing: .02em; white-space: nowrap; }
.pv-table .pv-line-note { font-style: italic; }
.pv-table tr.pv-line-new td { background: var(--ok-bg); }
.pv-table tr.pv-line-new .pv-line-note { color: var(--ok); font-style: normal; font-weight: 600; }
.pv-table tr.pv-line-changed .pv-line-note { font-style: normal; font-weight: 600; }
.pv-table .pv-code .tax { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400; letter-spacing: 0; white-space: normal; }
.pv-lines-long:not(.pv-lines-open) .pv-row-more { display: none; }
.pv-more-lines { margin-top: 8px; padding: 4px 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; }
.pv-more-lines:hover { background: var(--accent-soft); }
.pv-more-lines:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pv-lines-note { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-2); }
.pv-docno { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-warn-irreversible { border-left: 3px solid var(--bad); font-weight: 500; }
.pv-note { border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0; padding: 8px 12px; }
.pv-note p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-steps { margin: 0; padding-left: 20px; }
.pv-steps li { padding: 3px 0; }
/* A plan step: its title, what it registers, and its detail on click. */
.pv-step > summary { cursor: pointer; list-style: none; }
.pv-step > summary::-webkit-details-marker { display: none; }
.pv-step-sum { display: block; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.pv-no-voucher { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; font-size: 11.5px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.pv-step-detail { display: grid; gap: 8px; margin: 6px 0 4px; padding: 8px 10px; border-left: 2px solid var(--line, #ddd); }
.pv-step-detail .pv-table { font-size: 12.5px; }
.pv-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.pv-meta svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.pv-reason { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
/* LEVEL_GIRO_DOC_EXTRACT: a value read from a doubtful document. */
.pv-verify { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--wait-bg); color: var(--wait); font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.pv-total .pv-verify { display: block; margin: 4px 0 0 auto; width: max-content; }
/* 02/10: doubts are an amber notice folded to one line, one line per document when opened. */
.pv-verify-sec { padding: 6px 10px; border-radius: 8px; background: var(--wait-bg); color: var(--wait); font-size: 12.5px; }
.pv-verify-sec > summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.pv-verify-sec ul { margin: 6px 0 2px; padding: 0; list-style: none; display: grid; gap: 3px; }
.pv-verify-sec li { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; color: var(--ink); }
.pv-verify-doc { font-weight: 600; overflow-wrap: anywhere; }
.pv-verify-arrow { color: var(--wait); }
.pv-verify-fields { color: var(--ink-2); }
.pv-total-note { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }
.pv-warn { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); font-size: 12.5px; }
/* 01/10/2026 recipes: the reconciliation of a liquidation's documents. */
.pv-recon .pv-table { font-size: 12.5px; }
.pv-recon h3 + .pv-table, .pv-recon .pv-table + h3 { margin-top: 6px; }
.pv-recon-warn { margin-top: 8px; padding-left: 28px; }
.pv-recon-check td { background: var(--bad-bg); }
/* 15/10/2026: the document's name reads as a name (never «BRIGHTMARK / LABEL / MATERIALS» one word per line), its note under it. */
.pv-recon-table .pv-recon-doc { min-width: 12em; }
.pv-recon-table .pv-recon-steps { min-width: 4.5em; }
.pv .asiento table { font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.pv .asiento a.cta-acc { font-weight: 500; color: var(--ink); }
/* A narrow proposal pane: total under the name (15/10/2026: up to 480 px, a laptop's three Mesa columns, so the meta
   line and the name keep the width), tighter table. */
@container (max-width: 480px) {
  .pv-head { flex-direction: column; gap: 6px; }
  .pv-total { text-align: left; align-self: stretch; }
}
@container (max-width: 420px) {
  .pv-table { font-size: 12.5px; }
  .pv-table .pv-code { white-space: normal; overflow-wrap: anywhere; font-size: 11.5px; }
  .pv-chg thead th:first-child { width: 30%; }
}
@media (prefers-reduced-motion: reduce) { .pv { animation: none; } }
.pv-fold > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); padding: 2px 0; }
.pv-fold[open] > summary { margin-bottom: 6px; }
/* A long plan by phase («Contactos · pasos 1–6»): each group under its own line. */
.pv-phase + .pv-phase { margin-top: 6px; }
.pv-phase-head { font-size: 12.5px; color: var(--ink-2); padding: 2px 0; }
.pv-note h3 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pv-compact { gap: 12px; }
.pv-compact .pv-party { font-size: 16px; }
.pv-compact .pv-total strong { font-size: 18px; }
/* A plan's entries, one block per record («Paso 4 · MC Logistics · EMBI491715 · USD 8,885.00»). */
.pv-lgroup + .pv-lgroup { margin-top: 10px; }
.pv-lgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12.5px; color: var(--ink-2); padding: 2px 0 4px; overflow-wrap: anywhere; }
.pv-lgroup-n { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pv-lgroup .pv-table { font-size: 12.5px; }
.pv-lgroup.bad .pv-table tfoot tr.grand td { color: var(--bad); }
.pv-tag-bad { padding: 1px 6px; border-radius: 6px; background: var(--bad-bg); color: var(--bad); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* An import liquidation: merchandise, costs, landed value, unit cost (estimated), what is not cost. */
.pv-liq { display: grid; gap: 8px; }
.pv-liq h3 { margin: 4px 0 0; }
.pv-liq .pv-fold .pv-table { font-size: 12.5px; }
.pv-liq-ex { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.pv-liq-ex li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border-top: 1px solid var(--rule); }
.pv-liq-ex-label { min-width: 0; overflow-wrap: anywhere; }
.pv-liq-ex .n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-liq-note { margin: 0; font-size: 12px; color: var(--ink-2); font-style: italic; }

/* Secondary pages (Empresas, Historial, Reglas, Facturación, Uso, Alta):
   the same paper, ink and accent as Mesa, light or dark as the person chose. */
html[data-theme]:has(body.app-page) { background: var(--paper); }
html[data-theme] body.app-page { background: var(--paper); color: var(--ink); }
html[data-theme] body.app-page .header {
  background: var(--surface); border-bottom: 1px solid var(--rule); box-shadow: none; padding: 0.75rem 1.5rem;
}
html[data-theme] body.app-page .header h1 { color: var(--ink); font-size: 1.1rem; font-weight: 600; }
html[data-theme] body.app-page .sub,
html[data-theme] body.app-page .hint { color: var(--ink-2); }
html[data-theme] body.app-page a { color: var(--accent); }
html[data-theme] body.app-page .panel,
html[data-theme] body.app-page .tenant-row,
html[data-theme] body.app-page .rule-card,
html[data-theme] body.app-page .provider-card,
html[data-theme] body.app-page .plan-card {
  background: var(--surface); border-color: var(--rule); box-shadow: var(--shadow);
}
html[data-theme] body.app-page .tenant-row { box-shadow: none; }
html[data-theme] body.app-page .tenant-row-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
html[data-theme] body.app-page .tenant-badge { background: var(--accent-soft); color: var(--accent); }
html[data-theme] body.app-page input,
html[data-theme] body.app-page select,
html[data-theme] body.app-page textarea {
  background: var(--surface); color: var(--ink); border-color: var(--rule-2);
}
html[data-theme] body.app-page input:focus-visible,
html[data-theme] body.app-page select:focus-visible,
html[data-theme] body.app-page textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
html[data-theme] body.app-page .btn-primary { background: var(--accent); color: var(--paper); }
html[data-theme] body.app-page .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--rule-2); }
html[data-theme] body.app-page .btn-secondary:hover { border-color: var(--accent); }
/* Deleting is not the first thing a row offers: outlined, red only on intent. */
html[data-theme] body.app-page .btn-danger {
  background: transparent; color: var(--bad); border: 1px solid var(--rule-2);
}
html[data-theme] body.app-page .btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); }
html[data-theme] body.app-page .usage-table th { color: var(--ink-2); }
html[data-theme] body.app-page .usage-table th,
html[data-theme] body.app-page .usage-table td { border-bottom-color: var(--rule); }
html[data-theme] body.app-page .usage-table tbody tr:hover { background: var(--surface-2); }
html[data-theme] body.app-page .credit-meter { background: var(--surface-2); }
html[data-theme] body.app-page .credit-meter-fill { background: var(--accent); }
html[data-theme] body.app-page .usage-badge.premium { background: var(--accent-soft); color: var(--accent); }
html[data-theme] body.app-page .usage-badge.included { background: var(--ok-bg); color: var(--ok); }
html[data-theme] body.app-page .step { border-color: var(--rule-2); color: var(--ink-2); }
html[data-theme] body.app-page .step.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
html[data-theme] body.app-page .step.done { border-color: var(--ok); color: var(--ok); }
html[data-theme] body.app-page .error { color: var(--bad); }
html[data-theme] body.app-page .ok { color: var(--ok); }
html[data-theme] body.app-page .rule-card { background: var(--surface); }
/* 03/10/2026 — a long proposal that reads well: an index, the summary first, steps by phase with their own entry. */
.pv [data-pv-sec], .pv [data-pv-n] { scroll-margin-top: 52px; }
.pv-compact [data-pv-sec], .pv-compact [data-pv-n] { scroll-margin-top: 8px; }
.pv-index { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.pv-index.pv-index-sticky { position: sticky; top: 0; z-index: 3; margin: -6px 0; padding: 8px 0; background: var(--surface); border-bottom: 1px solid var(--rule); }
.pv-nav-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font: inherit; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-nav-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.pv-nav-chip:focus-visible, .pv-step-ref:focus-visible, .pv-open-doc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pv-nav-n { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-nav-chip.pv-nav-review { border-color: var(--wait); }
.pv-nav-chip.pv-nav-review::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wait); }
.pv-fold-sec > summary, .pv-phase > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; }
.pv-fold-sec > summary::-webkit-details-marker, .pv-phase > summary::-webkit-details-marker { display: none; }
.pv-fold-sec > summary::before, .pv-phase > summary::before { content: "▸"; width: 10px; color: var(--ink-3); font-size: 11px; transition: transform 120ms ease; }
.pv-fold-sec[open] > summary::before, .pv-phase[open] > summary::before { transform: rotate(90deg); }
.pv-sec-head { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pv-fold-sec[open] > summary { margin-bottom: 4px; }
.pv-plan-steps > h3 { margin-bottom: 2px; }
.pv-phase { border-top: 1px solid var(--rule); }
.pv-phase + .pv-phase { margin-top: 0; }
.pv-phase > summary { font-size: 13px; color: var(--ink); }
.pv-phase-name { font-weight: 600; }
.pv-phase-range { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-phase > .pv-steps { margin: 0 0 8px; }
.pv-steps { list-style: none; padding-left: 0; }
.pv-steps li { padding: 0; border-top: 1px solid var(--rule); }
.pv-steps li:first-child { border-top: 0; }
.pv-step-line { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 6px 0; }
summary.pv-step-line { cursor: pointer; }
.pv-step-line:hover { background: var(--surface-2); }
.pv-step-n { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-step-main { min-width: 0; }
.pv-step-title { font-weight: 500; }
.pv-step-amt { font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.pv-step[open] > summary .pv-step-n::after { content: " ▾"; color: var(--ink-3); }
.pv-step-detail { margin: 0 0 8px 68px; }
.pv-step-detail h4 { margin: 2px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pv-step-attn { margin: 0; padding: 6px 10px 6px 26px; border-radius: 8px; background: var(--wait-bg); color: var(--wait); font-size: 12.5px; }
.pv-step-verify { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--wait-bg); color: var(--wait); font-size: 12.5px; }
.pv-step-info, .pv-verify-note { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: 12.5px; }
.pv-verify-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pv-tag-review, .pv-tag-info { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.pv-tag-review { background: var(--wait-bg); color: var(--wait); }
.pv-tag-info { background: var(--accent-soft); color: var(--accent); }
.pv-verify-do { flex-basis: 100%; color: var(--ink-2); }
.pv-step-ref { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.pv-open-doc { font: inherit; font-size: 12px; font-weight: 600; padding: 2px 8px; margin-left: 4px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: var(--accent); cursor: pointer; }
/* 08/10/2026 (enlaces): links to ERP records and source files (display-only; always a new tab). */
.pv-links { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; font-size: 12.5px; }
.pv-links-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pv-links-title { color: var(--ink-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pv-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.pv-link svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.pv-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.pv-link-name { color: inherit; text-decoration-style: dotted; }
.pv-link-name:hover { color: var(--accent); }
.pv-link-page { color: var(--ink-2); font-size: 11px; }
.pv-links-step { margin: 0 0 8px; }
/* 08/10/2026: «se adjunta al registro: X» is a link (Mesa opens it in its document panel). */
button.pv-file-chip { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.pv-meta .pv-file-chip svg { width: 14px; height: 14px; vertical-align: -2px; }
.msg-record-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; }
.pv-lgroup-note { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); }
.pv-lgroup-wrap + .pv-lgroup-wrap { margin-top: 10px; }
.pv .pv-flash { animation: pv-flash 1.4s ease-out; }
@keyframes pv-flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
@container (max-width: 520px) {
  .pv-step-line { grid-template-columns: minmax(0, 1fr) auto; }
  .pv-step-n { grid-column: 1 / -1; }
  .pv-step-detail { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pv .pv-flash { animation: none; } .pv-fold-sec > summary::before, .pv-phase > summary::before { transition: none; } }
.pv-phase-count { font-size: 11px; color: var(--ink-2); padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
/* 03/10/2026 — a plan as a flow of boxes and arrows (public/proposal-view.js flowHtml); its detail opens in place, under the box's row. */
.pv-flow { display: grid; gap: 8px; }
.pv-flow > h3 { margin-bottom: 0; }
.pv-flow-stage { display: grid; gap: 8px; }
.pv-flow-stage-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-flow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wait); flex: none; }
.pv-flow-down { text-align: center; color: var(--ink-3); font-size: 15px; line-height: 1; }
.pv-flow-row { gap: 8px; }
.pv-flow-grid { display: grid; align-items: stretch; }
.pv-flow-grid.pv-cols-1 { grid-template-columns: minmax(0, 340px); }
.pv-flow-grid.pv-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-flow-grid.pv-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-flow-grid.pv-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-flow-chain { display: flex; flex-wrap: wrap; align-items: stretch; }
.pv-flow-chain > .pv-box { flex: 1 1 0; }
.pv-flow-arrow { flex: none; align-self: center; color: var(--ink-3); font-size: 15px; line-height: 1; }
.pv-flow-arrow::before { content: "→"; }
.pv-box { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; margin: 0; padding: 9px 11px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 10px; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.pv-box:hover { border-color: var(--accent); }
.pv-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pv-box.is-open { border-color: var(--accent); box-shadow: 0 0 0 .5px var(--accent); background: var(--accent-soft); }
.pv-box-group { box-shadow: 3px 3px 0 -1px var(--surface), 3px 3px 0 0 var(--rule-2); }
.pv-box-group.is-open { box-shadow: 0 0 0 .5px var(--accent), 3px 3px 0 -1px var(--surface), 3px 3px 0 0 var(--accent); }
.pv-box-kicker { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.pv-box-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
/* 09/10/2026 (M-9S7S): a step that removes or voids a record: red edge and trash icon, never read as a new document. */
.pv-box-remove { border-left: 3px solid var(--bad); }
.pv-box-remove .pv-box-title { color: var(--bad); }
.pv-remove-icon { display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; color: var(--bad); }
.pv-party .pv-remove-icon { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
.pv-step-remove { color: var(--bad); }
.pv-box-count { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.pv-box.is-open .pv-box-count { background: var(--surface); }
.pv-box-sub { font-size: 12px; color: var(--ink-2); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pv-box-amt { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-box-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pv-pill { display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.pv-pill-warn { background: var(--wait-bg); color: var(--wait); }
.pv-pill-info { background: var(--accent-soft); color: var(--accent); }
.pv-pill-ok { background: var(--ok-bg); color: var(--ok); }
.pv-box.is-open .pv-pill-info { background: var(--surface); }
.pv-flow-detail { grid-column: 1 / -1; flex: 1 0 100%; display: grid; gap: 10px; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--surface); }
.pv-flow-detail[hidden] { display: none; }
.pv-fd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pv-fd-headtext { min-width: 0; }
.pv-fd-kicker { margin: 0; font-size: 11.5px; color: var(--ink-2); }
.pv-fd-title { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; }
.pv-fd-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.pv-fd-doc { flex: none; margin: 0; padding: 4px 10px; border-radius: 999px; }
.pv-fd-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.pv-fd-h { margin: 2px 0 -4px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pv-fd-table { width: 100%; border-collapse: separate; border-spacing: 0; border: .5px solid var(--rule-2); border-radius: 8px; overflow: hidden; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pv-fd-table th { padding: 6px 10px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 600; text-align: left; }
.pv-fd-table td { padding: 6px 10px; border-top: .5px solid var(--rule); vertical-align: top; }
.pv-fd-table .n { text-align: right; white-space: nowrap; }
.pv-fd-table .tax { display: block; font-size: 11.5px; color: var(--ink-2); }
.pv-fd-table .sku { display: block; font: 600 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-2); }
.pv-fd-table tfoot td { color: var(--ink-2); }
.pv-fd-table tfoot tr.grand td { background: var(--surface-2); color: var(--ink); font-weight: 600; border-top: .5px solid var(--rule-2); }
.pv-fd-ledger th.dr, .pv-fd-ledger td.dr, .pv-fd-ledger tfoot tr.grand td.dr { background: var(--ok-bg); color: var(--ok); }
.pv-fd-ledger th.cr, .pv-fd-ledger td.cr, .pv-fd-ledger tfoot tr.grand td.cr { background: var(--accent-soft); color: var(--accent); }
.pv-fd-ledger.bad tfoot tr.grand td { color: var(--bad); }
.pv-fd-ok { color: var(--ok); font-weight: 600; }
.pv-fd-up { font-weight: 600; color: var(--ink); }
.pv-fd-items { list-style: none; margin: 0; padding: 0; border: .5px solid var(--rule-2); border-radius: 8px; overflow: hidden; }
.pv-fd-items li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 7px 10px; border-top: .5px solid var(--rule); font-size: 12.5px; }
.pv-fd-items li:first-child { border-top: 0; }
.pv-fd-item-n { font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-fd-item-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.pv-fd-item-fields { display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--ink); }
.pv-fd-item-label { color: var(--ink-2); }
.pv-fd-item-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.pv-fd-notes { margin: 0; padding: 8px 12px 8px 26px; border-radius: 8px; background: var(--wait-bg); color: var(--wait); font-size: 12.5px; display: grid; gap: 3px; }
.pv-fd-notes .pv-fd-note-info { color: var(--ink-2); }
.pv-fd-reason { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.pv [data-pv-item] { scroll-margin-top: 52px; }
@container (max-width: 560px) {
  .pv .pv-flow-grid.pv-cols-3, .pv .pv-flow-grid.pv-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv .pv-flow-chain { flex-direction: column; flex-wrap: nowrap; }
  .pv .pv-flow-chain > .pv-box { flex: none; align-self: stretch; }
  .pv .pv-flow-chain > .pv-flow-detail { flex: none; }
  .pv .pv-flow-arrow::before { content: "↓"; }
  .pv-fd-items li { grid-template-columns: minmax(0, 1fr) auto; }
  .pv-fd-item-n { grid-column: 1 / -1; }
  .pv-fd-head { flex-wrap: wrap; }
}
@container (max-width: 360px) {
  .pv .pv-flow-grid.pv-cols-2, .pv .pv-flow-grid.pv-cols-3, .pv .pv-flow-grid.pv-cols-4 { grid-template-columns: minmax(0, 1fr); }
  .pv .pv-flow-grid.pv-cols-1 { grid-template-columns: minmax(0, 1fr); }
  .pv-fd-items li { grid-template-columns: minmax(0, 1fr); }
  .pv-fd-item-tags { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .pv-box { transition: none; } }
/* 15/10/2026 (owner, a small laptop): in a narrow pane a wide table (the reconciliation, a document's lines, the unit
   costs: .pv-stack) and then a three-column one (an entry, the changes: .pv-stack-sm) read row by row — the name or the
   account across, under it each value with its label («Débito  RD$ 1,000.00»), amounts on one line, right-aligned. */
@container (max-width: 560px) {
  .pv .pv-stack, .pv .pv-stack > tbody, .pv .pv-stack > tfoot { display: block; width: 100%; }
  .pv .pv-stack { position: relative; }
  .pv .pv-stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pv .pv-stack tr { display: block; padding: 6px 0; border-top: 1px solid var(--rule); }
  .pv .pv-stack > tbody > tr:first-child { border-top: 0; }
  .pv .pv-stack td, .pv .pv-stack th { display: block; padding: 1px 0; border: 0; text-align: left; min-width: 0; }
  .pv .pv-stack td.n { text-align: right; }
  .pv .pv-stack td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--ink-2); font-size: 11.5px; font-weight: 400; white-space: nowrap; }
  .pv .pv-stack td:empty, .pv .pv-stack td.amt-zero { display: none; }
  .pv .pv-stack tr:has(> td[colspan]) { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
  .pv .pv-fd-table.pv-stack tr { padding: 6px 10px; }
  /* A document's lines, as on a phone invoice: the description across, «2 × 1,770.71» under it and the amount on the right. */
  .pv .pv-stack-lines > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .pv .pv-stack-lines > tbody > tr > td:not(.n) { flex: 1 0 100%; }
  .pv .pv-stack-lines > tbody > tr > td.n { color: var(--ink-2); font-size: 12px; }
  .pv .pv-stack-lines > tbody > tr > td.n::before { content: none; }
  .pv .pv-stack-lines > tbody > tr > td:not(.n) + td.n:has(+ td.n:not(:empty))::after { content: " ×"; }
  .pv .pv-stack-lines > tbody > tr > td.n:last-child { margin-left: auto; color: var(--ink); font-size: inherit; font-weight: 600; }
}
@container (max-width: 440px) {
  .pv .pv-stack-sm, .pv .pv-stack-sm > tbody, .pv .pv-stack-sm > tfoot { display: block; width: 100%; }
  .pv .pv-stack-sm { position: relative; }
  .pv .pv-stack-sm > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pv .pv-stack-sm tr { display: block; padding: 6px 0; border-top: 1px solid var(--rule); }
  .pv .pv-stack-sm > tbody > tr:first-child { border-top: 0; }
  .pv .pv-stack-sm td, .pv .pv-stack-sm th { display: block; padding: 1px 0; border: 0; text-align: left; min-width: 0; }
  .pv .pv-stack-sm td.n { text-align: right; }
  .pv .pv-stack-sm td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--ink-2); font-size: 11.5px; font-weight: 400; white-space: nowrap; }
  .pv .pv-stack-sm td:empty, .pv .pv-stack-sm td.amt-zero { display: none; }
  .pv .pv-stack-sm tr:has(> td[colspan]) { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
  .pv .pv-fd-table.pv-stack-sm tr { padding: 6px 10px; }
  .pv .asiento .pv-stack-sm { min-width: 0; }
  .pv .asiento .pv-stack-sm tr { padding: 6px 10px; }
}

/* 05/10/2026 «Modo plan»: el interruptor personal (Mesa, chat clásico, Ajustes). */
.giro-pane-actions { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.giro-plan-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.giro-plan-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.giro-plan-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--rule-2);
  transition: background 150ms ease;
}
.giro-plan-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform 150ms ease;
}
.giro-plan-switch input:checked + .giro-plan-switch-track { background: var(--ok); }
.giro-plan-switch input:checked + .giro-plan-switch-track::after { transform: translateX(12px); }
.giro-plan-switch input:focus-visible + .giro-plan-switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.giro-plan-switch input:disabled + .giro-plan-switch-track { opacity: .55; }
.giro-plan-switch:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .giro-plan-switch-track, .giro-plan-switch-track::after { transition: none; }
}
/* 06/10/2026: «Trabajando…» marks a conversation or session with a turn running, from any device. */
.giro-working-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
  white-space: nowrap;
}
.giro-working-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: giro-badge-pulse 1.3s ease-in-out infinite;
}
@keyframes giro-badge-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* The Mesa rail: a dot on «Sesiones» while any session has Giro working. */
.rail-item.has-working, .drawer-item.has-working { position: relative; }
.rail-item.has-working::after, .drawer-item.has-working::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: giro-badge-pulse 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .giro-working-badge::before, .rail-item.has-working::after, .drawer-item.has-working::after { animation: none; }
}
/* A phone-width list row keeps the title readable: «Trabajando…» replaces the time while it works. */
@media (max-width: 520px) { .conv-item .giro-working-badge ~ .conv-when { display: none; } }

/* 06/10/2026 (costos.html): costo de IA vs ingreso por cliente, solo para el operador. */
.cost-page { max-width: 1100px; }
.cost-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0 0 1rem; }
.cost-controls label { color: var(--ink-2); font-size: .85rem; }
.cost-controls select { padding: .4rem .6rem; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.cost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.cost-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1rem; box-shadow: var(--shadow); min-width: 0; }
.cost-card .cost-label { color: var(--ink-2); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cost-card .cost-value { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: .2rem 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cost-card .cost-sub { color: var(--ink-3); font-size: .78rem; }
.cost-value.is-ok { color: var(--ok); }
.cost-value.is-vigilar { color: var(--wait); }
.cost-value.is-perdida { color: var(--bad); }
.cost-alerts { border-left: 4px solid var(--bad); background: var(--bad-bg); border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1.25rem; }
.cost-alerts h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--bad); }
.cost-alerts ul { margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--ink); }
.cost-alerts li { padding: .25rem 0; border-top: 1px solid var(--rule); }
.cost-alerts li:first-child { border-top: 0; }
.cost-alerts .cost-when { color: var(--ink-3); font-size: .78rem; white-space: nowrap; }
.cost-alerts li.is-recuperado { color: var(--ink-2); }
.cost-banner { border-left: 4px solid var(--wait); background: var(--wait-bg); border-radius: 8px; padding: .6rem 1rem; margin: 0 0 1rem; font-size: .85rem; color: var(--ink); }
/* Lista de clientes: filas en cuadrícula (no tabla) para que el detalle no ensanche las columnas en el teléfono. */
.cost-list { font-size: .85rem; }
.cost-head, .cost-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, .9fr) 5.2rem; gap: .5rem; align-items: start; padding: .6rem .5rem; border-bottom: 1px solid var(--rule); }
.cost-head { color: var(--ink-2); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.cost-head .num, .cost-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.cost-row { cursor: pointer; }
.cost-row:hover, .cost-row[aria-expanded="true"] { background: var(--surface-2); }
.cost-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cost-row > * { min-width: 0; overflow-wrap: anywhere; }
.cost-name { font-weight: 600; color: var(--ink); }
.cost-meta { color: var(--ink-3); font-size: .75rem; }
.cost-detail { background: var(--surface-2); padding: 1rem; border-bottom: 1px solid var(--rule); min-width: 0; }
.cost-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.cost-badge.ok { background: var(--ok-bg); color: var(--ok); }
.cost-badge.vigilar { background: var(--wait-bg); color: var(--wait); }
.cost-badge.perdida { background: var(--bad-bg); color: var(--bad); }
.cost-badge.gratis { background: var(--accent-soft); color: var(--accent); }
.cost-badge.legacy { background: var(--accent-soft); color: var(--accent); margin-left: .3rem; }
.cost-detail h3 { margin: 1rem 0 .4rem; font-size: .9rem; color: var(--ink); }
.cost-detail h3:first-child { margin-top: 0; }
.cost-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem .75rem; margin: 0; }
.cost-facts div { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .7rem; min-width: 0; }
.cost-facts dt { color: var(--ink-2); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cost-facts dd { margin: .15rem 0 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cost-facts dd small { color: var(--ink-3); }
.cost-bars { display: flex; align-items: flex-end; gap: 2px; height: 70px; padding: 4px 0; border-bottom: 1px solid var(--rule-2); }
.cost-bar { flex: 1 1 0; min-width: 3px; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }
.cost-bar.is-zero { background: var(--rule-2); }
.cost-bar:hover { opacity: 1; }
.cost-bars-axis { display: flex; justify-content: space-between; color: var(--ink-3); font-size: .72rem; margin-top: .2rem; }
.cost-inner-wrap { overflow-x: auto; }
.cost-inner { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 480px; }
.cost-inner th, .cost-inner td { padding: .4rem .45rem; text-align: left; border-bottom: 1px solid var(--rule); }
.cost-inner th { color: var(--ink-2); font-size: .7rem; font-weight: 600; text-transform: uppercase; }
.cost-inner td.num, .cost-inner th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-explain h2 { margin: 0 0 .5rem; }
.cost-explain ul { margin: .4rem 0 .8rem; padding-left: 1.2rem; font-size: .88rem; color: var(--ink); }
.cost-explain li { margin-bottom: .3rem; }
.cost-explain .cost-unmeasured li strong { color: var(--wait); }
.cost-error { color: var(--bad); }
@media (max-width: 640px) {
  .cost-hide-sm { display: none; }
  .cost-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .cost-card { padding: .7rem .75rem; }
  .cost-card .cost-value { font-size: 1.15rem; }
  .cost-head, .cost-row { grid-template-columns: minmax(0, 1fr) 5.2rem 4.6rem; }
  .cost-detail { padding: .75rem .5rem; }
}