/* ============================================================
   X-Libras Web — identidad "centro de control" (agosto 2026)
   Papel continuo dividido por filetes, rail de 68px solo iconos,
   masthead editorial en Instrument Serif, cifras protagonistas.
   Ver CONTRATO-REDISENO-VISUAL-WEB.md antes de tocar index.html/app.js.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Azul X-Libras: tinta, ancla y brillo ---- */
  --xl-blue-50: #f4f6fb;
  --xl-blue-100: #eef2fa;
  --xl-blue-200: #d5e0f4;
  --xl-blue-300: #a9c2ea;
  --xl-blue-400: #5f8ad8;
  --xl-blue-500: #2e5fb0;
  --xl-blue-600: #1d64f0;
  --xl-blue-700: #1b4eaf;
  --xl-blue-800: #12356e;
  --xl-blue-900: #0a1b33;

  /* ---- Tinta y neutros cálidos (papel) ---- */
  --xl-white: #ffffff;
  --xl-gray-25: #fbfaf8;
  --xl-gray-50: #f7f6f3;
  --xl-gray-100: #f0eee9;
  --xl-gray-200: #e4e2dc;
  --xl-gray-300: #cfccc4;
  --xl-gray-400: #9aa2af;
  --xl-gray-500: #6e7889;
  --xl-gray-600: #55606f;
  --xl-gray-700: #33415a;
  --xl-gray-800: #1c2b44;
  --xl-gray-900: #0a1b33;

  /* ---- Acentos financieros ---- */
  --xl-green-50: #edf4ee;
  --xl-green-500: #1b8a47;
  --xl-green-600: #15803d;
  --xl-amber-50: #f7f1e4;
  --xl-amber-500: #c9891f;
  --xl-amber-600: #b7791f;
  --xl-red-50: #f7ebea;
  --xl-red-500: #c0302a;
  --xl-red-600: #b0261f;
  --xl-orange-600: #a8560e;

  /* ---- Texto ---- */
  --text-strong: var(--xl-gray-900);
  --text-body: var(--xl-gray-700);
  --text-muted: var(--xl-gray-500);
  --text-subtle: var(--xl-gray-400);
  --text-inverse: var(--xl-white);
  --text-inverse-muted: rgba(255, 255, 255, .62);
  --text-brand: var(--xl-blue-600);
  --text-link: var(--xl-blue-600);
  --text-link-hover: var(--xl-blue-800);
  --text-money-main: var(--xl-gray-900);
  --text-money-alt: var(--xl-orange-600);
  --text-positive: var(--xl-green-600);
  --text-negative: var(--xl-red-600);

  /* ---- Superficies: papel continuo, no tarjetas ---- */
  --surface-page: var(--xl-gray-50);
  --surface-card: var(--xl-white);
  --surface-sunken: var(--xl-gray-100);
  --surface-subtle: var(--xl-gray-25);
  --surface-brand-soft: var(--xl-blue-100);
  --surface-chrome: var(--xl-blue-800);
  --surface-chrome-hover: rgba(255, 255, 255, .12);
  --surface-hero: var(--xl-blue-800);
  --surface-overlay: rgba(10, 27, 51, .42);

  /* ---- Filetes ---- */
  --border-subtle: var(--xl-gray-200);
  --border-default: var(--xl-gray-300);
  --border-strong: var(--xl-gray-900);
  --border-brand: var(--xl-blue-600);
  --border-chrome: rgba(255, 255, 255, .14);
  --focus-ring: 0 0 0 2px rgba(29, 100, 240, .32);

  /* ---- Acción ---- */
  --action-primary: var(--xl-blue-800);
  --action-primary-hover: #0b2450;
  --action-primary-active: var(--xl-blue-900);
  --action-secondary-hover: var(--xl-gray-25);
  --action-ghost-hover: var(--xl-blue-50);
  --action-danger: var(--xl-red-600);
  --action-danger-hover: #8f1e18;
  --action-disabled-bg: var(--xl-gray-200);
  --action-disabled-text: var(--xl-gray-400);

  /* ---- Estado: punto + texto ---- */
  --status-success-bg: var(--xl-green-50);
  --status-success-fg: var(--xl-green-600);
  --status-success-dot: var(--xl-green-500);
  --status-warning-bg: var(--xl-amber-50);
  --status-warning-fg: var(--xl-amber-600);
  --status-warning-dot: var(--xl-amber-500);
  --status-danger-bg: var(--xl-red-50);
  --status-danger-fg: var(--xl-red-600);
  --status-danger-dot: var(--xl-red-500);
  --status-info-bg: var(--xl-blue-100);
  --status-info-fg: var(--xl-blue-800);
  --status-info-dot: var(--xl-blue-600);
  --status-neutral-bg: var(--xl-gray-100);
  --status-neutral-fg: var(--xl-gray-600);
  --status-neutral-dot: var(--xl-gray-400);

  /* ---- Datos ---- */
  --chart-1: var(--xl-blue-800);
  --chart-2: var(--xl-orange-600);
  --chart-3: var(--xl-amber-500);
  --chart-4: var(--xl-red-600);
  --chart-5: var(--xl-blue-400);
  --chart-grid: var(--xl-gray-200);

  /* ---- Tipografía ---- */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display-xl: 72px; --lh-display-xl: 0.98;
  --fs-display: 52px; --lh-display: 1.0;
  --fs-h1: 46px; --lh-h1: 1.02;
  --fs-h2: 24px; --lh-h2: 1.1;
  --fs-h3: 16px; --lh-h3: 1.4;
  --fs-body-lg: 15px; --lh-body-lg: 1.6;
  --fs-body: 14px; --lh-body: 1.55;
  --fs-sm: 13px; --lh-sm: 1.5;
  --fs-xs: 12px; --lh-xs: 1.45;
  --fs-micro: 10px; --lh-micro: 1.3;
  --fs-metric-xl: 52px; --fs-metric: 34px; --fs-metric-sm: 26px;
  --ls-heading: -0.01em;
  --ls-eyebrow: 0.16em;
  --ls-num: -0.02em;

  /* ---- Espaciado ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --card-padding: 24px; --card-gap: 32px;
  --section-gap: 28px; --rule-gap: 18px;
  --page-gutter: 48px; --page-gutter-mobile: 18px; --page-max: 1420px;
  --sidebar-width: 68px; --sidebar-width-expanded: 236px;
  --control-height-sm: 34px; --control-height: 44px; --control-height-lg: 52px;
  --tap-target-min: 44px;
  --table-row-height: 52px;

  /* ---- Radios (casi recto) ---- */
  --radius-xs: 1px; --radius-sm: 2px; --radius-md: 2px; --radius-card: 2px;
  --radius-control: 2px; --radius-pill: 999px; --radius-modal: 2px;

  /* ---- Sombras: la estructura la hacen los filetes ---- */
  --shadow-none: none;
  --shadow-md: 0 8px 24px rgba(10, 27, 51, .06);
  --shadow-lg: 0 20px 40px rgba(10, 27, 51, .14);
  --shadow-modal: 0 40px 80px rgba(10, 27, 51, .24);

  /* ---- Movimiento ---- */
  --dur-fast: 120ms; --dur-base: 180ms;
  --ease-standard: cubic-bezier(.2, .6, .3, 1);

  /* ---- Alias heredados: app.js referencia estos nombres directamente en HTML
     generado dinámicamente (estilos inline var(--blue) etc.) — no renombrar. ---- */
  --ink: var(--text-strong);
  --text: var(--text-strong);
  --muted: var(--text-muted);
  --muted-dark: var(--xl-gray-600);
  --line: var(--border-default);
  --blue: var(--xl-blue-600);
  --blue-dark: var(--xl-blue-800);
  --blue-deep: var(--xl-blue-900);
  --blue-light: var(--xl-blue-300);
  --green: var(--xl-green-600);
  --green-soft: var(--status-success-bg);
  --green-dark: var(--xl-green-600);
  --red: var(--xl-red-600);
  --red-soft: var(--status-danger-bg);
  --red-dark: var(--xl-red-600);
  --amber: var(--xl-amber-600);
  --amber-soft: var(--status-warning-bg);
  --amber-dark: var(--xl-amber-600);
  --purple: #7c3aed;
  --bg: var(--surface-page);
  --soft: var(--surface-brand-soft);
  --shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}

