@charset "utf-8";

:root { color-scheme: light; }

body { margin: 0px; padding: 0px; font: 14px -apple-system, BlinkMacSystemFont, sans-serif; background: rgb(250, 249, 245); color: rgb(20, 20, 19); }

img { max-width: 100%; }

@charset "utf-8";

:root { color-scheme: light; --plane: #F1F4F7; --surface: #FFFFFF; --surface-2: #F9FBFC; --surface-3: #EDF1F5; --ink: #14232F; --ink-2: #51677A; --ink-3: #7F92A2; --line: rgba(20,35,47,.12); --line-soft: rgba(20,35,47,.07); --accent: #007BC0; --accent-hover: #00669F; --accent-ink: #FFFFFF; --accent-soft: #E6F2FA; --accent-line: rgba(0,123,192,.30); --good: #107E3E; --good-ink: #0B6B33; --good-soft: rgba(16,126,62,.10); --warn: #E76500; --warn-ink: #A54B00; --warn-soft: rgba(231,101,0,.11); --crit: #BB0000; --crit-ink: #A20000; --crit-soft: rgba(187,0,0,.09); --s1: #007BC0; --s2: #3FB6B6; --grid: #DDE4EA; --axis: #C3CED7; --shadow: 0 1px 2px rgba(20,35,47,.07), 0 4px 12px rgba(20,35,47,.06); --radius: 6px; --radius-sm: 4px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --plane: #0B1116; --surface: #141D25; --surface-2: #1C262F; --surface-3: #243139; --ink: #EDF2F6; --ink-2: #A5B5C1; --ink-3: #7C8C99; --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.07); --accent: #4FB3F0; --accent-hover: #74C5F5; --accent-ink: #0A1720; --accent-soft: rgba(79,179,240,.14); --accent-line: rgba(79,179,240,.34); --good: #36A85A; --good-ink: #5CBF74; --good-soft: rgba(54,168,90,.16); --warn: #F5A623; --warn-ink: #F5B441; --warn-soft: rgba(245,166,35,.16); --crit: #FF5C5C; --crit-ink: #FF8080; --crit-soft: rgba(255,92,92,.16); --s1: #4FB3F0; --s2: #5ED0D0; --grid: #24303A; --axis: #31404B; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4); }
}

:root[data-theme="dark"] { color-scheme: dark; --plane: #0B1116; --surface: #141D25; --surface-2: #1C262F; --surface-3: #243139; --ink: #EDF2F6; --ink-2: #A5B5C1; --ink-3: #7C8C99; --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.07); --accent: #4FB3F0; --accent-hover: #74C5F5; --accent-ink: #0A1720; --accent-soft: rgba(79,179,240,.14); --accent-line: rgba(79,179,240,.34); --good: #36A85A; --good-ink: #5CBF74; --good-soft: rgba(54,168,90,.16); --warn: #F5A623; --warn-ink: #F5B441; --warn-soft: rgba(245,166,35,.16); --crit: #FF5C5C; --crit-ink: #FF8080; --crit-soft: rgba(255,92,92,.16); --s1: #4FB3F0; --s2: #5ED0D0; --grid: #24303A; --axis: #31404B; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4); }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body { margin: 0px; background: var(--plane); color: var(--ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-family: inherit; margin: 0px; text-wrap: balance; letter-spacing: -0.011em; font-weight: 600; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.app[hidden] { display: none; }

.side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0px; height: 100vh; }

.btn-idioma { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; min-width: 38px; justify-content: center; }

.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }

.brand-name { font-weight: 700; font-size: 16px; letter-spacing: 0.07em; line-height: 1; }

.brand-name span { color: var(--accent); }

.brand-sub { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; overflow-y: auto; }

.nav-label { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 14px 8px 6px; }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); border: 0px; background: none; width: 100%; text-align: left; cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 13.5px; }

.nav-item:hover { background: var(--surface-3); color: var(--ink); }

.nav-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; border-left-color: var(--accent); }

.nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; stroke: currentcolor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.nav-badge { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; background: var(--crit-soft); color: var(--crit-ink); padding: 1px 6px; border-radius: 3px; font-weight: 600; }

.side-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line-soft); }

.tenant { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-soft); }

.tenant-badge { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }

.tenant-name { font-weight: 600; font-size: 12.5px; line-height: 1.2; }

.tenant-meta { font-size: 11px; color: var(--ink-3); line-height: 1.2; margin-top: 2px; }

.main { min-width: 0px; display: flex; flex-direction: column; }

.topbar { position: sticky; top: 0px; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.topbar h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }

.topbar .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.subnav { display: flex; gap: 2px; padding: 0px 26px; border-bottom: 1px solid var(--line); background: var(--plane); overflow-x: auto; scrollbar-width: none; }

.subnav::-webkit-scrollbar { display: none; }

.subnav[hidden] { display: none; }

.subnav button { border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: none; padding: 11px 14px; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; margin-bottom: -1px; font-weight: 500; }

.subnav button:hover { color: var(--ink); }

.subnav button[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.view { padding: 18px 24px 60px; display: none; animation: 0.22s ease 0s 1 normal none running fade; }

.view.active { display: block; }

@keyframes fade { 
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }

.btn:hover { background: var(--surface-3); }

.btn:active { transform: translateY(1px); }

.btn svg { width: 15px; height: 15px; stroke: currentcolor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }

.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }

.btn-sm { padding: 4px 9px; font-size: 12px; border-radius: var(--radius-sm); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }

.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }

.card-head h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }

.card-head .hint { font-size: 11.5px; color: var(--ink-3); margin-left: auto; font-family: "IBM Plex Mono", monospace; }

.eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.grid { display: grid; gap: 14px; }

.num { font-variant-numeric: tabular-nums; }

.mono { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

.field { display: flex; flex-direction: column; gap: 5px; }

.field label { font-size: 12px; font-weight: 500; color: var(--ink-2); }

.input, select.input, textarea.input { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; width: 100%; }

.input:focus { outline: 2px solid var(--accent); outline-offset: 0px; border-color: transparent; }

textarea.input { resize: vertical; min-height: 70px; font-family: inherit; }

.hintline { font-size: 11.5px; color: var(--ink-3); }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }

.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentcolor; flex: 0 0 auto; }

.pill.good { background: var(--good-soft); color: var(--good-ink); }

.pill.warn { background: var(--warn-soft); color: var(--warn-ink); }

.pill.crit { background: var(--crit-soft); color: var(--crit-ink); }

.pill.neutral { background: var(--surface-3); color: var(--ink-2); }

.pill.accent { background: var(--accent-soft); color: var(--accent); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

th { text-align: left; font-size: 11.5px; letter-spacing: 0.005em; color: var(--ink-2); font-weight: 600; padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }

td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }

tbody tr:last-child td { border-bottom: 0px; }

tbody tr.clickable { cursor: pointer; }

tbody tr.clickable:hover { background: var(--surface-2); }

.t-right { text-align: right; }

.empty { padding: 34px 16px; text-align: center; color: var(--ink-3); font-size: 13px; white-space: normal; }

.table-wrap td { height: 56px; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }

.table-wrap td > b, .table-wrap td > .hintline, .table-wrap td > span.txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.table-wrap td .mono, .table-wrap td .pill, .table-wrap td .doc-badge, .table-wrap td .btn { white-space: nowrap; }

.table-wrap td[colspan] { white-space: normal; max-width: none; overflow: visible; height: auto; }

.table-wrap td.ancha { max-width: 340px; }

.table-wrap td.angosta { max-width: 170px; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.btn[hidden], .chip[hidden] { display: none; }

.pwa-aviso { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--accent-line); box-shadow: var(--shadow); font-size: 13.5px; max-width: calc(-24px + 100vw); }

.pwa-modal { position: fixed; inset: 0px; z-index: 220; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; padding: 20px; }

.pwa-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; max-width: 380px; width: 100%; box-shadow: var(--shadow); }

.pwa-card ol b { font-weight: 600; }

body.sin-conexion .topbar::after { content: "sin conexión"; margin-left: auto; align-self: center; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn-ink); background: var(--warn-soft); padding: 3px 9px; border-radius: 20px; }

html.modo-app body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

.cuenta-sel { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0px 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.24); font-family: "IBM Plex Mono", monospace; font-size: 11px; margin-left: 2px; }

.mono { white-space: nowrap; }

@media (max-width: 760px) {
  .table-wrap table { font-size: 12.5px; }
  .table-wrap td, .table-wrap th { padding-left: 11px; padding-right: 11px; }
  .table-wrap td:first-child, .table-wrap th:first-child { position: sticky; left: 0px; z-index: 2; border-right: 1px solid var(--line); max-width: 134px; }
  .table-wrap td { max-width: 150px; }
  .table-wrap td.ancha { max-width: 150px; }
  .table-wrap td.angosta { max-width: 120px; }
  .table-wrap td:first-child { background: var(--surface); }
  .table-wrap th:first-child { background: var(--surface-2); z-index: 3; }
  .table-wrap tbody tr.clickable:hover td:first-child { background: var(--surface-2); }
  .table-wrap .mob-oculta { display: none; }
}

body.denso .table-wrap td { height: 44px; padding-top: 7px; padding-bottom: 7px; }

body.denso .table-wrap td .hintline.opt { display: none; }

body.denso table { font-size: 13px; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }

.toolbar .conteo { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; padding-left: 4px; }

.toolbar .conteo + .btn, .toolbar .conteo + .btn ~ .btn { margin-left: 0px; }

.msgstrip { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; }

.msgstrip svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; stroke: currentcolor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.msgstrip b { color: var(--ink); }

.msgstrip.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-ink); }

.msgstrip.crit { border-color: var(--crit); background: var(--crit-soft); color: var(--crit-ink); }

.msgstrip.info { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

.msgstrip.warn b, .msgstrip.crit b, .msgstrip.info b { color: inherit; }

.table-wrap.scrollable { max-height: min(68vh, 620px); }

.table-wrap.scrollable th { position: sticky; top: 0px; z-index: 3; }

th.ord { cursor: pointer; user-select: none; padding-right: 26px; position: relative; }

th.ord:hover { color: var(--ink); background: var(--surface-3); }

th.ord::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid; border-bottom: 1.5px solid; opacity: 0; transform: rotate(45deg) translateY(-1px); transition: opacity 0.12s; }

