/* Escuadra Admin: the back office's layer (the store PC's administration and the owner's cloud panel).
   Everything is scoped to .esc-admin, so the register (sale, checkout, sign-in, open/close) keeps escuadra.css as is:
   high contrast, keyboard first, 48/72 px. See docs/sistema-de-diseno.md, "Escuadra Admin". */

.esc-admin {
  /* Brand scale: Berenjena #6B1F5E (the logo tag) is 600; OKLCH hue -25°, same lightness steps as the old blue scale; 50 and 100 lean 20° toward violet so a selected row or an info note never reads as the error tint (TK-356). */
  --brand-50: #F9F2FD; --brand-100: #F1E4F8; --brand-200: #F0C5E5; --brand-300: #DD9CCD; --brand-400: #BC6BAB;
  --brand-500: #9B418A; --brand-600: #6B1F5E; --brand-700: #57174C; --brand-800: #42133A; --brand-900: #300D29;

  /* Warm neutrals (paper, not steel) */
  --background: #F6F5F2;
  --surface: #FFFFFF;
  --surface-2: #F2F0EC;
  --surface-3: #E9E6E0;
  --line: #ECE9E3;
  --line-strong: #DAD5CC;
  --text: #191C20;
  --text-2: #57524A;
  --text-3: #6E685E;

  /* Base tokens remapped for the admin */
  --brand: var(--brand-600);
  --brand-hover: var(--brand-700);
  --brand-tint: var(--brand-50);
  --card-border: var(--line);
  --control-border: #B3ACA0;

  /* Soft semantics: tinted background, strong text */
  --success: #16663A; --success-bg: #E6F4EB; --success-dot: #22A05A;
  --warning: #8C4A06; --warning-bg: #FCF1DD; --warning-dot: #E39A2B;
  --error: #B42318;   --error-bg: #FDECEA;   --error-dot: #E5483B;
  --info: var(--brand-700); --info-bg: var(--brand-50);

  /* Data viz: 4 categorical hues in fixed order (validated: CVD ΔE ≥ 11) + the comparison ghost */
  --data-1: #1F6FC5; --data-2: #0E9384; --data-3: #D9822B; --data-4: #8B5CF6;
  --data-ghost: #D9D4CA;

  /* Type: a real hero size */
  --t-hero: 46px; --t-28: 28px;

  /* Shape and elevation: borderless surfaces */
  --r-control: 10px; --r-card: 16px; --r-small: 8px;
  --elev-1: 0 0 0 1px rgba(40, 34, 24, 0.05), 0 1px 2px rgba(40, 34, 24, 0.05), 0 2px 8px rgba(40, 34, 24, 0.03);
  --elev-2: 0 0 0 1px rgba(40, 34, 24, 0.05), 0 4px 16px rgba(40, 34, 24, 0.08);
  --elev-pop: 0 0 0 1px rgba(40, 34, 24, 0.06), 0 16px 40px rgba(40, 34, 24, 0.18);
  --ring: 0 0 0 3px rgba(155, 65, 138, 0.35);
  --touch: 44px;

  /* Surfaces that are not plain tokens elsewhere (redefined in dark mode) */
  --primary-hover: var(--brand-700);
  --danger-line: #F2C4BF;
  --row-hover: #FAF9F7;
  --topbar-bg: rgba(246, 245, 242, 0.92);
  --hover-tint: rgba(155, 65, 138, 0.06);
  --tip-bg: var(--text); --tip-text: #FFFFFF; --tip-muted: #CFC9BF;

  color-scheme: light;
  background: var(--background);
  color: var(--text);
  line-height: 1.4;
}

/* Dark mode (TK-183). escuadra.js (the panel: theme.ts) sets data-theme on <html> from the device's choice, or from prefers-color-scheme
   when the user chose "Sistema". Only the admin goes dark: the register keeps its high-contrast light screens.
   Contrast (WCAG AA) on --surface: text 13.9:1, text-2 7.9:1, text-3 5.7:1, links (--brand) 5.4:1; semantic text on its tint ≥ 6.7:1;
   white on the primary button 5.4:1; brand-700 on brand-50 (selected items) 7.6:1. */