/* ============== Reset y base ============== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: var(--ls-heading);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
p { margin: 0; }
hr { border: 0; height: 1px; background: var(--border-subtle); margin: 0; }
a { color: var(--text-link); text-decoration: none; font-weight: 600; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.xl-num, .amount { font-variant-numeric: tabular-nums; letter-spacing: var(--ls-num); }
.xl-caps { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-subtle); }
.xl-serif { font-family: var(--font-serif); font-weight: 400; color: var(--text-strong); }

/* ---- Clases con carga lógica (ver CONTRATO-REDISENO-VISUAL-WEB.md §7): el
   NOMBRE y el disparo por JS de estas clases no cambia, solo su estilo. ---- */
.hidden { display: none !important; }
.view { display: none; }
.view.active { display: block; }

/* ============== Botones ============== */
.btn {
  border: 0;
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: 0 20px;
  background: var(--action-primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard);
}
.btn:hover { background: var(--action-primary-hover); }
.btn:active { background: var(--action-primary-active); }
.btn.light {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--border-default);
  font-weight: 600;
}
.btn.light:hover { border-color: var(--text-strong); background: var(--surface-card); }
.btn.dark { background: var(--xl-gray-900); }
.btn.danger { background: var(--action-danger); }
.btn.danger:hover { background: var(--action-danger-hover); }
.btn.danger.outline {
  background: transparent;
  color: var(--action-danger);
  border: 1px solid var(--xl-red-50);
}
.btn.success { background: var(--xl-green-600); }
.btn.small { min-height: var(--control-height-sm); padding: 0 14px; font-size: 13px; }
.btn:disabled { background: var(--action-disabled-bg); color: var(--action-disabled-text); cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }

/* Botón de texto (el patrón dominante del sistema: casi todas las acciones
   secundarias son esto, no un botón con borde). Reusa .btn.light en algunos
   sitios de index.html -- ver Fase 2+ para migrar cada caso a .btn-text donde
   el contrato lo permita sin tocar el atributo onclick. */
.icon-btn {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { color: var(--text-strong); }

/* ============== Mensajes / estado ============== */
.notice {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  font-weight: 600;
  font-size: 13px;
  border-left: 2px solid var(--status-danger-fg);
}
.notice.ok { background: var(--status-success-bg); color: var(--status-success-fg); border-left-color: var(--status-success-fg); }
.sub { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.empty {
  text-align: left;
  padding: 42px 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 20px;
}

/* ============== Campos y formularios ============== */
.field { display: grid; gap: 6px; margin-bottom: 20px; }
.field label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: 700;
}
.field input, .field select, .field textarea {
  min-height: var(--control-height);
  /* XL-AUD4-P2: a grid item's default min-width is its content's intrinsic
     size, not 0 -- an <input> with no explicit width falls back to its
     browser-default ~20-character intrinsic width, which is wider than a
     narrow .pay-grid cell (2 columns, e.g. Tarjeta/USDT) gets at medium
     screen widths. Without min-width:0 the input refuses to shrink to fit
     and overflows its cell instead. width:100% then makes it actually
     fill the (now shrinkable) cell rather than staying at that intrinsic
     size. */
  min-width: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  padding: 0 2px;
  background: transparent;
  font-size: 15px;
  color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field textarea { padding: 8px 2px; }
.field input::placeholder, .field select::placeholder, .field textarea::placeholder { color: var(--text-subtle); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom: 1px solid var(--xl-blue-600);
  box-shadow: 0 1px 0 var(--xl-blue-600);
}

/* ============== Tablas (libro mayor) ============== */
.data-table-wrap { overflow-x: auto; margin: var(--rule-gap) 0; }
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th {
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
  text-align: left;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--border-default);
}
.data-table td {
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--text-body);
  vertical-align: middle;
}
.data-table tr:hover td { background: var(--surface-subtle); }
.data-table tr:last-child td { border-bottom: 0; }

/* ============== Estructura: rail de 68px + masthead ============== */
.app { display: flex; height: 100vh; overflow: hidden; background: var(--surface-page); }
.app.hidden { display: none; }

/* El rail tiene dos estados reales: expandido (por defecto -- ancho, con
   etiquetas y los grupos abren en línea, como el rail original) y contraído
   (68px, solo íconos, tooltip al pasar el mouse, los grupos flotan como
   menú). toggleSidebar() / .sidebar.collapsed / localStorage no cambian --
   solo se les devuelve un efecto visual real. */
.sidebar {
  width: var(--sidebar-width-expanded);
  flex: 0 0 auto;
  height: 100vh;
  background: var(--surface-chrome);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 18px 14px 14px;
  gap: 4px;
  z-index: 50;
  overflow: visible;
  transition: width var(--dur-base) var(--ease-standard);
}
.side-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; padding: 0 2px; }
.side-brand img { width: 46px; height: 46px; border-radius: var(--radius-sm); flex: 0 0 auto; display: block; }
.side-brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.side-brand-name { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1; color: #fff; white-space: nowrap; }
.side-tag {
  display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-inverse-muted); white-space: nowrap;
}

