/* Corporativo DyA — sistema visual 0.6.1: papel y tinta.
   Fondo blanco y tarjetas en gris neutro muy claro (#F6F6F6), sin bordes ni sombras: las separa el tono.
   La tinta (casi negro) es el color de la acción principal y de la cifra principal; todo lo demás es
   gris neutro. El azul de la marca queda para lo que se puede tocar como enlace y para el foco.
   Los tres colores de estado solo aparecen cuando significan algo, y casi siempre como un punto o un
   icono junto al texto, no como una mancha de color. El color de cada negocio (--biz) solo identifica. */

@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
/* Tipografías que un negocio puede elegir para sus títulos (0.7.0): solo se descargan si alguno las usa. */
@font-face { font-family: 'Besley'; src: url('/fonts/besley.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/cormorant.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* Identidad de plataforma: colores de los SVG aprobados; los negocios conservan sus tokens. */
  --platform-ink: #0B1F3B;
  --platform-accent: #1F6BFF;
  --platform-highlight: #F0B429;
  /* Superficies */
  --bg: #FFFFFF;
  --paper: #FFFFFF;      /* fondo general (nombre heredado) */
  --surface: #FFFFFF;    /* superficie blanca: barra, hojas, campos sobre tarjeta */
  --card: #F6F6F6;       /* tarjetas */
  --sunken: #EFEFEF;     /* pistas de controles, estados marcados, superficies hundidas */
  --rail: #FAFAFA;       /* columna de negocios en pantallas anchas */
  --line: #E7E7E7;       /* líneas finas */
  --line-2: #D0D0D0;     /* borde más visible (campos al pasar, divisores fuertes) */
  /* Texto */
  --ink: var(--platform-ink);
  --ink-2: #5C5C5C;
  --ink-3: #6E6E6E;
  --cream: #FFFFFF;      /* texto sobre superficies oscuras (nombre heredado) */
  /* Acción: tinta. Enlaces y foco: el azul de la marca. */
  --accent: var(--platform-accent);
  --accent-hover: #1D4ED8;
  --accent-dark: #1D4ED8;
  --accent-ink: #1D4ED8;
  --accent-soft: #EEF2FD;
  --accent-line: #C7D3F7;
  --on-accent: #FFFFFF;
  --mark: #1A1A1A;       /* barras y medidores */
  --biz: #2563EB;        /* color del negocio abierto: solo identifica (lo cambia applyAccent) */
  /* Estados: siempre con icono o texto, nunca solo color. */
  --ok: #1F8A5B;
  --ok-ink: #156343;
  --ok-soft: #E8F4ED;
  --warn: #B97A14;
  --warn-ink: #7E5208;
  --warn-soft: #FAF1DE;
  --warn-fill: #C98A1B;
  --bad: #CF3A36;
  --bad-ink: #A32824;
  --bad-soft: #FBEBEA;
  --context: #B8B8B8;    /* gris de contexto en las gráficas: el periodo anterior, nunca una categoría */
  /* Letra: una sola familia para todo. */
  --ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: var(--ui);
  /* Radios por función: controles, tarjetas, hojas */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --shadow-float: 0 18px 40px -18px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06);
  --bar-h: 56px;
  --rail-w: 252px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 var(--ui); -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--ui); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 26px; font-weight: 600; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.tiny.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.boot { padding: 40vh 24px 0; text-align: center; color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ───────── Estructura ───────── */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.shell-main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px calc(var(--nav-h) + var(--safe-b) + 28px); }
.shell.owner .shell-main { max-width: 1180px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row > .grow, .grow { flex: 1; min-width: 0; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.left { text-align: left; }
.end { text-align: right; flex: none; }
.tags { gap: 4px; margin-top: 6px; }
.sub { margin: 8px 2px 10px; }
.page-head h1 + p { margin-top: 2px; }

.demo-bar { background: var(--warn-soft); color: var(--warn-ink); font-size: 13px; font-weight: 600; text-align: center; padding: 6px 12px; }

.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--biz); flex: none; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--ink-2); flex: none; }
@media (hover: hover) { .icon-btn:hover { background: var(--sunken); color: var(--ink); } }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.seal-mark { display: block; }
/* El logotipo oficial con el nombre ya escrito (marca.js), cuando exista: nunca más ancho que su lugar ni deformado. */
.word-mark { width: auto; max-width: 100%; object-fit: contain; vertical-align: middle; }


.sections { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 14px; }
.sections::-webkit-scrollbar { display: none; }
/* Secciones de un negocio: pestañas con línea, no pastillas */
.sections.tabs-line { gap: 2px; padding-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
.tabs-line .chip { border: 0; border-radius: 0; background: none; min-height: 44px; padding: 0 12px; color: var(--ink-2); border-bottom: 2px solid transparent; }
@media (hover: hover) { .tabs-line .chip:hover { color: var(--ink); } }
.tabs-line .chip[aria-current="page"] { background: none; color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 650; }

/* El menú "Más": las secciones que no caben en la barra */
.more-list > li { padding: 0; }
.more-list .row-link { align-items: center; padding: 12px 14px 12px 16px; }
.more-list .row-link > .icon { margin-top: 0; }
button.row-link { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }

/* ───────── Piezas ───────── */
.panel { background: var(--card); border: 1px solid transparent; border-radius: var(--r-m); padding: 16px; }
.panel.flat { padding: 0; overflow: hidden; }
.panel.lined { border-color: var(--line); background: var(--surface); }
.panel-head { padding: 14px 16px 10px; }
.panel-head p { margin-top: 3px; }
.panel-head .check { margin-top: 6px; }
.note { border-radius: var(--r-m); padding: 14px 16px; background: var(--accent-soft); color: var(--ink); }
.note.warn { background: var(--warn-soft); }
.note.bad-note { background: var(--bad-soft); }
.note.msg { text-align: left; }
.note.msg.unlocked { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.unlock { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--accent-line); }
.unlock > .icon { width: 30px; height: 30px; color: var(--accent-ink); }
.unlock b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.unlock span { display: block; }
ul.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.empty { text-align: center; padding: 32px 20px; color: var(--ink-2); }
.empty h3 { color: var(--ink); margin-bottom: 4px; }
.empty p + p { margin-top: 12px; }
.empty .tone { width: 44px; height: 44px; margin: 0 auto 12px; background: var(--surface); color: var(--ink-2); }
.empty .tone .icon { width: 22px; height: 22px; }
.stale { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 15.5px; text-decoration: none; color: var(--ink); white-space: nowrap; transition: background .12s ease, border-color .12s ease; }
@media (hover: hover) { .btn:hover { border-color: var(--line-2); background: var(--sunken); } }
.btn:active { background: var(--sunken); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } }
.btn.primary:active { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.dark { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--cream); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--accent-ink); padding: 0 10px; }
.btn.danger { color: var(--bad-ink); border-color: #EBC4C2; background: var(--surface); }
@media (hover: hover) { .btn.danger:hover { background: var(--bad-soft); border-color: #EBC4C2; } }
.btn.sm { min-height: 38px; font-size: 14px; padding: 0 13px; border-radius: 10px; }
.btn.sm .icon { width: 18px; height: 18px; }
.btn.block { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .icon { width: 20px; height: 20px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--ink); }
.field small { color: var(--ink-2); font-size: 13px; }
.input, select.input, textarea.input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--sunken); font-size: 16px; color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; }
.input::placeholder { color: #9A9A9A; }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
textarea.input { min-height: 88px; resize: vertical; }
.input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.panel .input, .sheet .input { background: var(--surface); }
.panel .input:focus, .sheet .input:focus { background: var(--surface); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.grid-2 > .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 6px 10px; }
.form-error { color: var(--bad-ink); background: var(--bad-soft); border-radius: var(--r-s); padding: 10px 12px; font-size: 14.5px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }

.chip { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 550; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: background .12s ease, border-color .12s ease; }
@media (hover: hover) { .chip:hover { border-color: var(--line-2); background: var(--sunken); } }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.chips::-webkit-scrollbar { display: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--sunken); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button, .seg .seg-link { min-height: 40px; border: 0; background: none; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); display: grid; place-items: center; text-decoration: none; padding: 0 6px; text-align: center; line-height: 1.15; }
.seg button[aria-pressed="true"], .seg .seg-link[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.seg.range { width: 100%; max-width: 340px; flex: none; }
.seg.tabs { margin-bottom: 16px; }

/* Etiquetas de estado: fondo suave y texto oscuro del mismo tono */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink); white-space: nowrap; line-height: 1.25; }
.tag .icon { width: 13px; height: 13px; stroke-width: 2.3; }
.tag.ok { background: var(--ok-soft); color: var(--ok-ink); }
.tag.warn { background: var(--warn-soft); color: var(--warn-ink); }
.tag.bad { background: var(--bad-soft); color: var(--bad-ink); }
.tag.accent { background: var(--accent-soft); color: var(--accent-dark); }
.tag.lock { background: var(--sunken); color: var(--ink-2); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.list > li.tap { cursor: pointer; }
/* Renglón que se toca: un botón de verdad dentro del elemento de la lista (teclado y lector de pantalla lo entienden) */
.list > li.has-btn { padding: 0; align-items: stretch; }
.row-btn { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; width: 100%; min-width: 0; padding: 12px 16px; background: none; border: 0; text-align: left; font: inherit; color: inherit; line-height: inherit; }
.row-btn:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .row-btn:hover { background: rgba(0, 0, 0, .035); } }
.list > li.has-btn.wrap > .row-btn { flex: 1 1 280px; width: auto; }
.row-btn > .grow { flex: 1 1 0; }
.row-btn > .icon:last-child { color: var(--ink-2); }
.list > li.has-btn > .btn { align-self: center; flex: none; margin: 0 16px 0 0; }
@media (max-width: 599px) { .list > li.has-btn.wrap > .btn { margin: -2px 16px 14px 76px; } }
@media (hover: hover) { .list > li.tap:hover { background: rgba(0, 0, 0, .035); } }
.list > li.tap:focus-visible { outline-offset: -3px; }
.list > li.wrap { flex-wrap: wrap; }
.list > li.wrap > .grow { flex: 1 1 180px; }
.list.flat-list > li { padding-left: 0; padding-right: 0; }
.list.sunk { background: var(--sunken); }
.panel-head + .list > li:first-child, .panel-head + .ladder, .panel-head + .scroll-x, .panel-head + .path { border-top: 1px solid var(--line); }
.thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface); flex: none; }
.thumb.lg { width: 68px; height: 68px; border-radius: 12px; }
.thumb.ph { display: grid; place-items: center; color: var(--ink-2); font-weight: 650; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink-2); display: grid; place-items: center; flex: none; font-weight: 650; }
.avatar.gift { background: var(--accent-soft); color: var(--accent-ink); }
.avatar.ini { background: var(--accent-soft); color: var(--accent-dark); font-size: 16px; letter-spacing: .02em; }
.shot { border-radius: 14px; max-height: 300px; margin: 0 auto; }
.house-line { display: flex; align-items: center; justify-content: center; gap: 8px; }

.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 8px 0 6px; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--mark); transition: width .5s ease; }
.panel .bar, .goal .bar { background: var(--line); }

/* Cifras: el número manda y su etiqueta lo acompaña */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.stats > div { background: var(--card); padding: 12px 14px; min-width: 0; }
.stats b { display: block; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.stats span { font-size: 13px; color: var(--ink-2); }
.stats.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .stats.four { grid-template-columns: repeat(4, 1fr); } }
/* Variante de tablero: etiqueta arriba, cifra, cambio y nota */
.stats.kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.stats.kpis span { order: -1; font-size: 13px; font-weight: 600; }
.stats.kpis b { font-size: clamp(22px, 5.6vw, 28px); }
.neg, .stats.kpis b.neg { color: var(--bad-ink); }
.stats.kpis small { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.delta { font-style: normal; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; line-height: 1.3; color: var(--ink-2); }
.delta .icon { width: 14px; height: 14px; stroke-width: 2.7; }
.delta.good { color: var(--ok-ink); }
.delta.bad { color: var(--bad-ink); }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.kv b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.2; }
.kv span { font-size: 13px; color: var(--ink-2); }
.big { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }

/* ───────── Emblemas de nivel ───────── */
.emblem { --size: 64px; --seal: var(--accent-soft); --seal-ring: var(--accent-line); width: var(--size); height: var(--size); color: var(--accent-dark); display: grid; place-items: center; flex: none; position: relative; }
.emblem svg.seal { position: absolute; inset: 0; width: 100%; height: 100%; }
.emblem svg.seal path { fill: var(--seal); }
.emblem svg.seal circle { fill: none; stroke: var(--seal-ring); stroke-width: 1.6; }
.emblem svg.art { position: relative; width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.emblem svg.ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); }
.emblem.lit { --seal: var(--accent); --seal-ring: rgba(255, 255, 255, .45); color: var(--on-accent); }
.emblem.locked { --seal: var(--sunken); --seal-ring: var(--line); color: var(--ink-2); }

/* ───────── Empleado: inicio ───────── */
.hello { padding: 6px 2px 0; }
.sell-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 84px; padding: 16px 18px 16px 20px; border: 0; border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); text-align: left; text-decoration: none; }
@media (hover: hover) { .sell-cta:hover { background: var(--accent-hover); } }
.sell-cta strong { font-family: var(--ui); font-size: 22px; font-weight: 650; letter-spacing: -0.015em; display: block; line-height: 1.1; }
.sell-cta span { font-size: 14px; opacity: .9; }
.sell-cta .plus { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; opacity: 1; }
.sell-cta .plus .icon { width: 26px; height: 26px; stroke-width: 2.4; }
.level-card { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; padding-left: 20px; }
.coach { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid transparent; }
.coach b { display: block; }
.coach p { font-size: 14.5px; color: var(--ink-2); }
.coach-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.coach-ic .icon { width: 19px; height: 19px; }
.coach.recompensa { background: var(--accent-soft); border-color: var(--accent-line); }
.coach.recompensa .coach-ic { background: var(--accent); color: var(--on-accent); }
.coach.recompensa p { color: var(--ink); }
.coach.frase { background: none; border-style: dashed; border-color: var(--line-2); }
.coach.frase p { font-family: var(--ui); font-size: 15px; color: var(--ink); }

.slow-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 0; padding: 0 16px 2px; }
.slow-strip::-webkit-scrollbar { display: none; }
.slow-item { flex: none; width: 116px; background: none; border: 0; padding: 0; text-align: left; }
.slow-item img, .slow-item .ph { width: 116px; height: 116px; border-radius: 12px; object-fit: cover; background: var(--sunken); }
.slow-item b { display: block; font-size: 14px; font-weight: 600; margin-top: 6px; line-height: 1.25; }
.slow-item span { font-size: 13px; color: var(--ink-2); }