th.ord:hover::after { opacity: 0.45; }

th.ord[aria-sort="ascending"]::after { opacity: 1; transform: rotate(-135deg) translateY(-2px); }

th.ord[aria-sort="descending"]::after { opacity: 1; }

th.ord[aria-sort] { color: var(--accent); }

.search { position: relative; flex: 1 1 0%; min-width: 180px; max-width: 320px; }

.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--ink-3); fill: none; stroke-width: 1.8; }

.search input { padding-left: 31px; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }

.seg button { border: 0px; background: none; padding: 4px 11px; border-radius: 3px; font-size: 12px; cursor: pointer; color: var(--ink-2); font-weight: 500; }

.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px; font-weight: 600; }

.seg button { white-space: nowrap; }

@media (max-width: 760px) {
  .toolbar { padding: 8px 9px; gap: 7px; }
  .toolbar .conteo { margin-left: 0px; width: 100%; text-align: right; padding-left: 0px; }
  .seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: 0 0 auto; }
}

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
}

.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px; position: relative; overflow: hidden; }

.kpi .label { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

.kpi .value { font-weight: 700; font-size: 24px; letter-spacing: -0.025em; margin-top: 6px; line-height: 1.1; }

.kpi .foot { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; display: flex; align-items: center; gap: 6px; }

.kpi .spark { position: absolute; right: 0px; bottom: 0px; opacity: 0.9; }

.delta { font-weight: 600; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }

.delta.up { color: var(--good-ink); }

.delta.down { color: var(--crit-ink); }

.chart { width: 100%; overflow: visible; }

.chart text { font-family: "IBM Plex Mono", monospace; font-size: 10px; fill: var(--ink-3); }

.chart .val { font-family: inherit; font-size: 10.5px; fill: var(--ink-2); font-weight: 600; }

.chart .gridline { stroke: var(--grid); stroke-width: 1; }

.chart .baseline { stroke: var(--axis); stroke-width: 1; }

.bar { transition: opacity 0.15s; }

.chart:hover .bar { opacity: 0.55; }

.chart .bar:hover { opacity: 1; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ink-2); }

.legend span { display: inline-flex; align-items: center; gap: 6px; }

.legend i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }

.stack { display: flex; height: 34px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--surface-2); }

.stack div { transition: flex 0.3s; }

.tip { position: fixed; z-index: 80; pointer-events: none; background: var(--ink); color: var(--surface); padding: 7px 10px; border-radius: 8px; font-size: 12px; box-shadow: var(--shadow); opacity: 0; transition: opacity 0.12s; max-width: 230px; }

.tip.on { opacity: 1; }

.tip b { font-family: "IBM Plex Mono", monospace; }

.bars { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 168px; padding-bottom: 20px; }

.bars-grid { position: absolute; inset: 0px 0px 20px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }

.bars-grid i { display: block; height: 1px; background: var(--grid); }

.bars-col { flex: 1 1 0%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0px; }

.bars-bar { width: min(62%, 44px); background: var(--s1); border-radius: 4px 4px 0px 0px; transition: opacity 0.15s, height 0.3s; }

.bars:hover .bars-bar { opacity: 0.5; }

.bars-bar:hover { opacity: 1; }

.bars-val { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; white-space: nowrap; }

.bars-lab { position: absolute; bottom: -20px; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.prog { height: 6px; background: var(--surface-3); border-radius: 20px; overflow: hidden; min-width: 74px; }

.prog i { display: block; height: 100%; background: var(--accent); border-radius: 20px; }

.nav-lock { width: 13px; height: 13px; margin-left: auto; opacity: 0.65; stroke: currentcolor; fill: none; stroke-width: 1.8; }

.nav-item .nav-badge + .nav-lock { margin-left: 6px; }

.admin-only { display: none !important; }

body.is-admin .admin-only { display: flex !important; }

body.is-admin .nav-label.admin-only { display: block !important; }

.tenant { width: 100%; border: 1px solid var(--line-soft); cursor: pointer; text-align: left; font: inherit; color: inherit; }

.tenant:hover { background: var(--surface-3); }

.check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; }

.check input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }

.key { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: 0.06em; background: var(--surface-3); padding: 3px 9px; border-radius: 7px; white-space: nowrap; }

.lock-badge { width: 52px; height: 52px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0px auto 16px; }

.lock-badge svg { width: 26px; height: 26px; stroke: currentcolor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bloqueo { position: fixed; inset: 0px; z-index: 100; background: var(--plane); display: grid; place-items: center; padding: 24px; }

.bloqueo[hidden] { display: none; }

.bloqueo-box { max-width: 470px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px; box-shadow: var(--shadow); }

.bloqueo-box h2 { font-size: 21px; margin-bottom: 9px; }

.bloqueo-box p { color: var(--ink-2); font-size: 14.5px; margin: 0px; }

.paywall { max-width: 720px; margin: 8px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px 30px; text-align: center; }

.paywall h2 { font-size: 22px; margin-bottom: 10px; }

.paywall .sub { color: var(--ink-2); font-size: 14.5px; max-width: 520px; margin: 0px auto; }

.paywall ul { text-align: left; max-width: 520px; margin: 22px auto 0px; padding: 0px; list-style: none; display: grid; gap: 10px; }

.paywall li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }

.paywall li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; stroke: var(--good); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.precio { display: inline-flex; align-items: baseline; gap: 6px; margin: 22px 0px 6px; }

.precio b { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }

.precio span { color: var(--ink-3); font-size: 13px; }

.emp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; margin-bottom: 10px; }

.emp-card.activa-emp { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.emp-modulos { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); }

.emp-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); }

.log-row { display: flex; gap: 12px; padding: 9px 0px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }

.log-row:last-child { border-bottom: 0px; }

.log-row .when { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-3); flex: 0 0 auto; width: 74px; }

.user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit; }

.user-chip:hover { background: var(--surface-3); }

.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em; flex: 0 0 auto; }

.user-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }

.user-txt b { font-size: 12.5px; font-weight: 600; }

.user-txt i { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-family: "IBM Plex Mono", monospace; }

.user-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; }

.user-row:hover { border-color: var(--accent-line); }

.user-row[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.paywall.compacto { padding: 22px 24px; text-align: left; margin: 0px; border: 0px; border-radius: 0px; }

.paywall.compacto .lock-badge { margin: 0px 0px 14px; }

.paywall.compacto ul { margin: 16px 0px 0px; }

.paywall.compacto .sub { margin: 0px; }

.tasa-input { width: 92px; text-align: right; }

.mini-tabla { width: 100%; font-size: 13.5px; }

.mini-tabla td { padding: 7px 0px; border-bottom: 1px solid var(--line-soft); }

.mini-tabla tr:last-child td { border-bottom: 0px; }

@media (max-width: 1180px) {
  .user-txt { display: none; }
  .user-chip { padding: 5px; }
}

.picker { position: relative; }

.picker .search { max-width: none; width: 100%; }

.picker-list { position: absolute; z-index: 5; top: calc(100% + 5px); left: 0px; right: 0px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); overflow: hidden auto; max-height: 260px; }

.picker-list[hidden] { display: none; }

.picker-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; width: 100%; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; border-bottom: 1px solid var(--line-soft); }

.picker-item:last-child { border-bottom: 0px; }

.picker-item:hover, .picker-item:focus-visible { background: var(--surface-3); }

.picker-item .avatar { background: var(--surface-3); color: var(--ink-2); }

.picker-item b { font-size: 13.5px; display: block; line-height: 1.3; }

.picker-item .meta { font-size: 11.5px; color: var(--ink-3); font-family: "IBM Plex Mono", monospace; }

.picker-item .saldo { margin-left: auto; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.picker-sel { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 11px; background: var(--accent-soft); }

.picker-sel[hidden] { display: none; }

.picker-sel .avatar { background: var(--accent); color: var(--accent-ink); }

.picker-vacio { padding: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }

@media (max-width: 560px) {
  .picker-sel { flex-wrap: wrap; }
  .picker-sel > span:nth-child(3) { margin-left: 44px; text-align: left; }
  .picker-sel .btn { margin-left: auto; }
}

.lock-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-family: "IBM Plex Mono", monospace; background: var(--surface-3); color: var(--ink-3); padding: 1px 7px; border-radius: 20px; margin-left: 6px; }

.input:disabled { opacity: 0.55; cursor: not-allowed; background: var(--surface-3); }

.pagare-row { display: flex; align-items: center; gap: 11px; padding: 10px 0px; border-bottom: 1px solid var(--line-soft); }

.pagare-row:last-child { border-bottom: 0px; }

.doc-badge { font-family: "IBM Plex Mono", monospace; font-size: 12px; background: var(--surface-3); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }

body.modo-negocio .nav-item.mod-rubro { display: none !important; }

body.modo-negocio.con-modulo .nav-item.mod-rubro { display: flex !important; }

.mod-ico { display: flex; flex: 0 0 auto; }

.mod-ico svg { width: 17px; height: 17px; stroke: currentcolor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mod-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; background: var(--surface); display: grid; gap: 8px; }