.side-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
.side-divider { height: 1px; background: var(--border-chrome); margin: 10px 2px; }

.side-link {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-inverse-muted);
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0 12px;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.side-link:hover { background: var(--surface-chrome-hover); color: #fff; }
.side-link span:not(.side-group-title) { display: inline; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-link svg { width: 18px; height: 18px; stroke-width: 1.5; flex: 0 0 auto; color: currentColor; }
.side-link.active, .side-link:hover { color: #fff; }
.side-link.active { background: var(--surface-chrome-hover); }

.side-group { position: relative; width: 100%; }
.side-group summary { list-style: none; }
.side-group summary::-webkit-details-marker { display: none; }
.side-group .side-link { justify-content: space-between; }
.side-group-title { display: flex; align-items: center; gap: 18px; min-width: 0; }
.side-group-chevron { width: 15px !important; height: 15px !important; flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease-standard); }
.side-group[open] > summary .side-group-chevron { transform: rotate(90deg); }
.side-group[open] > summary.side-link { background: var(--surface-chrome-hover); color: #fff; }
.side-subnav {
  position: static;
  min-width: 0;
  background: none;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  box-shadow: none;
  margin: 2px 0 6px 14px;
  padding: 0 0 0 10px;
  z-index: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.side-subnav .side-link {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px;
  color: rgba(255, 255, 255, .55);
  border-radius: var(--radius-sm);
}
.side-subnav .side-link span { font-size: 13px; font-weight: 600; }
.side-subnav .side-link svg { width: 16px; height: 16px; stroke-width: 1.5; flex: 0 0 auto; }
.side-subnav .side-link:hover { background: var(--surface-chrome-hover); color: #fff; }
.side-subnav .side-link.active { background: var(--surface-chrome-hover); color: #fff; }

.side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-chrome); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; }
.side-foot-btn {
  position: relative;
  flex: 0 0 auto; height: 44px; width: 44px; display: flex; align-items: center; gap: 12px; justify-content: center;
  border: 0; background: transparent; color: var(--text-inverse-muted); cursor: pointer; border-radius: var(--radius-sm); padding: 0;
}
.side-foot-btn:hover { background: var(--surface-chrome-hover); color: #fff; }
.side-foot-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.side-foot-btn span { display: inline; font-size: 13px; font-weight: 600; white-space: nowrap; }
.side-foot-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  background: var(--xl-gray-900);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  z-index: 60;
  pointer-events: none;
}
.side-logout-btn[title]:hover::after { left: 0; }
.side-toggle-btn[title]:hover::after { right: 0; }
.sidebar.collapsed .side-foot-btn[title]:hover::after {
  left: 100%; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); margin-left: 10px;
}
.sidebar.collapsed .side-toggle-btn svg { transform: rotate(180deg); }

/* ---- Contraído: rail angosto solo-íconos, como antes del toggle ---- */
.sidebar.collapsed { width: var(--sidebar-width); align-items: center; padding: 18px 0 14px; }
.sidebar.collapsed .side-brand { flex-direction: column; justify-content: center; padding: 0; }
.sidebar.collapsed .side-brand-text { display: none; }
.sidebar.collapsed .side-nav { align-items: center; }
.sidebar.collapsed .side-link { width: 44px; height: 44px; justify-content: center; padding: 0; }
.sidebar.collapsed .side-link > span:not(.side-group-title),
.sidebar.collapsed .side-group-title > span { display: none; }
.sidebar.collapsed .side-group { display: flex; justify-content: center; }
.sidebar.collapsed .side-group-title { gap: 0; }
.sidebar.collapsed .side-group-chevron { display: none; }
.sidebar.collapsed .side-subnav {
  position: absolute; left: calc(100% + 10px); top: 0; min-width: 220px;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 55; margin: 0;
}
.sidebar.collapsed .side-subnav .side-link {
  width: 100%; height: auto; min-height: auto; justify-content: flex-start; padding: 10px 12px; color: var(--text-body);
}
.sidebar.collapsed .side-subnav .side-link span { display: inline; }
.sidebar.collapsed .side-subnav .side-link svg { color: var(--text-muted); }
.sidebar.collapsed .side-subnav .side-link:hover { background: var(--surface-subtle); color: var(--text-strong); }
.sidebar.collapsed .side-subnav .side-link.active { background: var(--surface-brand-soft); color: var(--xl-blue-800); }
.sidebar.collapsed .side-subnav .side-link.active svg { color: var(--xl-blue-800); }
.sidebar.collapsed .side-foot { flex-direction: column; }
.sidebar.collapsed .side-foot-btn { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; justify-content: center; }
.sidebar.collapsed .side-foot-btn span { display: none; }
/* Tooltip con el nombre: solo hace falta cuando el rail está contraído */
.sidebar.collapsed .side-link[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  background: var(--xl-gray-900);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  z-index: 60;
  pointer-events: none;
}

/* Línea de meta superior (no es una barra pesada): selector de negocio, tasa
   y turno. Vive fuera del scroll, encima de cada masthead. */
.top { background: transparent; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
.top-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--page-gutter);
}
.brand { display: none; }
.top-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.business-chip {
  border: 0; border-bottom: 1px solid var(--border-default); background: transparent;
  font-size: 13px; font-weight: 600; color: var(--text-strong); height: 30px; padding: 0 20px 0 0; cursor: pointer;
  max-width: 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rate-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--text-strong); cursor: pointer;
}
.rate-chip svg { width: 15px; height: 15px; color: var(--text-muted); }
.top-actions .btn.light { height: 34px; padding: 0 14px; font-size: 13px; }

.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.main { flex: 1; min-width: 0; overflow-y: auto; }
.main > .view.active { padding: 34px var(--page-gutter) 72px; max-width: var(--page-max); }

/* Cabecera y overlay móviles: ocultos en escritorio, ver Fase 5 para ≤860px */
.mob-header { display: none; }
.sidebar-backdrop { display: none; }

/* ============== Masthead editorial (sustituye a .view-hero con cajas) ============== */
.view-hero {
  position: relative;
  padding-bottom: 26px;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.view-hero::before { content: none; }
.view-hero-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
  margin-bottom: 10px;
}
.view-hero h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.2vw, var(--fs-h1));
  line-height: 1.02;
  color: var(--text-strong);
  margin: 0;
}
.view-hero p {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 10px 0 0;
}
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-subtle); margin: -8px 0 18px; }
.breadcrumb a { color: var(--text-muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--text-link); }
.breadcrumb .current { color: var(--text-strong); }
.breadcrumb .sep { width: 13px; height: 13px; }