/* Progreso: el nivel actual y el camino */
.level-hero { padding: 28px 18px 22px; }
.level-hero-mark { display: grid; place-items: center; margin-bottom: 16px; }
.level-hero h1 { font-size: 30px; }
.level-line { font-family: var(--ui); font-size: 15.5px; color: var(--ink-2); max-width: 34ch; margin: 8px auto 10px; line-height: 1.4; }
.level-hero .bar { max-width: 280px; margin: 12px auto 0; }
.path { list-style: none; margin: 0; padding: 4px 0; }
.path > li { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.path > li + li::before { content: ''; position: absolute; left: 38px; top: -11px; height: 22px; width: 2px; background: var(--line); }
.path > li.reached + li::before, .path > li.current::before { background: var(--accent); }
.path > li.locked b { color: var(--ink-2); }
.path .tag { margin-top: 5px; }

/* ───────── Vender ───────── */
.search { position: relative; display: flex; gap: 8px; }
.search .input { padding-left: 44px; border-radius: 12px; }
.search > .icon { position: absolute; left: 14px; top: 13px; color: var(--ink-2); pointer-events: none; }
.tool { width: 48px; height: 48px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; }
@media (hover: hover) { .tool:hover { background: var(--sunken); } }
.tag.bo { background: var(--accent-soft); color: var(--accent-dark); }
/* Con la barra de la venta a la vista, la lista deja su alto libre al final: el control de la última tarjeta no queda debajo. */
#cart-slot:not(:empty) { height: 64px; }
/* Vender: resumen en el flujo de la lista, sin superponer productos o navegación. */
#cart-slot.cart-inline { height: auto; }
#cart-slot.cart-inline:empty { display: none; }
#cart-slot.cart-inline .cart-bar { position: static; padding: 0; pointer-events: auto; }
#cart-slot.cart-inline .cart-bar-in { max-width: none; gap: 8px; padding: 6px 8px 6px 12px; box-shadow: none; }
#cart-slot.cart-inline .cart-bar-in b { font-size: 18px; }
#cart-slot.cart-inline .cart-bar-in .btn { padding-left: 12px; padding-right: 12px; }
#grid .ui-product-head { flex-direction: column; }
#grid .ui-product-main > .ui-product-media { width: var(--sp-16); }
#grid .ui-product-ctl { position: static; align-self: flex-end; margin: 0 8px 8px; }
#grid .ui-product.is-counting .ui-product-desc { visibility: visible; }
#grid .ui-product-foot { min-height: 0; padding-right: 0; }
#grid .ui-product-opt[data-presentation].is-on { box-shadow: var(--ring-soft); }
#grid .ui-product-opt[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -2px; }
/* Mis decants: filas compactas y fotografía vinculada al perfume. */
.decant-row { padding: 10px; }
.decant-row > summary { display: flex; align-items: center; gap: 10px; min-height: 64px; cursor: pointer; list-style: none; }
.decant-row > summary .pic { flex: none; width: 52px; height: 52px; }
.decant-row > summary .grow { min-width: 0; overflow-wrap: anywhere; }
.decant-row small, .decant-bottle small { display: block; color: var(--ink-2); }
.decant-row > .stack { margin-top: 12px; }
.decant-bottle { padding: 8px 0; border-top: 1px solid var(--line); }
.decant-bottle > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.decant-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.decant-valuation { padding: 10px; border-radius: 12px; background: var(--sunken); }
.decants-view .facts li { gap: 10px; overflow-wrap: anywhere; }
.cart-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 18; padding: 10px 12px; pointer-events: none; }
.cart-bar-in { pointer-events: auto; max-width: 536px; margin: 0 auto; background: var(--ink); color: var(--cream); border-radius: 16px; padding: 8px 8px 8px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-float); }
.cart-bar-in b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; background: var(--sunken); border-radius: 12px; }
.stepper button { width: 42px; height: 42px; border: 0; background: none; font-size: 22px; font-weight: 500; line-height: 1; border-radius: 12px; color: var(--ink); }
.stepper output { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ───────── Hojas (diálogos) ───────── */
.sheet-wrap { position: fixed; inset: var(--sheet-top, 0px) 0 auto; height: var(--sheet-vh, 100dvh); z-index: 50; background: rgba(0, 0, 0, .36); display: flex; align-items: flex-end; justify-content: center; animation: fade .16s ease; }
.sheet { background: var(--surface); width: 100%; max-width: 560px; max-height: calc(var(--sheet-vh, 100dvh) - 24px); border-radius: var(--r-l) var(--r-l) 0 0; display: flex; flex-direction: column; animation: rise .22s cubic-bezier(.2,.8,.2,1); }
.sheet.wide { max-width: 720px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 10px 8px 20px; }
.sheet-head h2 { font-size: 19px; }
@media (hover: hover) { .sheet-head .icon-btn:hover { background: var(--sunken); } }
.sheet-body { padding: 8px 20px calc(20px + var(--safe-b)); overflow-y: auto; }
.sheet .panel { background: var(--card); }
@media (min-width: 640px) { .sheet-wrap { align-items: center; padding: 24px; } .sheet { border-radius: var(--r-l); box-shadow: var(--shadow-float); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(28px); opacity: 0; } }

#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--ink); color: var(--cream); padding: 12px 16px; border-radius: 12px; font-size: 15px; max-width: 480px; box-shadow: var(--shadow-float); animation: rise .2s ease; }
.toast.bad { background: var(--bad); color: #fff; }

/* Venta registrada */
.done-mark { width: 76px; height: 76px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin: 4px auto 12px; }
.done-mark .icon { width: 36px; height: 36px; stroke-width: 2.6; }
@keyframes stamp { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.stamp { animation: stamp .4s cubic-bezier(.2,.9,.3,1) both; }

/* ───────── Acceso ───────── */

/* ───────── Propietario ───────── */
.gate-login { --login-primary:#0B1F3B; --login-on-primary:#FFFFFF; --login-bg:#FFFFFF; --login-secondary:#F3F5F9; --login-text:#0B1F3B; --login-accent:#F0B429; min-height:100dvh; display:grid; background:var(--login-bg); color:var(--login-text); }
.gate-login .gate-brand { padding:28px 24px 20px; background:var(--login-secondary); }
.gate-brand-in, .gate-card > div { max-width:440px; margin:auto; }
.gate-login .gate-name { font-size:14px; font-weight:650; margin:8px 0 24px; }
.gate-login h1 { font-size:clamp(29px,7vw,46px); line-height:1.12; letter-spacing:-.035em; color:inherit; }
.gate-login .gate-brand p { margin-top:12px; max-width:38ch; }
.gate-benefits { display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:20px 0; font-size:12px; }
.gate-benefits li { border:1px solid currentColor; border-radius:24px; padding:6px 10px; }
.gate-login .gate-card { padding:28px 24px 40px; background:var(--login-bg); }
.gate-login .gate-card h2 { font-size:22px; color:inherit; margin-bottom:8px; }
.gate-login .field > span { color:inherit; }
.gate-login .gate-card .input { min-height:48px; background:var(--login-bg); border:1px solid var(--login-text); color:var(--login-text); }
.gate-login .gate-card .input:focus { outline:2px solid var(--login-primary); outline-offset:3px; }
.gate-login .gate-card small { color:inherit; }
.gate-login .btn.primary { min-height:48px; background:var(--login-primary); color:var(--login-on-primary); border-color:var(--login-primary); }
.gate-login .note { background:var(--login-secondary); color:var(--login-text); }
.gate-offline { font-size:14px; }
@media(min-width:900px) {
  .gate-login { grid-template-columns:1.1fr 1fr; align-items:stretch; }
  .gate-login .demo-bar { grid-column:1/-1; }
  .gate-login .gate-brand, .gate-login .gate-card { display:grid; align-items:center; padding:64px 48px; }
  .gate-card > div { width:100%; }
}
.returns-totals { grid-template-columns: repeat(2,minmax(0,1fr)); }
.returns-totals b { white-space:nowrap; font-size:clamp(16px,4vw,22px); }
.cards { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.biz-card { display: flex; flex-direction: column; gap: 8px; color: inherit; background: var(--card); border: 1px solid transparent; border-radius: var(--r-m); padding: 16px 16px 16px 20px; position: relative; overflow: hidden; min-width: 0; }
.biz-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.biz-card .kv { margin-top: 4px; }
.biz-card > .btn { align-self: flex-start; }
.biz-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; }
.biz-card-head h3 { font-size: 20px; font-weight: 650; }
.biz-card-head .icon { color: var(--ink-2); }
@media (hover: hover) { .biz-card-head:hover h3 { color: var(--accent-ink); } }
.cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th:last-child, .table td:last-child { padding-right: 16px; }
.table.rank td:first-child { min-width: 150px; max-width: 240px; }
.table.rank .clip { display: block; }
.scroll-x { overflow-x: auto; }
.table-view { margin-top: 8px; }
.table-view summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent-ink); padding: 6px 0; width: fit-content; }
.table-view .scroll-x { margin: 6px -16px -16px; border-top: 1px solid var(--line); }

/* Tablero */
.chart-slot { margin-top: 10px; }
.chart { max-width: 100%; display: block; }
.chart .bar { transition: opacity .1s ease; }
.chart .bar.on { opacity: .7; }
.chart-wrap { position: relative; border-radius: 8px; }
.chart-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--ink); color: var(--cream); font-size: 13px; padding: 6px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap; z-index: 2; }
.inline-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--ink-2); }
.inline-facts b { color: var(--ink); font-weight: 650; }
.insights > li { padding: 0; }
.row-link { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px 12px 16px; color: inherit; text-decoration: none; }
@media (hover: hover) { .row-link:hover { background: rgba(0, 0, 0, .035); } }
.row-link > .icon { color: var(--ink-2); margin-top: 6px; }
.row-link .grow b, .row-link .grow .small, .row-link .grow .tiny { display: block; }
.row-link .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.tone { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sunken); color: var(--ink-2); }
.tone .icon { width: 18px; height: 18px; stroke-width: 2.1; }
.tone.bad { background: var(--bad-soft); color: var(--bad); }
.tone.warn { background: var(--warn-soft); color: var(--warn); }
.tone.good { background: var(--ok-soft); color: var(--ok); }
/* Medidor: el relleno y su pista son dos pasos del mismo tono */
.meter-block { margin-top: 16px; }
.meter { height: 10px; border-radius: 5px; background: var(--accent-soft); overflow: hidden; margin: 8px 0; }
.meter > i { display: block; height: 100%; min-width: 2px; background: var(--mark); border-radius: 5px 0 0 5px; }
.meter.warn { background: var(--warn-soft); }
.meter.warn > i { background: var(--warn-fill); }
.hbar { display: block; height: 6px; border-radius: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.hbar > i { display: block; height: 100%; background: var(--mark); border-radius: 3px; }
.facts { list-style: none; margin: 14px 0 0; padding: 0; }
.facts > li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.facts > li > span { color: var(--ink-2); }
.facts > li > b { text-align: right; font-weight: 650; white-space: nowrap; }
.facts.pad { margin: 0; }
.facts.pad > li { padding: 10px 16px; }
.ladder { list-style: none; margin: 0; padding: 6px 16px; }
.ladder > li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.ladder > li:not(.on) b { color: var(--ink-2); font-weight: 600; }

/* Historial de un producto */
.timeline { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid transparent; border-radius: var(--r-m); overflow: hidden; }
.timeline > li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.timeline > li + li { border-top: 1px solid var(--line); }
.tl-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.tl-ic .icon { width: 17px; height: 17px; }
.timeline > li.bad .tl-ic { background: var(--bad-soft); color: var(--bad); }
.tl-num { text-align: right; flex: none; display: flex; flex-direction: column; }
.tl-num b { font-size: 17px; font-weight: 700; }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); background: var(--c); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.level-row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: start; }
.level-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) { .level-fields { grid-template-columns: 1.4fr 1fr 1fr 1.6fr 44px; align-items: end; } }
.emblem-pick { background: none; border: 0; padding: 0; border-radius: 50%; }
.emblem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; }
.photo-drop { display: flex; align-items: center; gap: 14px; }
.photo-drop img, .photo-drop .ph { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: var(--sunken); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.day-head { font-size: 13px; font-weight: 650; color: var(--ink-2); padding: 12px 16px 6px; background: var(--sunken); border-top: 1px solid var(--line); }
.day-head:first-child { border-top: 0; }
.strike { text-decoration: line-through; color: var(--ink-3); }

/* ───────── Pantallas anchas ─────────
   La columna de la izquierda, la barra y la navegación son del marco común (ui.css, marco.js). Aquí queda solo
   el lugar y el aire del contenido de cada pantalla. */
@media (min-width: 1024px) {
  .shell.owner > .shell-main { grid-column: 2; margin: 0 auto; padding: 26px 32px 72px; min-height: calc(100dvh - var(--bar-h)); }
  .narrow-only { display: none; }
  .sections { margin: 0; padding-left: 0; padding-right: 0; }
  .chips { margin: 0; padding: 0; }
  h1 { font-size: 30px; }
  .shell.owner .shell-main { padding-bottom: 64px; }
}
/* En el celular y la tableta el Administrador navega con la barra de abajo: las pestañas de sección quedan para pantallas anchas. */
@media (max-width: 1023px) {
  .owner .sections.tabs-line { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ═════════ Versión 0.2.0 ═════════ */

/* ───────── Piezas sueltas ───────── */
.lead { font-size: 16.5px; color: var(--ink-2); margin-top: 4px; max-width: 34ch; }
/* Utilidad para textos (un nombre debajo de su etiqueta). Un botón "block" es otra cosa: ocupa todo el ancho. */
.block:not(.btn) { display: block; }
.ink { color: var(--ink); }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.link { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; min-height: 32px; }
.quiet-link { align-self: flex-start; margin-top: 6px; font-weight: 550; font-size: 14.5px; min-height: 40px; text-align: left; }
.btn.ghost { background: transparent; color: var(--cream); border-color: rgba(255, 255, 255, .4); }
@media (hover: hover) { .btn.ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); } }
.field-static { min-height: 48px; display: flex; align-items: center; font-weight: 600; }
.code { font-weight: 700; letter-spacing: .06em; }
.chips.wrap-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
.chip.static { background: var(--sunken); border-color: transparent; }
.chip .icon { width: 16px; height: 16px; }
.sticky-foot { position: sticky; bottom: calc(-20px - var(--safe-b)); background: linear-gradient(to top, var(--surface) 78%, transparent); padding: 14px 0 calc(8px + var(--safe-b)); margin-bottom: -8px; }
.panel-foot { padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 14.5px; }
.panel-note { padding: 0 16px 14px; }
.stats.two { grid-template-columns: repeat(2, 1fr); }
.stats.day { grid-template-columns: 1fr 1.35fr 1fr; }
.stats.flush { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.stats b { overflow-wrap: anywhere; font-size: clamp(19px, 5.6vw, 23px); }
.stat-btn { background: var(--card); border: 0; padding: 12px 14px; text-align: left; min-width: 0; }
.stat-btn span { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-ink); font-weight: 600; }
.stat-btn .icon { width: 14px; height: 14px; }
.kv.four { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
@media (min-width: 520px) { .kv.four { grid-template-columns: repeat(4, 1fr); } }
.tag.sale { background: var(--accent-soft); color: var(--accent-dark); }
.was { color: var(--ink-3); font-weight: 500; font-size: .86em; }
.avatar.ok { background: var(--ok-soft); color: var(--ok); }
.bar.thin { height: 6px; margin: 6px 0 4px; }
.next-goal { font-weight: 600; color: var(--ink-2); }
.level-name { font-size: 30px; }
.status-select { width: auto; min-height: 40px; padding: 4px 10px; font-size: 14.5px; flex: none; }
details.more > summary, .table-view summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--accent-ink); padding: 8px 0; width: fit-content; min-height: 40px; display: flex; align-items: center; }
details.more[open] > summary { margin-bottom: 8px; }
fieldset { border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin: 0; min-width: 0; }
legend { font-family: var(--ui); font-size: 17px; font-weight: 600; padding: 0 10px 0 0; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.section-title { margin-top: 6px; }
.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 40% { background: var(--accent-soft); } }

/* ───────── Totales de un cobro o una cotización ───────── */
.sum { display: grid; grid-template-columns: 1fr auto; gap: 6px 0; margin: 0; font-variant-numeric: tabular-nums; }
.sum dt { color: var(--ink-2); }
.sum dd { margin: 0; padding-left: 16px; text-align: right; font-weight: 600; }
/* El renglón del total: las dos celdas miden lo mismo, así la línea de arriba es una sola. */
.sum .total { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); color: var(--ink); }
.sum .total.neg { color: var(--bad-ink); }
.sum dt.total { font-weight: 650; }
.sum dt.total small { display: block; font-weight: 400; color: var(--ink-2); font-size: 13.5px; }
.sum dd.total { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: normal; }
.extras { display: flex; flex-wrap: wrap; gap: 8px; }
.extras .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.extras-note { margin-top: -8px; }
.checkout .panel:not(.flat) { padding: 14px; }

/* XP que sumó una venta */
.xp-box { background: var(--accent-soft); border-radius: var(--r-m); padding: 14px 16px; text-align: left; }
.xp-total { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-dark); }
.xp-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; }
.xp-parts li { display: flex; justify-content: space-between; gap: 12px; }

/* Ticket y compartir */
.ticket { margin: 0; background: var(--card); border: 1px solid transparent; border-radius: var(--r-m); padding: 14px 16px; font: 14.5px/1.5 var(--ui); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 38dvh; overflow-y: auto; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-grid > :first-child { grid-column: 1 / -1; }
#print-area { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; white-space: pre-wrap; font: 13pt/1.5 var(--ui); color: #000; margin: 0; }
}

/* Catálogo al vender: la foto lleva encima sus marcas (XP extra, descuento real y disponibilidad) */
.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.code-input { text-transform: uppercase; }
.code-input::placeholder { text-transform: none; }
.ok-text { color: var(--ok-ink); font-weight: 600; }

/* ───────── Inicio del Colaborador ───────── */
.nudge { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.nudge .coach-ic { background: var(--accent); color: var(--on-accent); }
.nudge p { margin: 2px 0 10px; color: var(--ink); font-size: 15px; }
.nudge .ask { margin-top: 2px; }
.challenge { display: flex; flex-direction: column; gap: 6px; }
.challenge-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.challenge .btn { margin-top: 6px; }
.challenge.done { background: var(--ok-soft); border-color: transparent; }
.practice-card { display: flex; align-items: center; gap: 12px; }
.pieces > li { align-items: flex-start; }
.piece-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; padding-left: 80px; }
.install-hint { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); border: 1px dashed var(--line-2); }
.install-hint p { color: var(--ink-2); font-size: 14.5px; margin: 2px 0 10px; }

/* Práctica */
.practice .situation { font-size: 16.5px; line-height: 1.5; }
.option { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); font-size: 16px; line-height: 1.35; min-height: 56px; }
@media (hover: hover) { button.option:hover { border-color: var(--line-2); background: var(--sunken); } }
.option-key { width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.option-key .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.option.done { color: var(--ink-2); }
.option.right { border-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.option.right .option-key { background: var(--ok); color: #fff; }
.option.wrong { border-color: var(--line); color: var(--ink); }
.option.wrong .option-key { background: var(--sunken); color: var(--ink-2); }
.result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); outline: none; }
.result.ok { background: var(--ok-soft); }
.result.miss { background: var(--warn-soft); }
.result-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); }
.result.ok .result-ic { color: var(--ok); }
.result.miss .result-ic { color: var(--warn); }

/* ───────── Clientes ───────── */
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; }
.next-step { background: var(--accent-soft); border-color: transparent; }
.pick-mark { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; }
.pick-mark.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pick-mark .icon { width: 15px; height: 15px; stroke-width: 2.8; }

/* ───────── Inventario ───────── */
.stepper.qty input { width: 58px; height: 42px; border: 0; background: var(--surface); text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); border-radius: 6px; padding: 0; }
.stepper.qty input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.count-in { width: 86px; flex: none; text-align: center; font-weight: 700; padding: 10px 6px; }
/* Listas donde cada renglón lleva su cantidad: en el celular el nombre necesita todo el ancho que se pueda */
@media (max-width: 480px) {
  .qty-list > li { padding: 10px 12px; gap: 10px; }
  .qty-list .thumb { width: 44px; height: 44px; }
  .qty-list .stepper.qty button { width: 40px; }
  .qty-list .stepper.qty input { width: 48px; }
}
.margin-box { background: var(--sunken); border-radius: var(--r-s); padding: 10px 14px; }
.mini-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.mini-facts dt { font-size: 13px; color: var(--ink-2); }
.mini-facts dd { margin: 0; font-weight: 700; font-size: 18px; }
.margin-box p { margin-top: 8px; }