.mod-card.activo { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.mod-card .mod-top { display: flex; align-items: center; gap: 9px; }

.mod-card .mod-top svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: var(--accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mod-card b { font-size: 13.5px; }

.mod-card .rubro { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.mod-card p { margin: 0px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }

.kpi.link { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }

.kpi.link:hover { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

.kpi .ir { position: absolute; top: 13px; right: 13px; opacity: 0; transition: opacity 0.15s; }

.kpi .ir svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.kpi.link:hover .ir { opacity: 1; }

.modal.ancho { width: min(760px, 100% - 32px); }

.puntos { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }

.punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.punto.ok { background: var(--good); }

.punto.tarde { background: var(--warn); }

.punto.mal { background: var(--crit); }

.tendencia { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; }

.tendencia.mejora { color: var(--good-ink); }

.tendencia.empeora { color: var(--crit-ink); }

.tendencia.estable { color: var(--ink-3); }

.barra { height: 6px; background: var(--surface-3); border-radius: 20px; overflow: hidden; min-width: 70px; }

.barra i { display: block; height: 100%; border-radius: 20px; }

.msj-texto { max-width: 420px; color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.canal { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }

.canal i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }

.acc-ok { border: 1px solid var(--good); background: var(--good-soft); border-radius: 12px; padding: 16px; display: flex; gap: 13px; align-items: center; }

.acc-no { border: 1px solid var(--crit); background: var(--crit-soft); border-radius: 12px; padding: 16px; display: flex; gap: 13px; align-items: center; }

.acc-icono { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface); font-size: 20px; }

.item-row { display: grid; grid-template-columns: 1fr 74px 120px 30px; gap: 8px; align-items: center; }

.item-row .btn-x { border: 0px; background: none; color: var(--ink-3); cursor: pointer; font-size: 17px; padding: 4px; border-radius: 6px; }

.item-row .btn-x:hover { background: var(--surface-3); color: var(--crit-ink); }

.logo-box { width: 64px; height: 64px; border-radius: 12px; border: 1px dashed var(--line); display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-3); overflow: hidden; flex: 0 0 auto; background: var(--surface-2); }

.logo-box img { width: 100%; height: 100%; object-fit: contain; }

.hoja { background: rgb(255, 255, 255); color: rgb(20, 35, 47); border: 1px solid var(--line); border-radius: 10px; padding: 28px 30px; font-size: 13px; }

.hoja h2, .hoja h3, .hoja b { color: rgb(20, 35, 47); }

.hoja-head { display: flex; gap: 16px; align-items: flex-start; border-bottom: 2px solid rgb(0, 123, 192); padding-bottom: 16px; margin-bottom: 18px; }

.hoja-logo { width: 64px; height: 64px; border-radius: 10px; background: rgb(237, 241, 245); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; font-weight: 700; color: rgb(0, 123, 192); font-size: 20px; }

.hoja-logo img { width: 100%; height: 100%; object-fit: contain; }

.hoja-emisor b { display: block; font-size: 17px; }

.hoja-emisor span { display: block; font-size: 12px; color: rgb(81, 103, 122); line-height: 1.5; }

.hoja-num { margin-left: auto; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: rgb(81, 103, 122); }

.hoja-num b { display: block; font-size: 16px; color: rgb(0, 123, 192); font-family: inherit; }

.hoja table { width: 100%; border-collapse: collapse; margin: 14px 0px; }

.hoja th { background: rgb(241, 244, 247); color: rgb(81, 103, 122); border-bottom: 1px solid rgb(221, 228, 234); font-size: 10px; padding: 8px 10px; }

.hoja td { border-bottom: 1px solid rgb(232, 237, 242); padding: 9px 10px; font-size: 13px; color: rgb(20, 35, 47); }

.hoja-tot { margin-left: auto; width: min(280px, 100%); }

.hoja-tot div { display: flex; justify-content: space-between; padding: 5px 0px; font-size: 13px; color: rgb(81, 103, 122); }

.hoja-tot div.final { border-top: 1px solid rgb(221, 228, 234); margin-top: 6px; padding-top: 9px; font-size: 16px; font-weight: 700; color: rgb(20, 35, 47); font-family: inherit; }

.hoja-pie { margin-top: 20px; border-top: 1px solid rgb(232, 237, 242); padding-top: 12px; font-size: 11px; color: rgb(127, 146, 162); }

.correo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

.correo-head { background: var(--surface-2); padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }

.correo-head b { color: var(--ink); }

.correo-body { padding: 16px 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

@media print {
  body * { visibility: hidden; }
  #m-imprimir, #m-imprimir * { visibility: visible; }
  #m-imprimir { position: absolute; inset: 0px; transform: none; width: 100%; max-height: none; border: 0px; box-shadow: none; opacity: 1; }
  .modal-head, .modal-foot { display: none !important; }
  .hoja { border: 0px; }
}

@media (max-width: 640px) {
  .item-row { grid-template-columns: 1fr 60px 100px 26px; }
}

.extra-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); display: grid; gap: 12px; }

.extra-box .eyebrow { margin-bottom: -4px; }

.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 640px) {
  .extra-grid { grid-template-columns: 1fr; }
}

.plantilla-prev { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 12px; padding: 14px; display: grid; gap: 10px; font-size: 13px; }

.plantilla-prev b { font-size: 13.5px; }

.chip-campo { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; font-size: 11.5px; color: var(--ink-2); }

.niche b .rubro-tag { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 3px; }

.niche-campos { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }

.login { position: fixed; inset: 0px; z-index: 95; background: var(--plane); display: grid; place-items: center; padding: 22px; overflow-y: auto; }

.login[hidden] { display: none; }

.login-box { position: relative; width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; box-shadow: var(--shadow); display: grid; gap: 14px; }

.login-marca { display: flex; align-items: baseline; gap: 11px; margin-bottom: 2px; }

.login-seg { width: 100%; }

.login-seg button { flex: 1 1 0%; padding: 7px 8px; }

.login-pie { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 13px; flex-wrap: wrap; }

.login-pie .btn { margin-left: auto; }

.demo-users { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.demo-users button { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 20px; padding: 3px 10px; cursor: pointer; color: var(--ink-2); }

.demo-users button:hover { border-color: var(--accent-line); color: var(--accent); }

.nav-neg, .nav-prov { display: none !important; }

body.modo-negocio .nav-neg { display: flex !important; }

body.modo-negocio .nav-item.sin-permiso { display: none !important; }

body.modo-negocio .nav-item[hidden] { display: none !important; }

body.modo-negocio .nav-label.nav-neg { display: block !important; }

body.modo-proveedor .nav-prov { display: flex !important; }

body.modo-proveedor .nav-label.nav-prov { display: block !important; }

body.modo-proveedor .topbar-actions .btn:not(#btn-theme) { display: none; }

body.modo-proveedor .tenant { display: none; }

.barra-prov { display: flex; align-items: center; gap: 10px; padding: 9px 26px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); font-size: 13px; color: var(--ink-2); }

.barra-prov[hidden] { display: none; }

.barra-prov svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--accent); fill: none; stroke-width: 1.8; }

.barra-prov b { color: var(--ink); }

.usr-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }

.usr-card.inactivo { opacity: 0.6; }

.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 9px; margin-top: 12px; }

.perm { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }

.perm:hover { border-color: var(--accent-line); }

.perm[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); }

.perm.sensible[aria-pressed="true"] { background: var(--crit-soft); border-color: var(--crit); }

.perm b { display: block; font-size: 12.5px; font-weight: 600; }

.perm span { font-size: 11px; color: var(--ink-3); display: block; line-height: 1.35; }

.sw { width: 34px; height: 20px; border-radius: 20px; background: var(--surface-3); position: relative; flex: 0 0 auto; transition: background 0.15s; border: 1px solid var(--line); }

.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px; transition: transform 0.16s; }

.perm[aria-pressed="true"] .sw { background: var(--accent); border-color: var(--accent); }

.perm.sensible[aria-pressed="true"] .sw { background: var(--crit); border-color: var(--crit); }

.perm[aria-pressed="true"] .sw::after { transform: translateX(14px); }

.nav-sensible { position: relative; }

body.modo-negocio .nav-sensible[aria-current="true"] { background: var(--crit-soft); color: var(--crit-ink); }

.fin-shell { border: 1px solid var(--crit); border-radius: 16px; padding: 18px; background: linear-gradient(180deg, var(--crit-soft), transparent 120px); }

.fin-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.fin-head svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: var(--crit-ink); fill: none; stroke-width: 1.7; }

.fin-head b { font-size: 14.5px; }

.fin-head .grow { flex: 1 1 auto; min-width: 0px; }

.fin-head button { white-space: nowrap; }

@media (max-width: 760px) {
  .fin-shell { padding: 14px; }
  .fin-head { flex-wrap: wrap; }
  .fin-head .grow { width: 100%; }
}

.aging { display: flex; height: 26px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--surface-2); margin: 12px 0px; }

.aging div { display: grid; place-items: center; font-size: 10.5px; font-family: "IBM Plex Mono", monospace; color: rgb(255, 255, 255); overflow: hidden; }

.cta-card { border: 1px solid var(--line); border-radius: 12px; padding: 15px; background: var(--surface); display: grid; gap: 6px; }

.cta-card .saldo { font-size: 21px; font-weight: 700; }

.aud-row { display: flex; gap: 12px; padding: 10px 0px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }

.aud-row:last-child { border-bottom: 0px; }

.aud-row .when { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-3); width: 96px; flex: 0 0 auto; }

.item-row.oc { grid-template-columns: 1fr 70px 92px 110px 30px; }

@media (max-width: 760px) {
  .item-row.oc { grid-template-columns: 1fr 56px 76px 90px 26px; }
}

.scrim { position: fixed; inset: 0px; background: rgba(10, 9, 8, 0.44); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.2s; }

.scrim.on { opacity: 1; pointer-events: auto; }

.drawer { position: fixed; top: 0px; right: 0px; height: 100vh; width: min(560px, 100%); background: var(--plane); border-left: 1px solid var(--line); z-index: 70; transform: translateX(102%); transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow-y: auto; }

.drawer.on { transform: none; }

.drawer-head { position: sticky; top: 0px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 20px 0px; z-index: 2; }

.drawer-head .fila { display: flex; align-items: flex-start; gap: 12px; }

.drawer-facts { display: flex; flex-wrap: wrap; gap: 0px 26px; padding: 14px 0px 12px; margin-top: 12px; border-top: 1px solid var(--line-soft); }

.drawer-facts > div { min-width: 0px; }

.drawer-facts span { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }

.drawer-facts b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.drawer-facts .hintline { font-size: 11px; margin-top: 2px; }

.drawer-body { padding: 18px 20px 50px; display: flex; flex-direction: column; gap: 14px; }

.modal { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(0.98); width: min(560px, 100% - 32px); max-height: 88vh; overflow-y: auto; background: var(--plane); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; }

.modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }

.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }

.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0px; background: var(--plane); }

.x { margin-left: auto; border: 0px; background: none; cursor: pointer; color: var(--ink-3); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; }

.x:hover { background: var(--surface-3); color: var(--ink); }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); background: var(--ink); color: var(--surface); padding: 11px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; }

.toast.on { opacity: 1; transform: translate(-50%, 0px); }

.debt-card { border: 1px solid var(--line); border-radius: 11px; padding: 13px; background: var(--surface); display: flex; flex-direction: column; gap: 9px; }

.debt-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.row { display: flex; align-items: center; gap: 10px; }

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }

.dl div > span:first-child { display: block; font-size: 11px; color: var(--ink-3); }

.dl div b { font-weight: 600; font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.emp-card .dl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.notice { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 10px 12px; border-radius: 0px 9px 9px 0px; font-size: 12.5px; color: var(--ink-2); }

.msg-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; font-size: 13px; white-space: pre-wrap; line-height: 1.55; }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 4px 11px; font-size: 12px; cursor: pointer; }

.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }

.niche-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; }

.niche { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; padding: 13px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; display: grid; grid-template-rows: auto 1fr auto; align-content: start; }

.niche:hover { border-color: var(--accent-line); }

.niche[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.niche b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; min-height: 2.6em; }

.niche > span { font-size: 12px; color: var(--ink-3); line-height: 1.45; display: block; }

.niche-campos { align-self: end; }

@media (max-width: 1040px) {
  .view .grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; border-right: 0px; border-bottom: 1px solid var(--line); }
  .brand { padding: 12px 14px; }
  .brand-sub { display: none; }
  .nav { flex-direction: row; padding: 8px; gap: 4px; }
  .nav-label { display: none !important; }
  .side-foot { display: none; }
  .nav-item { white-space: nowrap; }
  .view, .topbar { padding-left: 16px; padding-right: 16px; }
  .split { grid-template-columns: 1fr; }
}

/* ---- ajustes propios de esta versión ---- */

/* la consola del proveedor también necesita sus botones en la barra superior */
body.modo-proveedor .topbar-actions .btn { display: inline-flex !important; }
body.modo-proveedor .topbar-actions .pill { display: inline-flex; }

#btn-theme svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#user-chip { flex: 0 0 auto; }
body.modo-proveedor #user-chip .hintline { color: var(--ink-3); }

/* barra de progreso de cuotas dentro de las tablas */
.table-wrap .prog { min-width: 60px; }

/* el aviso dentro de una tarjeta no debe pegarse al borde */
.card .msgstrip:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  #user-chip span:nth-child(2) { display: none; }
}

/* La animación de entrada de las vistas dejaba la pantalla en blanco:
   si queda pausada en el primer fotograma, la opacidad se queda en 0.
   El contenido tiene que verse siempre, con o sin animación. */
.view { animation: none !important; opacity: 1 !important; }