/* ============== Login: papel claro + panel de presentación ============== */
.login-shell {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: min(560px, 46%) 1fr;
  background: var(--surface-card);
}
.login-form-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 5vh, 40px) clamp(28px, 5vw, 56px) clamp(16px, 3vh, 34px);
  height: 100%;
  overflow-y: auto;
}
.login-brand { display: flex; align-items: center; gap: 14px; }
.login-brand img { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: 0 0 auto; }
.login-brand h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.login-brand p { display: none; }
.login-content-center { width: 100%; display: flex; flex-direction: column; align-items: center; margin: auto 0; }
.login { width: min(420px, 100%); }
.login-greeting { margin-bottom: 30px; }
.login-greeting h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  margin: 0;
}
.login-greeting p { margin: 12px 0 0; font-size: var(--fs-body-lg); color: var(--text-muted); }
.login .field { margin-bottom: 26px; }
.login .notice { margin-bottom: 16px; }
.login .field input {
  background: var(--surface-brand-soft);
  border-bottom-color: transparent;
  border-radius: var(--radius-control);
  padding: 0 14px;
}
.login .field-icon-wrap input { padding-left: 40px; }
.login .password-field input { padding-right: 40px; }
.login .field input:focus {
  border-bottom-color: transparent;
  box-shadow: 0 0 0 2px var(--xl-blue-500);
}
.login .field input:-webkit-autofill,
.login .field input:-webkit-autofill:hover,
.login .field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-brand-soft) inset;
  box-shadow: 0 0 0 1000px var(--surface-brand-soft) inset;
  -webkit-text-fill-color: var(--text-strong);
  border-radius: var(--radius-control);
}
.field-icon-wrap { position: relative; }
.field-icon-wrap input { width: 100%; padding-left: 26px; }
.field-icon-wrap .field-icon {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none; display: flex;
}
.field-icon-wrap .field-icon svg { width: 16px; height: 16px; }
.password-field { position: relative; }
.password-field input { padding-right: 30px; }
.password-toggle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--text-subtle); cursor: pointer; padding: 4px; display: flex;
}
.password-toggle:hover { color: var(--text-strong); }
.password-toggle svg { width: 17px; height: 17px; }
.login-row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -12px 0 24px; }
.login-remember { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-body); cursor: pointer; font-weight: 500; }
.login-remember input { accent-color: var(--xl-blue-600); width: 17px; height: 17px; }
.login-forgot-link, .login-switch a {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.login-forgot-link:hover, .login-switch a:hover { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.login .btn { height: var(--control-height-lg); font-size: 15px; }
.login-switch { font-size: 14px; color: var(--text-muted); margin-top: 22px; text-align: center; }
.login-switch a { color: var(--xl-blue-600); font-size: 14px; }
.login-footer { font-size: 12px; color: var(--text-subtle); text-align: center; }

/* Panel de presentación: azul ancla, sin degradado */
.login-hero {
  background: var(--xl-blue-800);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vh, 40px) clamp(28px, 5vw, 56px) 48px;
  overflow-y: auto;
}
.hero-nav { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.hero-nav a, .hero-demo-link {
  color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
}
.hero-nav a:hover, .hero-demo-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-demo-link svg { width: 15px; height: 15px; }
.hero-nav .btn {
  background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  height: 38px; font-size: 13px;
}
.hero-nav .btn:hover { background: rgba(255, 255, 255, .1); }
.login-hero-content { margin-top: auto; padding-top: 40px; }
.hero-top-row { display: block; }
.login-hero-eyebrow {
  display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 700; color: rgba(255, 255, 255, .55);
}
.login-hero-copy h2 {
  font-family: var(--font-serif); color: #fff; font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px); line-height: .98; margin: 16px 0 0; max-width: 620px;
}
.login-hero-copy h2 em { font-style: italic; color: #bfd7fd; }
.hero-top-row-text { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 20px 0 0; max-width: 480px; }
.hero-mock-wrap { display: none; } /* la vista previa no forma parte de la identidad editorial */
.hero-features {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 44px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-feature { padding: 20px 20px 0 0; border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 20px; display: block; }
.hero-feature:first-child { border-left: 0; padding-left: 0; }
.hero-feature-icon { display: none; }
.hero-feature strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: #fff; }
.hero-feature span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-top: 5px; }
.hero-trust {
  display: flex; gap: 32px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-trust-item { display: flex; align-items: flex-start; gap: 0; }
.hero-trust-icon { display: none; }
.hero-trust-item strong { display: block; font-size: 13.5px; font-weight: 700; color: #fff; }
.hero-trust-item span { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 3px; }
.hero-pricing {
  display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-pricing-lead { display: none; }
.hero-price-card { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 22px; }
.hero-price-card:first-child { border-left: 0; padding-left: 0; }
.hero-price-card span {
  display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 700; color: rgba(255, 255, 255, .5);
}
.hero-price-card strong {
  display: block; font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 700; color: #fff;
  line-height: 1; margin-top: 8px;
}
.hero-price-card strong em { font-style: normal; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .6); }
.hero-price-card small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: 6px; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .login-hero { padding: 28px 22px; }
  .hero-features, .hero-trust { grid-template-columns: 1fr 1fr; }
}

/* ============== Resumen (dashboard) ============== */
.dash-hero { position: relative; padding-bottom: 26px; }
.dash-hero-deco, .dash-hero-deco2 { display: none; }
.dash-hero-label {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 700; color: var(--text-subtle); margin-bottom: 10px;
}
.dash-hero h2 {
  font-family: var(--font-serif); font-size: clamp(30px, 3.2vw, var(--fs-h1)); line-height: 1.02;
  color: var(--text-strong); margin: 0; max-width: 100%; overflow-wrap: anywhere;
}
.dash-hero p { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-muted); max-width: 62ch; margin: 10px 0 0; }
.dash-hero select { margin-top: 14px !important; border: 0 !important; border-bottom: 1px solid var(--border-default) !important; background: transparent !important; color: var(--text-strong) !important; padding: 0 20px 6px 0 !important; font-weight: 600 !important; }

/* Tira de cifras sin tarjetas: separadas por filete, no cajas */
.stat-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 2px solid var(--border-strong); border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--section-gap);
}
.stat-card {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  border-left: 1px solid var(--border-subtle); box-shadow: none; background: none; border-radius: 0;
}
.stat-card:first-child { border-left: 0; }
.stat-card-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.stat-card-icon svg { width: 16px; height: 16px; }
.stat-val { font-family: var(--font-sans); font-weight: 700; font-size: 22px; display: block; margin: 0; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-num); color: var(--text-strong); }
.stat-val .sub { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 2px; display: block; }
.stat-trend { font-size: 11.5px; font-weight: 700; margin-top: 4px; display: block; }

