/* KDCOINS portal -- design system.
   Ported from the reference panel (zai_saas_pasarela): neutral oklch-like greys, a light-orange
   brand (the KDCOINS logo), a 288px sidebar, KPI cards, pills and a dark theme. Plain CSS (no build step):
   the portal's CSP forbids inline styles and scripts, so everything visual lives here. */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --radius: 0.625rem;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --ink: #111827;
  --ink-soft: #4b5563;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #fb923c;
  --brand-strong: #f97316;
  --brand-soft: #fff1e6;
  --brand-soft-ink: #9a3412;
  --brand-on: #1a1207;
  --brand-text: #c2410c;
  --brand-display: #ea580c;
  --ring: #ea580c;
  --ok: #047857;
  --ok-soft: #d1fae5;
  --warn: #a16207;
  --warn-soft: #fef9c3;
  --bad: #b91c1c;
  --bad-soft: #fee2e2;
  --bad-on: #ffffff;
  --chart-1: #f97316;
  --chart-2: #10b981;
  --chart-3: #6366f1;
  --chart-4: #0ea5e9;
  --chart-5: #f43f5e;
  --code-bg: #f3f4f6;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-lg: 0 12px 32px rgb(16 24 40 / 0.18);
  --sidebar-w: 288px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d10;
    --surface: #17171b;
    --surface-2: #1f1f24;
    --ink: #fafafa;
    --ink-soft: #d4d4d8;
    --muted: #a1a1aa;
    --line: rgb(255 255 255 / 0.11);
    --brand: #fb923c;
    --brand-strong: #fdba74;
    --brand-soft: rgb(251 146 60 / 0.16);
    --brand-soft-ink: #fdba74;
    --brand-on: #1a1207;
    --brand-text: #fdba74;
    --brand-display: #fb923c;
    --ring: #fb923c;
    --ok: #34d399;
    --ok-soft: rgb(52 211 153 / 0.14);
    --warn: #facc15;
    --warn-soft: rgb(250 204 21 / 0.14);
    --bad: #f87171;
    --bad-soft: rgb(248 113 113 / 0.15);
    --bad-on: #0d0d10;
    --chart-1: #fb923c;
    --chart-2: #34d399;
    --chart-3: #818cf8;
    --chart-4: #38bdf8;
    --chart-5: #fb7185;
    --code-bg: #26262c;
    --shadow: none;
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d10;
  --surface: #17171b;
  --surface-2: #1f1f24;
  --ink: #fafafa;
  --ink-soft: #d4d4d8;
  --muted: #a1a1aa;
  --line: rgb(255 255 255 / 0.11);
  --brand: #fb923c;
  --brand-strong: #fdba74;
  --brand-soft: rgb(251 146 60 / 0.16);
  --brand-soft-ink: #fdba74;
  --brand-on: #1a1207;
  --brand-text: #fdba74;
  --brand-display: #fb923c;
  --ring: #fb923c;
  --ok: #34d399;
  --ok-soft: rgb(52 211 153 / 0.14);
  --warn: #facc15;
  --warn-soft: rgb(250 204 21 / 0.14);
  --bad: #f87171;
  --bad-soft: rgb(248 113 113 / 0.15);
  --bad-on: #0d0d10;
  --chart-1: #fb923c;
  --chart-2: #34d399;
  --chart-3: #818cf8;
  --chart-4: #38bdf8;
  --chart-5: #fb7185;
  --code-bg: #26262c;
  --shadow: none;
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.25rem; text-wrap: balance; }
h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem; letter-spacing: -0.005em; }
h3 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem; }
p { margin: 0 0 0.85rem; }
a { color: var(--brand-text); text-underline-offset: 3px; }
a:hover { color: var(--brand-soft-ink); }
code, .mono {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
pre { background: var(--code-bg); padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; font-size: 0.82rem; line-height: 1.6; }
pre code { background: none; padding: 0; }
.muted { color: var(--muted); }
.hint { font-size: 0.8rem; color: var(--muted); }
.tabnums { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { flex: none; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }

/* One scrollbar look everywhere something scrolls -- the sidebar, the page
   itself, a wide table's own horizontal scroll, a modal body -- the brand's
   orange, not a generic grey track. `scrollbar-color`/`-width` (Firefox)
   are inherited, so setting them once on `html` reaches every descendant;
   `::-webkit-scrollbar` (Chrome/Safari/Edge) is not, so it's `*` instead
   of naming each scrollable element one by one. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--brand-strong); }

/* ------------------------------------------------------------------ app shell */
.app { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.brand-row { display: flex; align-items: center; gap: 2px; padding: 4px 4px 12px 4px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px; min-width: 0; flex: 1; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.logo {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  color: var(--brand-on); font-weight: 700; font-size: 13px; letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgb(249 115 22 / 0.35);
}
.brand-mark { flex: none; display: block; width: auto; height: 28px; }
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse-btn { flex: none; border: 0; background: none; }
.sidebar-collapse-btn:hover { background: var(--surface-2); }
.collapse-icon { transition: transform 0.15s ease; transform: rotate(90deg); }
:root.sidebar-collapsed .collapse-icon { transform: rotate(-90deg); }
/* The selected business's own verification badge (a small icon, not text
   any more -- see base.html) -- unverified reads as brand-soft (neutral,
   not an error: most businesses start here), verified as ok-soft/green. */
.env-pill { display: inline-flex; flex: none; padding: 4px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-soft-ink); }
.env-pill.live { background: var(--ok-soft); color: var(--ok); }
.env-pill .icon { display: block; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--brand); color: var(--brand-on); font-size: 11px; font-weight: 600;
}
.avatar.dark { background: var(--ink); color: var(--bg); }
/* ---- business switcher (sidebar) -- a <details class="usermenu business-switcher"> ---- */
.business-switcher { margin-bottom: 8px; }
.business-switcher > summary {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.business-switcher > summary:hover { background: var(--surface); }
.switcher-label { min-width: 0; line-height: 1.25; flex: 1; text-align: left; }
.switcher-label strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-label span { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-chevron { flex: none; color: var(--muted); display: flex; }
.business-switcher[open] .switcher-chevron { transform: rotate(180deg); }
.business-switcher .menu { left: 0; right: 0; top: calc(100% + 6px); width: auto; }
.switcher-item { justify-content: space-between; }
.switcher-item.active { color: var(--brand-text); font-weight: 600; }
/* Only present when the account belongs to more than one organization (see
   web._switcher_businesses) -- the business's own organization, so two
   businesses of the same name in different organizations (or a team invite's
   organization) stay distinguishable. */
.switcher-item-label { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 1px; }
.switcher-item-label small { font-size: 11px; font-weight: 400; color: var(--muted); }
.switcher-new { color: var(--brand-text) !important; font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px !important; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 9px;
  color: var(--ink-soft); text-decoration: none; font-size: 13.5px;
  transition: background 0.12s, color 0.12s;
}
.nav a .icon { color: var(--muted); }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 600; }
.nav a[aria-current="page"] .icon { color: var(--brand-text); }
.nav-sep { height: 1px; background: var(--line); margin: 8px 4px; border: 0; }
.sidebar-spacer { flex: 1; }
.profile { display: flex; align-items: center; padding: 8px; border-radius: 10px; }
.profile form, .profile button { width: 100%; }
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-2); min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 24px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 13px; }
.crumb strong { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .spacer { flex: 1; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.menu-btn { display: none; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: inline; }
}
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu .menu {
  position: absolute; right: 0; top: 44px; min-width: 220px; z-index: 60;
  padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.usermenu .menu .who { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.usermenu .menu .who strong { display: block; color: var(--ink); font-size: 13px; }
.usermenu .menu a, .usermenu .menu button {
  display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  background: none; color: var(--ink-soft); text-decoration: none; font: inherit; font-size: 13px; text-align: left; border: 0; cursor: pointer;
}
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--surface-2); color: var(--ink); }
/* ---- avatar-menu sandbox/real toggle, theme and logout: left-aligned rows
   like Seguridad/Guía above them, each with its own border so they still
   read as distinct actions/buttons rather than plain links. Scoped with the
   full `.usermenu .menu .foo` selector, not the bare class, so these beat
   the shared `.usermenu .menu a, .usermenu .menu button` rule just above
   (border: 0, text-align: left is already what we want but needs to win
   the specificity fight the same way the border does). ---- */
.env-switch { display: flex; flex-direction: column; gap: 4px; padding: 4px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.env-switch > * { flex: none; margin: 0; width: 100%; }
.env-switch.disabled { opacity: 0.75; }
.usermenu .menu .env-opt {
  display: flex; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); cursor: pointer;
}
button.env-opt:hover { background: var(--surface-2); }
.env-opt.active { background: var(--brand-soft); color: var(--brand-soft-ink); border-color: transparent; }
span.env-opt { cursor: default; }
.usermenu .menu .theme-toggle,
.usermenu .menu .menu-logout {
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 2px;
}
.usermenu .menu .menu-logout { color: var(--bad); }
.usermenu .menu .menu-logout:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.content { flex: 1; width: 100%; max-width: 1240px; padding: 24px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head p { margin: 0; color: var(--muted); }
.scrim { display: none; position: fixed; inset: 0; z-index: 45; background: rgb(15 15 20 / 0.55); }

/* ---- modal (<dialog>, opened by [data-autopen] on load -- see app.js) ---- */
dialog {
  border: none; border-radius: 16px; padding: 0; width: 92%; max-width: 560px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgb(15 15 20 / 0.55); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-close {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 8px; color: var(--muted); font-size: 20px; line-height: 1; text-decoration: none;
}
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
.modal-body .card { box-shadow: none; }
.modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.modal-actions > * { flex: 1; }

/* ---- collapsed sidebar (desktop only -- the mobile drawer has its own open/closed states) ---- */
:root.sidebar-collapsed { --sidebar-w: 76px; }
/* The logo is a 48x28 wordmark-shaped image, sized for the full 288px rail --
   at 76px collapsed, it alone (plus the 36x36 collapse button beside it) is
   wider than the rail's own content box, which is what was forcing the
   sidebar's horizontal scrollbar (overflow-y: auto also governs the X axis,
   same reason noted below for the business-switcher menu and the collapsed
   tooltips). Stacking them instead of sitting them side by side, with the
   logo shrunk to the collapse button's own 36x36 footprint, removes the
   overflow instead of just hiding it. */
:root.sidebar-collapsed .brand-row { flex-direction: column; gap: 8px; padding: 4px 0 12px; }
:root.sidebar-collapsed .brand { flex: none; padding: 0; justify-content: center; }
:root.sidebar-collapsed .brand-mark { width: 36px; height: 36px; object-fit: contain; }
:root.sidebar-collapsed .brand-name,
:root.sidebar-collapsed .switcher-label,
:root.sidebar-collapsed .business-switcher .env-pill,
:root.sidebar-collapsed .switcher-chevron,
:root.sidebar-collapsed .nav a span,
:root.sidebar-collapsed .profile .who,
:root.sidebar-collapsed .profile form span { display: none; }
:root.sidebar-collapsed .nav a { justify-content: center; }
:root.sidebar-collapsed .business-switcher > summary { justify-content: center; padding: 6px; }
/* `.sidebar` scrolls vertically (overflow-y: auto), which also clips the X
   axis (a browser can't have one axis scroll and the other stay visible) --
   an absolutely-positioned 260px-wide menu inside a 76px-wide collapsed rail
   was getting cut off at the rail's own edge instead of floating over the
   main panel. `position: fixed` escapes that clipping (its containing block
   is the viewport, not the scrolling `.sidebar`); the offsets below are
   sized to this collapsed layout (16px sidebar padding + ~52px brand row +
   4px gap + ~42px collapsed summary + 6px gap ~= 120px top, 76px rail width
   + 8px gap ~= 84px left) -- a flyout beside the rail, not stacked on it,
   same pattern collapsed sidebars in VS Code/Slack/etc. use. */
:root.sidebar-collapsed .business-switcher .menu { position: fixed; top: 120px; left: 84px; width: 260px; }
:root.sidebar-collapsed .profile { justify-content: center; padding: 8px 4px; }
:root.sidebar-collapsed .profile form { margin-left: 0; }
:root.sidebar-collapsed .profile button { padding: 0; width: 32px; }
/* Collapsed-sidebar tooltips (nav links, Salir): our own styled element,
   not the browser's native `title` (its own OS font/box, ignores the
   theme entirely -- unstyled by design). Positioned with `top`/`left` set
   by app.js from the hovered/focused element's own getBoundingClientRect,
   because a plain CSS ::after here hits the exact same X-axis clipping as
   the business-switcher menu above and can't be fixed the same static way
   (each nav item sits at a different height, unlike that one fixed menu).
   Shown only while the sidebar is collapsed -- expanded, the label text
   is already visible next to the icon. */
#sidebar-tooltip {
  position: fixed; z-index: 90; top: 0; left: 0;
  padding: 6px 10px; border-radius: 8px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font: 600 12.5px/1.3 var(--font); white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-4px);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
#sidebar-tooltip.visible { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 1023px) {
  .sidebar { transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .sidebar.open ~ .scrim, .scrim.open { display: block; }
  .main { margin-left: 0; }
  .menu-btn { display: inline-grid; }
  .sidebar-collapse-btn { display: none; }
  .topbar { padding: 0 16px; }
  .content { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ------------------------------------------------------------- centered layout */
.auth-page {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(900px 420px at 50% -10%, var(--brand-soft), transparent 70%),
    var(--surface-2);
}
.auth-panel {
  position: relative; width: 100%; max-width: 460px; padding: 40px 32px 26px;
  background: radial-gradient(440px 170px at 50% 0, var(--brand-soft), transparent 78%), var(--surface);
  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg);
}
@media (max-width: 480px) { .auth-panel { padding: 36px 20px 24px; } }  /* Turnstile needs 300px */
.auth-theme { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 999px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.auth-brand:hover { color: var(--ink); }
.auth-logo { display: block; width: auto; height: 56px; }
.auth-wordmark { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.auth-wordmark span { color: var(--brand-display); }
.auth-tagline { margin: 10px 0 28px; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.auth-card { width: 100%; }
.auth-card h1 { margin: 0 0 18px; font-size: 19px; text-align: center; }
.auth-card .card { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.auth-card .stack > * + * { margin-top: 18px; }
.auth-card label { margin-bottom: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.auth-card label.check { margin-bottom: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password] {
  height: 46px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); font-size: 14.5px;
}
.auth-card button[type=submit], .auth-card .button { width: 100%; height: 46px; border-radius: 12px; font-size: 15px; }
.input-reveal { position: relative; }
.input-reveal input { padding-right: 48px; }
.reveal { position: absolute; top: 50%; right: 4px; width: 38px; height: 38px; padding: 0; transform: translateY(-50%); border-radius: 10px; background: transparent; color: var(--muted); }
.reveal:hover { background: var(--surface); color: var(--ink); }
.reveal .eye-off, .reveal[aria-pressed="true"] .eye { display: none; }
.reveal[aria-pressed="true"] .eye-off { display: inline; }
.auth-card > p.muted, .auth-links { margin: 14px 0 0; text-align: center; font-size: 13.5px; }
.auth-card > h1 + p.muted { margin: -6px 0 22px; }  /* intro text under a page title */
.auth-card > p.muted a { font-weight: 600; text-decoration: none; }
.auth-links.first { margin-top: 24px; }
.auth-links a { text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-foot { margin: 26px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------------ containers */
.card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card > h2:first-child { margin-top: 0; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; min-width: 0; }
/* For a row pairing a labeled field with a lone, label-less button (the
   verification documents form: "Adjuntar archivo" + "Subir") -- .row's
   default cross-axis alignment (stretch) still leaves the button sitting at
   the TOP of its own flex item while the field's real control sits below
   its label, so the two visibly don't line up. flex-end lines up their
   bottoms, which is where both actual controls are. */
.row-end { align-items: flex-end; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.grid > .card { margin-bottom: 0; }
/* align-items: start, not grid's own default (stretch) -- a shorter
   sibling column (e.g. dashboard's "Facturas recientes" while it's a short
   table, or empty) was being forced to match its taller sibling's height,
   leaving visible empty space at the bottom instead of just being short. */
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.split > *, .grid > * { min-width: 0; }
.split > .card { margin-bottom: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.card-head p { margin: 0; }

/* ------------------------------------------------------------------ forms */
label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 5px; color: var(--ink); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=file], select, textarea {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
textarea { height: auto; min-height: 84px; padding: 9px 12px; }
input[type=file] { padding: 6px 10px; height: auto; }
/* The outer field already gets the same border/background as every other
   input above, but its inner "choose file" control is its own separate
   browser-native element (a pseudo-element, not styled by anything above)
   -- left alone it's a plain OS button sitting inside an otherwise styled
   box, which is what read as "no style" here. */
input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
input[type=file]:hover::file-selector-button, input[type=file]:hover::-webkit-file-upload-button {
  background: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 3px; accent-color: var(--brand); }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border: 0; border-radius: 9px;
  background: var(--brand); color: var(--brand-on); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.12s;
}
button:hover, .button:hover { background: var(--brand-strong); color: var(--brand-on); }
button.secondary, .button.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
button.secondary:hover, .button.secondary:hover { background: var(--surface-2); color: var(--ink); }
button.danger { background: var(--bad); color: var(--bad-on); }
button.danger:hover { filter: brightness(0.92); background: var(--bad); }
button.small, .button.small { height: 30px; padding: 0 11px; font-size: 12.5px; }
.inline { display: inline; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters select { width: auto; min-width: 170px; }
details summary { cursor: pointer; font-weight: 500; }

/* ------------------------------------------------------------------ feedback */
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; font-size: 13.5px; border: 1px solid transparent; }
.flash.success { background: var(--ok-soft); color: var(--ok); }
.flash.error { background: var(--bad-soft); color: var(--bad); }
.flash.warning { background: var(--warn-soft); color: var(--warn); }
.flash strong { font-weight: 600; }
.highlight {
  padding: 11px 14px; border-radius: 10px; margin-bottom: 14px;
  background: var(--brand-soft); color: var(--brand-soft-ink); font-size: 13.5px;
}
.highlight strong { font-weight: 700; }
.badge, .pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.badge.ok, .pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn, .pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.bad, .pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge.brand, .pill.brand { background: var(--brand-soft); color: var(--brand-soft-ink); border-color: transparent; }
/* Network/token icons (see _macros.html network_icon/token_icon): sized in
   em so they match whatever text they replace, wherever that text is a bit
   bigger or smaller (a table cell vs a heading), with the real name as a
   native tooltip on hover -- these stand in for the network/token text
   itself, so alt carries the same name too, not empty/decorative. */
.chain-icon {
  width: 1.15em; height: 1.15em; object-fit: cover; border-radius: 50%;
  vertical-align: -0.25em; display: inline-block; background: #fff;
}
.chain-pair { display: inline-flex; align-items: center; gap: 2px; }
/* Copy button (see _macros.html copy_btn): a small icon-only toggle between
   the copy glyph and a checkmark, same swap pattern as .theme-toggle's own
   sun/moon (a CSS class flips which one shows, app.js sets it briefly). */
.copy-btn {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  margin-left: 4px; border: 0; border-radius: 6px; background: none; color: var(--muted);
  cursor: pointer; vertical-align: middle;
}
.copy-btn:hover { background: var(--surface-2); color: var(--ink); }
.copy-btn .copied-icon { display: none; }
.copy-btn.copied .copy-icon { display: none; }
.copy-btn.copied .copied-icon { display: inline; color: var(--ok); }

/* ------------------------------------------------------------------ tables */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td, table tr:last-child td { border-bottom: 0; }
tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .hint { display: block; }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 14px; font-size: 13px; }

/* ------------------------------------------------------------------ dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } }
.kpi { margin: 0; padding: 16px 18px; }
.kpi .label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kpi .label .icon { color: var(--brand-text); }
.kpi .value { margin: 6px 0 2px; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--muted); }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.spark { display: block; width: 100%; height: 38px; margin-top: 8px; }
.spark .line { fill: none; stroke: var(--chart-1); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--chart-1); opacity: 0.12; stroke: none; }
.spark.down .line { stroke: var(--bad); }
.spark.down .area { fill: var(--bad); }
.chart { display: block; width: 100%; height: auto; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .area-in { fill: var(--chart-1); opacity: 0.16; }
.chart .line-in { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-out { fill: none; stroke: var(--chart-3); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 6px; vertical-align: baseline; }
.legend .c1 { background: var(--chart-1); } .legend .c2 { background: var(--chart-2); } .legend .c3 { background: var(--chart-3); }
.legend .c4 { background: var(--chart-4); } .legend .c5 { background: var(--chart-5); }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.donut { width: 168px; height: 168px; flex: none; }
.donut .ring { fill: none; stroke-width: 18; }
.donut .seg1 { stroke: var(--chart-1); } .donut .seg2 { stroke: var(--chart-2); } .donut .seg3 { stroke: var(--chart-3); }
.donut .seg4 { stroke: var(--chart-4); } .donut .seg5 { stroke: var(--chart-5); }
.donut .track { stroke: var(--line); }
.donut .center-value { fill: var(--ink); font-size: 22px; font-weight: 600; font-family: var(--font); }
.donut .center-label { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.legend-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; font-size: 13px; }
.legend-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.legend-list .amt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.segmented a { padding: 4px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.segmented a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 12.5px; color: var(--muted); }
progress { flex: 1; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--line); accent-color: var(--brand); }
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.step-dot { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; border: 2px solid var(--line); color: transparent; }
.step-dot.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps .t { font-weight: 500; font-size: 13.5px; }
.steps .d { font-size: 12.5px; color: var(--muted); }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.activity li + li::before { content: ""; position: absolute; left: 15px; top: -10px; height: 20px; width: 1px; background: var(--line); }
.tone { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); z-index: 1; }
.tone.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tone.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tone.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.tone.brand { background: var(--brand-soft); color: var(--brand-soft-ink); border-color: transparent; }
.activity .t { font-size: 13.5px; }
.activity .d { font-size: 12px; color: var(--muted); }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }
/* ---- topbar notification bell: built on .usermenu/.menu/.activity/.tone
   above (same dropdown mechanics, same activity-row look) -- these rules
   only widen the panel, add the unread badge/dot, and scroll the list
   instead of growing the page. ---- */
.notif-bell summary { position: relative; }
.notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px; background: var(--bad); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; border: 2px solid var(--surface);
}
/* display: grid above would otherwise beat the hidden attribute: after "Marcar
   todas como leídas" the badge stayed on screen with the old count. */
.notif-badge[hidden] { display: none; }
.notif-menu { width: 340px; max-width: calc(100vw - 32px); padding: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.notif-head strong { font-size: 13px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.link-btn:hover { color: var(--brand-soft-ink); }
.notif-list { max-height: 360px; overflow-y: auto; padding: 4px 12px; margin: 0; }
.notif-list .notif-empty { padding: 22px 4px; justify-content: center; }
.notif-item .t { display: flex; align-items: center; gap: 6px; }
.notif-item.unread .t { font-weight: 700; }
.unread-dot { flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--brand); }
.banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 20px; border-radius: 14px; color: var(--brand-on);
  background: linear-gradient(120deg, #f97316 0%, #fb923c 55%, #fdba74 100%);
}
.banner p { margin: 0; opacity: 0.9; }
.banner strong { font-size: 15px; }
.banner .button { background: #1a1207; color: #fff; margin-left: auto; }
.banner .button:hover { background: #000; color: #fff; }

/* ------------------------------------------------------------------ misc */
.secret { display: block; font-size: 0.95rem; padding: 12px 14px; word-break: break-all; }
.codes { columns: 2; font-family: var(--mono); list-style: none; padding: 14px 18px; background: var(--code-bg); border-radius: var(--radius); margin: 0; }
.codes li { padding: 3px 0; }
.qr { display: block; margin: 0 auto; width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 10px; }
@media (max-width: 560px) { .codes { columns: 1; } h1 { font-size: 1.3rem; } }
@media (max-width: 640px) { .hide-sm { display: none !important; } .topbar .crumb .brand-crumb { display: none; } }
.row-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-inline input.totp-inline { width: 7.5em; }