:root[data-theme="dark"] .esc-admin, .esc-admin[data-theme="dark"] { /* the second: a dark sample on a light page (/dev/escuadra) */
  --brand-50: #2F1F36; --brand-100: #3B2743; --brand-200: #64365A; --brand-300: #915584; --brand-400: #AD699E;
  --brand-500: #C17CB2; --brand-600: #9C4E8C; --brand-700: #DEA8D1; --brand-800: #F0D9EA; --brand-900: #F6EBF3;

  --background: #131416;
  --surface: #1C1E21;
  --surface-2: #24272B;
  --surface-3: #2E3237;
  --line: #2C3035;
  --line-strong: #3D4248;
  --text: #ECEAE6;
  --text-2: #B8B2A8;
  --text-3: #9C968C;

  --brand: var(--brand-500);
  --brand-hover: var(--brand-700);
  --control-border: #76706A;

  --success: #6FD49A; --success-bg: #13301F; --success-dot: #3CB873;
  --warning: #F2B866; --warning-bg: #36260F; --warning-dot: #E39A2B;
  --error: #FF8A80;   --error-bg: #3D1A16;   --error-dot: #E5483B;

  --data-1: #4C93E0; --data-2: #2BB3A3; --data-3: #E39A4A; --data-4: #A78BFA;
  --data-ghost: #4A4F56;

  --elev-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 16px rgba(0, 0, 0, 0.45);
  --elev-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(193, 124, 178, 0.45);

  --primary-hover: #235FA6;
  --danger-line: #6B2A25;
  --row-hover: #212428;
  --topbar-bg: rgba(19, 20, 22, 0.92);
  --hover-tint: rgba(90, 155, 224, 0.1);
  --tip-bg: #3A3E44; --tip-text: #FFFFFF; --tip-muted: #CFC9BF;

  color-scheme: dark;
}
/* Behind the admin (overscroll, short pages) */
:root[data-theme="dark"] { --admin-page: #131416; }
:root[data-theme="dark"] body:has(.esc-admin) { background: var(--admin-page); }

.esc-admin :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ---------- Shell: icon sidebar (desktop), top bar + bottom tabs (phone) ---------- */
.esc-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.esc-shell--collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.esc-side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px; background: var(--surface-2); border-right: 1px solid var(--line); overflow: hidden auto;
}
.esc-side__brand { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 12px; }
.esc-side__brand .esc-spacer { min-width: 0; }
.esc-side__store { padding: 0 10px 12px; font-size: var(--t-13); color: var(--text-2); line-height: 1.3; }
.esc-side__store b { display: block; color: var(--text); font-size: var(--t-15); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-side__nav { display: flex; flex-direction: column; gap: 2px; }
.esc-side a, .esc-side__item {
  min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border-radius: var(--r-control);
  color: var(--text-2); text-decoration: none; font-weight: 500; border: 0; background: transparent; width: 100%; text-align: left;
  white-space: nowrap;
}
.esc-side a:hover, .esc-side__item:hover { background: var(--surface-3); color: var(--text); }
.esc-side a.active { background: var(--surface); color: var(--brand-700); font-weight: 600; box-shadow: var(--elev-1); }
.esc-side a.active svg { color: var(--brand-600); }
.esc-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
/* TK-281: on short screens (1366x768 with the taskbar) the 12 sections and the foot fit without scrolling. */
@media (max-height: 820px) { .esc-side { gap: 2px; padding-block: 10px; } .esc-side__nav { gap: 0; } .esc-side a, .esc-side__item { min-height: 34px; } .esc-side__foot { gap: 0; } .esc-side__brand { padding-bottom: 8px; } .esc-side__store { padding-bottom: 8px; } .esc-side__foot { padding-top: 8px; } }
.esc-side__sell { justify-content: space-between; }
.esc-side__user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0; }
.esc-side__user > div { min-width: 0; display: flex; flex-direction: column; font-size: var(--t-13); color: var(--text-3); }
.esc-side__user b { color: var(--text); font-size: var(--t-15); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-side__toggle { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; color: var(--text-3); }
.esc-shell--collapsed .esc-side { padding: 16px 10px; align-items: center; }
.esc-shell--collapsed .esc-side a, .esc-shell--collapsed .esc-side__item { width: 48px; padding: 0; justify-content: center; }
.esc-shell--collapsed .esc-side__brand { flex-direction: column; padding: 0 0 12px; }
.esc-shell--collapsed .esc-side__label, .esc-shell--collapsed .esc-side__store,
.esc-shell--collapsed .esc-side__user > div, .esc-shell--collapsed .esc-side .esc-keycap, .esc-shell--collapsed .esc-logo > span { display: none; }
.esc-shell--collapsed .esc-side__foot { align-items: center; }

.esc-main { min-width: 0; display: flex; flex-direction: column; }
.esc-admin .esc-page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 48px; gap: 20px; }