/* Sección editorial: filete superior + título serif (sustituye a .panel-section con caja) */
.panel-section {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: var(--section-gap) 0 0; margin-bottom: 0;
  border-top: 1px solid var(--border-subtle);
}
.panel-section:first-of-type { border-top: 0; padding-top: 0; }
.panel-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.panel-section-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); color: var(--text-strong); }
.panel-section-head p { color: var(--text-muted); font-size: 13px; font-weight: 500; margin: 6px 0 0; }

.dash-actions { display: flex !important; flex-wrap: wrap; gap: 0 !important; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.dash-actions .btn.light {
  flex: 0 0 auto; width: auto !important; border: 0 !important; border-radius: 0 !important; height: auto; min-height: 0;
  padding: 14px 22px !important; font-size: 14px; color: var(--text-strong); justify-content: flex-start !important;
  border-right: 1px solid var(--border-subtle) !important;
}
.dash-actions .btn.light:last-child { border-right: 0 !important; }
.dash-actions .btn.light:hover { background: var(--surface-subtle); border-color: var(--border-subtle) !important; }

.dash-bottom { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; gap: var(--card-gap); align-items: start; margin-top: var(--section-gap); }

.recent-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.recent-row:last-child { border-bottom: none; }
.recent-row-left strong { font-size: 14px; font-weight: 600; display: block; color: var(--text-strong); }
.recent-row-left small { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; display: block; }
.recent-row-right { text-align: right; }
.recent-row-right .amount { font-weight: 700; font-size: 14px; color: var(--text-strong); }
.fin-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-muted); }
.fin-row:last-child { border-bottom: 0; }
.fin-row strong { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-strong); font-weight: 700; }

.alert-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--border-subtle); background: none; cursor: pointer; margin-bottom: 0; font-size: 13px; border-radius: 0;
}
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover { background: var(--surface-subtle); }
.alert-row strong { font-size: 14px; font-weight: 600; }

/* Estado con punto + texto (badges) */
.status, .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); background: none !important; padding: 0 !important; border-radius: 0 !important; }
.status::before, .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge-ok { color: var(--status-success-fg); }
.badge-warn { color: var(--status-warning-fg); }
.badge-bad { color: var(--status-danger-fg); }
.bad { color: var(--status-danger-fg); }
.warn { color: var(--status-warning-fg); }

/* Donut: la forma circular la sigue construyendo app.js (conic-gradient inline);
   aquí solo se estiliza el tipográfico/color alrededor. */
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut-ring { width: 120px; height: 120px; border-radius: 50%; position: relative; flex: 0 0 auto; }
.donut-center {
  position: absolute; inset: 14px; border-radius: 50%; background: var(--surface-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: none;
}
.donut-center strong { font-size: 15px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.donut-center span { font-size: 10px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 140px; }
.donut-legend span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); font-weight: 500; }
.donut-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }

@media (max-width: 1100px) {
  .dash-bottom { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(odd) { border-left: 0; }
}

/* ============== Panel / grid genéricos (base para todo el resto de pantallas) ============== */
.panel { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.panel h2, .panel h3 { font: inherit; }
.panel > h2, .panel > h3, .panel-head h2, .panel-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; color: var(--text-strong); }
.panel p { color: var(--text-muted); }
.form-card { }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); align-items: start; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.grid-form-2 { grid-template-columns: 1fr 1fr; }
.action-row { display: flex; justify-content: flex-end; gap: 22px; align-items: center; margin-top: 24px; }
.action-row .btn.light, .biz-action-row .btn.light, .supplier-action-row .btn.light {
  border: 0 !important; background: none !important; color: var(--text-muted) !important; padding: 0 !important; height: auto !important; font-weight: 600;
}
.action-row .btn.light:hover, .biz-action-row .btn.light:hover, .supplier-action-row .btn.light:hover { color: var(--text-strong) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ============== Excepción operativa: grupos delimitados (Cobrar y Caja) ============== */
.panel-group {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 22px 24px;
}
.panel-group--key { border-color: var(--border-strong); border-top-width: 2px; }
.panel-group--tint { background: var(--surface-brand-soft); border-color: var(--xl-blue-200); }
.panel-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border-subtle);
}
.panel-group-head h2, .panel-group-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; color: var(--text-strong); margin: 0; }
.panel-group-head p { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.sell-section-title {
  display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 700; color: var(--text-subtle);
}

/* ============== Cobrar ============== */
#sellView .grid-two { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); }
.cart { display: block; }
.total-box {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.total-box span { display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-subtle); }
.total-box strong {
  display: block; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-metric-xl);
  line-height: 1; color: var(--text-strong); margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-num);
}
.total-box small { display: block; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.total-box strong .dual-usd { font-size: 1em; }
.total-box strong .dual-bs { font-size: 16px; margin-top: 8px; }

/* Cifra dual (USD/Bs) generada por moneyView()/moneyDual() -- usada en toda la
   app (tablas, resúmenes, totales). Tamaño por defecto pensado para contextos
   normales; el total de Cobrar lo agranda arriba. */
.dual-usd { display: block; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-num); }
.dual-bs, .bs-ref { display: block; font-size: 11px; font-weight: 600; color: var(--text-money-alt) !important; margin-top: 2px; font-variant-numeric: tabular-nums; }

.sell-tools { display: flex; gap: 20px; }
.sell-tools .btn.light {
  border: 0 !important; background: none !important; padding: 0 !important; height: auto !important;
  color: var(--text-muted) !important; font-weight: 600; font-size: 13px;
}
.sell-tools .btn.light:hover { color: var(--text-strong) !important; text-decoration: underline; text-underline-offset: 3px; }
.sell-tools .btn.light svg { width: 14px; height: 14px; }

.pay-totals-grid { display: block; }
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }
.pay-chip {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height);
  border: 1px solid var(--border-default); border-radius: var(--radius-control); background: transparent;
  color: var(--text-body); font-weight: 600; font-size: 13px; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard);
}
.pay-chip:hover { border-color: var(--text-strong); }
.pay-chip svg { width: 15px; height: 15px; }

.sell-summary-box { margin-top: 26px; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 13px; color: var(--text-muted); }
.summary-row strong { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-strong); font-size: 13px; }
.sell-summary-box hr { margin: 10px 0; }
.sell-summary-total { font-size: 15px !important; }
.sell-summary-total span { font-weight: 700; color: var(--text-strong); font-size: 15px; }
.sell-summary-total strong { font-size: 22px; color: var(--text-strong); }
.sell-received { margin: 18px 0 10px; }
.sell-received #paid {
  height: var(--control-height); display: flex; align-items: center; font-family: var(--font-sans);
  font-weight: 700; font-size: 17px; color: var(--text-strong); border-bottom: 1px solid var(--border-default);
  font-variant-numeric: tabular-nums;
}
.sell-summary-balance strong { font-size: 16px; }