/* ---- interruptor en una sola línea, para no repetir tarjetas ---- */
.opt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); cursor: pointer; font: inherit; color: inherit;
}
.opt-row:hover { border-color: var(--accent-line); }
/* sin esto, el texto largo de la descripción estira el modal */
.opt-row, .extra-box, .extra-grid > *, .modal-body > *, .field { min-width: 0; }
.opt-row[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.opt-row.sensible[aria-pressed="true"] { background: var(--crit-soft); border-color: var(--crit); }
.opt-row[aria-pressed="true"] .sw { background: var(--accent); border-color: var(--accent); }
.opt-row.sensible[aria-pressed="true"] .sw { background: var(--crit); border-color: var(--crit); }
.opt-row[aria-pressed="true"] .sw::after { transform: translateX(14px); }
.opt-row b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.opt-row .des { font-size: 11.5px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-row .precio-mod { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* el extracto se imprime igual que el presupuesto */
@media print {
  #m-extracto, #m-extracto * { visibility: visible; }
  #m-extracto { position: absolute; inset: 0; transform: none; width: 100%; max-height: none; border: 0; box-shadow: none; opacity: 1; }
}

/* el registro se abre desde la pantalla de ingreso, que está por
   encima de los modales: hay que levantarlo a él y al velo */
#m-registro, #m-olvide, #m-otra-sesion { z-index: 130; }
.scrim.sobre-login { z-index: 125; }

.hoja.recibo { max-width: 640px; margin: 0 auto; }
.hoja.recibo table { margin: 10px 0; }

/* ---- recibos archivados en la ficha del cliente ----
   la ficha es angosta: una tabla de siete columnas se corta,
   así que cada recibo va en su propio bloque apilado. */
.rec-row { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.rec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rec-main { display: flex; align-items: center; gap: 9px; }
.rec-main b { font-size: 14px; }
.rec-main .btn { margin-left: auto; flex: 0 0 auto; }
.rec-row .hintline { margin-top: 3px; }
.rec-envio { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.rec-envio .hintline { margin-top: 0; }

/* la hoja de exportación se imprime sola, igual que el extracto */
@media print {
  #m-exportar, #m-exportar * { visibility: visible; }
  #m-exportar { position: absolute; inset: 0; transform: none; width: 100%; max-height: none; border: 0; box-shadow: none; opacity: 1; }
  #m-exportar .modal-head, #m-exportar .modal-foot, #m-exportar #exp-que, #m-exportar #exp-nota { display: none; }
}

/* ---- fallas activas ---- */
.fallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.falla { border: 1px solid var(--line); border-left: 3px solid var(--ink-3); border-radius: 12px; padding: 13px 15px; background: var(--surface); }
.falla.warn { border-left-color: var(--warn, #b7791f); }
.falla.crit { border-left-color: var(--crit); background: var(--crit-soft); }
.falla .cod { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--surface-3); color: var(--ink-2); flex: 0 0 auto; }
.falla.crit .cod { background: var(--crit); color: #fff; }
.nav-badge.crit { background: var(--crit); color: #fff; }

/* ---- precio pactado en la consola ---- */
.tar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.tar-row:last-child { border-bottom: 0; }
.tar-row b { font-size: 13px; }
.tar-row .input { width: 130px; margin-left: auto; flex: 0 0 auto; }
.precio-propio { color: var(--accent); font-weight: 600; }

/* ---- vista previa de la migración ---- */
.mig-tabla { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 12px; }
.mig-tabla table { font-size: 12px; }
.mig-mal { background: var(--crit-soft); }

/* tarjeta de una solicitud de alta */
.sol-card { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; }

/* la mora vive en su propia fila, al lado del plan de cuotas */
.mora-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--crit); border-radius: 10px;
  background: var(--crit-soft);
}
.mora-fila .eyebrow { color: var(--crit-ink); }
.mora-fila .hintline { color: var(--ink-2); }
.hoja .mora-linea { display: flex; align-items: center; gap: 10px; border: 1px dashed rgb(187,0,0); background: rgb(253,231,231); border-radius: 8px; padding: 8px 11px; margin-top: 8px; font-size: 12px; }
.hoja .mora-linea b { margin-left: auto; }

.hoja-tot div { gap: 14px; }
.hoja-tot { width: min(320px, 100%); }

/* tabla de cuotas dentro de la hoja impresa */
.hoja .cuotas th:first-child, .hoja .cuotas td:first-child { text-align: center; width: 42px; }
.hoja .bloque { margin-top: 20px; }
.hoja .bloque > h3 { font-size: 14px; margin-bottom: 4px; }
.hoja .resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; margin: 16px 0 4px; }
.hoja .resumen div { border: 1px solid rgb(221, 228, 234); border-radius: 8px; padding: 9px 11px; }
.hoja .resumen span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgb(127, 146, 162); font-family: "IBM Plex Mono", monospace; }
.hoja .resumen b { display: block; font-size: 16px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.hoja .est { font-size: 10.5px; padding: 1px 7px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.hoja .est.ok { background: rgb(226, 243, 232); color: rgb(11, 107, 51); }
.hoja .est.no { background: rgb(253, 231, 231); color: rgb(162, 0, 0); }
.hoja .est.esp { background: rgb(241, 244, 247); color: rgb(81, 103, 122); }

/* los datos de una ficha necesitan aire: si la columna es angosta, el texto se corta */
.dl { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }

/* ---- etiquetas de estado compactas ---- */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.tag.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.tag.off { color: var(--ink-3); }
.tag.crit { background: var(--crit-soft); border-color: var(--crit); color: var(--crit-ink); font-weight: 600; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

/* ---- matriz de módulos por empresa ---- */
.matriz { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.matriz th, .matriz td { border-bottom: 1px solid var(--line-soft); padding: 9px 8px; }
.matriz thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-family: "IBM Plex Mono", monospace; font-weight: 500; vertical-align: bottom; }
.matriz th:first-child, .matriz td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 230px; }
.matriz thead th:first-child { z-index: 3; background: var(--surface-2); }
.matriz td { text-align: center; }
.matriz tbody tr:hover td { background: var(--surface-2); }
.matriz tbody tr:hover td:first-child { background: var(--surface-2); }
.sw-mini { width: 30px; height: 18px; border-radius: 20px; background: var(--surface-3); border: 1px solid var(--line); position: relative; display: inline-block; cursor: pointer; transition: background .15s; }
.sw-mini::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 .16s; }
[aria-pressed="true"] > .sw-mini, .sw-mini[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.sw-mini[aria-pressed="true"]::after { transform: translateX(12px); }
button.celda { border: 0; background: none; padding: 4px; cursor: pointer; }

.demo-sep { width:100%; margin:10px 0 2px; font-size:11.5px; color:var(--ink-3); }
.demo-users button { max-width:100%; }

/* ---- módulos que el cliente puede sumar ---- */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mod-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; background: var(--surface-2); }
.mod-card.pedido { border-color: var(--warn); background: var(--warn-soft); }
.mod-card b { font-size: 13.5px; }

/* ---- tablas dentro del cajón: entran justas, sin barra lateral ---- */
.drawer-body table { font-size: 12px; }
.drawer-body th, .drawer-body td { padding: 8px 7px; }
.drawer-body .hintline { font-size: 10.5px; }

/* ---- paginado de tablas largas ---- */
.paginado { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 2px 2px; }
.pag-nums { display: flex; align-items: center; gap: 4px; }
.pag-btn { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); border-radius: var(--radius-sm);
  font: inherit; font-size: 12.5px; cursor: pointer; }
.pag-btn:hover { border-color: var(--accent-line); color: var(--ink); }
.pag-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pag-sep { color: var(--ink-3); padding: 0 2px; }

/* ---- carga de conceptos de un documento electrónico ---- */
.de-lista { display: grid; gap: 6px; margin-bottom: 10px; }
.de-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.de-item b { font-size: 13px; }
.de-alta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.de-alta .input { flex: 1; min-width: 120px; }

/* ---- KuDE: la representación gráfica del documento ---- */
.kude-cab { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.kude-caja { border: 1.5px solid var(--ink); border-radius: 4px; padding: 10px 14px;
  text-align: center; min-width: 210px; }
.kude-tipo { font-size: 10px; letter-spacing: .1em; margin: 8px 0 2px; color: var(--ink-2); }
.kude-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.kude-datos span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.kude-datos b { font-size: 13px; }
.kude-iva { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end;
  padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.kude-pie { display: flex; gap: 18px; align-items: flex-start; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.kude-qr { text-align: center; flex: 0 0 auto; }
.kude-qr-marco { width: 92px; height: 92px; border: 2px dashed var(--line); border-radius: 4px;
  display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-3); }
.kude-cdc { flex: 1; min-width: 0; }

/* ---- atajos de monto en el recibo de dinero ---- */
#pg-pre-atajos { flex-wrap: wrap; }
#pg-pre-atajos button { flex: 1; min-width: 110px; padding: 8px 10px; line-height: 1.25; }

/* ---------- el cartelito de la nube ---------- */
.nube-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  white-space: nowrap; cursor: default;
}
.nube-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.nube-chip.nube-ok   { color: var(--good-ink);  border-color: var(--good-line, var(--line)); }
.nube-chip.nube-va   { color: var(--warn-ink); }
.nube-chip.nube-mal  { color: var(--bad-ink); }
.nube-chip.nube-demo { color: var(--muted); }
.nube-chip.nube-va i { animation: nubelate 1.1s ease-in-out infinite; }
@keyframes nubelate { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (max-width: 720px) { .nube-chip span { display: none; } .nube-chip { padding: 5px 8px; } }

/* ---------- la banda de demostración ---------- */
.banda-demo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--warn-bg, rgba(200,150,20,.10));
  border: 1px solid var(--warn-line, var(--line));
  color: var(--warn-ink); font-size: 12.5px;
}
.banda-demo svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.banda-demo[hidden] { display: none; }

/* ---------- botón de algo que no se deshace ---------- */
.btn-danger { background: var(--bad-ink); border-color: var(--bad-ink); color: #fff; font-weight: 600; }
.btn-danger:hover { filter: brightness(1.08); }

/* ============================================================
   PANTALLAS — teléfono, tablet y computadora
   ------------------------------------------------------------
   En el iPhone la pantalla se corría de costado al hacer scroll
   y tapaba columnas. La causa eran las tablas: se movían de
   costado y para abajo al mismo tiempo, con el encabezado y la
   primera columna pegados. Safari, en ese caso, arrastra la
   página entera con el dedo. Acá se corta eso de raíz y además
   se le pone freno al desborde lateral del documento, venga de
   donde venga.
   ============================================================ */

/* ---------- 1. la página nunca se mueve de costado ---------- */
/* EL SCROLL VERTICAL NO SE TOCA.
   Acá había `overflow-x: clip` sobre html. Parece inofensivo, pero el CSS
   dice que si un eje es `clip` el otro deja de ser `visible` y pasa a
   `clip` también: el resultado era una página SIN scroll vertical. En el
   celular y en la tablet el contenido quedaba cortado y no había forma de
   bajar. El recorte horizontal se hace solo en el body, con `hidden`, que
   sí deja el eje vertical desplazable. */
/* `overscroll-behavior-y: contain` apaga el "tirar para recargar".
   En el celular, cuando se hace scroll seguido y se llega al final,
   el rebote de vuelta arriba dispara la recarga de la página: el
   sistema se ve como si te hubiera sacado al ingreso. Acá se corta
   ese gesto. */
html { max-width: 100%; overscroll-behavior-x: none; overscroll-behavior-y: contain; }
body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; overscroll-behavior-y: contain; }

/* el panel del menú vive fuera de la pantalla todo el tiempo. Con
   sombra, el navegador lo mantiene dibujado aunque no se vea, y esa
   memoria en el iPhone se paga cara. Sombra solo cuando está abierto. */
body:not(.menu-abierto) .side { box-shadow: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* cada zona que sí se mueve de costado se queda el movimiento
   en vez de pasárselo a la página */
.table-wrap, .subnav, .seg, .side, .paginado, .de-lista, .picker, .modal, .drawer {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* OJO: acá decía `overscroll-behavior: contain` a secas, o sea los DOS ejes.
   La tabla ocupa casi toda la pantalla del celular, y contener el eje
   vertical en un contenedor que no tiene nada que desplazar hacia abajo
   significa que el gesto muere ahí: el dedo arrastra sobre la tabla y la
   página no se mueve. Ese era el "no me deja hacer scroll" de Android.
   Se contiene solo el eje horizontal, que es lo que se quería: que el
   desplazamiento lateral de la tabla no dispare el "volver atrás" del
   navegador. El vertical se le pasa a la página, como corresponde. */
.table-wrap {
  overscroll-behavior-x: contain; overscroll-behavior-y: auto;
}

/* ---------- 2. el alto real de la pantalla ----------
   En el celular la barra del navegador aparece y desaparece:
   100vh miente y deja la interfaz cortada. */
@supports (height: 100dvh) {
  .app   { min-height: 100dvh; }
  /* ojo: en el teléfono la barra de menú es una tira arriba y su
     alto lo decide el contenido, no la pantalla */
  @media (min-width: 761px) { .side { height: 100dvh; } }
  .drawer { height: 100dvh; }
  .login { min-height: 100dvh; }
  .modal { max-height: 88dvh; }
  .bloqueo, .pwa-modal { min-height: 100dvh; }
  .table-wrap.scrollable { max-height: min(68dvh, 620px); }
}

/* ---------- 3. teléfono ---------- */
@media (max-width: 760px) {
  /* la tabla se mueve solo de costado: sin encabezado pegado no
     hay dos movimientos peleándose */
  .table-wrap.scrollable { max-height: none; }
  .table-wrap.scrollable th { position: static; }
  .matriz thead th { position: static; }

  /* el notch y el indicador de inicio */
  .topbar, .view, .subnav { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .toast { bottom: calc(26px + env(safe-area-inset-bottom)); }
  .pwa-aviso { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .drawer { padding-bottom: env(safe-area-inset-bottom); }

  /* nada estira la pantalla de más */
  .card, .kpi, .view > *, .modal-body > * { min-width: 0; max-width: 100%; }
  .card-head { flex-wrap: wrap; row-gap: 4px; }
  .card-head .hint { white-space: normal; }

  /* botones que se puedan tocar con el dedo */
  .btn { min-height: 40px; padding: 9px 13px; }
  .btn-sm { min-height: 34px; padding: 6px 10px; }
  .nav-item { min-height: 40px; }
  .x { min-width: 36px; min-height: 36px; }

  /* el cajón y los modales, de borde a borde */
  .drawer { width: 100%; border-left: 0; }
  .modal { width: calc(100% - 20px); max-height: 92dvh; }
  .extra-grid { grid-template-columns: 1fr; }
}

/* ---------- 4. tablet ----------
   El iPad tiene lugar de sobra para el menú de siempre: no hay
   por qué darle la tira apretada del teléfono. */
@media (min-width: 761px) and (max-width: 1100px) {
  .app { grid-template-columns: 200px 1fr; }
  .side {
    position: sticky; top: 0; height: 100vh;
    flex-direction: column; align-items: stretch;
    overflow-x: visible; overflow-y: auto;
    border-right: 1px solid var(--line); border-bottom: 0;
  }
  .brand { padding: 16px 14px 12px; }
  .brand-sub { display: block; }
  .nav { flex-direction: column; padding: 8px; gap: 2px; }
  .nav-label { display: block !important; }
  .nav-item { white-space: normal; }
  .side-foot { display: block; }
  .view, .topbar, .subnav { padding-left: 18px; padding-right: 18px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .view .grid { grid-template-columns: 1fr !important; }
}
@supports (height: 100dvh) {
  @media (min-width: 761px) and (max-width: 1100px) { .side { height: 100dvh; } }
}

/* ---------- 5. computadora ----------
   En un monitor grande no hace falta cambiar la estructura: lo
   que molesta es que todo quede pegado a los bordes y que las
   tarjetas se estiren de más. */
@media (min-width: 1500px) {
  .app { grid-template-columns: 260px 1fr; }
  .view { padding-left: 34px; padding-right: 34px; }
  .topbar, .subnav { padding-left: 36px; padding-right: 36px; }
}
@media (min-width: 1900px) {
  .view { padding-left: 56px; padding-right: 56px; }
  .topbar, .subnav { padding-left: 58px; padding-right: 58px; }
  .kpis { gap: 18px; }
}

/* ---------- 6. lo que se toca con el dedo ----------
   Y sobre todo: en el iPhone, si un campo tiene letra menor a
   16px, Safari hace zoom solo al tocarlo. Una vez con zoom, la
   pantalla queda más ancha que lo que se ve, y al hacer scroll
   se corre para el costado tapando campos. Ese era el problema.
   Con 16px no hay zoom y no hay corrimiento.                  */
@media (pointer: coarse) {
  .input, select.input, textarea.input, input, select, textarea {
    font-size: 16px;
  }
  .input { padding: 9px 11px; }

  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; padding: 7px 11px; }
  .seg button { min-height: 34px; padding: 7px 12px; font-size: 13px; }
  .nav-item { min-height: 40px; }
  .x { min-width: 38px; min-height: 38px; }
  .tenant, .user-chip { min-height: 42px; }
  .opt-row { min-height: 44px; }
  .pag-btn { min-height: 34px; min-width: 34px; }
  .table-wrap td .btn-sm { min-height: 32px; }
  th.ord { padding-top: 10px; padding-bottom: 10px; }
  .tabs button, .subnav button { min-height: 38px; }
  input[type="checkbox"], input[type="radio"] { width: 19px; height: 19px; }
}

/* las pastillas de estado no empujan la tarjeta fuera de pantalla */
.emp-card > .row, .row.pills, .card-head { flex-wrap: wrap; row-gap: 6px; }
.pill { max-width: 100%; }

/* ---------- 7. últimos detalles de pantalla chica ---------- */
@media (pointer: coarse) {
  button.celda { min-width: 38px; min-height: 38px; padding: 8px; }
}
@media (max-width: 520px) {
  /* la ficha de una falla no puede ser más ancha que el teléfono */
  .falla, .falla .row, .falla .hintline { min-width: 0; max-width: 100%; }
  .falla .row { flex-wrap: wrap; row-gap: 6px; }
  .falla .hintline, .falla span.hintline { white-space: normal; overflow-wrap: anywhere; }
  /* los botones de acción de una tarjeta se acomodan solos */
  .emp-card .row .btn, .emp-card .btn-sm { flex: 0 1 auto; }
  .emp-modulos .row { flex-wrap: wrap; row-gap: 8px; }
  .mono { overflow-wrap: anywhere; }
}

/* ---------- 8. ninguna grilla más ancha que la pantalla ----------
   Una columna mínima de 330px no entra en un teléfono de 320:
   la tarjeta se sale. Con min() la columna nunca pide más de lo
   que hay.                                                     */
.fallas      { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.mod-grid    { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.perm-grid   { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.niche-grid  { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.kude-datos  { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.dl          { grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)); }
.emp-card .dl { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.hoja .resumen { grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); }

/* ---------- 9. la barra de arriba en pantalla chica ----------
   El título, la identidad y los botones de acción no entran en
   una sola línea: que los botones bajen a su propio renglón en
   vez de dejar la identidad colgada sola. */
@media (max-width: 1100px) {
  .nube-chip span { display: none; }
  .nube-chip { padding: 5px 8px; }
}
@media (max-width: 760px) {
  .topbar { padding-top: 10px; padding-bottom: 10px; gap: 8px; row-gap: 8px; }
  #tb-titulo { flex: 1 1 0; min-width: 0; order: 1; }
  .topbar h1 { font-size: 18px; }
  .topbar .sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  #nube-chip { order: 2; }
  #btn-theme { order: 3; }
  #user-chip { order: 4; }
  .topbar-actions { order: 5; width: 100%; margin-left: 0; justify-content: flex-start; }
  .topbar-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 10. el menú del teléfono ----------
   Una tira horizontal con veinticinco secciones obliga a
   rastrear con el dedo para encontrar cualquier cosa. En el
   teléfono el menú pasa a ser un panel que se abre con el
   botón de la barra: mismas secciones, mismos títulos de
   grupo, y se cierra solo al elegir.                        */
#btn-menu { display: none; }
@media (max-width: 760px) {
  #btn-menu { display: inline-flex; order: 0; flex: 0 0 auto; }
  #btn-menu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }

  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; top: 0; left: 0; z-index: 75;
    width: min(286px, 86vw); height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch;
    overflow-x: hidden; overflow-y: auto;
    border-right: 1px solid var(--line); border-bottom: 0;
    transform: translateX(-102%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.menu-abierto .side { transform: none; }
  .brand { padding: 16px 16px 12px; }
  .brand-sub { display: block; }
  .nav { flex-direction: column; padding: 8px; gap: 2px; overflow: visible; }
  .nav-label { display: block !important; }
  .nav-item { white-space: normal; min-height: 42px; }
  .side-foot { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

/* ---------- 11. los indicadores, de a dos en el teléfono ----------
   Cuatro tarjetas apiladas obligan a bajar toda la pantalla para
   ver el último número. De a dos entran los cuatro de una. */
@media (min-width: 361px) and (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .kpi .value { font-size: 19px; }
  .kpi .label { font-size: 9px; }
  .kpi .foot { font-size: 10.5px; }
}

/* ---------- 12. la barra de arriba, en una sola línea ----------
   El cartelito de la nube empujaba la identidad a un segundo
   renglón en las pantallas de portátil. Que el título ceda
   espacio antes de que algo se caiga de la línea. */
#tb-titulo { flex: 1 1 0; min-width: 0; }
#tb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* la banda de demostración respeta el margen de la pantalla */
.banda-demo { margin: 12px 24px; }
@media (max-width: 1100px) { .banda-demo { margin: 12px 18px; } }
@media (max-width: 760px)  { .banda-demo { margin: 10px 16px; } }

/* ---------- espacio de firma en el compromiso de pago ---------- */
.firmas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 26px 30px; margin-top: 46px;
}
.firma { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.firma .linea-firma { display: block; border-top: 1px solid #51677A; margin-bottom: 7px; }
.firma b { font-size: 12.5px; }
.firma span { font-size: 10.5px; color: #7F92A2; }
@media (max-width: 560px) { .firmas { gap: 30px; margin-top: 36px; } }

/* ============================================================
   PANTALLA CHICA — MODALES, CAJONES Y HOJAS
   ------------------------------------------------------------
   La pantalla principal ya entraba; lo que faltaba era todo lo
   que se abre encima: los formularios, las fichas de detalle y
   las hojas para imprimir. Una hoja está pensada para papel A4,
   así que en el teléfono se mira de costado en su propia caja,
   sin arrastrar la pantalla entera.
   ============================================================ */

/* nada dentro de un modal o un cajón empuja más allá de su ancho */
.modal, .modal-body, .drawer, #drawer-body { min-width: 0; }
.modal-body > *, #drawer-body > * { max-width: 100%; }
.modal-body .row, #drawer-body .row, .modal-body .card-head { flex-wrap: wrap; row-gap: 8px; }
.modal-body .eyebrow, #drawer-body .eyebrow { width: 100%; }

/* la hoja imprimible: se lee de costado adentro de su caja */
.hoja { max-width: 100%; }
.hoja-head { flex-wrap: wrap; row-gap: 10px; }
.hoja-num { margin-left: auto; min-width: 0; overflow-wrap: anywhere; }
.hoja table { width: 100%; }

@media (max-width: 760px) {
  .hoja { padding: 18px 16px; font-size: 12px; }
  .hoja-logo { width: 46px; height: 46px; font-size: 16px; }
  .hoja-emisor b { font-size: 15px; }
  .hoja-num { margin-left: 0; text-align: left; width: 100%; }
  .hoja-num b { font-size: 15px; }
  /* la tabla de cuotas no cabe: se desliza sola, sin llevarse la página */
  .hoja table {
    display: block; overflow-x: auto; overscroll-behavior-x: contain;
    white-space: nowrap; font-size: 11.5px;
  }
  .hoja table td, .hoja table th { padding-left: 7px; padding-right: 7px; }
  #recibo-hoja { max-width: 100%; overflow-x: auto; }

  /* la tabla chica de cuotas dentro de una ficha */
  .mini-tabla { display: block; overflow-x: auto; overscroll-behavior-x: contain; }
  .mini-tabla td { white-space: nowrap; }

  /* los renglones de dos columnas se apilan */
  .split, .extra-grid { grid-template-columns: 1fr; }
  .opt-row { flex-wrap: wrap; row-gap: 4px; }
  .opt-row .des { white-space: normal; }
  .precio-mod { margin-left: 0; }

  /* los campos de un ítem de presupuesto no pueden quedar en 36px */
  #pre-items input, #oc-items input, #de-items input { min-width: 62px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* en pantalla muy angosta la ficha respira menos y entra */
@media (max-width: 380px) {
  .drawer-body, #drawer-body { padding-left: 14px; padding-right: 14px; }
  .hoja { padding: 14px 12px; }
}

/* el renglón de un ítem: en pantalla angosta la descripción se va
   arriba y abajo quedan cantidad, precio y el botón de quitar */
@media (max-width: 420px) {
  .item-row { grid-template-columns: 1fr 96px 30px; grid-auto-rows: min-content; }
  .item-row > *:first-child { grid-column: 1 / -1; }
}

/* ---------- lo primero que se mira al dar un préstamo ---------- */
.ganancia-linea {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line);
}
.ganancia-linea > span:first-child { color: var(--ink-2); min-width: 0; }
.ganancia-monto {
  margin-left: auto; font-weight: 700; font-size: 17px; color: var(--good-ink);
  white-space: nowrap;
}
@media (max-width: 480px) { .ganancia-monto { margin-left: 0; font-size: 16px; } }

/* ---------- la fila de cobranza ----------
   Cinco cosas en una fila —nombre, teléfono, concepto, monto y tres
   botones— entran cómodas en un monitor y se estrangulan en un
   teléfono: el nombre quedaba en una columna de cuarenta píxeles y
   se partía en ocho renglones, la fila medía casi trescientos y el
   ancho se iba de la pantalla. Acá la fila se arma en dos alturas
   cuando no hay lugar: arriba a quién y cuánto, abajo los botones. */
.cobro-row { align-items: center; flex-wrap: wrap; }
.cobro-quien { min-width: 0; flex: 1 1 190px; }
.cobro-monto { text-align: right; margin-right: 10px; flex: 0 0 auto; }
.cobro-botones { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px) {
  .cobro-quien { flex: 1 1 100%; }
  .cobro-monto { text-align: left; margin-right: 0; }
  .cobro-botones { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .cobro-botones .btn { padding-left: 10px; padding-right: 10px; }
}

/* ============================================================
   EL TELEFONO Y LAS TABLAS
   ------------------------------------------------------------
   Dos cosas que por separado son inofensivas y juntas hacen caer
   a Safari en el iPhone y en el iPad:

     1. La primera columna quedaba "pegada" al costado y el
        encabezado "pegado" arriba. La celda de la esquina quedaba
        pegada en los dos sentidos a la vez, adentro de una tabla
        que se mueve en los dos sentidos, adentro de una página que
        ya tiene la barra superior pegada. WebKit tiene que
        redibujar esa esquina en cada cuadro del scroll, y con el
        dedo apoyado se cae.

     2. La tabla tenía su propio alto máximo, o sea una ventanita
        que se desplaza adentro de una página que también se
        desplaza. Dos scrolls encimados, en una pantalla de cinco
        pulgadas, no aportan nada y multiplican el trabajo.

   En el teléfono se apagan las dos. Se pierde que el nombre quede
   fijo al mover de costado; se gana que no se cierre. En la
   computadora todo sigue igual.

   OJO CON EL ANCHO. La primera versión de este arreglo miraba el
   ancho de pantalla, y ahí se me escapó el iPad: con 1024 píxeles
   entra en el diseño ancho y no recibía nada. Pero el problema no
   es el ancho, es el dedo: lo que hace caer al navegador es el
   scroll con inercia sobre una esquina pegada en dos sentidos, y
   eso pasa igual en una tablet grande. Por eso la condición
   verdadera es `pointer: coarse` —se maneja con el dedo—, y el
   ancho queda solo como respaldo para navegadores viejos que no
   entienden esa consulta.

   Las vendedoras del cliente trabajan con iPad. Este bloque es
   para ellas.
   ============================================================ */
@media (pointer: coarse) {
  .table-wrap td:first-child,
  .table-wrap th:first-child,
  .matriz th:first-child,
  .matriz td:first-child,
  .matriz thead th { position: static; }

  .table-wrap.scrollable { max-height: none; }
  .table-wrap.scrollable th { position: static; }
}
@media (max-width: 760px) {
  .table-wrap td:first-child,
  .table-wrap th:first-child,
  .matriz th:first-child,
  .matriz td:first-child,
  .matriz thead th { position: static; }

  .table-wrap.scrollable { max-height: none; }
  .table-wrap.scrollable th { position: static; }
}

/* ============================================================
   EL HUECO DE LA CÁMARA
   ------------------------------------------------------------
   Del iPhone X en adelante la pantalla no es un rectángulo: le
   falta un pedazo arriba —la muesca o la isla— y abajo tiene la
   barrita para volver al inicio.

   El sistema pide `viewport-fit=cover`, que quiere decir "usá la
   pantalla entera, hasta debajo de la muesca". Eso está bien para
   el fondo, pero el texto y los botones no pueden quedar ahí
   abajo. Acostado, la muesca se corre al costado y se come el
   borde izquierdo: el título, el botón del menú y la primera
   columna de la tabla quedan tapados.

   `env(safe-area-inset-*)` es lo que el teléfono responde cuando
   se le pregunta cuánto hay que correrse. En un teléfono sin
   muesca contesta cero y no cambia nada.

   Se usa max() y no una suma, para no agrandar el margen de los
   equipos que no tienen muesca.
   ============================================================ */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 760px) {
  .topbar, .subnav, .view, .barra-prov {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .login { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
  .side { padding-left: env(safe-area-inset-left); }
  .drawer { padding-right: env(safe-area-inset-right); }
}
@media (orientation: landscape) and (pointer: coarse) and (min-width: 761px) and (max-width: 1100px) {
  .topbar, .subnav, .view, .barra-prov {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .login { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
  .side { padding-left: env(safe-area-inset-left); }
  .drawer { padding-right: env(safe-area-inset-right); }
}

/* La barrita de abajo tapa lo último de la pantalla. Los botones de
   guardar de un modal y el cartelito de aviso son justo lo que cae
   ahí, así que se levantan lo que haga falta —y nada, si el equipo
   no tiene barrita—. */
.modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.drawer-body { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
.toast { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
.pwa-aviso { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   LAS HOJAS QUE SIGUEN SIENDO HTML
   ------------------------------------------------------------
   El recibo, el plan, el compromiso y el presupuesto se dibujan
   en el papel de Cobralo (js/30-papel.js) y salen como imagen.
   El extracto de cuenta no: puede tener veinte créditos y se
   imprime en varias hojas, y para eso el HTML sirve mejor.

   Lo que no puede pasar es que se vea de otra casa. Acá se le
   pone la misma paleta y la misma tira de encabezado que usa el
   papel: mismo azul, misma línea gruesa, mismo verde del total.
   ============================================================ */
.hoja-head { border-bottom: 4px solid var(--accent); }
.hoja-num b { color: var(--accent); }
.hoja-logo { color: var(--accent); background: var(--accent-soft); }

.hoja th {
  background: var(--accent);
  color: #FFFFFF;
  border-bottom: 0;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
}
.hoja td { border-bottom: 1px solid #EDF1F5; }

.hoja-tot div.final {
  background: var(--good-soft);
  color: var(--good-ink);
  border-top: 0;
  border-radius: 8px;
  padding: 11px 13px;
  margin-top: 8px;
}
.hoja-tot div.final span:last-child { color: var(--good-ink); }

/* los rótulos chicos de las secciones, como en el papel */
.hoja .bloque > h3 {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: rgb(20, 35, 47); font-weight: 600;
}

/* El texto que acompaña a cada documento: no se ve, pero está.
   Un lector de pantalla lo lee, se puede copiar y Ctrl+F lo encuentra.
   No se usa `display:none` porque eso lo saca también del lector. */
.papel-texto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: pre-wrap; border: 0;
}
@media print { .papel-texto { display: none; } }

/* La píldora de antigüedad lleva su color por atributo, porque el tramo
   lo decide el JavaScript. Acá solo se le da la forma; el color de cada
   tramo es el mismo que el de la barra de arriba. */
.pill.antig { font-weight: 600; }
.pill.antig i { opacity: .9; }

/* ---- el ojo de las contraseñas ---- */
.clave-wrap { position: relative; display: block; width: 100%; }
.clave-wrap > .input { padding-right: 44px; width: 100%; }
.clave-wrap > .ojo { position: absolute; top: 0; right: 0; bottom: 0; width: 42px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-3); -webkit-tap-highlight-color: transparent; }
.clave-wrap > .ojo svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.clave-wrap > .ojo:hover, .clave-wrap > .ojo[aria-pressed="true"] { color: var(--accent); }
.btn-texto { display: block; margin: 10px auto 0; background: none; border: 0; padding: 6px 8px; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* el tema elegido a mano manda: ni el navegador lo puede oscurecer
   (Android, "tema oscuro para sitios") ni aclarar */
:root[data-theme="light"] { color-scheme: only light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* texto que se toca como un link, sin pinta de botón */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.linklike:hover b, .linklike:focus-visible b { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#mv-picker .picker-sel { flex-wrap: wrap; }
#mv-picker .picker-sel > div { flex: 1 1 160px; }
@media (max-width: 520px) { #mv-picker #mv-quitar { width: 100%; justify-content: center; } }

/* cierre de caja: dos tarjetas lado a lado, una debajo de otra en el teléfono */
.ci-dos { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .ci-dos { grid-template-columns: 1fr; } }

.pp-dos { grid-template-columns: 1.35fr 1fr; }
@media (max-width: 760px) { .pp-dos { grid-template-columns: 1fr; } }

@charset "utf-8";

/* ==========================================================================
   IDENTIDAD DE COBRALO
   --------------------------------------------------------------------------
   Nada se mueve de lugar. Esta hoja solo cambia el color, el aire y el peso
   de lo que ya está: la estructura, las clases y el marcado quedan intactos.

   De dónde sale la marca:
     · Verde profundo (#0A6E62). Todos los sistemas de cobranza del mercado
       son azul corporativo. El verde petróleo se lee como plata seria sin
       parecerse a un banco, y es el mismo que usa la presentación, así que
       la propuesta y el producto se ven de la misma familia.
     · Ocre (#7A5A12) para la plata que entra y el oro de la ganancia.
     · Papel apenas cálido en vez de gris azulado: cansa menos la vista en
       una pantalla que se mira ocho horas.
   ========================================================================== */

:root {
  /* --- superficies: papel cálido, no gris de oficina --- */
  --plane:      #F2F4F2;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAF8;
  --surface-3:  #E9EEEB;

  /* --- tinta: negro verdoso, más suave que el negro puro --- */
  --ink:        #16211F;
  --ink-2:      #4B5B57;
  --ink-3:      #798984;
  --line:       rgba(22, 33, 31, .13);
  --line-soft:  rgba(22, 33, 31, .065);

  /* --- el verde de Cobralo --- */
  --accent:       #0A6E62;
  --accent-hover: #085B51;
  --accent-ink:   #FFFFFF;
  --accent-soft:  #E4F0EE;
  --accent-line:  rgba(10, 110, 98, .30);

  /* --- semáforo de la cartera ---
     OJO con estos tres. En la pantalla de cobranza no son decoración:
     son la diferencia entre "se atrasó tres días" y "hace tres meses
     que no paga", y quien sale a cobrar decide a quién llama primero
     mirando el color, no leyendo los números.

     Estaban en #A8631C y #A8431C: dos marrones que se diferencian en
     un solo canal. Puestos uno al lado del otro en la barra de
     antigüedad parecían el mismo, y el semáforo no semaforeaba nada.

     Ahora son tres tonos de familias distintas —verde, ámbar, rojo—,
     apagados para convivir con el verde de la marca, pero separados
     de verdad. */
  --good:      #14713F;
  --good-ink:  #0F5E33;
  --good-soft: rgba(20, 113, 63, .10);
  --warn:      #C87A0C;
  --warn-ink:  #96590A;
  --warn-soft: rgba(200, 122, 12, .12);
  --crit:      #B32318;
  --crit-ink:  #8F1C13;
  --crit-soft: rgba(179, 35, 24, .10);

  /* --- plata: el ocre que marca lo que entra --- */
  --dinero:      #7A5A12;
  --dinero-soft: rgba(122, 90, 18, .09);

  /* --- gráficos --- */
  --s1:   #0A6E62;
  --s2:   #7A5A12;
  --grid: #DCE3DF;
  --axis: #BFCAC5;

  /* --- profundidad: dos capas suaves en vez de una dura --- */
  --shadow:    0 1px 2px rgba(22,33,31,.05), 0 6px 20px rgba(22,33,31,.055);
  --shadow-lg: 0 2px 4px rgba(22,33,31,.06), 0 18px 48px rgba(22,33,31,.10);
  --radius:    9px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plane: #0D1413; --surface: #141D1B; --surface-2: #1A2422; --surface-3: #222E2B;
    --ink: #E8EFEC; --ink-2: #A6B5B0; --ink-3: #7C8B86;
    --line: rgba(232,239,236,.14); --line-soft: rgba(232,239,236,.065);
    --accent: #4FBFAE; --accent-hover: #6FD0C1; --accent-ink: #082019;
    --accent-soft: rgba(79,191,174,.13); --accent-line: rgba(79,191,174,.32);
    --good: #45B072; --good-ink: #6BC591; --good-soft: rgba(69,176,114,.15);
    --warn: #E9A33C; --warn-ink: #F2BC6B; --warn-soft: rgba(233,163,60,.16);
    --crit: #EE6B5C; --crit-ink: #F79184; --crit-soft: rgba(238,107,92,.16);
    --dinero: #D6B65E; --dinero-soft: rgba(214,182,94,.13);
    --s1: #4FBFAE; --s2: #D6B65E; --grid: #24312E; --axis: #33423E;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.38);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.55), 0 20px 52px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --plane: #0D1413; --surface: #141D1B; --surface-2: #1A2422; --surface-3: #222E2B;
  --ink: #E8EFEC; --ink-2: #A6B5B0; --ink-3: #7C8B86;
  --line: rgba(232,239,236,.14); --line-soft: rgba(232,239,236,.065);
  --accent: #4FBFAE; --accent-hover: #6FD0C1; --accent-ink: #082019;
  --accent-soft: rgba(79,191,174,.13); --accent-line: rgba(79,191,174,.32);
  --good: #45B072; --good-ink: #6BC591; --good-soft: rgba(69,176,114,.15);
  --warn: #E9A33C; --warn-ink: #F2BC6B; --warn-soft: rgba(233,163,60,.16);
  --crit: #EE6B5C; --crit-ink: #F79184; --crit-soft: rgba(238,107,92,.16);
  --dinero: #D6B65E; --dinero-soft: rgba(214,182,94,.13);
  --s1: #4FBFAE; --s2: #D6B65E; --grid: #24312E; --axis: #33423E;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.38);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.55), 0 20px 52px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   LA MARCA EN EL COSTADO
   El nombre pasa a leerse como un logotipo: más apretado, con el punto
   verde que se repite en el avatar del negocio.
   -------------------------------------------------------------------------- */
.brand { padding: 20px 18px 15px; }

.brand-name {
  font-size: 17.5px;
  letter-spacing: .015em;
  font-weight: 700;
  text-transform: none;
}
.brand-name span { color: var(--accent); }
/* el punto final del logotipo: chico, verde, siempre ahí */
.brand-name::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: baseline;
}
.brand-sub { letter-spacing: .16em; font-size: 9px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   NAVEGACIÓN
   La pantalla en la que estás se marca con una barra verde a la izquierda,
   no solo con un fondo: se encuentra de un vistazo.
   -------------------------------------------------------------------------- */
.nav-item {
  border-left: 2.5px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background .12s ease, color .12s ease;
}
.nav-item[aria-current="true"] {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.nav-label { letter-spacing: .16em; }

.tenant { border-radius: var(--radius); }
.tenant-badge {
  border-radius: 9px;
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* --------------------------------------------------------------------------
   TARJETAS Y PANELES
   Antes eran rectángulos con una línea alrededor. Ahora tienen una sombra
   apenas perceptible: se despegan del papel sin gritar.
   -------------------------------------------------------------------------- */
.card, .kpi, .panel, .box {
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(22,33,31,.045);
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .box {
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* el número grande de un KPI es el dato, no el rótulo: que pese */
.kpi b, .kpi-valor, .kpi .valor {
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   TABLAS
   Los montos alineados con cifras de igual ancho: una columna de guaraníes
   se compara de un golpe de vista, sin leer número por número.
   -------------------------------------------------------------------------- */
table { font-variant-numeric: tabular-nums; }
thead th {
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 600;
}
tbody tr { transition: background .1s ease; }

/* --------------------------------------------------------------------------
   BOTONES
   El principal deja de ser un rectángulo plano: gana un borde superior claro
   que le da volumen, como una tecla.
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--radius-sm); transition: background .12s ease, border-color .12s ease; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(22,33,31,.12);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* --------------------------------------------------------------------------
   LA PLATA
   Lo que entra se escribe en ocre. Es el único color que no es del semáforo,
   y por eso se nota: "acá hay dinero".
   -------------------------------------------------------------------------- */
.ganancia-monto, .monto-fuerte { color: var(--dinero); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   MODALES, CAJONES Y HOJAS
   Más redondeo arriba y una sombra larga: se ve que están por encima.
   -------------------------------------------------------------------------- */
.modal { border-radius: 14px; box-shadow: var(--shadow-lg); }
.drawer { box-shadow: var(--shadow-lg); }
.modal-head { border-top-left-radius: 14px; border-top-right-radius: 14px; }

/* en el celular el modal sube desde abajo: se redondea solo arriba */
@media (max-width: 560px) {
  .modal { border-radius: 16px 16px 0 0; }
  .modal-head { border-radius: 16px 16px 0 0; }
}

/* --------------------------------------------------------------------------
   LA PANTALLA DE ENTRADA
   Es lo primero que ve el cliente en la demostración. Un fondo apenas teñido
   de verde alcanza para que no parezca una página en blanco.
   -------------------------------------------------------------------------- */
.login, #login { background: var(--plane); }
/* los dos degradados grandes son adorno de escritorio: en el teléfono
   son dos capas enormes que el navegador tiene que pintar y guardar
   antes de mostrar nada, justo en el momento más frágil del arranque */
@media (hover: hover) and (pointer: fine) {
  .login, #login {
    background:
      radial-gradient(1100px 620px at 12% -12%, rgba(10,110,98,.10), transparent 62%),
      radial-gradient(900px 520px at 92% 108%, rgba(122,90,18,.07), transparent 60%),
      var(--plane);
  }
}

/* --------------------------------------------------------------------------
   DETALLES FINOS
   -------------------------------------------------------------------------- */
.pill, .chip, .badge { border-radius: 999px; }
:focus-visible { outline-color: var(--accent); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* la barra de la consola de Avati: verde oscuro, para que nunca se confunda
   con la pantalla del negocio */
.banda-demo { border-radius: 0; }

/* --------------------------------------------------------------------------
   TABLAS ANCHAS
   La de préstamos no entra en un notebook y se desplaza a lo ancho. Antes
   parecía cortada: la última columna se veía a medias y nada indicaba que
   había más. Ahora el borde se desvanece, que es como se lee "seguí para
   allá", y desaparece solo cuando llegás al final.

   Va SOLO en pantallas con mouse. En el teléfono no: `background-attachment:
   local` obliga al navegador a pintar el degradado del tamaño de todo el
   contenido desplazable —una tabla de sesenta filas por siete columnas— y a
   guardarlo en memoria de video. En Safari de iPhone eso es de lo más caro
   que hay, y una decoración no vale que el sistema se cierre solo.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .table-wrap.scrollable {
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 34px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center / 34px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,   rgba(22,33,31,.10), rgba(22,33,31,0)) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(22,33,31,.10), rgba(22,33,31,0)) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  :root[data-theme="dark"] .table-wrap.scrollable,
  :root:not([data-theme="light"]) .table-wrap.scrollable {
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(20,29,27,0)) left center / 34px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 30%, rgba(20,29,27,0)) right center / 34px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.35), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* la barra de desplazamiento, fina y discreta en vez de gris de sistema */
.table-wrap.scrollable::-webkit-scrollbar { height: 9px; }
.table-wrap.scrollable::-webkit-scrollbar-track { background: transparent; }
.table-wrap.scrollable::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
  border: 2px solid var(--surface);
}
.table-wrap.scrollable::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* --------------------------------------------------------------------------
   AVISO EN VERDE
   Faltaba el par del .warn y el .crit: hay cosas que están bien y también
   merecen decirse —un vuelto ya devuelto, por ejemplo.
   -------------------------------------------------------------------------- */
.msgstrip.ok { border-color: var(--good); background: var(--good-soft); color: var(--good-ink); }

/* ==========================================================================
   UN PANEL CERRADO TIENE QUE ESTAR MUERTO
   --------------------------------------------------------------------------
   El cajón de fichas y el menú del celular se cerraban corriéndose con
   `transform`: se iban de la vista, pero seguían visibles para el navegador,
   con pointer-events activos y ocupando la pantalla entera (el cajón mide
   100% del ancho en un celular). En Android eso alcanzaba para que el dedo
   agarrara el panel en vez de la página: como el panel cerrado no tiene nada
   que desplazar, el gesto se perdía y la pantalla NO SCROLLEABA.

   Corriéndose además `visibility` y `pointer-events`, el panel cerrado deja
   de existir para el toque y para el lector de pantalla. La visibilidad se
   demora lo que dura la animación para que la salida se siga viendo.
   ========================================================================== */
.drawer {
  visibility: hidden;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s .26s;
}
.drawer.on {
  visibility: visible;
  pointer-events: auto;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s 0s;
}

@media (max-width: 760px) {
  .side {
    visibility: hidden;
    pointer-events: none;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s .24s;
  }
  body.menu-abierto .side {
    visibility: visible;
    pointer-events: auto;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s 0s;
  }
}

/* con el movimiento reducido no hay animación que esperar */
@media (prefers-reduced-motion: reduce) {
  .drawer, .side { transition: none; }
}

/* --------------------------------------------------------------------------
   TABLAS ALTAS Y DEDOS
   En escritorio, la tabla de préstamos se queda en 620 px con el encabezado
   pegado: cómodo con el mouse y la rueda. Con el dedo es otra cosa: apoyás
   sobre la tabla, arrastrás, y se mueve la tabla por dentro mientras la
   página parece trabada. En el celular ya se sacaba; se saca también en la
   tablet y en cualquier pantalla táctil, que es donde molesta.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .table-wrap.scrollable { max-height: none; }
  .table-wrap.scrollable th { position: static; }
}

/* el logo de la empresa en la cabecera de los papeles */
.hoja-logo-img {
  width: 64px; height: 64px; flex: 0 0 auto;
  object-fit: contain; border-radius: 10px; background: #fff;
}

/* --------------------------------------------------------------------------
   LA FILA QUE SE ABRE
   En Ventas cada fila es un cliente. Tocarla despliega sus deudas ordenadas
   —primero lo vencido, después lo que más falta— sin salir de la lista.
   -------------------------------------------------------------------------- */
.fila-grupo .chevron { transition: transform .18s ease; color: var(--ink-3); }
.fila-grupo.abierta .chevron { transform: rotate(90deg); color: var(--accent); }
.fila-grupo.abierta { background: var(--accent-soft); }
.fila-grupo.abierta td { border-bottom-color: transparent; }

.fila-detalle > td { padding: 0 !important; background: var(--surface-2); }
.detalle-deudas {
  padding: 12px 16px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
}
.detalle-deudas .mini-tabla {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.detalle-deudas .mini-tabla th {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.detalle-deudas .mini-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.detalle-deudas .mini-tabla tbody tr:last-child td { border-bottom: 0; }
.detalle-deudas .mini-tabla tfoot td {
  padding: 9px 10px; border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 12.5px;
}

/* en el celular la tabla de adentro se desplaza de costado, no se apreta */
@media (max-width: 760px) {
  .detalle-deudas { padding: 10px 10px 12px; }
  .detalle-deudas .mini-tabla { display: block; overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap; }
}