.esc-topbar, .esc-tabbar { display: none; }

@media (max-width: 760px) {
  .esc-shell, .esc-shell--collapsed { display: block; }
  .esc-side { display: none; }
  .esc-topbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px 0 16px;
    background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  }
  .esc-topbar__store { flex: 1 1 auto; min-width: 0; font-size: var(--t-13); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .esc-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
    background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(40, 34, 24, 0.05);
  }
  .esc-tabbar a {
    flex: 1 1 0; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--text-3); text-decoration: none; font-size: 12px; font-weight: 500;
  }
  .esc-tabbar a.active { color: var(--brand-700); font-weight: 600; }
  .esc-tabbar a.active svg { background: var(--brand-50); border-radius: 999px; box-sizing: content-box; padding: 2px 14px; }
  /* "Más": the sections that do not fit, in a sheet above the bar */
  .esc-tabbar > .esc-tabbar__more {
    flex: 1 1 0; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; color: var(--text-3); font-size: 12px; font-weight: 500;
  }
  .esc-tabbar > .esc-tabbar__more.active, .esc-tabbar > .esc-tabbar__more[aria-expanded="true"] { color: var(--brand-700); font-weight: 600; }
  .esc-tabbar__sheet {
    position: absolute; right: 8px; bottom: calc(100% + 8px); min-width: 220px; padding: 6px; display: flex; flex-direction: column;
    background: var(--surface); border-radius: var(--r-card); box-shadow: var(--elev-pop);
  }
  .esc-tabbar .esc-tabbar__sheet a { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 12px; font-size: var(--t-15); color: var(--text); border-radius: var(--r-control); }
  .esc-tabbar .esc-tabbar__sheet a.active { background: var(--brand-50); }
  .esc-tabbar .esc-tabbar__sheet a.active svg { background: none; padding: 0; }
  .esc-admin .esc-page { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); gap: 16px; }
}

/* ---------- Page header ---------- */
.esc-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.esc-page-head h1 { font-size: var(--t-28); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.esc-page-head p { margin-top: 4px; color: var(--text-2); font-size: var(--t-15); }
.esc-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  /* nowrap: a wrapping column is sized by its widest child (a long store name in the select), not by the phone (TK-354). */
  .esc-page-head { align-items: stretch; flex-direction: column; flex-wrap: nowrap; }
  .esc-page-head h1 { font-size: var(--t-24); }
  /* TK-354: min-width 0 so a select sized by its longest store name, or the period buttons, shrink to the phone instead of widening the page. */
  .esc-page-head__actions > * { flex: 1 1 auto; min-width: 0; max-width: 100%; }
}
.esc-section-title { font-size: var(--t-17); font-weight: 650; letter-spacing: -0.01em; }