/* Catálogo lateral: papel abierto con filete izquierdo, no caja */
.sell-panel { border-left: 1px solid var(--border-subtle); padding-left: 28px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sell-panel .panel-head p { font-size: 12px; color: var(--text-subtle); font-weight: 500; margin: 0; max-width: 280px; }
.sell-toolbar-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.sell-toolbar-actions .btn.light {
  border: 0 !important; background: none !important; padding: 0 !important; height: auto !important;
  color: var(--text-muted) !important; font-weight: 600; font-size: 13px;
}
.sell-toolbar-actions .btn.light:hover { color: var(--text-strong) !important; text-decoration: underline; text-underline-offset: 3px; }
.park-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  background: var(--action-danger); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 0 4px; margin-left: 4px;
}
.kb-hint {
  font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 1px 5px; letter-spacing: 0; background: none;
}
.kb-hint-icon { display: inline-flex; align-items: center; padding: 1px 4px; }
.kb-hint-icon svg { width: 12px; height: 12px; }

.seg-tabs, .biz-tabs, .rate-tabs {
  display: flex; gap: 24px; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; overflow-y: hidden; flex-shrink: 0;
  /* AUDIT (2026-09-18): on a narrow content column (e.g. Configuración >
     Datos del negocio, 4 tabs with icons + long labels), this row overflows
     and the browser's own scrollbar track renders right under the tabs --
     it looked broken/cut off ("bien fea y descuadrada"), not like a
     deliberately scrollable strip. Still scrollable (drag/wheel/swipe), just
     without the raw native scrollbar chrome. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.seg-tabs::-webkit-scrollbar, .biz-tabs::-webkit-scrollbar, .rate-tabs::-webkit-scrollbar { display: none; }
.biz-tabs, .rate-tabs { margin-bottom: var(--section-gap); }
.seg-tab, .biz-tab, .rate-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 0 12px; border: 0; background: transparent;
  color: var(--text-muted); font-weight: 600; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
.seg-tab:hover, .biz-tab:hover, .rate-tab:hover { color: var(--text-strong); }
.seg-tab.active, .biz-tab.active, .rate-tab.active { color: var(--text-strong); border-bottom-color: var(--text-strong); }
.seg-tab svg, .biz-tab svg, .rate-tab svg { width: 15px; height: 15px; }

.search-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 16px; }
.search-input { width: 100%; }

.category-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0; }
.category-chips .btn {
  border: 0 !important; background: none !important; padding: 0 0 2px !important; height: auto !important; min-height: 0;
  color: var(--text-subtle) !important; font-weight: 700; font-size: 12px; border-bottom: 1px solid transparent !important; border-radius: 0 !important;
}
.category-chips .btn.light { color: var(--text-subtle) !important; }
.category-chips .btn:not(.light) { color: var(--text-strong) !important; border-bottom-color: var(--text-strong) !important; }

.quick-help { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.quick-help span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); background: none; padding: 0; font-weight: 600; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pager .btn.light {
  border: 0 !important; background: none !important; padding: 0 !important; height: auto !important;
  color: var(--text-muted) !important; font-weight: 600; font-size: 13px;
}
.pager .btn.light:hover { color: var(--text-link) !important; }

@media (max-width: 1180px) {
  #sellView .grid-two { grid-template-columns: 1fr; }
  .sell-panel { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-subtle); padding-top: 24px; margin-top: 24px; }
}

/* ============== Listas genéricas (.list/.row), pills, price, metric-grid ==============
   Son el patrón de fila-de-libro-mayor usado en TODA la app (historial de ventas,
   equipo, recordatorios, cierres, etc.) -- filete inferior, sin caja. */
.list { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border-subtle);
}
.list .row:last-child { border-bottom: 0; }
.row strong { display: block; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.row small { display: block; font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--text-strong); text-align: right; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); background: none; padding: 0; margin-top: 4px;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.warn { color: var(--status-warning-fg); }
.pill.bad, .pill.danger { color: var(--status-danger-fg); }
.pill.ok { color: var(--status-success-fg); }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--border-subtle); }
.metric { padding: 14px 18px 14px 0; border-left: 1px solid var(--border-subtle); padding-left: 18px; }
.metric:first-child { border-left: 0; padding-left: 0; }
.metric span { display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-subtle); }
.metric strong { display: block; font-size: 20px; font-weight: 700; color: var(--text-strong); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ============== Caja / Turno ============== */
.rate-hero-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-brand-soft); color: var(--xl-blue-800); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rate-hero-icon svg { width: 17px; height: 17px; }

/* Estado "sin turno abierto": grupo delimitado clave, como la apertura de turno del kit. */
#sessionPanel > .panel {
  background: var(--surface-card); border: 1px solid var(--border-default); border-top: 2px solid var(--border-strong);
  border-radius: var(--radius-card); padding: 40px 28px;
}
#sessionPanel > .panel h3 { font-family: var(--font-serif); font-weight: 400; font-size: 34px; margin: 0 0 10px; }
#sessionPanel > .panel > div > div[style*="border-radius:50%"] { display: none; }
#sessionPanel .field input { text-align: center; }

.closing-plain-section { padding: var(--section-gap) 0 0; border-top: 1px solid var(--border-subtle); }
.closing-plain-section:first-child { border-top: 0; padding-top: 0; }
.closing-plain-section > .panel-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); }