/* ───────── Administrador: estado, lo importante y acciones ───────── */
.status-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid transparent; }
.status-line p { font-size: 16px; font-weight: 600; line-height: 1.3; }
.status-line.tone-bad { background: var(--bad-soft); }
.status-line.tone-warn { background: var(--warn-soft); }
.status-line.tone-good { background: var(--ok-soft); }
.status-line .tone { background: var(--surface); }
.actions > li.action-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 14px 16px; }
.action-item > .btn { grid-column: 2; justify-self: start; margin-top: 4px; white-space: normal; text-align: left; }
.action-item p { margin-top: 2px; }
.biz-ref { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.biz-ref i { width: 8px; height: 8px; border-radius: 50%; }
@media (min-width: 760px) {
  [data-box="importante"] .actions > li.action-item { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; }
  [data-box="importante"] .action-item > .btn { grid-column: 3; margin-top: 0; }
}
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-btn { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid transparent; background: var(--card); font-weight: 600; font-size: 15px; text-align: left; line-height: 1.2; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .quick-btn:hover { border-color: var(--line-2); background: var(--sunken); } }
.quick-btn .icon { color: var(--accent-ink); width: 22px; height: 22px; }
@media (min-width: 760px) { .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.biz-status { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.biz-status .tone { width: 26px; height: 26px; }
.biz-status .tone .icon { width: 14px; height: 14px; }
.mini-chart { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.analysis-head { margin-top: 10px; }
.between > a.small, .panel-head.between > a.small { flex: none; white-space: nowrap; }
/* Listas largas: se ven las primeras y el resto queda a un toque */
.cap4:not(.open) .actions > li:nth-child(n+5) { display: none; }
.open > .more-toggle { display: none; }
@media (max-width: 759px) { .cap3-narrow:not(.open) .actions > li:nth-child(n+4) { display: none; } }
@media (min-width: 760px) { .cap3-narrow > .more-toggle { display: none; } }
.links > li { padding: 0; }
.links .row-link { align-items: center; }
.links .row-link > .icon { margin-top: 0; }
@media (max-width: 599px) { .from-tablet { display: none; } }
@media (min-width: 600px) { .phone-only { display: none; } }
.chart-title { margin-top: 18px; }
.chart-wrap.compact .chart-tip { top: -4px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; flex: none; }
.key.rect { width: 10px; height: 12px; border-radius: 3px 3px 0 0; background: var(--mark); }
.key.line { width: 16px; height: 2px; border-radius: 1px; background: var(--context); }
.hbars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.hbars .hbar { height: 10px; border-radius: 0 4px 4px 0; margin-top: 5px; }
.hbars .hbar > i { border-radius: 0 4px 4px 0; min-width: 2px; }
.facts > li.with-bar > span { flex: 1; min-width: 0; color: var(--ink); }
.fix-head p + p { margin-top: 4px; }
.fix-fields { display: flex; align-items: flex-end; gap: 8px; flex: 1 1 100%; flex-wrap: wrap; }
.fix-fields .field { flex: 1 1 96px; }
.fix-fields .input { min-height: 44px; }

/* ───────── Carga masiva ───────── */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.import-list .check { min-height: 0; }

/* ───────── Foto con varios productos ───────── */
.stage { position: relative; width: 100%; max-height: 62dvh; margin: 0 auto; border-radius: var(--r-s); overflow: hidden; background: var(--sunken); user-select: none; -webkit-user-select: none; }
.stage img { width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.box { position: absolute; padding: 0; background: rgba(255,255,255,.08); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--ink); border-radius: 4px; }
.box.doubt { border-style: dashed; }
.box.on { background: rgba(26, 26, 26, .14); box-shadow: 0 0 0 2.5px var(--accent); touch-action: none; cursor: move; }
.box-n { position: absolute; left: 0; top: 0; min-width: 22px; height: 22px; padding: 0 5px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 700; display: grid; place-items: center; border-radius: 2px 0 6px 0; }
.handle { position: absolute; width: 26px; height: 26px; }
.handle::after { content: ''; position: absolute; inset: 7px; background: #fff; border: 2px solid var(--ink); border-radius: 50%; }
.handle.nw { left: -13px; top: -13px; cursor: nwse-resize; }
.handle.ne { right: -13px; top: -13px; cursor: nesw-resize; }
.handle.sw { left: -13px; bottom: -13px; cursor: nesw-resize; }
.handle.se { right: -13px; bottom: -13px; cursor: nwse-resize; }
.stats.batch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.batch > div { padding: 10px 4px; text-align: center; }
.stats.batch b { font-size: 20px; }
.stats.batch span { font-size: 12.5px; }
progress { width: 100%; height: 8px; accent-color: var(--mark); }
.pieces-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.piece { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid transparent; border-radius: var(--r-m); padding: 14px; }
.piece.descartado { opacity: .62; }
.piece.listo { border-color: var(--ok); }
.piece-head { display: flex; gap: 14px; align-items: flex-start; }
.piece-shot { width: 104px; flex: none; }
.piece-shot canvas { width: 104px; height: 104px; border-radius: var(--r-s); border: 1px solid var(--line); display: block; }
.name-price { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }
.hint-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hint-row .thumb { width: 40px; height: 40px; }
.hint-row > span { flex: 1 1 170px; min-width: 0; }
@media (min-width: 640px) { .pieces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═════════ Versión 0.3.0: punto de venta ═════════ */

/* Las tarjetas del catálogo al vender ya no se visten aquí: son la pieza `ui-product` de ui.css. */
/* Elegir presentación: la foto, las opciones y lo que vale para la que está marcada. */
.variant-pic { background: var(--card); border-radius: var(--r-m); overflow: hidden; }
.variant-pic img, .variant-pic .ph { display: block; width: 100%; height: 168px; object-fit: contain; }
.variant-pic .ph { display: grid; place-items: center; color: var(--ink-2); font-family: var(--ui); font-size: 44px; font-weight: 600; }
.variant-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 84px; min-height: 50px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 15px; line-height: 1.2; text-align: left; touch-action: manipulation; color: var(--ink); }
.variant-opt small { font-size: 12.5px; font-weight: 550; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.variant-opt[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.variant-opt.out { border-style: dashed; color: var(--ink-2); }
.variant-n { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 700; font-style: normal; display: grid; place-items: center; }
.variant-price { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Bajo pedido y plan de crédito, dentro del cobro. */
.note.bo-note { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.plan-box { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid transparent; }
.plan-box h3 { margin: 0 0 8px; font-size: 16px; }
.plan-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.plan-facts > div { min-width: 0; }
.plan-facts .wide { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); }
.plan-facts dt { font-size: 13px; color: var(--ink-2); }
.plan-facts dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plan-facts dd small { display: block; font-weight: 400; font-size: 12.5px; }
.plan-list { list-style: none; margin: 6px 0 4px; padding: 0; border-top: 1px solid var(--line); }
.plan-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.plan-list li span { color: var(--ink-2); }
.seg.freq { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .seg.freq { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Efectivo: lo que entrega el cliente y, en grande, el cambio o lo que falta. */
.cash .chips { margin: 0; padding: 0; }
.btn.go { justify-content: space-between; padding: 0 18px; }
.btn.go .num { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.checkout > .sticky-foot { z-index: 2; }
.cash-input { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cash-out { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-radius: var(--r-s); padding: 10px 14px; font-size: 14.5px; min-height: 48px; }
.cash-out b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cash-out.vacio { padding: 0; min-height: 0; font-size: 13px; }
.cash-out.cambio, .cash-out.exacto { background: var(--ok-soft); color: var(--ok-ink); }
.cash-out.exacto b { font-size: 17px; letter-spacing: 0; }
.cash-out.falta { background: var(--bad-soft); color: var(--bad-ink); }
.cash-out.invalido { background: var(--warn-soft); color: var(--warn-ink); }
.cash-out.cambio span, .cash-out.exacto span, .cash-out.falta span { font-weight: 600; }

/* Datos para transferencia: cada dato con su botón de copiar. */
.bank { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; align-items: center; }
.bank dt { font-size: 13px; color: var(--ink-2); }
.bank dd { margin: 0; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pre { white-space: pre-wrap; }
.check.small { font-size: 14.5px; }

/* Catálogo para compartir: el código QR va siempre sobre blanco, con su margen, para que cualquier cámara lo lea. */
.qr-box { width: min(240px, 70%); margin: 0 auto; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); }
.qr-box svg { display: block; width: 100%; height: auto; }

/* Clave de cliente y rótulos dentro de "Más opciones". */
.label { font-size: 14px; font-weight: 600; color: var(--ink); }
.code-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 8px; border: 1px dashed var(--line-2); background: var(--surface); font-size: 13.5px; color: var(--ink-2); }
.code-chip b { color: var(--ink); letter-spacing: .08em; }
span.code { font-size: 12.5px; color: var(--ink-3); margin-left: 4px; }

/* ═════════ Versión 0.4.0: comprobantes, Fondo de Ahorro y panel financiero ═════════ */

/* Comprobante (ticket, crédito, abono, cotización). Es lo que ve el cliente: papel blanco, el color del
   negocio arriba, su sello, y el total como lo más visible. Todo importe va alineado a la derecha. */
.rc-frame { background: var(--sunken); border-radius: var(--r-m); padding: 12px; }
.rc { --rc: var(--accent-dark); --rc-on: #fff; background: #fff; color: var(--ink); border-radius: 14px; border-top: 6px solid var(--rc); padding: 18px 18px 20px; box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.rc-head { display: flex; align-items: center; gap: 12px; }
.rc-logo { border-radius: 50%; object-fit: cover; flex: none; background: var(--sunken); }
.rc-seal { flex: none; }
.rc-id { min-width: 0; }
.rc-biz { display: block; font: 700 19px/1.15 var(--ui); letter-spacing: -0.01em; }
.rc-label { display: block; font-weight: 600; color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
.rc-abono .rc-label { color: var(--ok-ink); }
.rc-meta { display: grid; gap: 1px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rc-meta > b { font-size: 15px; }
.rc-meta > span { color: var(--ink-2); font-size: 13.5px; }
.rc-cust b { color: var(--ink); font-weight: 600; }
.rc-alert { background: var(--bad-soft); color: var(--bad-ink); font-weight: 700; border-radius: 8px; padding: 8px 10px; margin: 12px 0 0; font-size: 13px; }
.rc-items { list-style: none; margin: 14px 0 8px; padding: 0; border-top: 1px solid var(--line); }
.rc-items li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rc-items li > div { min-width: 0; }
.rc-items li b { font-weight: 600; }
.rc-items small { display: block; color: var(--ink-3); font-size: 12.5px; }
.rc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-items .rc-num { font-weight: 700; }
.rc-kv { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; }
.rc-kv span { color: var(--ink-2); flex: none; max-width: 60%; }
.rc-kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rc-kv.strong span, .rc-kv.strong b { font-weight: 700; color: var(--ink); }
.rc-kv.ok b { color: var(--ok-ink); }
.rc-kv.bad b, .rc-kv.bad span { color: var(--bad-ink); }
.rc-kv.wrap { display: block; }
.rc-kv.wrap b { display: block; text-align: left; }
.rc-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--cream); }
.rc-total span { font-weight: 600; }
.rc-total b { font: 700 28px/1.1 var(--ui); letter-spacing: -0.02em; font-variant-numeric: normal; white-space: nowrap; }
.rc-total.ok { background: var(--ok-soft); color: var(--ok-ink); }
.rc-total.quote { background: #fff; color: var(--ink); border: 2px dashed var(--line-2); }
.rc-title { font: 700 16px/1.2 var(--ui); margin: 18px 0 8px; }
.rc-figs { background: var(--sunken); border-radius: 12px; padding: 4px 14px; margin-bottom: 8px; }
.rc-figs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; }
.rc-figs > div + div { border-top: 1px solid var(--line); }
.rc-figs span { color: var(--ink-2); }
.rc-figs b { font-variant-numeric: tabular-nums; font-size: 16px; white-space: nowrap; }
.rc-figs .strong span { color: var(--ink); font-weight: 700; }
.rc-figs .strong b { font: 700 22px/1.1 var(--ui); font-variant-numeric: normal; }
.rc-plan { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 13.5px; }
.rc-plan caption { text-align: left; font-weight: 700; color: var(--ink-2); padding-bottom: 6px; }
.rc-plan th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12px; padding: 0 0 4px; }
.rc-plan td { padding: 8px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.rc-plan .r { text-align: right; }
.rc-plan td + td, .rc-plan th + th { padding-left: 8px; }
.rc-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--sunken); color: var(--ink-2); }
.rc-tag.ok { background: var(--ok-soft); color: var(--ok-ink); }
.rc-tag.warn { background: var(--warn-soft); color: var(--warn-ink); }
.rc-tag.bad { background: var(--bad-soft); color: var(--bad-ink); }
.rc-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: 13px; }
.rc-note.rc-contact { margin-top: 6px; padding-top: 0; border-top: 0; color: var(--ink); font-weight: 600; }
.rc-nb { white-space: nowrap; }
.rc-cotizacion { box-shadow: 0 0 0 1px var(--line); background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 0, 0, .022) 14px 15px); }
@media (max-width: 380px) { .rc-frame { padding: 8px; } .rc { padding: 16px 14px 18px; } .rc-total b { font-size: 25px; } }
@media print {
  #print-area.as-doc { white-space: normal; font: inherit; max-width: 380px; }
  #print-area.as-doc .rc { box-shadow: none; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Calendario de pagos semanales en el cobro. */
.plan-preview { margin-top: 10px; }
.plan-preview ol { list-style: none; margin: 6px 0 4px; padding: 0; border-top: 1px solid var(--line); }
.plan-preview li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.plan-preview li span { color: var(--ink-2); }
.credit-box .stepper { align-self: flex-start; }

/* Fondo de Ahorro (próximamente): una sola tarjeta que anuncia un beneficio que todavía no existe.
   Tinta, con texto blanco. Solo se mueven opacidad y transformaciones,
   y todo se detiene si la persona pidió menos movimiento. */
.fund { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 8px; border-radius: var(--r-m); padding: 20px 20px 22px; color: #FFFFFF;
  background: radial-gradient(90% 70% at 88% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(160deg, #1A1A1A 0%, #303030 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.fund-shine { position: absolute; inset: -40% -70%; z-index: 0; pointer-events: none; background: linear-gradient(110deg, transparent 43%, rgba(255,255,255,.1) 50%, transparent 57%); transform: translateX(-60%); animation: fund-shine 7.5s ease-in-out infinite; }
.fund-figure, .fund-body { position: relative; z-index: 1; }
.fund-figure { justify-self: center; width: min(200px, 58%); margin: -4px 0 -6px; }
.fund-art { display: block; width: 100%; height: auto; overflow: visible; }
.fund-body { display: grid; gap: 8px; }
.fund-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fund-pill { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; padding: 4px 11px; border-radius: 999px; color: #1A1A1A; background: #FFFFFF; }
.fund-name { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.7); }
.fund h3 { font: 700 22px/1.18 var(--ui); letter-spacing: -0.015em; color: #FFFFFF; margin: 2px 0 0; text-wrap: balance; }
.fund-lead { font-weight: 600; font-size: 16px; color: #F0F0F0; }
.fund-text { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.82); max-width: 46ch; }
.fund-big { font: 600 22px/1.2 var(--ui); color: #F0F0F0; text-wrap: balance; }
.fund-face { display: grid; gap: 8px; }
.fund-face[hidden] { display: none; }
.fund-back { animation: fund-in .5s ease both; }
.fund-btn { justify-self: start; margin-top: 6px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; font-weight: 600; font-size: 15px; color: #1A1A1A; background: #FFFFFF; touch-action: manipulation; }
.fund-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.fund.open .fund-btn { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
/* El brote: cerrado asoma con dos hojas; al descubrir, termina de crecer y da fruto. */
.fund-stem { stroke-dasharray: 1; stroke-dashoffset: .46; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.fund.open .fund-stem { stroke-dashoffset: 0; }
.fund-leaf, .fund-fruit, .fund-halo, .fund-sparks path { transform-box: fill-box; }
.fund-leaf.l1, .fund-leaf.l3 { transform-origin: 100% 100%; }
.fund-leaf.l2, .fund-leaf.l4 { transform-origin: 0% 100%; }
.fund-leaf.l1 { animation: fund-sway 5.6s ease-in-out infinite; }
.fund-leaf.l2 { animation: fund-sway 6.4s ease-in-out -2.4s infinite reverse; }
.fund-leaf.l3, .fund-leaf.l4, .fund-fruit { transform: scale(0); opacity: 0; transition: transform .6s cubic-bezier(.2,1.25,.3,1), opacity .25s ease; }
.fund-fruit { transform-origin: center; }
.fund.open .fund-leaf.l3 { transform: none; opacity: 1; transition-delay: .35s; }
.fund.open .fund-leaf.l4 { transform: none; opacity: 1; transition-delay: .5s; }
.fund.open .fund-fruit { transform: none; opacity: 1; transition-delay: .78s; }
.fund-halo { transform-origin: center; transform: scale(.8); opacity: .7; transition: transform .9s ease, opacity .9s ease; }
.fund.open .fund-halo { transform: scale(1.08); opacity: 1; }
.fund-sparks path { transform-origin: center; opacity: .35; animation: fund-twinkle 3.8s ease-in-out infinite; }
.fund-sparks .s2 { animation-delay: -1.1s; }
.fund-sparks .s3 { animation-delay: -2.2s; }
.fund-sparks .s4 { animation-delay: -3s; }
.fund.open .fund-sparks path { animation-duration: 2s; }
@keyframes fund-shine { 0%, 60% { transform: translateX(-60%); } 90%, 100% { transform: translateX(60%); } }
@keyframes fund-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes fund-twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes fund-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 560px) {
  .fund { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; padding: 26px 28px; }
  .fund-figure { order: 2; width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fund-shine { display: none; }
  .fund *, .fund-back { animation: none !important; transition: none !important; }
}

/* Panel financiero del Administrador: tres cifras arriba del resumen (cobrado, ganancia operativa
   estimada y por cobrar) y, en el análisis, el camino de las ventas a la ganancia. Lo cobrado es la
   cifra principal: en el celular ocupa todo el ancho y las otras dos van lado a lado debajo. */
.seg.range.four { max-width: 440px; }
.fin { display: grid; gap: 14px; }
.fin-heroes { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-hero.main { grid-column: 1 / -1; }
/* Bajo 360 px dos columnas de ~139 px no dejan sitio al botón «Ver con PIN» (150 px) y la página se desbordaba:
   ahí las tres cifras van una debajo de otra. Desde 360 px el acomodo no cambia. */
@media (max-width: 359px) {
  .fin-heroes { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 760px) {
  .fin-heroes { grid-template-columns: 1.25fr 1fr 1fr; }
  .fin-hero.main { grid-column: auto; }
}
#fin-detalle { scroll-margin-top: 76px; }
#fin-detalle:focus { outline: none; }
.panel.fin-top { background: none; padding: 0; }
.fin-hero { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 15px; border-radius: var(--r-m); background: var(--card); border: 1px solid transparent; min-width: 0; }
.fin-hero > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fin-hero > b { font-size: clamp(21px, 5.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fin-hero > small { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.fin-hero.main { background: var(--accent-soft); }
.fin-hero.main > span { color: var(--accent-dark); }
.fin-hero.main > b { font-size: clamp(28px, 7vw, 36px); color: var(--accent-dark); }
.fin-hero.main > small { color: var(--ink-2); }
.fin h4 { font-size: 15px; font-weight: 650; margin: 0 0 8px; }
.fin-flow dt small { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; }
.fin-flow .step { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line); font-weight: 650; color: var(--ink); }
.fin-flow dd.total { font-size: 26px; }
.fin-warn { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-s); background: var(--warn-soft); }

/* ───────── 0.5.0 ───────── */
/* Saldo de un cliente en una lista: un indicador discreto, sin importe. El detalle está dentro de su cuenta. */
.tag.quiet { background: none; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; }
.inline-field { flex-direction: row; align-items: center; gap: 10px; }
.inline-field > span { flex: none; }
.inline-field .input { min-height: 42px; }
/* Con cinco pestañas (Personas, Cotizaciones, Cobros, Pedidos, Cupones) la barra se desliza en vez de apretarse. */
.seg.tabs.many { grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; scrollbar-width: none; }
.seg.tabs.many::-webkit-scrollbar { display: none; }
/* Meta de la semana, en el inicio: el porcentaje en grande, la barra y lo que falta. */
.goal { padding: 14px 16px; background: var(--accent-soft); }
.goal-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.goal-pct { flex: none; min-width: 64px; font-family: var(--ui); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent-dark); }
.goal .bar { margin: 2px 0 6px; background: #E1E1E1; }
.goal.done { background: var(--ok-soft); border-color: transparent; }
.goal.done .goal-pct { color: var(--ok-ink); }
.goal.done .bar { background: rgba(31, 138, 91, .2); }
.goal.done .bar > i { background: var(--ok); }
.order-ready { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: var(--accent-soft); border-color: transparent; }
.order-ready > .icon { color: var(--ink-2); }
/* Presentaciones de un producto, en su ficha. */
.variant-list { border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--surface); }
.variant-list .row-btn.static { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.variant-list li.current { background: var(--accent-soft); }
.variant-move { display: inline-flex; gap: 6px; flex: none; }
.variant-move .icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 19px; font-weight: 600; line-height: 1; color: var(--ink); }
.variant-move .icon-btn:disabled { color: var(--line-2); cursor: default; }
@media (hover: hover) { .variant-move .icon-btn:hover:not(:disabled) { background: var(--sunken); } }

/* Repartir clientes (Administrador): un renglón por cliente con su selector a la derecha. */
.assign-row { align-items: center; gap: 10px; }
.assign-row select { width: auto; max-width: 46%; min-width: 132px; flex: none; }
@media (max-width: 420px) { .assign-row { flex-wrap: wrap; } .assign-row select { max-width: none; width: 100%; } }

/* ═════════ Versión 0.6.0: sistema visual ═════════ */

/* Cifras principales del inicio: tarjetas iguales, la cifra manda. */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); text-decoration: none; color: inherit; border: 0; text-align: left; font: inherit; }
.kpi > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kpi > b { font-size: clamp(22px, 6vw, 28px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi > small { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.kpi .delta { margin-top: 2px; }
.kpi.neg > b { color: var(--bad-ink); }
button.kpi { cursor: pointer; }
@media (hover: hover) { button.kpi:hover, a.kpi:hover { background: var(--sunken); } }

/* Encabezado de pantalla con acción a la derecha. */
.screen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.screen-head > div { min-width: 0; }
.screen-head .btn { flex: none; }
@media (max-width: 599px) { .screen-head h1 { font-size: 23px; } .screen-head .btn { min-height: 44px; padding: 0 14px; font-size: 15px; } }

/* Perfil de cliente: cabecera con iniciales, estado y datos, y las cuatro acciones principales. */
.profile-head { display: flex; gap: 14px; align-items: center; }
.profile-head .avatar { width: 56px; height: 56px; font-size: 20px; }
.profile-head h2 { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.action-grid .act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 10px 4px; border-radius: 14px; border: 1px solid transparent; background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: none; text-align: center; line-height: 1.15; }
.action-grid .act .icon { width: 22px; height: 22px; color: var(--accent-ink); }
.action-grid .act.primary { background: var(--accent); color: var(--on-accent); }
.action-grid .act.primary .icon { color: var(--on-accent); }
.action-grid .act[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (hover: hover) { .action-grid .act:hover { background: var(--sunken); } .action-grid .act.primary:hover { background: var(--accent-hover); } }
/* La etiqueta puede ir en dos líneas ("Nueva venta" en 360 px); nunca se recorta con puntos suspensivos. */
.action-grid .act span { max-width: 100%; overflow-wrap: anywhere; }

/* Lista de clientes (CRM): iniciales, nombre, dato relevante, estado y última compra. */
.crm-row .avatar { width: 42px; height: 42px; font-size: 15px; }
.crm-row .end .small { margin-top: 2px; }
/* En pantallas angostas la columna de la derecha cede espacio al nombre: la fecha puede ir en dos líneas. */
@media (max-width: 399px) { .crm-row .end { flex: 0 1 auto; max-width: 112px; } .crm-row .end .small { font-size: 12.5px; line-height: 1.2; } }

/* Niveles de clientes (preparado para Nuevo / Bronce / Plata / Oro / VIP; sin reglas todavía). */
.lvl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: 999px; line-height: 1.25; white-space: nowrap; background: var(--sunken); color: var(--ink); }
.lvl::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }
.lvl.nuevo { background: var(--sunken); color: var(--ink-2); }
.lvl.bronce { color: #8A4A1C; }
.lvl.plata { color: #4A4A4A; }
.lvl.oro { color: #7E5208; }
.lvl.vip { color: var(--ink); }

/* Progreso de un crédito: lo pagado contra el total, con lo que sigue. */
.credit-progress { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); }
.credit-progress .bar { margin: 4px 0 2px; }
.credit-progress .between { font-size: 13.5px; color: var(--ink-2); }
.credit-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.credit-next dt { font-size: 12.5px; color: var(--ink-2); }
.credit-next dd { margin: 0; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.credit-next dd small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-2); }

/* Esqueletos de carga: bloques del tono de las tarjetas que respiran. Solo cambia la opacidad. */
.skeleton { display: grid; gap: 12px; }
.sk { border-radius: 12px; background: var(--card); animation: breathe 1.2s ease-in-out infinite; }
.sk.line { height: 16px; border-radius: 6px; width: 60%; }
.sk.line.w { width: 100%; }
.sk.title { height: 26px; width: 45%; border-radius: 8px; }
.sk.card { height: 96px; }
.sk.card.tall { height: 160px; }
.sk.row { height: 64px; }
.sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* Accesos rápidos en una fila corta (Inicio del Colaborador). */
.quick.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick-btn.col { flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 13px; min-height: 72px; padding: 10px 6px; }
.quick-btn.col span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Línea de estado del sistema al pie del inicio. */
.sys-line { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--card); font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.sys-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.sys-line i.warn { background: var(--warn); }
.sys-line i.bad { background: var(--bad); }
.sys-line .icon { width: 18px; height: 18px; margin-left: auto; }

/* Secciones del tablero que se pueden plegar: el detalle largo queda a un toque, con su título a la vista. */
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 2px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .icon { color: var(--ink-2); transition: transform .15s ease; }
details.fold[open] > summary .icon { transform: rotate(180deg); }
details.fold > summary h2 { font-size: 18px; }

/* ═════════ Versión 0.6.1: papel y tinta ═════════
   Capa de ajuste sobre todo lo anterior. No cambia la estructura de ninguna pantalla: cambia cómo se
   ordena lo que ya hay. Tres reglas:
   1. Jerarquía por tamaño y peso, no por color: la cifra es grande, su etiqueta es pequeña y gris.
   2. Una sola cosa en tinta por zona (la acción o la cifra principal); el resto, gris neutro.
   3. El estado se dice con un punto o un icono junto al texto; el fondo de color queda para lo urgente. */

/* ───────── Base y letra ───────── */
body { font-size: 16px; line-height: 1.45; font-feature-settings: 'ss01', 'cv11'; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.icon { stroke-width: 1.75; }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.lead { font-size: 15.5px; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.stack { gap: 16px; }

/* ───────── Barra superior y aviso de datos de prueba ───────── */
.demo-bar { background: var(--card); color: var(--ink-2); font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-bottom: 1px solid var(--line); }
.demo-bar::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-right: 7px; vertical-align: 1px; }
.icon-btn { border-radius: 10px; }


/* Secciones de un negocio */
.tabs-line .chip { font-weight: 500; font-size: 14.5px; padding: 0 12px; }
.tabs-line .chip[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }


/* ───────── Tarjetas, notas y estados vacíos ───────── */
.panel { padding: 18px; }
.panel.flat { padding: 0; }
.panel-head { padding: 16px 18px 12px; }
.panel-head h2, .panel-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.panel-head p { margin-top: 2px; font-size: 13.5px; }
.panel-foot { padding: 12px 18px 14px; }
.panel-note { padding: 0 18px 16px; }
.note { background: var(--card); border-radius: var(--r-m); padding: 14px 16px; }
.panel .note, .sheet .panel .note { background: var(--surface); }
.note.warn { background: var(--warn-soft); }
.note.bad-note { background: var(--bad-soft); }
.note.msg.unlocked { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.note.bo-note { background: var(--card); box-shadow: none; }
.unlock { border-top-color: var(--line); }
.unlock > .icon { color: var(--ink); }
.unlock b { font-weight: 600; }
.empty { padding: 40px 24px; }
.empty h3 { font-size: 16px; }
.empty p { font-size: 14.5px; max-width: 38ch; margin-left: auto; margin-right: auto; }
.empty .tone { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 14px; }
.empty .tone .icon { width: 20px; height: 20px; }

/* ───────── Botones ───────── */
.btn { min-height: 46px; padding: 0 16px; border-radius: 10px; font-weight: 550; font-size: 15px; letter-spacing: -0.005em; border-color: var(--line-2); }
@media (hover: hover) { .btn:hover { border-color: #B8B8B8; background: var(--card); } }
.btn:active { background: var(--sunken); }
.btn.primary { border-color: var(--accent); }
.btn.primary:active { background: #000000; border-color: #000000; }
.btn.quiet { color: var(--accent-ink); font-weight: 550; }
@media (hover: hover) { .btn.quiet:hover { background: var(--card); border-color: transparent; } }
.btn.sm { min-height: 36px; font-size: 13.5px; padding: 0 12px; border-radius: 9px; }
.btn.sm .icon { width: 16px; height: 16px; }
.btn .icon { width: 18px; height: 18px; }
.panel .btn:not(.primary):not(.quiet):not(.danger):not(.dark) { border-color: var(--line); }
.link { font-weight: 550; text-decoration-thickness: 1px; }
.tool { border-radius: 10px; border-color: transparent; background: var(--card); }
@media (hover: hover) { .tool:hover { background: var(--sunken); } }

/* ───────── Formularios ───────── */
.field { gap: 6px; }
.field > span { font-size: 13.5px; font-weight: 550; color: var(--ink); }
.label { font-size: 13.5px; font-weight: 550; }
.field small { font-size: 12.5px; color: var(--ink-3); }
.input, select.input, textarea.input { background-color: var(--card); border-color: transparent; border-radius: 10px; }
@media (hover: hover) { .input:hover { border-color: var(--line-2); } }
.input:focus { background-color: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26, 26, 26, .08); }
.panel .input, .sheet .panel .input, .gate-card .panel .input { background-color: var(--surface); border-color: var(--line); }
.sheet .input, .gate-card .input { background-color: var(--card); border-color: transparent; }
.sheet .input:focus, .panel .input:focus, .gate-card .input:focus { background-color: var(--surface); border-color: var(--ink); }
.search .input { border-radius: 10px; }
.search > .icon { color: var(--ink-3); width: 20px; height: 20px; top: 14px; }
.form-error { border-radius: 10px; font-size: 14px; }
fieldset { border-top-color: var(--line); padding-top: 18px; }
legend { font-size: 15px; font-weight: 600; }
.status-select { border-radius: 9px; }

/* ───────── Filtros y controles de selección ───────── */
.chip { min-height: 36px; padding: 0 12px; border-radius: 9px; border-color: transparent; background: var(--card); font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
@media (hover: hover) { .chip:hover { border-color: transparent; background: var(--sunken); color: var(--ink); } }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 550; }
.panel .chip:not([aria-pressed="true"]):not([aria-current="page"]) { background: var(--surface); }
.chip.static { background: var(--sunken); color: var(--ink); }
.tabs-line .chip, .tabs-line .chip[aria-current="page"] { background: none; }
.seg { background: var(--card); border-radius: 11px; padding: 3px; gap: 2px; }
.panel .seg, .sheet .seg { background: var(--sunken); }
.seg button, .seg .seg-link { min-height: 38px; border-radius: 8px; font-weight: 500; font-size: 14px; color: var(--ink-2); }
.seg button[aria-pressed="true"], .seg .seg-link[aria-current="page"] { font-weight: 600; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .06); }
.check input { width: 20px; height: 20px; }
.stepper { background: var(--sunken); border-radius: 10px; }
.stepper button { border-radius: 10px; }
.stepper output { font-weight: 600; }

/* ───────── Etiquetas de estado: un punto y su texto ───────── */
.tag { background: none; padding: 0; border-radius: 0; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); line-height: 1.3; }
.tag:not(:has(.icon))::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag.ok { background: none; color: var(--ok-ink); }
.tag.warn { background: none; color: var(--warn-ink); }
.tag.bad { background: none; color: var(--bad-ink); }
.tag.accent, .tag.sale, .tag.bo { background: none; color: var(--accent-ink); }
.tag.lock { background: none; color: var(--ink-3); }
.tag.quiet { box-shadow: none; color: var(--ink-2); }
.tag.quiet::before { background: none !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.tags { gap: 4px 12px; }
/* Sobre una foto la etiqueta necesita su propio fondo para leerse. */
.lvl { background: none; padding: 0; font-weight: 550; }
.lvl.nuevo { background: none; }
.rc-tag { border-radius: 5px; }

/* ───────── Listas y tablas ───────── */
.list > li { padding: 13px 18px; gap: 14px; }
.row-btn { padding: 13px 18px; gap: 14px; }
.list > li.has-btn > .btn { margin-right: 18px; }
@media (max-width: 599px) { .list > li.has-btn.wrap > .btn { margin: -2px 18px 14px 80px; } }
.list > li b, .row-btn b { font-weight: 600; }
.more-list .row-link { padding: 13px 16px 13px 18px; }
.row-link { padding: 13px 16px 13px 18px; }
.thumb { border-radius: 9px; background: var(--surface); }
.thumb.lg { border-radius: 11px; }
.thumb.ph { font-weight: 600; }
.avatar { background: var(--surface); color: var(--ink-2); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.avatar.ini, .avatar.gift { background: var(--surface); color: var(--ink); font-size: 14.5px; letter-spacing: 0; }
.avatar.ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.day-head { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 16px 18px 6px; background: none; }
.table { font-size: 14.5px; }
.table th { font-size: 12.5px; font-weight: 500; color: var(--ink-3); padding: 10px 12px; }
.table td { padding: 12px; }
.table th:first-child, .table td:first-child { padding-left: 18px; }
.table th:last-child, .table td:last-child { padding-right: 18px; }
.facts > li { font-size: 14px; padding: 10px 0; }
.facts > li > b { font-weight: 600; }
.facts.pad > li { padding: 11px 18px; }
.inline-facts b { font-weight: 600; }
.timeline > li { padding: 13px 18px; }
.tl-ic { box-shadow: inset 0 0 0 1px var(--line); }
.tl-num b { font-weight: 600; }
.strike { color: var(--ink-3); }
.was { color: var(--ink-3); }

/* ───────── Cifras ───────── */
.stats { gap: 8px; background: none; border: 0; border-radius: 0; overflow: visible; }
.stats > div, .stat-btn { border-radius: 12px; padding: 14px 16px; }
.stats b { font-weight: 600; letter-spacing: -0.025em; }
.stats span { font-size: 12.5px; color: var(--ink-2); }
.stats.flush { gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats.flush > div, .stats.flush > .stat-btn { border-radius: 0; }
.panel .stats:not(.flush) > div { background: var(--surface); }
.stats.kpis span { font-weight: 500; }
.stats.kpis small { font-size: 12.5px; }
.stat-btn span { color: var(--accent-ink); font-weight: 550; }
.kv b { font-weight: 600; letter-spacing: -0.02em; }
.kv span { font-size: 12.5px; }
.big { font-weight: 600; letter-spacing: -0.035em; }
.delta { font-size: 12.5px; font-weight: 550; }
.kpi-grid { gap: 8px; }
.kpi { padding: 16px 16px 15px; gap: 3px; border-radius: var(--r-m); }
.kpi > span { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.kpi > b { font-size: clamp(24px, 6.4vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-top: 2px; }
.kpi > small { font-size: 12.5px; color: var(--ink-3); }
@media (hover: hover) { button.kpi:hover, a.kpi:hover { background: var(--sunken); } }
.mini-facts dt, .plan-facts dt, .credit-next dt { font-size: 12.5px; }
.mini-facts dd, .credit-next dd { font-weight: 600; }
.plan-facts dd { font-weight: 600; }
.margin-box { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sum dd { font-weight: 550; }
.sum dt.total { font-weight: 600; }
.sum dd.total { font-weight: 600; letter-spacing: -0.035em; }

/* Finanzas del periodo: la cifra principal, en tinta; las otras dos, tarjetas grises. */
.fin-heroes { gap: 8px; }
.fin-hero { padding: 16px 18px 17px; gap: 3px; }
.fin-hero > span { font-size: 12.5px; font-weight: 500; }
.fin-hero > b { font-weight: 600; letter-spacing: -0.03em; margin-top: 2px; }
.fin-hero > small { font-size: 12.5px; }
.fin-hero.main { background: var(--ink); color: #FFFFFF; }
.fin-hero.main > span { color: rgba(255, 255, 255, .72); }
.fin-hero.main > b { color: #FFFFFF; font-size: clamp(30px, 7.6vw, 38px); }
.fin-hero.main > small { color: rgba(255, 255, 255, .66); }
.fin-hero.main .delta { color: rgba(255, 255, 255, .8); }
.fin-hero.main .delta.good { color: #7FD9AE; }
.fin-hero.main .delta.bad { color: #F2A29F; }
.fin-hero.main a { color: #FFFFFF; }
.fin h4 { font-size: 14px; font-weight: 600; }
.fin-flow .step { font-weight: 600; }
.fin-warn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* Medidores y barras */
.bar { height: 6px; border-radius: 3px; background: #E3E3E3; }
.bar > i { border-radius: 3px; }
.panel .bar, .goal .bar { background: #E3E3E3; }
.meter { height: 8px; border-radius: 4px; background: #E3E3E3; }
.meter > i { border-radius: 4px 0 0 4px; }
.hbar { background: #E3E3E3; }
.hbars .hbar { height: 8px; }
progress { height: 6px; }

/* ───────── Aviso de estado: una línea sobria; el icono lleva el tono ───────── */
.status-line { padding: 12px 16px; gap: 12px; background: var(--card); }
.status-line p { font-size: 15px; font-weight: 550; }
.status-line.tone-bad, .status-line.tone-warn, .status-line.tone-good { background: var(--card); }
.status-line .tone { background: var(--surface); }
.status-line .tone.bad { color: var(--bad); }
.status-line .tone.warn { color: var(--warn); }
.status-line .tone.good { color: var(--ok); }
.tone { width: 32px; height: 32px; border-radius: 10px; }
.tone .icon { width: 17px; height: 17px; stroke-width: 2; }
.biz-status .tone { border-radius: 8px; }
.actions > li.action-item { grid-template-columns: 32px minmax(0, 1fr); padding: 15px 18px; }
@media (min-width: 760px) { [data-box="importante"] .actions > li.action-item { grid-template-columns: 32px minmax(0, 1fr) auto; } }
.biz-ref { font-size: 12.5px; }
.biz-ref i { width: 7px; height: 7px; }

/* ───────── Inicio del Administrador ───────── */
.cards { gap: 8px; }
.biz-card { padding: 18px; gap: 10px; }
.biz-card::before { left: 18px; top: 25px; bottom: auto; width: 9px; height: 9px; border-radius: 50%; }
.biz-card-head { padding-left: 19px; }
.biz-card-head h3 { font-size: 17px; font-weight: 600; }
@media (hover: hover) { .biz-card-head:hover h3 { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.quick { gap: 8px; }
.quick-btn { min-height: 52px; font-weight: 550; font-size: 14.5px; border-radius: 12px; }
.quick-btn .icon { color: var(--ink); width: 20px; height: 20px; }
@media (hover: hover) { .quick-btn:hover { border-color: transparent; background: var(--sunken); } }
.quick-btn.col { font-size: 12.5px; font-weight: 550; min-height: 70px; }
.sys-line { border-radius: 12px; font-size: 13px; }
details.fold > summary h2 { font-size: 17px; }
.table-view summary, details.more > summary { font-size: 13.5px; font-weight: 550; }
.legend { font-size: 12.5px; }
.chart-tip { border-radius: 7px; font-size: 12.5px; }

/* ───────── Inicio del Colaborador ───────── */
.hello h1 { font-size: 24px; }
.sell-cta { min-height: 76px; padding: 14px 16px 14px 20px; border-radius: var(--r-m); }
.sell-cta strong { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.sell-cta span { font-size: 13.5px; opacity: .72; }
.sell-cta .plus { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .14); }
.sell-cta .plus .icon { width: 22px; height: 22px; stroke-width: 2; }
.goal { background: var(--card); padding: 16px 18px; }
.goal-pct { color: var(--ink); font-weight: 600; font-size: 30px; }
.goal.done { background: var(--card); }
.goal.done .goal-pct { color: var(--ok-ink); }
.nudge { background: var(--card); box-shadow: none; }
.nudge .coach-ic, .coach-ic { background: var(--surface); color: var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.nudge p { font-size: 14.5px; color: var(--ink-2); }
.coach.recompensa { background: var(--card); border-color: transparent; }
.coach.recompensa .coach-ic { background: var(--ink); color: #FFFFFF; box-shadow: none; }
.coach.frase { border-color: var(--line-2); }
.coach p { font-size: 14px; }
.challenge-title { font-size: 16px; }
.install-hint { border-color: var(--line-2); }
.order-ready, .next-step { background: var(--card); }
.xp-box { background: var(--card); }
.xp-total { color: var(--ink); font-weight: 600; }
.level-hero h1, .level-name { font-size: 26px; }
.emblem { --seal: var(--surface); --seal-ring: var(--line-2); color: var(--ink); }
.emblem.lit { --seal: var(--ink); --seal-ring: rgba(255, 255, 255, .35); color: #FFFFFF; }
.emblem.locked { --seal: var(--sunken); --seal-ring: var(--line); color: var(--ink-3); }

/* ───────── Vender ───────── */
.cart-bar-in { border-radius: 14px; }
.cart-bar-in b { font-weight: 600; }
/* Sobre la barra de tinta, la acción que cierra la venta va en blanco y «Vaciar» queda como texto. */
.cart-bar-in .btn.primary { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; min-height: 44px; padding: 0 22px; }
.cart-bar-in .btn.primary:hover { background: #EFEFEF; border-color: #EFEFEF; }
.cart-bar-in .btn.ghost { background: transparent; border-color: transparent; color: rgba(255,255,255,.72); min-height: 44px; }
.cart-bar-in .btn.ghost:hover { color: #FFFFFF; background: rgba(255,255,255,.08); }
.cart-bar-in .btn:focus-visible { outline-color: #FFFFFF; }
.variant-opt { border-radius: 10px; font-weight: 550; }
.variant-opt[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface); color: var(--ink); }
.variant-list li.current { background: var(--card); }
.variant-price { font-weight: 600; }
.plan-box { background: var(--card); }
.cash-out b, .btn.go .num, .cash-input { font-weight: 600; }
.option { border-radius: 10px; }
.option-key { font-weight: 600; }
.done-mark { width: 64px; height: 64px; }
.done-mark .icon { width: 30px; height: 30px; stroke-width: 2.2; }
.ticket { border-radius: 12px; font-size: 14px; }
.code-chip { border-radius: 7px; }
.pick-mark { width: 24px; height: 24px; }
.swatch { width: 36px; height: 36px; }

/* ───────── Clientes y crédito ───────── */
.profile-head .avatar { width: 52px; height: 52px; font-size: 18px; }
.profile-head h2 { font-size: 19px; }
.action-grid { gap: 8px; }
.action-grid .act { border-radius: 12px; font-size: 12.5px; font-weight: 550; min-height: 66px; }
.action-grid .act .icon { color: var(--ink); width: 20px; height: 20px; }
@media (hover: hover) { .action-grid .act:hover { background: var(--sunken); } }
.crm-row .avatar { width: 40px; height: 40px; font-size: 14px; }
.credit-progress { padding: 16px 18px; }
.credit-next dd { font-size: 16px; }

/* ───────── Hojas, avisos flotantes ───────── */
.sheet-head { padding: 16px 12px 8px 22px; }
.sheet-head h2 { font-size: 18px; }
.sheet-body { padding: 8px 22px calc(22px + var(--safe-b)); }
.toast { border-radius: 10px; font-size: 14.5px; }

/* ───────── Acceso: papel, sin bloque de color ───────── */

/* ───────── Pantallas anchas ───────── */
@media (min-width: 1024px) {
  h1 { font-size: 28px; }
  .stack { gap: 20px; }
  .shell.owner > .shell-main { padding: 32px 40px 72px; }
  .kpi-grid, .fin-heroes, .cards, .quick { gap: 12px; }
  .cols { gap: 20px; }
  .panel-head h2, .panel-head h3 { font-size: 16px; }
}

/* Ajustes de peso: una sola pieza en tinta por zona. */
/* Filtros de una lista: el elegido se marca con un fondo gris; los demás son solo texto. */
.chips:not(.wrap-chips) .chip:not([aria-pressed="true"]):not([aria-current="page"]) { background: none; }
.chips:not(.wrap-chips) .chip[aria-pressed="true"], .chips:not(.wrap-chips) .chip[aria-current="page"] { background: var(--sunken); border-color: transparent; color: var(--ink); font-weight: 600; }
.panel .chips:not(.wrap-chips) .chip[aria-pressed="true"] { background: var(--surface); }
@media (hover: hover) { .chips:not(.wrap-chips) .chip:not([aria-pressed="true"]):hover { background: var(--card); } }
/* El botón junto a un buscador acompaña; la acción en tinta es la del encabezado. */
.search + .btn.primary { background: var(--card); border-color: transparent; color: var(--ink); }
@media (hover: hover) { .search + .btn.primary:hover { background: var(--sunken); border-color: transparent; } }
/* Acciones dentro de una lista: contorno de tinta, no bloque. */
.list .btn.primary.sm, .actions .btn.primary { background: var(--surface); border-color: var(--ink); color: var(--ink); }
@media (hover: hover) { .list .btn.primary.sm:hover, .actions .btn.primary:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; } }
/* Por cobrar con vencidos: la cifra sigue en tinta; lo vencido se dice abajo, en rojo. */
.kpi.neg > b { color: var(--ink); }
.kpi.neg > small { color: var(--bad-ink); font-weight: 550; }
.delta { font-weight: 500; }
.delta.flat { color: var(--ink-3); }
.fin-hero.main .delta.flat { color: rgba(255, 255, 255, .66); }
.list > li:has(> .row-link) { padding: 0; }
.seg.range button, .seg.range .seg-link { min-height: 36px; }
/* Listas: un punto menos que el texto corrido; el renglón respira por el espacio, no por el tamaño. */
.list, .timeline, .table { font-size: 15px; }
.list .small, .timeline .small { font-size: 13.5px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Versión 0.7.0. Cada parte escribe SOLO dentro de su bloque, entre su marca de inicio y de fin.
   Los bloques van después de la capa 0.6.1 «papel y tinta» y usan sus variables: nada de colores
   sueltos, nada de sombras ni bordes de más.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* [0.7.0 identidad] Identidad visual por negocio: variables y lo que cambia con ellas */
/* Formulario de Ajustes. Las combinaciones listas van en una fila que se desliza; cada color es un renglón
   con su muestra, para qué sirve, su valor y "Automático" (texto mientras lo propone el servidor; botón
   para regresarlo cuando se eligió a mano). Lo fino queda plegado en "Más ajustes". */
.idn-presets { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px; scrollbar-width: none; }
.idn-presets::-webkit-scrollbar { display: none; }
.idn-preset { gap: 8px; min-height: 40px; }
.idn-dots { display: inline-flex; }
.idn-dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface); }
.idn-dots i + i { margin-left: -4px; }
/* La muestra «Tinta y papel» enseña la paleta de la casa aunque el formulario se vea dentro de un negocio con identidad propia. */
.idn-dots .primary { background: var(--casa-tinta); }
.idn-dots .accent { background: var(--casa-enlace); }
.idn-color { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.idn-color .grow b, .idn-color .grow .small { display: block; }
.idn-color .grow b { font-weight: 600; font-size: 14.5px; }
.idn-color .grow .small { font-size: 12.5px; }
.idn-swatch { position: relative; flex: none; width: 44px; height: 44px; border-radius: var(--r-s); overflow: hidden; cursor: pointer; }
.idn-swatch i { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); pointer-events: none; }
.idn-swatch input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); padding: 0; border: 0; background: none; cursor: pointer; }
.idn-swatch:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.idn-hex { flex: none; font: 500 12.5px/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink-2); }
.idn-auto { flex: none; }
.idn-color .btn { flex: none; }
.idn-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 399px) { .idn-hex { display: none; } }

/* Vista previa: un trozo de catálogo pintado con las variables que devuelve el servidor para lo que se está
   eligiendo (las mismas de las páginas públicas). Dentro de ella no se usa ningún componente de la app:
   así lo que se ve depende solo de esas variables. */
.idn-pv { min-height: 262px; padding: 16px; border-radius: var(--r-m); background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: 400 14px/1.4 var(--body); overflow: hidden; }
.idn-pv[aria-busy="true"] { background: var(--surface); }
.idn-pv-biz { display: flex; align-items: center; gap: 7px; font: 500 13px/1.3 var(--body); color: var(--ink-2); }
.idn-pv-biz i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.idn-pv-title { margin: 4px 0 12px; font: 600 calc(22px * var(--ds, 1)) / 1.15 var(--display); font-variant-numeric: lining-nums; letter-spacing: var(--dls, -.015em); overflow-wrap: anywhere; }
.idn-pv-card { display: flex; flex-direction: column; gap: 10px; padding: 8px; background: var(--card); border-radius: var(--r-m); box-shadow: var(--shadow); }
.idn-pv-top { display: flex; align-items: center; gap: 12px; }
.idn-pv-shot { position: relative; flex: none; width: 92px; height: 92px; border-radius: calc(var(--r-m) - 5px); background: var(--bg); overflow: hidden; }
.idn-pv-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.idn-pv-none { display: grid; place-items: center; height: 100%; color: var(--ink-3); font: 600 28px/1 var(--display); }
.idn-pv-dto { position: absolute; top: 5px; left: 5px; padding: 2px 6px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-ink); font: 600 10.5px/1.35 var(--body); }
.idn-pv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.idn-pv-info > b { font: 600 14px/1.25 var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.idn-pv-ben { margin-top: 1px; color: var(--ink-2); font-size: 12.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idn-pv-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; margin-top: 5px; }
.idn-pv-price { font: 600 15.5px/1.35 var(--body); font-variant-numeric: tabular-nums; }
.idn-pv-line s { color: var(--ink-2); font-size: 12px; }
.idn-pv-rate { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.idn-pv-rate b { color: var(--ink); font-weight: 600; }
.idn-pv-stars { display: block; line-height: 0; color: var(--star); }
.idn-pv-stars svg { display: block; width: 60px; height: 12px; fill: currentColor; stroke: none; }
.idn-pv-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: var(--btn-r); background: var(--btn-bg); color: var(--btn-ink); box-shadow: inset 0 0 0 var(--btn-lw) var(--btn-line); font: 550 14.5px/1.15 var(--body); }
.idn-pv-btn .icon { width: 18px; height: 18px; flex: none; stroke-width: var(--icon-w, 1.75); }
.idn-pv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; font-size: 13px; }
.idn-pv-ok { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ok); }
.idn-pv-ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.idn-pv-link { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.idn-pv-eg { margin-left: auto; color: var(--ink-3); font-size: 12px; }
/* La vista previa trae sus propias variables; el grosor de icono que no traiga es el de la casa, no el del negocio abierto. */
.idn-pv { --icon-w: 1.75; }

/* ── La identidad del negocio dentro de la app ──
   aspecto.js pone en el marco de la pantalla (.shell) y en cada hoja del negocio sus variables (identityOf(b).tokens:
   tinta, papel, tarjetas, líneas, acento, letra, esquinas, sombra) y unas marcas: data-look="propia", data-font,
   data-radius, data-buttons, data-shadow y data-icons. TODO lo de aquí abajo depende de esas marcas: la plataforma y
   un negocio sin identidad propia no cambian ni un pixel. El acento (champagne en «Negro y champagne») solo va en
   detalles: enlaces, foco y etiquetas (--accent-ink), estrellas, anillos y la barra señalada (--accent-mark). */
:root { --casa-tinta: #1A1A1A; --casa-enlace: #1D4ED8; } /* la paleta de la casa como muestra, nunca como tema */

/* Papel: el fondo del negocio en todo el marco (en pantallas anchas lo pinta ya la columna de destinos; un
   Colaborador sin negocio no tiene columna, pero tampoco identidad propia). */
@media (max-width: 1023.98px) { .shell.emp[data-look="propia"], .shell.owner[data-look="propia"] { background: var(--bg); } }


/* Letra: la tipografía de títulos del negocio, solo en títulos y cifras principales; el texto sigue en Instrument
   Sans. Cada letra con su ajuste: la elegante (Cormorant) se ve más chica y se lleva a la altura de las mayúsculas
   de la casa; sus números van siempre en "lining" (si no, «100» se lee con cifras antiguas). */
[data-look="propia"][data-font="elegante"] { --dfa: .45; --dls: 0; }
[data-look="propia"][data-font="clasica"] { --dfa: .51; --dls: -.01em; }
[data-look="propia"][data-font="sistema"] { --dfa: .51; --dls: -.012em; }
[data-look="propia"]:not([data-font="sans"]) :is(h1, h2, h3, h4, legend, .biz-pick > span, .biz-brand > span) {
  font-family: var(--display); font-size-adjust: var(--dfa); font-variant-numeric: lining-nums; letter-spacing: var(--dls);
}
[data-look="propia"]:not([data-font="sans"]) :is(.kpi > b, .fin-hero > b, .stats b, .kv b, .big, .goal-pct, .rv-avg, .hm-fig, .home .sell-fig, .sum dd.total, .xp-total, .unlock b, .cart-bar-in b) {
  font-family: var(--display); font-size-adjust: var(--dfa); font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--dls);
}

/* Acción: el color principal también al presionar (la casa se oscurece a negro), y el texto sobre él siempre se lee. */
[data-look="propia"] .btn.primary:active { background: var(--accent-hover); border-color: var(--accent-hover); }
[data-look="propia"] .btn.dark { color: var(--on-accent); }
/* El renglón suave sobre el color principal (lo vendido hoy, en Registrar venta) se lee también sobre un principal claro. */
[data-look="propia"] .home .sell-cta .sell-today { opacity: .9; }
/* Pistas de barras y medidores: la línea del negocio en vez del gris fijo. */
[data-look="propia"] :is(.bar, .meter:not(.warn), .hbar) { background: var(--line); }

/* Detalles en el acento: el aro del emblema del nivel encendido y la barra que se señala en una gráfica. */
[data-look="propia"] .emblem.lit { --seal-ring: var(--biz-accent-on); }
[data-look="propia"] .chart .bar.on { fill: var(--accent-mark); opacity: 1; }

/* Botones: de pastilla o con las esquinas del negocio; de contorno si así los eligió (el carrito sigue lleno). */
[data-look="propia"]:is([data-radius="recto"], [data-radius="redondo"], [data-buttons="pastilla"]) :is(.btn, .btn.sm) { border-radius: var(--btn-r); }
[data-look="propia"][data-buttons="contorno"] .btn.primary:not(.cart-bar-in .btn) { background: var(--surface); color: var(--ink); border-color: var(--accent); box-shadow: inset 0 0 0 .5px var(--accent); }
@media (hover: hover) { [data-look="propia"][data-buttons="contorno"] .btn.primary:not(.cart-bar-in .btn):hover { background: var(--card); } }

/* Esquinas rectas o redondas: controles con --r-s, tarjetas con --r-m (las suaves son las de la casa). */
[data-look="propia"]:is([data-radius="recto"], [data-radius="redondo"]) :is(.input, .tool, .stepper, .seg, .chip:not(.tabs-line .chip), .icon-btn, .biz-pick, .form-error, .thumb, .code-chip, .variant-opt, .status-line) { border-radius: var(--r-s); }
[data-look="propia"]:is([data-radius="recto"], [data-radius="redondo"]) :is(.seg button, .seg .seg-link, .stepper button) { border-radius: max(2px, calc(var(--r-s) - 3px)); }
[data-look="propia"]:is([data-radius="recto"], [data-radius="redondo"]) :is(.tile, .stats > div, .stat-btn, .quick-btn, .action-grid .act, .cart-bar-in, .timeline, .note, .goal, .coach, .sell-cta, .kpi, .fin-hero) { border-radius: var(--r-m); }

/* Sombras: solo las tarjetas de la pantalla (nunca dentro de otra tarjeta ni dentro de una hoja). */
[data-look="propia"]:is([data-shadow="sutil"], [data-shadow="marcada"]) :is(.panel, .kpi, .fin-hero, .tile, .timeline, .stats:not(.flush) > div, .goal, .coach, .status-line):not(.panel *, .sheet *, .tile *) { box-shadow: var(--shadow-card); }

/* Iconos de línea gruesa (el de la sección abierta, un poco más). */
[data-look="propia"][data-icons="grueso"] .icon { stroke-width: var(--icon-w); }
/* [/0.7.0 identidad] */


/* [0.7.0 pin] PIN de Cobros */
/* La "i" junto al candado: se ve pequeña, se toca cómoda (44 px) y no empuja lo que tiene al lado. */
.pin-info { width: 44px; height: 44px; margin: -11px -8px; display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); vertical-align: middle; }
.pin-info .icon { width: 19px; height: 19px; }
@media (hover: hover) { .pin-info:hover { color: var(--ink); } }
.pin-lock { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-s); background: var(--card); color: var(--ink); }
.pin-lock .icon { width: 18px; height: 18px; }
.panel .pin-lock { background: var(--surface); }

/* Hoja del PIN: lo que hay que hacer, el campo y su botón. Nada más. */
.pin-form { gap: 14px; }
.pin-lead { display: flex; align-items: center; gap: 12px; }
.pin-lead p { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }
.pin-lead .pin-info { margin: -4px -8px -4px -4px; }
.pin-go { display: flex; gap: 8px; align-items: stretch; }
.pin-go .pin-input { flex: 1; min-width: 0; }
.pin-go .btn { min-height: 52px; padding: 0 20px; }
.pin-input { min-height: 52px; font-size: 22px; font-weight: 600; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; padding-left: 14px; padding-right: 8px; }
.pin-input::placeholder { color: var(--line-2); letter-spacing: .3em; }
.pin-link { align-self: center; min-height: 40px; padding: 0 8px; }
.pin-about p { font-size: 15px; line-height: 1.5; }
.pin-about p.muted { margin-top: -6px; }

/* En lugar de un importe protegido: candado y "Ver con PIN". */
.pin-peek { flex: none; }
.pin-peek .icon { width: 15px; height: 15px; }
.kpi.kpi-lock { cursor: pointer; }
.kpi.kpi-lock > b { display: inline-flex; align-items: center; gap: 8px; min-height: 33px; margin-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.kpi.kpi-lock > b .icon { width: 18px; height: 18px; color: var(--ink-2); }
.fin-hero.fin-locked > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-hero.fin-locked .fin-peek { margin: 4px 0 2px; }
.facts > li:has(> .pin-peek) { align-items: center; }
.facts > li > .pin-peek { margin: -4px 0; }
.cobros-peek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 18px 18px; }
.cobros-peek .grow { flex: 1 1 150px; }
.cobros-peek b { font-weight: 600; }
.panel-head.between > .pin-info { margin: -11px -6px -11px 0; }
#sale-credit-locked { gap: 10px; }
#sale-credit-locked > span { flex: 1 1 200px; }

/* Pestaña Cobros: protegida, y abierta con su acción discreta para cerrarla. */
.empty.cobros-locked { padding: 28px 20px 26px; }
.cobros-locked-acts { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.cobros-locked-acts .pin-info { margin: 0 -8px 0 -4px; }
.cobros-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: -6px; }
.cobros-bar-acts { display: inline-flex; align-items: center; gap: 10px; }
.cobros-bar-acts .pin-info { margin: -4px -6px; }

/* "Tu cuenta": el renglón del PIN. Y en la ficha de una persona, restablecer el suyo. */
.pin-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pin-row .grow { flex: 1 1 180px; }
.pin-row-title { display: flex; align-items: center; gap: 8px; }
.pin-row-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pin-row-acts:empty { display: none; }
.btn.pin-reset { align-self: center; color: var(--ink-2); }
/* [/0.7.0 pin] */


/* [0.7.0 productos] Código, beneficio, permisos, decants y productos del equipo */
/* Código único de producto. En las listas es un renglón secundario, chico y sin peso; en la ficha, una
   etiqueta que se copia con un toque (su área de toque llega a 44 px aunque se vea más chica). */
.pcode { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.pline > span:empty { display: none; }
.pline > .pcode:has(+ span:not(:empty))::after { content: '\00a0·'; }
/* Con el buscador de productos vacío, el botón de borrar (que no se ve) no le quita lugar al texto de ejemplo: a 360 px lo cortaba. */
#pq:placeholder-shown::-webkit-search-cancel-button { display: none; }
.pcode-row { display: flex; margin-bottom: -6px; }
.pcode-chip { position: relative; min-height: 30px; padding: 0 9px; border: 0; border-radius: 8px; background: var(--card); font-family: inherit; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.panel .pcode-chip { background: var(--surface); }
.pcode-chip::after { content: ''; position: absolute; inset: -7px 0; }
.pcode-chip b { color: var(--ink-2); font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.pcode-chip .icon { width: 14px; height: 14px; }
@media (hover: hover) { .pcode-chip:hover b { color: var(--ink); } }

/* Permisos de una persona: dos grupos cortos (ventas; productos e inventario). */
.perm-box { display: grid; gap: 10px; padding-left: 34px; margin-top: 2px; }
.perm-title { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.perm-list { display: grid; }
.perm-list .check { min-height: 38px; }
@media (min-width: 520px) { .perm-pairs .perm-list { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
@media (max-width: 379px) { .perm-box { padding-left: 12px; } }

/* Decants: tres renglones, cada uno con su precio, su costo y su existencia. Sin tarjetas: una línea los separa. */
.decant-list { list-style: none; margin: 0; padding: 0; }
.decant { display: grid; gap: 4px; padding: 6px 0 12px; border-top: 1px solid var(--line); }
.decant:last-child { border-bottom: 1px solid var(--line); }
.decant-head { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.decant-head .check b { font-weight: 600; }
.decant-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.decant-fields .field > span { font-size: 12.5px; }
.decant-fields .input { min-width: 0; padding-left: 12px; padding-right: 8px; }

/* Productos del Colaborador: primero la lista; lo que puede cambiar, en una hoja corta. */
.team-products > .between { flex-wrap: wrap; }
.team-products > .between > .row { gap: 8px; }
@media (max-width: 379px) { .team-products > .between .btn .icon { display: none; } }
.team-catalog .pline { margin-top: 1px; }
.team-catalog .pline > span { white-space: nowrap; }
.tp-head { display: flex; align-items: center; gap: 14px; }
.tp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tp-facts { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.tp-facts b { color: var(--ink); font-weight: 600; }
.tp-facts:empty { display: none; }

/* Cambios de precios y costos: el valor nuevo es lo que se lee primero. */
.price-log .end { white-space: nowrap; }
/* [/0.7.0 productos] */


/* [0.7.0 cobrar] Cobrar compacto y datos de transferencia */
/* La hoja de cobro: renglones cortos, un rótulo pequeño sobre cada control y ninguna tarjeta dentro de otra.
   Solo llevan fondo los productos y los datos de transferencia. El total y el botón quedan pegados al pie. */
.checkout { gap: 14px; }
.checkout .field { gap: 5px; }
.checkout .list > li { padding: 8px 8px 8px 12px; gap: 10px; }
.checkout .list .thumb { width: 40px; height: 40px; border-radius: 8px; }
.checkout .list b { font-size: 14.5px; line-height: 1.25; }
.checkout .list .stepper button { width: 40px; height: 40px; font-size: 20px; }
.checkout .list .stepper output { min-width: 26px; }
/* Un renglón: su rótulo a la izquierda y, a la derecha, el valor o el control. */
.co-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.co-label { flex: none; font-size: 13.5px; font-weight: 550; color: var(--ink); }
.co-pick { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 15px; text-align: right; }
/* El nombre del cliente no se corta: si es largo, sigue en otro renglón. */
.co-pick b, .co-pick > span { min-width: 0; }
.co-pick b { padding: 4px 0; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.co-pick .icon { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.co-pick:focus-visible { outline-offset: -2px; }
.co-x { width: 40px; height: 44px; margin-right: -10px; }
.co-x .icon { width: 18px; height: 18px; }
/* Efectivo: lo que entrega el cliente y, a su lado, el cambio. */
.cash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.checkout .input.cash-input { height: 48px; }
.cash-row .cash-out, .cash-row .cash-out.vacio { min-height: 48px; padding: 5px 12px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; font-size: 12.5px; line-height: 1.25; }
.cash-row .cash-out b { font-size: 20px; line-height: 1.15; }
.cash-row .cash-out.vacio { background: var(--card); color: var(--ink-3); }
.cash-row .cash-out.vacio b { font-weight: 500; }
.cash-row .cash-out.exacto span, .cash-row .cash-out.invalido span { font-size: 14px; }
.cash .chips { gap: 6px; }
.cash .chips:empty { display: none; }
.cash .chip { min-height: 40px; color: var(--ink); }
/* Crédito: el enganche con su forma de pago en un renglón; el número de pagos y el resumen, cada uno en el suyo. */
.credit-box.stack { gap: 12px; }
.credit-box .co-row .stepper { align-self: center; }
.eng-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 10px; align-items: end; }
.eng-row.one { grid-template-columns: minmax(0, 1fr); }
.eng-row .seg button { min-height: 42px; font-size: 13.5px; padding: 0 4px; }
.plan-line .co-row { align-items: flex-start; min-height: 0; padding-top: 2px; }
.plan-line .co-label { padding-top: 2px; }
.plan-sum { min-width: 0; text-align: right; }
.plan-sum b { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-sum small { display: block; font-size: 13px; color: var(--ink-2); }
.plan-dates { margin-top: -2px; }
.plan-dates > summary { min-height: 40px; padding: 2px 0; margin-left: auto; }
.plan-dates[open] > summary { margin-bottom: 0; }
.plan-dates .plan-list { margin-top: 0; }
/* Opciones: lo secundario, cerrado hasta que haga falta. */
.checkout details.more > summary { min-height: 44px; }
.date-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.date-row .chip { min-height: 48px; }
.date-row .field { flex: 1 1 150px; min-width: 0; }
.date-row small { flex-basis: 100%; }
.seg.disc-kind { flex: none; width: 104px; }
/* Totales: una línea fina, el total y, encima, lo que se descontó. */
/* La cifra grande es la del botón; aquí va el desglose, en letra de renglón. */
.checkout .sum { font-size: 14.5px; }
.checkout .sum .total { padding-top: 8px; margin-top: 2px; }
.checkout .sum dt.total small { display: inline; margin-left: 6px; }
.checkout .sum dd.total { font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; }
.checkout .note.bo-note { padding: 8px 12px; margin-bottom: 10px; }
/* El pie llega hasta el borde de la hoja: nada de lo que pasa por debajo se asoma bajo el botón. */
.checkout > .sticky-foot { bottom: calc(-22px - var(--safe-b)); padding: 12px 0 calc(12px + var(--safe-b)); margin-bottom: calc(-22px - var(--safe-b)); }
/* Datos de transferencia: a qué banco, los datos y sus cuatro acciones. Lo mismo al cobrar una venta, un enganche o un abono. */
.tr-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px 14px; border-radius: var(--r-m); background: var(--card); }
.tr-panel h3 { font-size: 15px; font-weight: 600; }
.tr-panel .bank { gap: 3px 14px; align-items: baseline; }
.tr-panel .bank dt { font-size: 12.5px; color: var(--ink-3); }
.tr-panel .bank dd { display: block; min-height: 0; font-size: 15px; font-weight: 550; overflow-wrap: anywhere; }
.tr-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tr-acts .btn { min-height: 44px; padding: 0 8px; gap: 6px; font-size: 14px; background: var(--surface); border-color: var(--line); }
.tr-acts .btn .icon { width: 16px; height: 16px; }
.tr-acts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* En Ajustes: el título de la sección con su interruptor de recibir o no transferencias. En un teléfono, un dato por renglón. */
.tr-head { display: flex; align-items: flex-start; gap: 12px; }
@media (max-width: 479px) { #transfer-form .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.tr-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: none; color: var(--ink-2); cursor: pointer; }
/* [/0.7.0 cobrar] */


/* [0.7.0 clientes] Lista de clientes sin teléfono y saldos discretos */
/* Al elegir un cliente: su nombre y, debajo, su clave. El teléfono está en su ficha. */
.pick-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 18px; }
.pick-meta .code { margin-left: 0; }
/* [/0.7.0 clientes] */


/* [0.7.0 catalogo] Compartir catálogo */
/* Hoja "Compartir catálogo": qué se comparte, su enlace y tres acciones. Lo demás (código QR, correo,
   opciones del Administrador) queda plegado para que la hoja quepa en un teléfono sin deslizar. */
.cat-share { gap: 14px; }
.cat-share > .seg button { padding: 3px 4px; line-height: 1.15; }
@media (max-width: 399px) { .cat-share > .seg button { font-size: 13px; letter-spacing: -.01em; } }
.cat-count { margin-top: -4px; }
.cat-url { padding: 11px 14px; border-radius: var(--r-s); background: var(--card); color: var(--ink-2); font-size: 13.5px; line-height: 1.35; -webkit-user-select: all; user-select: all; }
.cat-share .share-grid .btn { padding: 0 10px; }
.cat-share details.more > summary { min-height: 44px; }
.cat-other { gap: 8px; justify-content: center; }
/* Elegir productos: una lista para marcar, con el conteo y la acción siempre a la mano. */
.cat-pick > li { padding: 0; }
.cat-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 16px; cursor: pointer; }
.cat-row input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }
.cat-row .thumb { width: 44px; height: 44px; }
.cat-row .grow b, .cat-row .grow .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.cat-none { padding: 18px 4px; }
/* El pie lleva también el título cuando se pide: fondo liso, para que la lista no se lea a través de él. */
.cat-pick-foot { background: var(--surface); box-shadow: 0 -1px 0 var(--line); padding-top: 12px; }
.cat-foot { gap: 10px; }
.cat-foot .grow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.cat-foot .link { min-height: 44px; font-size: 14px; }
.cat-foot .btn { flex: none; }
.cat-title { margin-bottom: 10px; }
.cat-shares .row-btn .grow b, .cat-shares .row-btn .grow .small { display: block; }
.cat-sel b { font-weight: 600; }
/* Opciones del Administrador: la dirección legible se escribe después de "/catalogo/". */
.cat-slug { display: flex; align-items: center; gap: 6px; }
.cat-slug .input { flex: 1; min-width: 0; }
.cat-suggest { align-self: flex-start; min-height: 40px; font-size: 14px; overflow-wrap: anywhere; text-align: left; }
.cat-danger { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
/* [/0.7.0 catalogo] */


/* [0.7.0 resenas] Reseñas */
/* Estrellas de una calificación: cinco de fondo y encima las ganadas (acepta medias). Su color lo pone quien
   las contiene con --rv-star: la tinta de la casa, o el acento del negocio que tiene identidad propia. */
.rv-stars { position: relative; display: inline-block; line-height: 0; vertical-align: -2px; flex: none; }
.rv-stars svg { display: block; width: calc(var(--s, 14px) * 5); height: var(--s, 14px); fill: currentColor; }
.rv-stars .off { display: block; color: var(--line-2); }
.rv-stars .on { position: absolute; top: 0; left: 0; color: var(--rv-star, var(--ink)); }
/* Resumen: la calificación del negocio es la única cifra grande de la pantalla. */
.rv-sum { display: flex; align-items: center; gap: 14px; }
.rv-avg { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.rv-sum p { margin-top: 5px; }
/* Renglón de una reseña y su hoja. */
.rv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.rv-top b { font-weight: 600; overflow-wrap: anywhere; }
.rv-row { align-items: flex-start; }
.rv-row > .icon, .rv-row > .thumb { align-self: center; }
.rv-text { margin-top: 3px; overflow-wrap: anywhere; }
.rv-full { white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-photo { display: block; width: 132px; height: 132px; border-radius: var(--r-m); overflow: hidden; background: var(--card); }
.rv-photo img { width: 100%; height: 100%; object-fit: cover; }
.rv-reply { background: var(--card); border-radius: var(--r-m); padding: 12px 14px; }
.rv-reply p { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.rv .facts { margin-top: 0; }
.rv .facts > li > b { white-space: normal; font-weight: 600; overflow-wrap: anywhere; }
.rv .facts > li > span { flex: none; }
/* "Pedir reseña", en la venta registrada y en la nota. */
.review-ask { text-align: left; }
/* [/0.7.0 resenas] */


/* [0.7.0 avisos] Notificaciones e instalación */
/* Renglones de "Tu cuenta" (Notificaciones, Instalar aplicación): seguidos forman una sola tarjeta. */
.acct-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 14px 10px 16px; border: 0; border-radius: var(--r-m); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.acct-row .grow { min-width: 0; }
.acct-row .grow b, .acct-row .grow .small { display: block; }
.acct-row b { font-weight: 600; }
.acct-row > .icon:last-child { flex: none; color: var(--ink-2); }
.acct-row .tone { background: var(--surface); }
.acct-row .tone.good { background: var(--ok-soft); color: var(--ok); }
.acct-row + .acct-row { margin-top: -16px; border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.acct-row:has(+ .acct-row) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.acct-row:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .acct-row:hover { background: var(--sunken); } }
/* Hoja "Notificaciones": el estado de este dispositivo, las categorías y los dispositivos de la persona. */
.avisos-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.avisos-state .tag { font-size: 15.5px; font-weight: 600; color: var(--ink); gap: 8px; }
.avisos-state .tag::before { width: 8px; height: 8px; }
.avisos-state .tag.ok::before { background: var(--ok); }
.avisos-state .tag.warn::before { background: var(--warn); }
.avisos h3 { font-size: 15px; }
.avisos p { margin: 0; }
.avisos details.more > ul { margin-bottom: 4px; }
.switch-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; cursor: pointer; }
.switch-row .grow { min-width: 0; }
.switch-row .grow b, .switch-row .grow .small { display: block; }
/* Interruptor: una casilla con forma de interruptor. La posición del botón dice el estado, no solo el color. */
.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background .15s ease; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .28); transition: transform .15s ease; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .55; }
.switch:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.notif-foot { margin: 8px 0 0; text-align: center; }
/* Los enlaces de estas hojas se tocan con el dedo: misma altura que un botón. */
.notif-foot .link, .avisos .link, .install-sheet .link { min-height: 44px; }
/* Hoja "Instalar aplicación": el equipo se elige en una fila (dos por renglón en teléfonos) y abajo van sus pasos. */
.seg.plat { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg.plat button { min-height: 44px; }
@media (min-width: 480px) { .seg.plat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.install-sheet p { margin: 0; }
.install-sheet .steps { font-size: 15px; line-height: 1.4; }
.install-done { display: flex; align-items: flex-start; gap: 12px; }
.install-done .tone { margin-top: 1px; }
/* [/0.7.0 avisos] */


/* [0.7.0 pedidos] Pedidos y cotizaciones */
/* Lista de pedidos: la foto, el número con su estado (punto y texto), lo pedido y el cliente; a la derecha, cuándo llega. */
.order-list .row-btn { align-items: center; gap: 12px; }
.order-list .thumb { width: 48px; height: 48px; }
.order-list .grow { display: grid; gap: 1px; min-width: 0; }
.order-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.order-top .num { font-weight: 600; font-variant-numeric: tabular-nums; }
.order-eta { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; max-width: 34%; }
.order-eta b { font-weight: 600; white-space: nowrap; }
/* La hoja de un pedido: arriba el estado; después las piezas con foto, los importes, la entrega y las acciones. */
.order-sheet { gap: 14px; }
.order-head { display: grid; gap: 3px; }
.order-items > li { padding: 10px 14px; gap: 12px; }
.order-items .thumb.lg { width: 56px; height: 56px; }
.order-items .grow { display: grid; gap: 1px; min-width: 0; }
.order-items .grow > .small { line-height: 1.3; }
.order-sum { font-size: 14.5px; gap: 5px 0; }
.order-sum .total { padding-top: 0; margin-top: 0; border-top: 0; }
.order-sum dd.total { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.order-sum dd b { font-weight: 650; }
.order-peek { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.order-peek .btn { min-height: 44px; }
.order-sheet .note.bo-note { padding: 9px 12px; }
.order-share .btn { min-width: 0; padding: 0 10px; }
.order-sheet details.more > summary { min-height: 44px; }
.order-cust .grow { min-width: 0; text-align: right; font-weight: 550; overflow-wrap: anywhere; }
.order-others .btn { min-height: 44px; padding: 0 8px; font-size: 14px; }
/* La acción principal (el siguiente estado) queda siempre a la vista, al pie de la hoja. */
.order-sheet > .sticky-foot { z-index: 2; bottom: calc(-22px - var(--safe-b)); padding: 12px 0 calc(12px + var(--safe-b)); margin-bottom: calc(-22px - var(--safe-b)); }
/* Vender: un producto bajo pedido que todavía no va en la venta ofrece "+ Agregar pedido" con su precio y su entrega. */
.variant-order { min-height: 44px; flex: none; }
/* Comprobantes con foto: la grande de un pedido y una pequeña en cada renglón de una cotización. */
.rc-photo { display: grid; place-items: center; margin: 12px 0 4px; border-radius: 12px; background: var(--sunken); overflow: hidden; }
.rc-photo img { display: block; max-width: 100%; max-height: 220px; object-fit: contain; }
.rc-with-pics li { align-items: center; }
.rc-with-pics li > div { flex: 1; }
.rc-pic { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: var(--sunken); }
/* [/0.7.0 pedidos] */


/* [0.7.0 cotizaciones] Cotizaciones con fotos y plan de pagos */
/* Lista: los filtros y "Nueva" en un renglón; cada cotización con la foto de su primer producto, su cliente y su total. */
.quote-bar { display: flex; align-items: center; gap: 10px; }
.quote-bar .chips { flex: 1 1 auto; min-width: 0; }
.quote-bar > .btn { flex: none; min-height: 40px; }
.quote-list .row-btn { align-items: center; }
.quote-list .grow { display: grid; gap: 1px; min-width: 0; }
.quote-list .thumb { width: 48px; height: 48px; }
/* Preparar y ver una cotización: renglones cortos, sin tarjetas de más; el total y la acción principal al pie. */
.quote-builder, .quote-sheet { gap: 14px; }
.quote-builder .field { gap: 5px; }
.quote-builder .seg button { min-height: 42px; }
.quote-builder .link { min-height: 44px; }
.q-items > li { padding: 9px 10px 9px 12px; gap: 10px; }
.q-items .thumb { width: 44px; height: 44px; border-radius: 9px; }
.q-items .grow { display: grid; gap: 1px; min-width: 0; }
.q-items b { font-size: 14.5px; line-height: 1.25; }
.q-items .stepper button { width: 40px; height: 40px; font-size: 20px; }
.q-items .stepper output { min-width: 26px; }
.q-credit { gap: 12px; }
.q-credit .seg button { min-height: 42px; font-size: 13.5px; padding: 0 4px; }
.q-plan-row { align-items: flex-start; min-height: 0; padding-top: 2px; }
.quote-builder details.more > summary, .quote-sheet details.more > summary { min-height: 44px; }
.quote-builder .sum, .q-sum { font-size: 14.5px; }
.quote-builder .sum .total, .q-sum .total { padding-top: 8px; margin-top: 2px; }
.quote-builder .sum dd.total { font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; }
.q-sum dd.total { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.quote-head .grow { min-width: 0; }
.quote-head b { overflow-wrap: anywhere; }
.q-proposal { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); background: var(--card); }
.q-proposal .sum { grid-template-columns: auto minmax(0, 1fr); font-size: 14.5px; gap: 4px 0; }
.q-proposal .sum dt { white-space: nowrap; }
.q-proposal p { margin: 0; }
.q-share .btn { min-width: 0; padding: 0 10px; }
.q-link { padding: 12px 14px; border-radius: var(--r-m); background: var(--card); }
.q-link .between { gap: 4px 10px; align-items: baseline; flex-wrap: wrap; }
.q-link .btn { min-height: 44px; }
.quote-builder > .sticky-foot, .quote-sheet > .sticky-foot { z-index: 2; bottom: calc(-22px - var(--safe-b)); padding: 12px 0 calc(12px + var(--safe-b)); margin-bottom: calc(-22px - var(--safe-b)); }
/* [/0.7.0 cotizaciones] */


/* [0.7.0 equipo] Inicio del Colaborador */
/* El Inicio se lee como un estado de cuenta de la persona: cada bloque abre con su renglón (qué es, a
   la izquierda; su cifra, a la derecha, todas contra el mismo borde) y debajo va el detalle. De arriba
   abajo: vender con lo de hoy, la semana contra la meta, el nivel con lo que desbloquea, las ganancias
   y el Fondo de Ahorro, que es un renglón más de esa cuenta: donde los otros llevan su cifra, él dice
   "próximamente". En un teléfono de 390 × 844 todo eso cabe sin deslizar; los pendientes del día van
   después. Una sola pieza con acabado propio, el Fondo de Ahorro; lo demás es papel y tinta. */
.shell.emp .shell-main:has(> .home) { padding-top: 12px; }
.home { display: flex; flex-direction: column; gap: 10px; }
.home-head { display: flex; flex-direction: column; gap: 10px; }
.home .hello { padding: 0 2px; }
.home .hello .lead { margin-top: 1px; font-size: 15px; color: var(--ink-2); }

/* Vender: la acción principal, en tinta, y el primer renglón de la cuenta: a la izquierda su nombre (con
   cuántas ventas van hoy) y a la derecha lo vendido hoy, contra el mismo borde que las demás cifras. */
.home .sell-cta { justify-content: flex-start; gap: 12px; min-height: 58px; padding: 9px 18px 9px 10px; }
.home .sell-cta span { opacity: 1; }
.home .sell-cta .plus { width: 38px; height: 38px; border-radius: var(--r-s); }
.home .sell-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home .sell-cta strong { font-size: 17px; line-height: 1.25; }
.home .sell-cta .sell-today { font-size: 13.5px; line-height: 1.3; opacity: .8; font-variant-numeric: tabular-nums; }
.home .sell-fig { flex: none; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Un bloque: renglón de apertura (título y cifra), detalle y, si hace falta, un renglón más bajo una línea. */
.home-main, .home-col { display: flex; flex-direction: column; gap: 10px; }
.hm { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 13px; }
.hm-part { display: flex; flex-direction: column; gap: 8px; }
.hm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-head h3, .lv-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.hm-fig { flex: none; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.hm-fig small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.hm .bar { margin: 0; }
.hm-part.done .bar > i { background: var(--ok); }
.hm-facts { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hm-facts b { font-weight: 600; color: var(--ink); }
.hm-facts .tag { font-size: 13px; white-space: normal; }
/* Un estado que ocupa varios renglones lleva su punto (o su icono) junto al primero. */
.hm .tag, .lv-path .tag { align-items: flex-start; }
.hm .tag::before, .lv-path .tag::before { margin-top: .42em; }
.hm .tag .icon, .lv-path .tag .icon { margin-top: 2px; }
.hm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.hm-row b { font-size: 15px; font-weight: 600; color: var(--ink); }
.hm-note, .hm-sub { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
/* El título de un bloque que lleva a su detalle: el mismo título, con su flecha, y 44 px para el dedo. */
.hm-title a, .lv-title button { display: inline-block; margin: -12px 0 -12px -8px; padding: 12px 4px 12px 8px; border: 0; border-radius: var(--r-s); background: none; font: inherit; letter-spacing: inherit; color: var(--ink); text-align: left; text-decoration: none; }
/* La flecha va pegada a la última palabra, aunque un nombre de nivel largo parta en dos renglones. */
.hm-title .icon, .lv-title .icon { display: inline-block; width: 16px; height: 16px; margin-left: 2px; vertical-align: -2px; color: var(--ink-3); }
@media (hover: hover) { .hm-title a:hover, .lv-title button:hover, .lv-xp:hover { background: var(--sunken); } }
.hm-title a:active, .lv-title button:active, .lv-xp:active { background: var(--sunken); }

/* El nivel: a la izquierda su nombre (abre el camino completo) y lo que falta; a la derecha el XP
   (abre de dónde vino el de hoy). La barra va del emblema del nivel actual al del siguiente, y bajo
   cada extremo dice qué desbloquea. */
.lv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lv-top > .grow { display: flex; flex-direction: column; gap: 1px; }
.lv-xp { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; min-width: 64px; min-height: 44px; margin: -3px -8px -3px 0; padding: 3px 8px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); text-align: right; }
.lv-xp > span { display: inline-flex; align-items: center; gap: 1px; margin-right: -3px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lv-xp .icon { width: 14px; height: 14px; }
.lv-track { display: flex; align-items: center; gap: 8px; }
.lv-track .bar { flex: 1; }
.lv-ends { display: grid; grid-template-columns: fit-content(58%) minmax(0, 1fr); gap: 10px; margin-top: -2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.lv-ends > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; text-wrap: balance; }
.lv-ends > .end { align-items: flex-end; text-align: right; }
.lv-ends b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lv-ends .tag { white-space: normal; font-size: 12.5px; gap: 4px; }
/* A la derecha el estado va contra el borde y su icono viaja con la primera palabra, aunque el texto parta en dos renglones. */
.lv-ends > .end .tag { display: block; text-align: right; }
.lv-ends > .end .tag .icon { display: inline-block; vertical-align: -2px; margin: 0 1px 0 0; }
/* En 360 px, dos puntos menos de margen dentro de cada renglón (también en vender y en el Fondo, para que las cifras sigan alineadas). */
@media (max-width: 379px) { .hm { padding-left: 16px; padding-right: 16px; } .home .sell-cta { padding-right: 16px; } .home .fund { padding-left: 16px; padding-right: 16px; } }

/* Ganancias: lo que falta por entregar y lo entregado, como estado (punto y texto). */
.earn-state { justify-content: flex-start; gap: 2px 14px; }

/* Fondo de Ahorro en el Inicio: el cuarto renglón de la cuenta, en tinta. Su nombre va donde los demás
   llevan el título y "PRÓXIMAMENTE" donde llevan la cifra; debajo, la frase, el botón y el brote. En
   el teléfono, lo que explica qué es aparece al tocar el botón. Los colores salen de las variables
   (la tinta del negocio y su texto), no de valores fijos. */
.home .fund { grid-template-columns: minmax(0, 1fr) 72px; align-items: end; gap: 0 10px; padding: 13px 18px 3px; color: var(--on-accent); background: var(--accent); box-shadow: none; }
/* Recorta su brillo sin volverse un área que se pueda recorrer: si para tocar el botón hay que desplazar la
   página (en 360 px lo tapa la barra de abajo), la tarjeta no se mueve por dentro y su nombre sigue arriba. */
.home .fund { overflow: clip; }
/* Un reflejo tenue en la esquina, hecho con el color del texto del negocio: sirve con cualquier tinta. */
.home .fund::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .13; background: radial-gradient(90% 70% at 88% 0%, var(--on-accent), transparent 60%); }
.home .fund-body { display: contents; }
.home .fund-top, .home .fund-face, .home .fund-what, .home .fund-btn { position: relative; z-index: 1; }
.home .fund-top { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 12px; margin-bottom: 6px; }
.home .fund-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: inherit; }
.home .fund-pill { flex: none; padding: 3px 8px; font-size: 10.5px; letter-spacing: .08em; color: var(--accent); background: var(--on-accent); }
.home .fund-face, .home .fund-what, .home .fund-btn { grid-column: 1; }
.home .fund-figure { grid-column: 2; grid-row: 2 / span 4; order: 0; width: 72px; margin: -8px -2px 8px 0; justify-self: end; align-self: end; }
.home .fund-face { gap: 2px; }
.home .fund h3 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: inherit; }
.home .fund-lead { display: none; }
.home .fund-text { font-size: 13.5px; line-height: 1.4; color: inherit; opacity: .84; }
.home .fund-big { font-size: 15px; font-weight: 600; line-height: 1.3; color: inherit; }
.home .fund-what { display: none; }
.home .fund.open .fund-what { display: block; }
.home .fund.open .fund-back { margin-top: 6px; }
.home .fund-btn { justify-self: start; min-height: 44px; margin: 0 0 0 -4px; padding: 0 4px; border-radius: 6px; background: none; color: inherit; font-size: 13.5px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.home .fund-btn:focus-visible { outline-color: var(--on-accent); }
.home .fund.open .fund-btn { background: none; color: inherit; box-shadow: none; }

/* Un pedido que ya llegó: un renglón que se toca, con su punto de estado. Va arriba porque alguien lo espera. */
.home .order-ready { padding: 12px 12px 12px 18px; gap: 8px; }
.home .order-ready .grow { display: flex; flex-direction: column; gap: 1px; }
.home .order-ready b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.home .order-ready b::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* Pendientes del día: después de lo esencial. Sus botones chicos miden 44 px de alto: se tocan con el dedo. */
.home .practice-card { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 12px; }
.home .btn.sm { min-height: 44px; min-width: 44px; }
.home .panel-foot a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.home .quick > :only-child { grid-column: 1 / -1; }
.home-more { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.home-more > h2 { padding: 0 2px; }
.home-flow { display: flex; flex-direction: column; gap: 10px; }
.home #piezas, #recompensas, .home .fund { scroll-margin-top: calc(var(--bar-h) + 12px); }
.home .fund { scroll-margin-bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }

/* El camino de niveles (hoja "Tus niveles"): cada nivel con su renglón (nombre y XP) y, debajo, lo que desbloquea. */
.lv-now { display: flex; align-items: center; gap: 18px; padding: 0 4px; }
.lv-path > li { align-items: flex-start; padding: 11px 18px; gap: 12px; }
.lv-path > li + li::before { left: 37px; top: -12px; height: 20px; }
.lvr-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; min-height: 22px; }
.lvr-head b { font-size: 15px; }
.lvr-xp { margin-left: auto; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.lvr-perk { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.lv-path .tag { margin-top: 0; white-space: normal; }

/* Tableta y escritorio: el Inicio usa el ancho. En tableta, los renglones de la cuenta van de dos en dos
   (más abajo se dice qué pareja según el caso). En pantallas anchas, a la izquierda lo que haces (semana
   y nivel) y a la derecha lo que recibes (ganancias y el Fondo de Ahorro, que ahí se ve completo). Los
   pendientes del día, en dos columnas. La barra de arriba se alinea con el contenido mientras se ve el Inicio. */
@media (min-width: 720px) {
  .shell.emp .shell-main:has(> .home) { max-width: 1080px; padding: 20px 24px calc(var(--nav-h) + var(--safe-b) + 28px); }
  .home { gap: 16px; }
  .home-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .home .sell-cta { flex: none; width: min(360px, 46%); }
  .home-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .home-col { display: contents; }
  /* Un bloque más alto que su contenido (porque su vecino mide más) lleva su último renglón al borde de abajo: no queda con el fondo vacío. */
  .hm > :last-child, .lv > .lv-track { margin-top: auto; }
  .lv > .lv-ends { margin-top: -2px; }
  .home-flow { display: block; columns: 2; column-gap: 12px; }
  .home-flow > * { break-inside: avoid; margin: 0 0 12px; }
  .home-flow > :last-child { margin-bottom: 0; }
}
/* Vender aprovecha el ancho en tableta y en escritorio: sus tarjetas, del mismo tamaño que en el teléfono, van en
   dos o tres columnas (mientras carga también: app.js marca la vista antes de pedir el catálogo). */
@media (min-width: 720px) {
  .shell.emp .shell-main.view-sell { max-width: 1080px; }
}
@media (min-width: 720px) and (max-width: 1023.98px) {
  /* La barra de arriba se alinea con el contenido mientras se ve Vender (desde 1024 px hay columna y la barra va a todo el ancho). */
  .shell.emp:has(.shell-main.view-sell) .topbar-in { max-width: 1080px; }
}
/* En tableta, cada renglón junta dos bloques de alto parecido. Con meta: la semana con el nivel y las ganancias
   con el Fondo. Sin meta, la semana mide menos: va con las ganancias, y el nivel con el Fondo. Sin semana
   (quien no vende): el nivel con el Fondo, y las ganancias a todo lo ancho debajo. */
@media (min-width: 720px) and (max-width: 1023.98px) {
  /* La barra de arriba se alinea con el contenido mientras se ve el Inicio (desde 1024 px hay columna y la barra va a todo el ancho). */
  .shell.emp:has(#view > .home) .topbar-in { max-width: 1080px; padding-left: 24px; padding-right: 16px; }
}
/* Este acomodo llega hasta 1279 px: desde 1024 px el Colaborador tiene la columna de destinos a la izquierda y al
   Inicio le quedan 252 px menos, es decir, el ancho de una tableta. El acomodo de pantalla ancha (más abajo) pide
   unos 980 px de contenido: con menos, el Fondo de Ahorro se alargaba y estiraba a la semana y al nivel. */
@media (min-width: 720px) and (max-width: 1279.98px) {
  .home-main:has([data-no-goal]) [data-block=ganancias] { order: 1; }
  .home-main:has([data-no-goal]) [data-block=nivel] { order: 2; }
  .home-main:has([data-no-goal]) [data-fund] { order: 3; }
  .home-main:not(:has([data-block=semana])) [data-fund] { order: 1; }
  .home-main:not(:has([data-block=semana])) [data-block=ganancias] { order: 2; grid-column: 1 / -1; }
  /* El bloque que va junto al Fondo de Ahorro conserva su alto: no se estira (ni cuando el Fondo se descubre) y no se abre un hueco. */
  .home-main:has([data-block=semana]):not(:has([data-no-goal])) [data-block=ganancias],
  .home-main:has([data-no-goal]) [data-block=nivel],
  .home-main:not(:has([data-block=semana])) [data-block=nivel] { align-self: start; }
}
@media (min-width: 1280px) {
  .home-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
  .home-col { display: flex; gap: 16px; }
  /* Si una columna queda más corta, sus dos bloques se reparten la diferencia. */
  .home-col > * { flex: 1 0 auto; }
  /* Sin semana (quien no vende): a la izquierda el nivel y las ganancias; a la derecha, el Fondo de Ahorro a todo lo alto. */
  .home-main:not(:has([data-block=semana])) .home-col { display: contents; }
  .home-main:not(:has([data-block=semana])) [data-block=ganancias] { grid-column: 1; }
  .home-main:not(:has([data-block=semana])) [data-fund] { grid-column: 2; grid-row: 1 / span 2; }
  .hm { padding: 18px 20px; gap: 10px; }
  .hm-fig, .home .sell-fig { font-size: 24px; }
  .home .sell-cta { padding-right: 20px; }
  .home .fund { grid-template-columns: minmax(0, 1fr) 104px; padding: 18px 20px 8px; }
  .home .fund-figure { width: 104px; margin: 0 0 12px; }
  .home .fund h3 { font-size: 17px; font-weight: 600; }
  .home .fund-lead, .home .fund-what { display: block; }
  .home .fund-lead { font-size: 13.5px; font-weight: 500; color: inherit; opacity: .84; }
  .home .fund-what { margin-top: 4px; }
  .home-flow { column-gap: 16px; }
  .home-flow > * { margin-bottom: 16px; }
}
/* [/0.7.0 equipo] */


/* [0.7.0 movil] Primero el contenido: ajustes de pantallas en teléfono */
/* «Más»: la acción principal en tinta, después cada grupo en una cuadrícula de dos (tres en tableta) con rótulos
   cortos, y la cuenta al final. Todo cabe en un teléfono de 360 × 740 sin deslizar. */
.more-sheet { gap: 10px; }
.more-main { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px 0 16px; border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 550; text-decoration: none; }
.more-main span { flex: 1; min-width: 0; }
.more-main .icon { width: 20px; height: 20px; }
.more-main .icon:last-child { opacity: .6; }
@media (hover: hover) { .more-main:hover { background: var(--accent-hover); } }
.more-main:focus-visible { outline-offset: 3px; }
.more-group { display: flex; flex-direction: column; gap: 6px; }
.more-title { padding: 2px 2px 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.more-grid > li { display: flex; min-width: 0; }
.more-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.more-tile { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 5px 12px; border: 0; border-radius: var(--r-s); background: var(--card); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 550; line-height: 1.2; letter-spacing: -0.005em; text-align: left; text-decoration: none; cursor: pointer; }
.more-tile .icon { width: 19px; height: 19px; flex: none; color: var(--ink-2); }
.more-tile span { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) { .more-tile:hover { background: var(--sunken); } }
.more-tile:focus-visible { outline-offset: 2px; }
.more-acct .row-link { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.more-acct .tone { width: 30px; height: 30px; }
@media (min-width: 640px) {
  .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .more-grid > li:last-child:nth-child(odd) { grid-column: auto; }
}

/* Encabezado de una sección del negocio en el teléfono: el título y su acción en un renglón. El nombre del
   negocio ya está en la pestaña de arriba; aquí solo quedan sus marcas (archivado, solo Administrador). */
@media (max-width: 599px) {
  .biz-head { align-items: center; }
  .biz-head .ph-biz { display: none; }
  .biz-head p:not(:has(.tag)) { display: none; }
  .biz-head h1 { font-size: 20px; overflow-wrap: anywhere; }
}

/* Productos. Arriba solo el buscador con «Agregar» y, debajo, los filtros con «Opciones» a la derecha: la lista
   empieza enseguida. En pantallas anchas, recibir y contar también quedan a la vista. Lo que se toca mide 44 px
   (el filtro elegido se ve más bajo: un anillo del color del papel). */
.ptools { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search new" "chips acts"; gap: 10px 8px; align-items: center; }
.ptools > .search { grid-area: search; min-width: 0; }
.ptools > [data-act=new] { grid-area: new; }
.ptools > .chips { grid-area: chips; min-width: 0; margin: 0 0 0 -16px; padding: 0 0 0 16px; }
.ptools > .pacts { grid-area: acts; display: flex; align-items: center; gap: 8px; }
.ptools .chip { min-height: 44px; border: 0; border-radius: 12px; }
/* Los filtros se deslizan por debajo de «Opciones»: se desvanecen al llegar, y el último puede pasar del borde. */
@media (max-width: 1023px) { .ptools > .chips { padding-right: 20px; -webkit-mask-image: linear-gradient(to left, transparent, #000 20px); mask-image: linear-gradient(to left, transparent, #000 20px); } }
.ptools .chips .chip[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--bg); }
.ptools .btn.sm { min-height: 44px; padding: 0 14px; }
@media (max-width: 599px) { .ptools .wide-tool { display: none; } }
@media (min-width: 1024px) {
  .ptools { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "search acts new" "chips chips chips"; }
  .ptools > .chips { margin: 0; padding: 0; flex-wrap: wrap; }
}
.ptool-list .row-btn { min-height: 60px; }
/* Con espacio, recibir y contar ya están junto al buscador: en «Opciones» no se repiten. */
@media (min-width: 600px) { .ptool-list > li.phone-only { display: none; } }

/* Renglones de producto: foto, nombre (hasta dos renglones) y su código; a la derecha precio y existencia, en
   una columna que se lee de un vistazo. Las presentaciones de un producto van juntas bajo su nombre. */
.prows > li > .row-btn { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
.prows .thumb { width: 44px; height: 44px; border-radius: 9px; }
.prows .pname { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: 600; line-height: 1.25; }
.prows .pline { margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.prows .pline > .pmore::before { content: '\00a0·\00a0'; }
.prows .pline > span:empty + .pmore::before { content: '·\00a0'; }
.prows .tags { margin-top: 4px; gap: 2px 10px; }
.pfig { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; }
.pfig > b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.pfig .was { font-size: 12.5px; line-height: 1.2; }
.pfig .tag { margin-top: 2px; }
.pfig .tag.bo { max-width: min(150px, 42vw); white-space: normal; text-align: right; }
@media (max-width: 599px) { .chips [data-cat], .chips [data-facet] { min-height: 44px; } }
.prows > li.pgroup { display: block; padding: 0; }
.pg-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px 6px; }
.pvars { list-style: none; margin: 0; padding: 0 0 4px; }
.pvars > li { display: flex; margin-left: 74px; border-top: 1px solid var(--line); }
.pvars > li:first-child { border-top: 0; }
.pvars .row-btn { min-height: 52px; padding: 8px 18px 8px 0; }
.pvars .pname { font-weight: 550; }
@media (max-width: 599px) {
  .prows > li > .row-btn, .pg-head { padding-left: 16px; padding-right: 16px; }
  .pvars > li { margin-left: 72px; }
  .pvars .row-btn { padding-right: 16px; }
}

/* Ficha de producto: la foto (se toca para cambiarla) junto al nombre; precio, costo y existencia en dos
   columnas; lo secundario plegado en «Más datos» en el teléfono, y «Guardar» siempre a la mano, al pie. */
.pform { gap: 14px; }
.pform .grid-2 { align-items: end; }
.pf-top { display: flex; align-items: flex-start; gap: 14px; }
.pf-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-photo { position: relative; flex: none; width: 76px; height: 76px; margin-top: 23px; border-radius: var(--r-m); overflow: hidden; background: var(--card); cursor: pointer; }
.pf-photo img, .pf-photo .ph { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; color: var(--ink-3); }
.pf-photo .ph .icon { width: 24px; height: 24px; }
.pf-photo-cta { position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.pf-photo-cta .icon { width: 15px; height: 15px; }
.pf-photo:not(:has(img)) .pf-photo-cta { display: none; }
.pf-photo:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.pf-grid > .span-2 { grid-column: 1 / -1; }
.pform .margin-box { padding: 10px 14px; }
.pform .mini-facts { gap: 6px 12px; }
.pform .mini-facts dd { font-size: 16px; }
/* El código, discreto: un renglón de texto que se toca para copiarlo (44 px de alto para el dedo). */
.pform .pcode-row { margin: -6px 0 -8px; }
.pform .pcode-chip { min-height: 44px; margin-left: -6px; padding: 0 6px; background: none; }
/* Productos del Colaborador: los mismos 44 px en «Inventario», «Agregar» y en el código de su hoja. */
.team-products > .between .btn { min-height: 44px; }
#tp-form .pcode-chip { min-height: 44px; }
.pf-stock .stepper.qty button { width: 44px; height: 44px; }
.pf-stock .stepper.qty input { height: 44px; }
.pform [data-act=ungroup] { min-height: 44px; }
/* Pestañas de una hoja o de una pantalla de este paquete: 44 px para el dedo. */
.sheet .seg.tabs button, .seg.tabs .seg-link { min-height: 44px; }
.pf-note { margin-top: -6px; }
.pform details.more > summary { min-height: 44px; flex-wrap: wrap; gap: 0 8px; }
.pf-hint { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.pf-more[open] .pf-hint { display: none; }
.pf-stock .pf-now { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.pf-vacts { display: flex; flex-wrap: wrap; gap: 8px; }
.pform > .sticky-foot { z-index: 2; bottom: calc(-22px - var(--safe-b)); padding: 12px 0 calc(12px + var(--safe-b)); margin-bottom: calc(-22px - var(--safe-b)); background: var(--surface); box-shadow: 0 -1px 0 var(--line); }

/* Clientes: las pestañas, el buscador con «Registrar» y un renglón de filtros que se desliza (con «quién
   atiende», para el Administrador, al final). El aviso de clientes sin nadie que los vea cabe en un renglón. */
.stack > nav.seg.tabs { margin-bottom: 0; }
.ctab { gap: 12px; }
.ctools { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search new" "chips chips"; gap: 10px 8px; align-items: center; }
.ctools > .search { grid-area: search; min-width: 0; }
.ctools > [data-act=new] { grid-area: new; }
.ctools > .chips { grid-area: chips; min-width: 0; }
.ctools .chip { min-height: 44px; border: 0; border-radius: 12px; }
.ctools .chips .chip[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--bg); }
select.who-pick { flex: none; width: auto; min-height: 44px; padding: 0 34px 0 12px; border: 0; border-radius: 12px; background-color: transparent; background-position: right 10px center; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
select.who-pick.on { background-color: var(--sunken); color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) { .ctools > .chips { flex-wrap: wrap; } }
.cnote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px 8px 16px; }
.cnote p { flex: 1 1 200px; }
.cnote .btn { min-height: 44px; }
.crm-list .row-btn { padding-top: 11px; padding-bottom: 11px; }
.crm-row .grow > b { overflow-wrap: anywhere; }
.crm-row .tags { margin-top: 4px; gap: 2px 12px; }
.crm-buy { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
/* Menos azul: «Con cotización» es un estado, no un enlace; va en tinta, con su punto. */
.crm-row .tag.accent, .cust .tag.accent { color: var(--ink); }

/* Ficha del cliente: estado, clave y cómo contactarle; las cinco acciones en un renglón (vender en tinta);
   después el siguiente paso, el crédito, las cotizaciones, lo que le interesa, sus compras y su historia. */
.cust { gap: 14px; }
.cust .profile-meta { margin-top: 0; gap: 4px 10px; }
.cust .code-chip { min-height: 44px; margin: -8px 0; padding: 0 6px; border: 0; background: none; color: var(--ink-3); }
.cust .code-chip b { color: var(--ink-2); font-weight: 550; letter-spacing: .04em; }
.cust .code-chip .icon { width: 14px; height: 14px; }
.cust-contact { margin-top: 2px; overflow-wrap: anywhere; }
.cust .action-grid { gap: 6px; }
.cust .action-grid .act { min-height: 62px; padding: 8px 4px; gap: 5px; }
.sheet-head .sheet-opts { margin-left: auto; }
.sheet-head:has(.sheet-opts) h2 { flex: 1; min-width: 0; }
.cust-step { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; }
.cust-step .grow { flex: 1 1 160px; }
.cust-step .btn { flex: 1 1 100%; }
@media (min-width: 600px) { .cust-step .btn { flex: none; } }
.cust-notes { padding: 14px 16px; }
.cust-facts { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 14px; color: var(--ink-2); }
.cust-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cust #credit-quiet { padding: 14px 16px; }
.cust #credit-quiet .btn { min-height: 44px; }
.cust #credit-detail .panel-head .link { min-height: 44px; }
.cust #credit-detail [data-pay] { min-height: 44px; }
.cust .sub { margin-top: 2px; }

/* Tablero (Resumen): arriba el periodo, el estado y las cifras, compactas (lo cobrado en tinta, ganancia y por
   cobrar lado a lado, y ventas, ticket, conversión y clientes en una sola tarjeta); luego lo que espera una
   decisión (en el teléfono, los primeros tres) y después el análisis. Lo que se toca mide 44 px. */
.dash .seg.range { padding: 2px; }
.dash .seg.range button { min-height: 44px; }
.dash .status-line { padding: 10px 14px; }
.fin-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title link" "period link"; align-items: center; column-gap: 12px; }
.fin-head > h2 { grid-area: title; }
.fin-head > span { grid-area: period; }
.fin-head > .link { grid-area: link; min-height: 44px; white-space: nowrap; }
.dash .fin-hero { padding: 13px 15px 14px; }
.dash .fin-hero > small { line-height: 1.35; }
@media (max-width: 599px) {
  .dash .fin-heroes { gap: 8px; }
  .dash .fin-hero.main > b { font-size: clamp(26px, 7.4vw, 32px); }
  .dash .fin-hero:not(.main) > b { font-size: clamp(19px, 5.4vw, 24px); }
  .dash .fin-hero:not(.main) .delta.none { display: none; }
}
@media (max-width: 759px) {
  .dash-kpis { gap: 0; padding: 4px 0; border-radius: var(--r-m); background: var(--card); }
  .dash-kpis .kpi { padding: 10px 16px 11px; border-radius: 0; background: none; }
  .dash-kpis .kpi > b { font-size: clamp(19px, 5.4vw, 22px); }
  .cap-n3:not(.open) .actions > li:nth-child(n+4) { display: none; }
  .cap-n2:not(.open) .actions > li:nth-child(n+3) { display: none; }
}
@media (min-width: 760px) { .phone-toggle { display: none; } }
.dash .action-item > .btn, .dash .more-toggle .link, .dash .analysis-head .btn { min-height: 44px; }
.dash .quick-btn { min-height: 48px; }
.dash .table-view summary { min-height: 44px; }
.dash .between > a.small, .dash .panel-head.between > a.small { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.dash .facts a { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; margin: -13px 0; }
.dash .pin-peek { min-height: 44px; }

/* Pestañas de las secciones de un negocio (pantallas anchas): en 1280 px caben las once sin cortar la última; más
   angosto se deslizan, y el borde derecho se desvanece para que se note que hay más. */
@media (min-width: 1024px) {
  .owner .sections.tabs-line .chip { padding: 0 9px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .owner .sections.tabs-line { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
}

/* Inicio del Administrador: las mismas cifras compactas que el tablero, y todo lo que se toca a 44 px. */
.home-admin .action-item > .btn, .home-admin .more-toggle .link, .home-admin .biz-card > .btn, .home-admin .sys-line { min-height: 44px; }
.home-admin .biz-card-head { min-height: 44px; margin: -11px 0; }
/* Cinco pestañas (Clientes con pedidos y cupones) no caben en un renglón de teléfono: van en dos renglones a la
   vista, como los demás controles de opciones, en vez de esconder las últimas fuera de la pantalla. */
@media (max-width: 559px) {
  .seg.tabs.many { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow-x: visible; }
}
/* En una pantalla táctil todo lo que se toca mide al menos 44 px: filtros, botones chicos, opciones y los − / +.
   Con ratón se conservan las medidas compactas. */
@media (pointer: coarse) {
  .btn.sm, .chip, .seg button, .seg .seg-link { min-height: 44px; }
  .stepper button, .checkout .list .stepper button, .q-items .stepper button { width: 44px; height: 44px; }
}
/* [/0.7.0 movil] */

/* ───────── Colaborador en escritorio ─────────
   Desde 1024 px sus destinos van en la columna de la izquierda y no hay navegación inferior (ui.css). Lo que
   en el teléfono se apoya sobre esa navegación baja al borde y se alinea con el contenido, a la derecha de la
   columna. (`.nav` solo existe cuando tiene negocio: sin negocio no hay columna ni nada que alinear.) El
   contenido conserva abajo el espacio que ya reservaba: es el que deja libre a esa barra. */
@media (min-width: 1024px) {
  .shell.emp:has(> .nav) .cart-bar { left: var(--rail-w); bottom: 0; padding-bottom: calc(12px + var(--safe-b)); }
}

/* v13: gestión de galería en la ficha del Administrador. No afecta las tarjetas del catálogo. */
.gallery-editor{margin:0 0 4px}
.gallery-manage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.gallery-manage-card{position:relative;min-width:0;aspect-ratio:1/1;border:1px solid var(--line-2);border-radius:var(--r-s);overflow:hidden;background:var(--bg)}
.gallery-manage-card img{width:100%;height:100%;display:block;object-fit:contain}
.gallery-manage-card [data-gallery-remove]{position:absolute;top:4px;right:4px;min-width:34px;min-height:34px;border-radius:999px;background:var(--surface, #fff);box-shadow:0 1px 6px #0002;font-size:22px}
/* Fotos por producto: controles explícitos y táctiles, sin arrastrar como única opción. */
.photo-manager{display:grid;gap:12px}.photo-manager-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:12px}.photo-manager-item img{width:100px;height:110px;object-fit:contain;flex:none}.photo-manager .photo-manager-item button.btn{min-height:44px}.photo-manager-item .stack-s{min-width:0}@media(max-width:360px){.photo-manager-item img{width:74px}}

/* Más conserva sus enlaces/controladores: contextos visibles y detalle progresivo. */
.more-group{border-bottom:1px solid var(--line);padding-block:var(--sp-2);}
.more-group>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--hit);cursor:pointer;list-style:none;text-transform:none;letter-spacing:0;font-size:var(--fs-m);font-weight:var(--fw-semi);color:var(--ink);}
.more-group>summary small{font-size:var(--fs-s);font-weight:var(--fw-regular);color:var(--ink-2);}
.more-group .more-grid{padding-block:var(--sp-2);}
.sheet-body{min-height:0;overscroll-behavior:contain;scroll-padding-block:var(--sp-4);}
.sheet-body :is(input,textarea,select,button,a){scroll-margin-block:var(--sp-3);}

/* Cambio de dirección (0.9.2): aviso discreto arriba, sin bloquear la app. */
.moved-note{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 16px calc(10px);background:var(--card);border-bottom:1px solid var(--line)}
.moved-note p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4;min-width:0}
.moved-note span{color:var(--ink-2);font-size:13px}
.moved-actions{display:flex;gap:8px;flex-wrap:wrap}
.moved-actions .btn{min-height:44px}