/* ---------- Surfaces ---------- */
.esc-admin .esc-card { background: var(--surface); border: 0; border-radius: var(--r-card); box-shadow: var(--elev-1); }
.esc-admin .esc-card--padded { padding: 20px; }
.esc-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.esc-card__title { font-size: var(--t-15); font-weight: 600; }
.esc-card__aside { font-size: var(--t-13); color: var(--text-3); }
.esc-admin .esc-label { font-size: var(--t-13); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.esc-admin .esc-subtitle, .esc-admin .esc-muted { color: var(--text-2); }
.esc-admin .esc-title { font-size: var(--t-28); letter-spacing: -0.02em; }
.esc-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.esc-span-4 { grid-column: span 4; } .esc-span-5 { grid-column: span 5; } .esc-span-6 { grid-column: span 6; }
.esc-span-7 { grid-column: span 7; } .esc-span-8 { grid-column: span 8; } .esc-span-12 { grid-column: span 12; }
@media (max-width: 1080px) { .esc-grid > * { grid-column: span 12; } }

/* ---------- Hero number ---------- */
.esc-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; padding: 24px; }
.esc-hero__label { font-size: var(--t-15); font-weight: 500; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.esc-hero__value { font-size: var(--t-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-top: 6px; white-space: nowrap; }
.esc-hero__value small { font-size: 0.45em; font-weight: 600; color: var(--text-3); letter-spacing: 0; margin-right: 6px; }
.esc-hero__compare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--text-2); font-size: var(--t-15); }
.esc-hero__spark { color: var(--brand-500); align-self: center; }
@media (max-width: 760px) {
  .esc-admin { --t-hero: min(38px, 9vw); } /* TK-354: "RD$ 1,234,567.89" fits a 320 px phone */
  .esc-hero { grid-template-columns: 1fr; padding: 20px; }
  .esc-hero__spark { order: 3; width: 100%; }
  .esc-hero__spark svg { width: 100%; }
}

.esc-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: var(--t-13); font-weight: 600; white-space: nowrap; }
.esc-delta--up { background: var(--success-bg); color: var(--success); }
.esc-delta--down { background: var(--error-bg); color: var(--error); }
.esc-delta--flat { background: var(--surface-2); color: var(--text-2); }

/* Secondary metrics */
.esc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esc-stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.esc-stat + .esc-stat { border-left: 1px solid var(--line); }
.esc-stat__label { font-size: var(--t-13); color: var(--text-2); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.esc-stat__value { font-size: var(--t-24); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.esc-stat__note { font-size: var(--t-13); color: var(--text-3); }
@media (max-width: 600px) {
  .esc-stats { grid-template-columns: 1fr 1fr; }
  .esc-stat:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  /* TK-354: a big amount in a half-width column wraps after "RD$" and shrinks with its column, instead of running into the next one. */
  .esc-stat { container-type: inline-size; }
  .esc-stat__value { font-size: min(var(--t-20), 13cqi); white-space: normal; }
}

/* ---------- "Para revisar" ---------- */
.esc-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.esc-alert { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.esc-alert + .esc-alert { border-top: 1px solid var(--line); }
.esc-alert__icon { flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; }
.esc-alert--warning .esc-alert__icon { background: var(--warning-bg); color: var(--warning); }
.esc-alert--error .esc-alert__icon { background: var(--error-bg); color: var(--error); }
.esc-alert--info .esc-alert__icon { background: var(--info-bg); color: var(--info); }
.esc-alert__body { flex: 1 1 auto; min-width: 0; }
.esc-alert__title { font-weight: 600; }
.esc-alert--error .esc-alert__title b { color: var(--error); }
.esc-alert--warning .esc-alert__title b { color: var(--warning); }
.esc-alert__meta { font-size: var(--t-13); color: var(--text-2); margin-top: 2px; }
.esc-alert .esc-button { flex: none; }
@media (max-width: 600px) {
  .esc-alert { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; align-items: start; }
  .esc-alert .esc-button { grid-column: 2; justify-self: start; margin-top: 6px; }
}
.esc-all-good { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-card); background: var(--success-bg); color: var(--success); font-weight: 600; }

/* ---------- Chart: bars with last period's ghost ---------- */
.esc-chart { position: relative; }
.esc-chart__plot { position: relative; height: 200px; display: flex; align-items: stretch; gap: 6px; padding-left: 48px; }
.esc-chart__grid { position: absolute; inset: 0 0 0 0; pointer-events: none; }
.esc-chart__grid div { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-strong); }
.esc-chart__grid div:last-child { border-top: 1px solid var(--line-strong); }
.esc-chart__grid span { position: absolute; left: 0; top: -9px; width: 42px; font-size: 12px; color: var(--text-3); text-align: right; }
.esc-chart__col { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-radius: var(--r-small); outline-offset: 0; }
.esc-chart__col:hover, .esc-chart__col:focus-visible { background: var(--hover-tint); }
.esc-chart__bar, .esc-chart__ghost { width: min(40%, 26px); border-radius: 4px 4px 0 0; min-height: 2px; }
.esc-chart__bar { background: var(--brand-500); }
.esc-chart__col--current .esc-chart__bar { background: var(--brand-700); }
.esc-chart__ghost { background: var(--data-ghost); }
.esc-chart__x { display: flex; gap: 6px; padding-left: 48px; margin-top: 8px; }
.esc-chart__x span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; }
.esc-chart__x span.is-current { color: var(--text); font-weight: 600; }
.esc-chart__tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 168px;
  padding: 10px 12px; border-radius: var(--r-control); background: var(--tip-bg); color: var(--tip-text); font-size: var(--t-13); line-height: 1.45;
  box-shadow: var(--elev-pop); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms; white-space: nowrap; text-align: left;
}
.esc-chart__tip b { display: block; font-size: var(--t-15); }
.esc-chart__tip span { color: var(--tip-muted); }
.esc-chart__col:first-child .esc-chart__tip { left: 0; transform: none; }
.esc-chart__col:last-child .esc-chart__tip { left: auto; right: 0; transform: none; }
.esc-chart__col:hover .esc-chart__tip, .esc-chart__col:focus-visible .esc-chart__tip { opacity: 1; visibility: visible; }
/* TK-354: on a phone a tip centered on a column ran past the screen (hidden, it still widened the page to ~405 px at 390): it sits
   above the plot instead, as wide as the plot, whichever column is touched. */