/* ============== Layout de 2 columnas + paginación (Inventario, Config, etc.) ============== */
.two-col-320, .rate-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--card-gap); align-items: start; }
.two-col-320.no-aside { grid-template-columns: 1fr; }
.table-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.pages { display: flex; align-items: center; gap: 4px; }
.pages button {
  min-width: 30px; height: 30px; border: 0; background: none; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pages button:hover { background: var(--surface-subtle); color: var(--text-strong); }
.pages button.active { background: var(--xl-blue-800); color: #fff; }
.pages button:disabled { opacity: .35; cursor: not-allowed; }
.pages button:disabled:hover { background: none; }

/* ============== Fiados ============== */
.receivables-table-head {
  display: grid; grid-template-columns: 1fr 140px 140px 40px; gap: 16px; padding: 0 0 10px;
  border-bottom: 1px solid var(--border-default); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; font-weight: 700; color: var(--text-subtle);
}
.receivables-list { display: block; }
.receivable-customer { border-bottom: 1px solid var(--border-subtle); }
.receivable-customer[open] { background: var(--surface-subtle); }
.receivable-summary {
  display: grid; grid-template-columns: 1fr 140px 140px 40px; gap: 16px; align-items: center;
  padding: 14px 0; cursor: pointer; list-style: none;
}
.receivable-summary::-webkit-details-marker { display: none; }
.receivable-title { display: flex; align-items: center; gap: 10px; }
.receivable-title svg { width: 15px; height: 15px; color: var(--text-subtle); transition: transform var(--dur-fast) var(--ease-standard); flex: 0 0 auto; }
.receivable-customer[open] .receivable-title svg { transform: rotate(90deg); }
.receivable-title strong { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.receivable-count { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.receivable-select { display: flex; justify-content: center; }
.receivable-select input { accent-color: var(--xl-blue-600); width: 16px; height: 16px; }
.receivable-detail { padding: 4px 0 16px 25px; display: flex; flex-direction: column; gap: 14px; }
.receivable-sale { border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.receivable-sale-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.receivable-sale-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: 17px; }
.receivable-facts { display: flex; gap: 24px; margin-bottom: 12px; }
.fact span { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-subtle); }
.fact strong { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); margin-top: 4px; font-variant-numeric: tabular-nums; }
.receivable-pay-form { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 14px; align-items: end; }
.receivable-pay-form .field { margin-bottom: 0; min-width: 0; }
/* AUDIT (2026-09-18): Cliente/Teléfono/Cédula on Cobrar sit in a 3-column
   grid inside the shrinking left panel of #sellView's two-column layout
   (grid-template-columns: minmax(0, 1.25fr) ...) -- a grid item's default
   min-width is its content's intrinsic width, not 0, so each .field (with
   its "V" prefix button + input) refused to shrink and overflowed into the
   "Buscar productos" panel on the right ("Cédula" looked crammed/overlapping).
   Same fix already used for .receivable-pay-form above. */
.sell-customer-row .field { min-width: 0; }
.receivable-pay-form .btn { white-space: nowrap; }
.payment-history { margin-top: 10px; }
.history-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding: 6px 0; border-top: 1px solid var(--border-subtle); }

/* ============== Paneles de pestañas (Reportes / Config / Tasas) ============== */
.report-panel { display: none; }
.report-panel.active { display: block; }
.biz-tab-panel { display: none; }
.biz-tab-panel.active { display: block; }
.rate-tab-panel { display: none; }
.rate-tab-panel.active { display: block; }

/* ============== Configuración ============== */
.qa-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.qa-row:last-child { border-bottom: 0; }
.qa-row:hover { background: var(--surface-subtle); }
.qa-row-icon {
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-brand-soft);
  color: var(--xl-blue-800); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.qa-row-icon svg { width: 15px; height: 15px; }
.qa-row-text { flex: 1; min-width: 0; }
.qa-row-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.qa-row-text small { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

/* Tarjetas del riel lateral (resumen del negocio, acciones rápidas, resumen de tasa):
   sin caja -- se separan por filete, como el resto de la app. */
.rate-summary-card { padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.rate-summary-card:first-child { border-top: 0; padding-top: 0; }
.rate-summary-card h4 { font-family: var(--font-serif); font-weight: 400; font-size: 17px; color: var(--text-strong); margin: 0 0 8px; }

.rate-summary-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.rate-summary-card .rate-summary-row:last-child { border-bottom: 0; }
.rate-summary-icon {
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-brand-soft);
  color: var(--xl-blue-800); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.rate-summary-icon svg { width: 15px; height: 15px; }
.rate-summary-text { flex: 1; min-width: 0; }
.rate-summary-text small { display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-subtle); }
.rate-summary-text strong { display: block; font-size: 17px; font-weight: 700; color: var(--text-strong); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rate-source-pill { display: inline-block; font-size: 11px; font-weight: 700; color: var(--xl-blue-800); margin-top: 2px; }
/* La tasa activa es la cifra protagonista del riel, aunque viva en la misma fila que el resto. */
.rate-sidebar .rate-summary-card:first-child .rate-summary-row:first-child .rate-summary-text strong {
  font-size: 28px; font-family: var(--font-sans);
}

.rate-quick-btn {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--border-subtle); padding: 13px 0; cursor: pointer;
}
.rate-summary-card .rate-quick-btn:last-child { border-bottom: 0; }
.rate-quick-btn > span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.rate-quick-btn.amber > span { color: var(--status-warning-fg); }
.rate-quick-btn svg { width: 15px; height: 15px; }
.rate-quick-btn small { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 500; margin-top: 3px; }
.rate-quick-btn:hover > span { text-decoration: underline; text-underline-offset: 3px; }

.rate-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-strong); background: var(--surface-subtle);
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}
.rate-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--text-subtle); }
.rate-note a { color: var(--text-link); }

/* Selector de país personalizado: mismo tratamiento de subrayado que el resto de los campos */
.custom-country-select { position: relative; }
.custom-country-btn {
  display: flex; align-items: center; gap: 8px; height: var(--control-height); cursor: pointer;
  border-bottom: 1px solid var(--border-default); padding: 0 2px; color: var(--text-strong); font-weight: 600; font-size: 15px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.custom-country-btn:hover { border-bottom-color: var(--xl-blue-600); }
.country-flag-img { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.custom-country-chevron { width: 14px; height: 14px; margin-left: auto; color: var(--text-subtle); flex: 0 0 auto; }
.custom-country-opts {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: 260px; overflow-y: auto;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.country-opt { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-body); }
.country-opt:hover { background: var(--surface-subtle); }
.country-opt svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ============== Tasas de cambio ============== */
.rate-hero { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--section-gap); flex-wrap: wrap; }
.rate-hero-text { flex: 1; min-width: 240px; }
.rate-hero-text h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; color: var(--text-strong); margin: 0; }
.rate-hero-text p { font-size: 14px; color: var(--text-muted); margin: 8px 0 0; max-width: 56ch; }
.rate-hero-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex: 0 0 auto; margin-left: auto; }
.rate-hero-status-label { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-subtle); }
.rate-hero-status strong { font-size: 15px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rate-freshness { font-size: 11px; font-weight: 700; color: var(--status-success-fg); }

.rate-section { padding: var(--section-gap) 0 0; border-top: 1px solid var(--border-subtle); }
.rate-section:first-child { border-top: 0; padding-top: 0; }
.rate-section h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); color: var(--text-strong); margin: 0 0 6px; }
.rate-section-hint { color: var(--text-muted); font-size: 13px; font-weight: 500; margin: 0 0 18px; }

@media (max-width: 1180px) {
  .two-col-320, .rate-layout { grid-template-columns: 1fr; }
}