@media (max-width: 760px) {
  .esc-chart__col { position: static; }
  .esc-chart__col .esc-chart__tip, .esc-chart__col:first-child .esc-chart__tip, .esc-chart__col:last-child .esc-chart__tip {
    left: 48px; right: 0; bottom: calc(100% + 8px); transform: none; min-width: 0; white-space: normal;
  }
}
.esc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-13); color: var(--text-2); }
.esc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.esc-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--brand-500); }
.esc-legend i.ghost { background: var(--data-ghost); }
@media (max-width: 600px) {
  .esc-chart__plot { height: 168px; gap: 3px; padding-left: 40px; }
  .esc-chart__x { gap: 3px; padding-left: 40px; }
  .esc-chart__x span { white-space: normal; line-height: 1.25; }
  .esc-chart__grid span { width: 34px; font-size: 11px; }
}

/* ---------- Proportion bars (top products, payment mix) ---------- */
.esc-barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.esc-barlist__row { display: flex; align-items: baseline; gap: 8px; }
.esc-barlist__name { flex: 1 1 auto; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-barlist__name .esc-table--wide { min-width: 760px; }
.esc-admin .esc-only-sm { display: none; }
@media (max-width: 600px) {
  .esc-hide-sm { display: none; }
  .esc-admin .esc-only-sm { display: block; }
  .esc-admin .esc-table--wide { min-width: 0; }
  .esc-admin .esc-table td, .esc-admin .esc-table th { padding-left: 12px; padding-right: 12px; }
  .esc-admin .esc-table td { height: 60px; }
  .esc-admin .esc-table .esc-avatar { display: none; }
  .esc-table-wrap--tall { max-height: none; }
  .esc-admin .esc-page > form .esc-select { flex: 1 1 100%; }
}
.esc-table__sub { white-space: normal; }
.esc-barlist__qty { font-size: var(--t-13); color: var(--text-3); white-space: nowrap; }
.esc-barlist__value { font-weight: 600; white-space: nowrap; text-align: right; }
.esc-barlist__track { height: 8px; margin-top: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.esc-barlist__track > div { height: 100%; border-radius: 999px; background: var(--brand-500); min-width: 4px; }
.esc-barlist__share { font-size: var(--t-13); color: var(--text-3); min-width: 40px; text-align: right; }
/* TK-354: name and amount on the first line, the detail (quantity, profit) under them, so the row fits a phone. */
@media (max-width: 760px) {
  .esc-barlist__row { flex-wrap: wrap; }
  .esc-barlist__name { flex-basis: 0; } /* shrinks (ellipsis) instead of pushing the amount to its own line */
  .esc-barlist__qty { order: 3; flex-basis: 100%; }
}

/* Stacked share bar (payment mix) */
.esc-stack { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.esc-stack > div { min-width: 4px; }
.esc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Sparkline */
.esc-spark { display: block; overflow: visible; }

/* ---------- Controls ---------- */
.esc-admin .esc-button {
  min-height: var(--touch); padding: 0 16px; border-radius: var(--r-control); border: 0; font-weight: 600;
  background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(40, 34, 24, 0.06);
  transition: background-color 120ms, box-shadow 120ms;
}
.esc-admin .esc-button:hover:not(:disabled) { background: var(--surface-2); }
.esc-admin .esc-button--primary { background: var(--brand-600); color: var(--paper); box-shadow: 0 1px 2px rgba(48, 13, 41, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.esc-admin .esc-button--primary:hover:not(:disabled) { background: var(--primary-hover); }
.esc-admin .esc-button--danger { color: var(--error); box-shadow: 0 0 0 1px var(--danger-line); }
.esc-admin .esc-button--danger:hover:not(:disabled) { background: var(--error-bg); }
.esc-admin .esc-button--ghost { background: transparent; box-shadow: none; color: var(--text-2); }
.esc-admin .esc-button--ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.esc-admin .esc-button--small { min-height: 36px; padding: 0 12px; font-size: var(--t-13); }
.esc-admin .esc-button:focus-visible { outline: 0; box-shadow: var(--ring); }
.esc-admin .esc-button .esc-keycap { border-color: currentColor; color: inherit; opacity: 0.7; font-size: 11px; }

.esc-admin .esc-input, .esc-admin .esc-select {
  min-height: var(--touch); padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--r-control); background: var(--surface);
  transition: border-color 120ms, box-shadow 120ms;
}
.esc-admin .esc-input:hover, .esc-admin .esc-select:hover { border-color: var(--text-3); }
.esc-admin .esc-input:focus, .esc-admin .esc-select:focus { outline: 0; border-color: var(--brand-500); box-shadow: var(--ring); }
.esc-admin .esc-input[aria-invalid="true"], .esc-admin .esc-select[aria-invalid="true"] { border: 1px solid var(--error); box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }
.esc-admin .esc-field { gap: 6px; }
.esc-admin .esc-field > span:first-child { font-size: var(--t-13); font-weight: 600; color: var(--text); }
.esc-field__hint { font-size: var(--t-13); color: var(--text-3); font-weight: 400; }
.esc-field__error { display: flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--error); font-weight: 500; }
.esc-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.esc-check input { width: 20px; height: 20px; accent-color: var(--brand-600); }

.esc-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: var(--touch);
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--r-control); color: var(--text-3); }
.esc-search:focus-within { border-color: var(--brand-500); box-shadow: var(--ring); }
.esc-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; min-height: 42px; color: var(--text); }

/* Segmented control (date ranges, options) */
.esc-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface-3); max-width: 100%; overflow-x: auto; }
.esc-segmented button {
  min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-weight: 500; white-space: nowrap;
}
.esc-segmented button:hover { color: var(--text); }
.esc-segmented button[aria-pressed="true"], .esc-segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(40, 34, 24, 0.12), 0 0 0 1px rgba(40, 34, 24, 0.04); }
@media (max-width: 600px) { .esc-segmented { display: flex; } .esc-segmented button { flex: 1 1 auto; min-width: 0; padding: 0 8px; min-height: 40px; } }

/* Underline tabs (sections of a page) */
.esc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; }
.esc-tabs button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text-2); font-weight: 500; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.esc-tabs button:hover { color: var(--text); }
.esc-tabs button[aria-selected="true"] { color: var(--brand-700); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-600); }

.esc-admin .esc-chip { min-height: 40px; border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); font-weight: 500; }
.esc-admin .esc-chip:hover:not(:disabled) { background: var(--surface-2); }
.esc-admin .esc-chip[aria-pressed="true"] { background: var(--brand-50); color: var(--brand-700); box-shadow: 0 0 0 1px var(--brand-300); }

/* Pills and notices: soft semantics */
.esc-admin .esc-pill { padding: 3px 10px 3px 8px; font-weight: 600; font-size: var(--t-13); white-space: nowrap; }
.esc-admin .esc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.esc-admin .esc-pill--success::before { background: var(--success-dot); }
.esc-admin .esc-pill--warning::before { background: var(--warning-dot); }
.esc-admin .esc-pill--error::before { background: var(--error-dot); }
.esc-admin .esc-pill--neutral { background: var(--surface-2); color: var(--text-2); }
.esc-admin .esc-pill--neutral::before { background: var(--text-3); }
.esc-admin .esc-notice { border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.esc-admin .esc-notice--info { background: var(--info-bg); color: var(--info); }
.esc-admin .esc-notice__detail { color: var(--text-2); }

/* ---------- Tables ---------- */
.esc-admin .esc-table-wrap { overflow: auto; }
.esc-table-wrap--tall { max-height: calc(100vh - 260px); }
.esc-admin .esc-table { border-collapse: separate; border-spacing: 0; font-size: var(--t-15); }
.esc-admin .esc-table th {
  position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 12px 16px; border-bottom: 1px solid var(--line-strong);
  font-size: var(--t-13); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2);
}
.esc-admin .esc-table th.esc-num, .esc-admin .esc-table td.esc-num { text-align: right; font-variant-numeric: tabular-nums; }
.esc-admin .esc-table td { height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.esc-admin .esc-table tbody tr { transition: background-color 80ms; }
.esc-admin .esc-table tbody tr:hover { background: var(--row-hover); }
.esc-admin .esc-table tbody tr.selectable:hover { background: var(--brand-50); }
.esc-admin .esc-table tbody tr.selectable:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.esc-table--wide { min-width: 760px; }
.esc-admin .esc-only-sm { display: none; }
@media (max-width: 600px) {
  .esc-hide-sm { display: none; }
  .esc-admin .esc-only-sm { display: block; }
  .esc-admin .esc-table--wide { min-width: 0; }
  .esc-admin .esc-table td, .esc-admin .esc-table th { padding-left: 12px; padding-right: 12px; }
  .esc-admin .esc-table td { height: 60px; }
  .esc-admin .esc-table .esc-avatar { display: none; }
  .esc-table-wrap--tall { max-height: none; }
  .esc-admin .esc-page > form .esc-select { flex: 1 1 100%; }
}
.esc-table__sub { display: block; font-size: var(--t-13); color: var(--text-3); font-weight: 400; }
.esc-table__chev { width: 40px; color: var(--text-3); text-align: right; }
.esc-table-foot { padding: 12px 16px; font-size: var(--t-13); color: var(--text-3); border-top: 1px solid var(--line); }

/* Avatar with initials: people, not ids */
.esc-avatar { flex: none; width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--brand-100); color: var(--brand-800); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.esc-person { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Empty and loading ---------- */
.esc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; color: var(--text-2); }
.esc-empty__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); margin-bottom: 6px; }
.esc-empty__title { font-weight: 600; color: var(--text); }
.esc-empty p { max-width: 380px; font-size: var(--t-15); }
.esc-skeleton { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: esc-shimmer 1.4s ease-in-out infinite; }
@keyframes esc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esc-skeleton { animation: none; } .esc-chart__tip { transition: none; } }