/* ============== Acerca de ============== */
.about-page { display: flex; flex-direction: column; gap: var(--section-gap); }
.about-hero {
  position: relative; padding-bottom: 26px; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.about-hero-dots, .about-hero-accent, .about-thanks-deco { display: none; }
.about-hero-eyebrow { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--text-subtle); margin-bottom: 8px; }
.about-page .about-hero-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); color: var(--text-strong); margin: 0; }
.about-hero-sub { font-size: 14px; color: var(--text-muted); margin: 8px 0 0; max-width: 46ch; }
.about-hero-brand-wrap { flex: 0 0 auto; }
.about-hero-brand { display: flex; align-items: center; gap: 10px; }
.about-hero-brand img { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.about-hero-brand strong { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.about-version-pill { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }

.about-creator-card { padding-top: var(--section-gap); border-top: 1px solid var(--border-subtle); }
.creator-card { display: flex; align-items: center; gap: 16px; }
.creator-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.about-creator-name { display: flex; align-items: center; gap: 6px; }
.about-creator-name strong { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.about-verified { width: 15px; height: 15px; color: var(--xl-blue-600); }
.creator-card a { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.creator-card small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.about-link {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0 0; margin-top: 14px;
  border-top: 1px solid var(--border-subtle); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-strong);
}
.about-link:hover { color: var(--xl-blue-800); }

.about-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding-top: var(--section-gap); border-top: 1px solid var(--border-subtle); }
.about-feature { display: flex; gap: 12px; align-items: flex-start; }
.about-feature-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.about-feature-icon svg { width: 16px; height: 16px; }
.about-feature-icon.blue { background: var(--surface-brand-soft); color: var(--xl-blue-800); }
.about-feature-icon.green { background: var(--status-success-bg); color: var(--status-success-fg); }
.about-feature-icon.purple { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); }
.about-feature strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.about-feature span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

.about-thanks { display: flex; align-items: center; gap: 14px; padding: var(--section-gap) 0 0; border-top: 1px solid var(--border-subtle); }
.about-thanks-icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-brand-soft);
  color: var(--xl-blue-800); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.about-thanks strong { display: block; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.about-thanks span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.about-footer {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding-top: var(--section-gap); border-top: 1px solid var(--border-subtle);
}
.about-version { font-size: 12px; font-weight: 700; color: var(--text-subtle); }
.about-footer small { font-size: 11.5px; color: var(--text-subtle); }

/* ============== Modales ============== */
/* Única superficie con caja + sombra fuera de la excepción operativa: la
   sábana de papel se detiene para el modal, como marca el contrato. */
.modal-bg {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 27, 51, .5); padding: 24px;
}
.modal-bg.hidden { display: none; }
.modal {
  background: var(--surface-card); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal);
  padding: 28px; max-height: calc(100vh - 48px); overflow-y: auto; width: 100%;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modal-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: var(--text-strong); margin: 0; }

/* ============================================================
   Fase 5 — Responsive
   ============================================================ */

/* ---- ≤1000px: rejillas de 3 columnas pasan a 2 ---- */
@media (max-width: 1000px) {
  .pay-grid { grid-template-columns: repeat(2, 1fr); }
  .receivables-table-head, .receivable-summary { grid-template-columns: 1fr 100px 100px 32px; gap: 10px; }
  /* XL-AUD4-P2: #cartTable's <colgroup> fixes Cant./Precio unit./Descuento/
     Total/(acción) at 120+90+90+90+44=434px combined. At this breakpoint
     the sidebar (236px expanded) plus page gutters (48px x2) can leave
     under 600px of actual content width, so those fixed columns alone
     already exceeded what was left for the flexible Producto column --
     .data-table-wrap's overflow-x:auto masked this as an easy-to-miss
     horizontal scrollbar instead of a visible Total column. Narrower
     (but still legible) fixed widths reclaim ~100px so the common case
     fits without scrolling. */
  #cartTable col:nth-child(2) { width: 70px; }
  #cartTable col:nth-child(3) { width: 76px; }
  #cartTable col:nth-child(4) { width: 70px; }
  #cartTable col:nth-child(5) { width: 76px; }
  #cartTable col:nth-child(6) { width: 36px; }
}

/* ---- ≤860px: móvil -- el riel se convierte en cajón con velo, cabecera
   móvil con hamburguesa, una sola columna en todas partes, objetivos de
   toque más generosos. El scroll horizontal de tablas ya lo cubre
   .data-table-wrap; el mecanismo body.mob-open / toggleMobileSidebar() no
   cambia (ya vivía en app.js). ---- */
@media (max-width: 860px) {
  .mob-header {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
    /* iOS PWA (standalone + viewport-fit=cover): the page renders under the
       Dynamic Island/status bar, and this header started at y=0 with no
       safe-area awareness -- the hamburger button sat right behind the
       status bar. env() is 0px wherever there's no notch (desktop,
       Android without a cutout), so this is a no-op there. */
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--page-gutter-mobile) 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-subtle); background: var(--surface-page);
  }
  .mob-hamburger {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px;
    flex: 0 0 auto; border: 0; background: none; color: var(--text-strong); cursor: pointer; border-radius: var(--radius-sm);
  }
  .mob-hamburger:hover { background: var(--surface-subtle); }
  .mob-hamburger svg { width: 22px; height: 22px; }
  .mob-header-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
  .mob-header-brand img { width: 26px; height: 26px; border-radius: var(--radius-sm); flex: 0 0 auto; }
  .mob-header-brand strong { font-size: 14px; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mob-rate-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; flex: 0 0 auto;
    border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: none;
    color: var(--text-strong); font-size: 12.5px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
  }
  .mob-rate-pill svg { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 auto; }

  .app { flex-direction: column; height: 100vh; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); box-shadow: var(--shadow-lg);
    transition: transform var(--dur-base) var(--ease-standard);
    /* Same iOS safe-area gap as .mob-header, added on top of the base
       18px/14px padding (not replacing it) so desktop/Android keep their
       original spacing -- env() is 0px there. */
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
  body.mob-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(10, 17, 33, .45); z-index: 49;
    opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard);
  }
  body.mob-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  body.mob-open { overflow: hidden; }

  .top-inner { flex-wrap: wrap; row-gap: 10px; padding: 12px var(--page-gutter-mobile); }
  .main > .view.active { padding: 22px var(--page-gutter-mobile) 56px; }

  .view-hero h2, .dash-hero h2, .rate-hero-text h2 { font-size: 28px; }
  .total-box strong { font-size: 38px; }
  .about-hero { flex-direction: column; align-items: flex-start; }

  .two-col-320, .rate-layout, .dash-bottom, .grid-form-2 { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
  .receivable-pay-form { grid-template-columns: 1fr; }
  .receivables-table-head, .receivable-summary { grid-template-columns: 1fr 72px 72px 28px; gap: 6px; }
  .receivable-count small { display: none; }

  .btn { min-height: 44px; }
  .pages button { min-width: 36px; height: 36px; }
  .modal-bg { padding: 16px; }
}