/* ---------- Settings layout: description left, form right ---------- */
.esc-settings { display: flex; flex-direction: column; gap: 16px; max-width: 980px; container-type: inline-size; }
.esc-setting { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px 32px; padding: 24px; }
.esc-setting__about h2 { font-size: var(--t-17); font-weight: 650; }
.esc-setting__about p { margin-top: 6px; color: var(--text-2); font-size: var(--t-15); }
.esc-setting__body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.esc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.esc-form-grid .esc-wide { grid-column: 1 / -1; }
.esc-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.esc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.esc-dl dt { color: var(--text-2); }
.esc-dl dd { margin: 0; font-weight: 600; }
/* One column when the card itself is narrow (sidebar open on a tablet), not only on a narrow window. */
@container (max-width: 700px) { .esc-setting { grid-template-columns: 1fr; padding: 20px; } }
/* TK-354: a setting card outside .esc-settings (no container to ask) still goes to one column on a phone. */
@media (max-width: 760px) { .esc-setting { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

.esc-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 20px; border-radius: 14px; background: var(--brand-50); }
.esc-code__digits { font-size: 40px; font-weight: 700; letter-spacing: 0.12em; color: var(--brand-800); font-variant-numeric: tabular-nums; }

/* ---------- Dialog in the admin ---------- */
.esc-admin .esc-overlay { background: rgba(25, 22, 18, 0.45); backdrop-filter: blur(2px); }
.esc-admin .esc-dialog { border-radius: 20px; box-shadow: var(--elev-pop); }
.esc-admin .esc-dialog__header { border-bottom: 0; padding: 22px 24px 4px; }
.esc-admin .esc-dialog__body { padding: 16px 24px 20px; }
.esc-admin .esc-dialog__footer { position: sticky; bottom: 0; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 20px 20px; padding: 14px 24px; }
.esc-admin .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.esc-admin .kpi { padding: 14px 16px; border-radius: 14px; box-shadow: none; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.esc-admin .kpi__value { font-size: var(--t-24); font-weight: 700; letter-spacing: -0.02em; }
/* Phone: two per row, so a dialog's figures do not push its content below the fold */
@media (max-width: 600px) {
  .esc-admin .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .esc-admin .kpi { padding: 10px 12px; }
  .esc-admin .kpi__value { font-size: var(--t-17); white-space: nowrap; }
}

/* ---------- Assistant (panel): always one tap away ---------- */
.esc-ask { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px 0 16px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--elev-1); color: var(--brand-500); }
.esc-ask:focus-within { box-shadow: var(--elev-1), var(--ring); }
.esc-ask__input { flex: 1 1 auto; min-width: 0; min-height: 48px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--t-15); }
.esc-ask__input::placeholder { color: var(--text-3); }
.esc-ask .esc-button { width: 40px; padding: 0; }

.esc-chat { display: flex; flex-direction: column; gap: 14px; min-height: 280px; padding: 20px; }
.esc-bubble { max-width: min(85%, 640px); padding: 12px 16px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.esc-bubble--user { align-self: flex-end; background: var(--brand-600); color: var(--paper); border-bottom-right-radius: 6px; }
.esc-bubble--assistant { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.esc-bubble-row { display: flex; gap: 10px; align-items: flex-end; }
.esc-bubble-row--user { justify-content: flex-end; }
.esc-composer { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--elev-2); }
.esc-composer input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; padding: 0 10px; background: transparent; font-size: var(--t-17); }
@media (max-width: 760px) { .esc-composer { bottom: calc(68px + env(safe-area-inset-bottom)); } }

/* Sign in (panel) */
.esc-signin { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 10% -10%, var(--brand-100), transparent 60%), var(--background); }
.esc-signin__card { width: min(420px, 100%); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.esc-signin__card h1 { font-size: var(--t-24); font-weight: 700; letter-spacing: -0.02em; }
@media (max-width: 600px) { .esc-signin__card { padding: 24px 20px; } }
/* TK-155/156: certification steps, XML preview and the contingency help panel on "Comprobantes electrónicos". */
.esc-steps { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.esc-steps label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
/* TK-321 design review: on <pre> only; on the pairing-code box (.esc-code above) it broke the instructions mid-word. */
pre.esc-code { max-height: 240px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.esc-help { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.esc-help summary { cursor: pointer; font-weight: 600; }
.esc-help ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }