/* ==========================================================================
   Apex · pantallas de ejemplo
   Regla: tienen que parecer software de verdad, no ilustraciones. Modo claro,
   tipografía del sistema, densidad real, datos venezolanos con forma real
   (RIF, IVA 16 %, (E)/(G), Bs/USD) de una sola empresa ficticia:
   Distribuidora La Cumbre, C.A. Nada de esqueletos grises ni "píldoras".
   ========================================================================== */
:root {
  --app-font: "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --a-bg: #f6f7f9;
  --a-panel: #ffffff;
  --a-line: #e4e7eb;
  --a-line-2: #eef0f3;
  --a-text: #1c2230;
  --a-text-2: #4a5263;
  --a-text-3: #8a93a3;
  --a-warn: #b45309;
  --a-warn-bg: #fdf1d8;
  --a-ok: #15803d;
  --a-ok-bg: #dcf5e4;
  --a-bad: #b91c1c;
  --a-bad-bg: #fde4e4;
  --odoo: #714b67;
  --odoo-dark: #5b3a53;
  --odoo-teal: #017e84;
  --ios-blue: #0a7aff;
  --ios-bg: #f2f2f7;
  --ios-sep: #e2e2e7;
  --ios-green: #28a745;
  --ios-orange: #e8870b;
  --win-accent: #005fb8;
  --win-bg: #f3f3f3;
  --win-bar: #eaeaea;
  --shop: #c2410c;
  --obra: #1e293b;
  --obra-accent: #e0a100;
  --screen-shadow: 0 2.2rem 4.5rem -1.6rem oklch(0% 0 0 / 0.75), 0 0 0 1px oklch(100% 0 0 / 0.06);
}

/* ==========================================================================
   01 · ERP (estilo Odoo 17): balance de comprobación en capas
   ========================================================================== */
.erp-stage { perspective: 1600px; perspective-origin: 50% 40%; }
.erp3d { position: relative; width: min(100%, 52em); margin-inline: auto; font-size: var(--ui, 13px); transform-style: preserve-3d; }
.erp {
  --z-step: 0px;
  position: relative;
  transform-style: preserve-3d;
  font-family: var(--app-font);
  color: var(--a-text);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
/* la "ventana": base de la pila */
.erp::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: var(--a-bg);
  box-shadow: var(--screen-shadow), 0 0 7rem -1.5rem oklch(80% 0.05 250 / 0.28);
}
.erp__layer {
  position: relative;
  transform: translate3d(var(--dx, 0px), 0, var(--z, 0px)) rotate(var(--dr, 0deg));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.erp__nav {
  display: flex; align-items: center; gap: 1.2em;
  height: 3.3em; padding: 0 1.1em;
  background: var(--a-panel); border-bottom: 1px solid var(--a-line);
  border-radius: 10px 10px 0 0;
  white-space: nowrap; overflow: hidden;
}
.erp__grid { display: grid; grid-template-columns: repeat(3, 0.28em); gap: 0.16em; flex: none; }
.erp__grid i { width: 0.28em; height: 0.28em; border-radius: 1px; background: var(--a-text-2); }
.erp__app { font-weight: 600; font-size: 1.08em; }
.erp__menu { display: flex; gap: 1.15em; color: var(--a-text-2); }
.erp__menu .is-on { color: var(--a-text); font-weight: 600; }
.erp__right { margin-left: auto; display: flex; align-items: center; gap: 0.8em; color: var(--a-text-2); }
.erp__avatar {
  display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%;
  background: var(--odoo-teal); color: #fff; font-size: 0.8em; font-weight: 600;
}
.erp__cp { padding: 0.85em 1.1em 0.8em; background: var(--a-panel); border-bottom: 1px solid var(--a-line); display: grid; gap: 0.7em; }
.erp__cp-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.erp__title { font-size: 1.28em; font-weight: 600; white-space: nowrap; }
.erp__title span:first-child { color: var(--odoo-teal); font-weight: 400; }
.erp__sep { color: var(--a-text-3); margin: 0 0.35em; font-weight: 400; }
.erp__btns { display: flex; gap: 0.45em; }
.erp__btn {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.38em 0.85em; border-radius: 4px;
  background: var(--a-line-2); color: var(--a-text); font-weight: 500; font-size: 0.95em;
}
.erp__btn svg { width: 1.05em; height: 1.05em; }
.erp__btn--pri { background: var(--odoo); color: #fff; }
.erp__facets {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.4em; overflow: hidden;
  padding: 0.3em 0.45em; border: 1px solid var(--a-line); border-radius: 5px; background: var(--a-panel);
}
.erp__facet {
  display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap;
  padding: 0.18em 0.55em; border-radius: 3px; background: var(--a-line-2); color: var(--a-text-2); font-size: 0.92em;
}
.erp__facet svg { width: 1.05em; height: 1.05em; color: var(--odoo); }
.erp__seg { display: inline-flex; border: 1px solid var(--a-line); border-radius: 5px; overflow: hidden; flex: none; }
.erp__seg b { padding: 0.32em 0.8em; font-weight: 600; font-size: 0.92em; background: var(--odoo); color: #fff; }
.erp__seg b + b { border-left: 1px solid oklch(100% 0 0 / 0.35); }
.erp__thead, .erp__row, .erp__total {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
  gap: 1em; align-items: center; padding: 0 1.1em;
}
.erp__thead { height: 2.5em; background: #f3f4f6; border-bottom: 1px solid var(--a-line); font-weight: 600; color: var(--a-text-2); font-size: 0.92em; }
.erp__thead span:not(:first-child) { text-align: right; }
.erp__row { height: 2.55em; background: var(--a-panel); border-bottom: 1px solid var(--a-line-2); }
.erp__acct { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp__acct em { font-style: normal; color: var(--a-text-3); margin-right: 0.8em; font-variant-numeric: tabular-nums; }
.erp .num {
  justify-self: end; display: inline-flex; justify-content: flex-end;
  padding: 0.12em 0.4em; margin: -0.12em -0.4em; border-radius: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.3;
  color: color-mix(in srgb, var(--a-warn) calc(var(--bad, 0) * 100%), var(--a-text));
  background: color-mix(in srgb, var(--a-warn-bg) calc(var(--bad, 0) * 100%), transparent);
  font-weight: calc(400 + var(--bad, 0) * 200);
}
.erp .od { display: inline-block; width: 0.6em; height: 1.3em; overflow: hidden; vertical-align: top; }
.erp .od > span { display: block; }
.erp .od > span > i { display: block; height: 1.3em; line-height: 1.3em; font-style: normal; text-align: center; }
.erp__total {
  height: 3em; background: #f3f4f6; border-top: 1px solid var(--a-line);
  border-radius: 0 0 10px 10px; font-weight: 600;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 0.85fr) auto;
}
.erp__diff { justify-self: end; color: var(--a-text-2); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.erp__diff b {
  font-weight: 700;
  color: color-mix(in srgb, var(--a-warn) calc(var(--bad, 0) * 100%), var(--a-text));
}
.erp__badge { display: inline-grid; justify-self: end; }
.erp .st {
  grid-area: 1 / 1; justify-self: end; font-style: normal;
  padding: 0.22em 0.75em; border-radius: 999px; font-size: 0.9em; font-weight: 600; white-space: nowrap;
}
.erp .st--bad { color: var(--a-warn); background: var(--a-warn-bg); opacity: 0; }
.erp .st--ok  { color: var(--a-ok); background: var(--a-ok-bg); }

/* el 0,00 gigante */
.zero {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; text-align: center;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.zero__num {
  font-family: var(--font-sans); font-weight: 900; font-stretch: 125%;
  font-size: clamp(5.5rem, 20vw, 19rem); line-height: 0.82; letter-spacing: -0.055em;
  color: var(--ink);
  text-shadow: 0 0 0.35em oklch(70% 0.1 250 / 0.35);
}
.zero__cap { margin-top: 1.2rem; font-size: var(--fs-xl); line-height: 1.3; color: var(--ink-2); }
@media (max-width: 63.99rem), (max-height: 37.49rem) {
  .zero { position: relative; inset: auto; margin-top: 2.5rem; }
  .zero__num { font-size: clamp(4.5rem, 26vw, 9rem); }
}

/* ==========================================================================
   iPhone (marco) + app de ruta (iOS, modo claro)
   ========================================================================== */
.iph { --w: 17rem; position: relative; width: var(--w); aspect-ratio: 9 / 19.5; flex: none; }
.iph__frame {
  position: absolute; inset: 0;
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(145deg, #3a3d44, #1b1d22 32%, #0e0f12 60%, #2a2c31);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.18),
    inset 0 0 0 calc(var(--w) * 0.012) #050506,
    0 3rem 5rem -1.5rem oklch(0% 0 0 / 0.75),
    0 0 5rem -1rem oklch(75% 0.08 250 / 0.3);
}
.iph::before, .iph::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #111, #4a4d55);
}
.iph::before { left: -2px; top: 20%; height: 6%; box-shadow: 0 calc(var(--w) * 0.2) 0 #2b2d33; }
.iph::after { right: -2px; top: 27%; height: 11%; }
.iph__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.138); background: var(--ios-bg); }
.iph__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(115deg, oklch(100% 0 0 / 0.1), transparent 30%);
}
.iph__island {
  position: absolute; left: 50%; top: 1.9%; z-index: 10;
  width: 31%; height: 4.2%; transform: translateX(-50%);
  border-radius: 999px; background: #000;
}
.rapp, .capp {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  font-family: var(--app-font); color: #111;
  font-size: calc(var(--w) * 0.047); line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.rapp__status { display: flex; justify-content: space-between; align-items: center; height: 3.25em; padding: 0.35em 1.55em 0; font-size: 0.92em; }
.rapp__status b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rapp__icons { display: inline-flex; align-items: center; gap: 0.35em; }
.rapp__sig { display: inline-flex; align-items: flex-end; gap: 0.13em; height: 0.82em; }
.rapp__sig i { width: 0.2em; border-radius: 1px; background: #111; transition: background-color 0.3s; }
.rapp__sig i:nth-child(1) { height: 35%; } .rapp__sig i:nth-child(2) { height: 55%; }
.rapp__sig i:nth-child(3) { height: 78%; } .rapp__sig i:nth-child(4) { height: 100%; }
.rapp[data-net="off"] .rapp__sig i { background: #c7c7cc; }
.rapp__wifi { width: 1.1em; height: 1.1em; color: #111; transition: opacity 0.3s; }
.rapp[data-net="off"] .rapp__wifi { opacity: 0.18; }
.rapp__bat { width: 1.7em; height: 0.8em; padding: 1px; border: 1px solid #8a8a8e; border-radius: 0.25em; }
.rapp__bat i { display: block; width: 76%; height: 100%; border-radius: 0.12em; background: #111; }
.rapp__bar { display: flex; justify-content: space-between; align-items: center; padding: 0.2em 0.9em; color: var(--ios-blue); }
.rapp__back { display: inline-flex; align-items: center; gap: 0.1em; }
.rapp__back svg { width: 1.2em; height: 1.2em; }
.rapp__tool svg { width: 1.3em; height: 1.3em; }
.rapp__title { padding: 0.08em 0 0 0.54em; font-size: 1.95em; font-weight: 700; letter-spacing: -0.01em; }
.rapp__sub { padding: 0 1.05em; color: #6c6c70; font-size: 0.86em; }
.rapp__net { position: relative; height: 3.4em; margin: 0.75em 0.9em 0.3em; }
.rapp__state {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 0.65em;
  padding: 0 0.85em; border-radius: 0.75em;
  font-size: 0.8em; line-height: 1.25;
  opacity: 0; transform: translateY(0.3em);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.rapp__state svg { width: 1.6em; height: 1.6em; flex: none; }
.rapp__state span { display: grid; min-width: 0; }
.rapp__state b { font-weight: 600; }
.rapp__state--off { background: #fff4e0; color: #7a4a05; }
.rapp__state--off svg { color: var(--ios-orange); }
.rapp__state--sync { background: #e6f0ff; color: #0b3f86; }
.rapp__state--sync svg { color: var(--ios-blue); }
.rapp__state--done { background: #e5f6ea; color: #185b2c; }
.rapp__state--done svg { color: var(--ios-green); }
.rapp[data-net="off"] .rapp__state--off,
.rapp[data-net="sync"] .rapp__state--sync,
.rapp[data-net="done"] .rapp__state--done { opacity: 1; transform: none; }
.rapp__prog { display: block; height: 0.32em; margin-top: 0.35em; border-radius: 999px; background: #c9dcff; overflow: hidden; }
.rapp__prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--ios-blue); transform-origin: 0 50%; transform: scaleX(var(--prog, 1)); }
.rapp__list {
  margin: 0.4em 0.9em 0; border-radius: 0.8em; overflow: hidden;
  background: #fff;
}
.rapp__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7em;
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--ios-sep);
  transition: background-color 0.4s;
}
.rapp__row:last-child { border-bottom: 0; }
.rapp__av {
  display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%;
  background: var(--c); color: #fff; font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em;
}
.rapp__txt { display: grid; min-width: 0; }
.rapp__txt b { font-weight: 600; font-size: 0.92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapp__txt small { color: #8a8a8e; font-size: 0.76em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rapp__chip { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.74em; font-weight: 600; white-space: nowrap; }
.rapp__chip svg { width: 1.2em; height: 1.2em; display: none; }
.rapp__chip s, .rapp__chip u, .rapp__chip em { display: none; text-decoration: none; font-style: normal; }
.rapp__row[data-state="pending"] .rapp__chip s { display: inline; color: #a1a1a6; }
.rapp__row[data-state="queue"] .rapp__chip { color: var(--ios-orange); }
.rapp__row[data-state="queue"] .rapp__chip u,
.rapp__row[data-state="queue"] .rapp__chip .is-queue { display: inline; }
.rapp__row[data-state="sent"] .rapp__chip { color: var(--ios-green); }
.rapp__row[data-state="sent"] .rapp__chip em,
.rapp__row[data-state="sent"] .rapp__chip .is-sent { display: inline; }
.rapp__row.is-now { background: #eef5ff; }
.rapp__fab {
  display: flex; align-items: center; justify-content: center; gap: 0.35em;
  margin: auto 0.9em 0.55em; padding: 0.72em; border-radius: 0.8em;
  background: var(--ios-blue); color: #fff; font-weight: 600; font-size: 0.92em;
}
.rapp__fab svg { width: 1.1em; height: 1.1em; }
.rapp__tabs {
  display: flex; justify-content: space-around;
  padding: 0.5em 0.6em 1.5em; border-top: 1px solid var(--ios-sep);
  background: oklch(99% 0.002 250 / 0.94); color: #9a9aa0; font-size: 0.66em; font-weight: 500;
}
.rapp__tabs span { display: grid; justify-items: center; gap: 0.15em; }
.rapp__tabs svg { width: 1.9em; height: 1.9em; }
.rapp__tabs .is-on { color: var(--ios-blue); }

/* app de catálogo (servicios · móvil) */
.iph--sm { --w: min(14.5rem, 62vw); transform: rotate(-4deg); }
.capp__client { color: #111; font-weight: 600; font-size: 0.9em; }
.capp__search {
  display: flex; align-items: center; gap: 0.45em;
  margin: 0.55em 0.9em 0; padding: 0.5em 0.7em; border-radius: 0.65em;
  background: #e3e3e8; color: #8a8a8e; font-size: 0.86em;
}
.capp__search svg { width: 1.1em; height: 1.1em; }
.capp__cats { display: flex; gap: 0.4em; padding: 0.65em 0.9em 0.2em; font-size: 0.78em; font-weight: 600; overflow: hidden; }
.capp__cats span { padding: 0.35em 0.8em; border-radius: 999px; background: #fff; color: #3a3a3c; white-space: nowrap; }
.capp__cats .is-on { background: #111; color: #fff; }
.capp__list { margin: 0.5em 0.9em 0; border-radius: 0.8em; background: #fff; overflow: hidden; }
.capp__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6em; align-items: center; padding: 0.6em 0.7em; border-bottom: 1px solid var(--ios-sep); }
.capp__item:last-child { border-bottom: 0; }
.capp__th { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 0.5em; background: var(--c); color: oklch(30% 0.05 60); font-size: 0.7em; font-weight: 800; }
.capp__item b { display: block; font-weight: 600; font-size: 0.88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capp__item small { color: #8a8a8e; font-size: 0.72em; white-space: nowrap; }
.capp__step { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.15em 0.4em; border-radius: 999px; background: #f2f2f7; font-size: 0.85em; }
.capp__step i { font-style: normal; color: var(--ios-blue); font-weight: 600; width: 1em; text-align: center; }
.capp__step b { font-weight: 700; min-width: 1ch; text-align: center; }
.capp__step--0 b { color: #b0b0b5; }
.capp__sum {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6em;
  margin: auto 0.9em 1.9em; padding: 0.7em 0.75em; border-radius: 0.9em;
  background: #111; color: #fff;
}
.capp__sum span:first-child { display: grid; }
.capp__sum small { color: #a1a1a6; font-size: 0.7em; }
.capp__sum b { font-size: 1.05em; }
.capp__send { padding: 0.5em 0.85em; border-radius: 0.6em; background: var(--ios-blue); font-weight: 600; font-size: 0.8em; white-space: nowrap; }

/* ==========================================================================
   Ventanas de Windows (punto de venta, almacén)
   ========================================================================== */
.win {
  font-family: var(--app-font); color: #1b1b1b; font-size: var(--ui, 12px); line-height: 1.35;
  background: var(--win-bg); border-radius: 8px; overflow: hidden;
  border: 1px solid #c9c9c9;
  box-shadow: var(--screen-shadow);
  -webkit-font-smoothing: antialiased;
}
.win__bar { display: flex; align-items: center; gap: 0.6em; height: 2.6em; padding-left: 0.8em; background: var(--win-bar); font-size: 0.92em; }
.win__logo { width: 1.1em; height: 1.1em; border-radius: 2px; background: linear-gradient(135deg, var(--win-accent), #3a8ee6); }
.win__ctl { display: flex; margin-left: auto; height: 100%; }
.win__ctl i { width: 3.4em; height: 100%; position: relative; }
.win__ctl i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8em; height: 1px; margin-left: -0.4em; background: #333; }
.win__ctl i:nth-child(2)::before { height: 0.72em; margin-top: -0.36em; background: none; border: 1px solid #333; }
.win__ctl i:nth-child(3)::before { height: 1px; transform: rotate(45deg); }
.win__ctl i:nth-child(3)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8em; height: 1px; margin-left: -0.4em; background: #333; transform: rotate(-45deg); }
.win__status {
  display: flex; gap: 1.5em; padding: 0.45em 0.9em;
  border-top: 1px solid #dcdcdc; background: #fafafa; color: #555; font-size: 0.85em; white-space: nowrap; overflow: hidden;
}
.win__status .is-ok::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.4em; border-radius: 50%; background: #107c10; }

.pos { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 0.8em; padding: 0.8em; background: #fff; }
.pos__scan {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.45em 0.6em; border: 1px solid #b8b8b8; border-bottom: 2px solid var(--win-accent); border-radius: 4px;
  font-family: var(--app-mono); font-size: 0.95em;
}
.pos__scan svg { width: 1.3em; height: 1.3em; color: #444; }
.pos__scan em { margin-left: auto; font-style: normal; font-family: var(--app-font); font-size: 0.82em; color: #777; }
.pos__grid { margin-top: 0.6em; border: 1px solid #e1e1e1; border-radius: 4px; overflow: hidden; }
.pos__grid > div { display: grid; grid-template-columns: minmax(0, 1fr) 2.8em 5.2em; gap: 0.6em; padding: 0.45em 0.6em; border-bottom: 1px solid #efefef; font-variant-numeric: tabular-nums; }
.pos__grid > div:last-child { border-bottom: 0; }
.pos__grid b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos__grid span { text-align: right; }
.pos__hd { background: #f3f3f3; color: #555; font-weight: 600; font-size: 0.9em; }
.pos__hit { background: color-mix(in srgb, #cfe4ff calc(var(--hit, 1) * 100%), #fff); box-shadow: inset 3px 0 0 var(--win-accent); }
.pos__side { display: grid; align-content: space-between; gap: 0.6em; }
.pos__total { padding: 0.7em 0.8em; border-radius: 6px; background: #1b1b1b; color: #fff; display: grid; }
.pos__total small { color: #bbb; font-size: 0.82em; }
.pos__total b { font-size: 1.65em; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos__total span { color: #9ad08b; font-size: 0.85em; }
.pos__pays { display: grid; gap: 0.3em; font-size: 0.9em; }
.pos__pays span { padding: 0.4em 0.6em; border: 1px solid #d0d0d0; border-radius: 4px; background: #fff; }
.pos__pays .is-on { border-color: var(--win-accent); background: #eaf3fc; color: #0b3d75; font-weight: 600; }
.pos__go {
  display: flex; justify-content: center; align-items: center; gap: 0.5em;
  padding: 0.65em; border-radius: 5px; background: var(--win-accent); color: #fff; font-weight: 600;
  transform: scale(var(--press, 1)); box-shadow: 0 0 0 calc(var(--ring, 0) * 6px) oklch(60% 0.15 250 / calc(var(--ring, 0) * 0.35));
}
.pos__go kbd { font-family: var(--app-font); font-size: 0.8em; padding: 0.05em 0.4em; border: 1px solid oklch(100% 0 0 / 0.5); border-radius: 3px; }

/* almacén */
.win--wh { width: min(100%, 34rem); --ui: 12px; transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); }
.wh { padding: 0.9em; background: #fff; display: grid; gap: 0.75em; }
.wh__head { display: flex; justify-content: space-between; gap: 1em; align-items: end; }
.wh__head small { display: block; color: #666; font-size: 0.82em; }
.wh__head b { font-weight: 600; }
.wh__prog { text-align: right; min-width: 9em; }
.wh__prog > i { display: block; height: 0.4em; margin-top: 0.3em; border-radius: 999px; background: #e5e5e5; overflow: hidden; }
.wh__prog > i > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: #107c10; }
.wh__scan { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.6em; border: 1px solid #b8b8b8; border-bottom: 2px solid var(--win-accent); border-radius: 4px; color: #888; }
.wh__scan svg { width: 1.3em; height: 1.3em; color: #333; }
.wh__scan em { margin-left: auto; font-style: normal; font-size: 0.82em; color: #777; }
.wh__grid { border: 1px solid #e1e1e1; border-radius: 4px; overflow: hidden; }
.wh__grid > div { display: grid; grid-template-columns: minmax(0, 2.2fr) 4.2em 4.4em 6.2em 4.4em; gap: 0.5em; padding: 0.45em 0.6em; border-bottom: 1px solid #efefef; font-variant-numeric: tabular-nums; }
.wh__grid > div:last-child { border-bottom: 0; }
.wh__grid b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh__grid span:nth-child(n+2) { text-align: right; }
.wh__hd { background: #f3f3f3; color: #555; font-weight: 600; font-size: 0.9em; }
.wh__grid .is-ok span:nth-child(3) { color: #107c10; font-weight: 600; }
.wh__grid .is-sel { background: #eaf3fc; box-shadow: inset 3px 0 0 var(--win-accent); }
.wh__grid .is-sel span:nth-child(3) { color: #b45309; font-weight: 600; }
.wh__foot { display: flex; gap: 0.5em; flex-wrap: wrap; font-size: 0.86em; }
.wh__foot span { padding: 0.35em 0.7em; border: 1px solid #d0d0d0; border-radius: 4px; background: #fdfdfd; }
.wh__foot .wh__ok { margin-left: auto; background: var(--win-accent); color: #fff; border-color: var(--win-accent); font-weight: 600; }

/* ==========================================================================
   ERP · ficha de producto (estilo Odoo) y navegador con la tienda
   ========================================================================== */
.odoo {
  font-family: var(--app-font); color: var(--a-text); font-size: var(--ui, 12px); line-height: 1.35;
  background: var(--a-bg); border-radius: 8px; overflow: hidden;
  box-shadow: var(--screen-shadow);
  -webkit-font-smoothing: antialiased;
}
.odoo__nav { display: flex; align-items: center; gap: 1.1em; height: 3em; padding: 0 1em; background: #fff; border-bottom: 1px solid var(--a-line); color: var(--a-text-2); white-space: nowrap; overflow: hidden; }
.odoo__nav b { color: var(--a-text); font-weight: 600; }
.odoo__nav .is-on { color: var(--a-text); font-weight: 600; }
.odoo__cp { padding: 0.75em 1em; background: #fff; border-bottom: 1px solid var(--a-line); font-size: 1.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odoo__cp > span:first-child { color: var(--odoo-teal); }
.odoo__cp b { font-weight: 600; }
.odoo__sheet { margin: 0.8em; padding: 0.9em 1em 1em; background: #fff; border: 1px solid var(--a-line); border-radius: 4px; }
.odoo__smart { display: flex; justify-content: flex-end; margin: -0.9em -1em 0.8em; border-bottom: 1px solid var(--a-line); }
.odoo__sb { display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.9em; border-left: 1px solid var(--a-line); color: var(--a-text-2); }
.odoo__sb svg { width: 1.5em; height: 1.5em; color: var(--odoo-teal); flex: none; }
.odoo__sb span { display: grid; line-height: 1.2; }
.odoo__sb b { color: var(--odoo-teal); font-weight: 600; white-space: nowrap; }
.odoo__sb b i { font-style: normal; display: inline-block; }
.odoo__sb small { color: var(--a-text-3); font-size: 0.86em; }
.odoo__sb--hit { background: color-mix(in srgb, #fff3c4 calc(var(--flash, 0) * 100%), transparent); }
.odoo__name { font-size: 1.7em; font-weight: 600; line-height: 1.15; }
.odoo__checks { display: flex; gap: 1.2em; margin-top: 0.5em; color: var(--a-text-2); font-size: 0.92em; }
.odoo__checks i { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.4em; vertical-align: -0.12em; border-radius: 2px; background: var(--odoo); box-shadow: inset 0 0 0 2px var(--odoo); position: relative; }
.odoo__checks i::after { content: ""; position: absolute; left: 0.28em; top: 0.1em; width: 0.28em; height: 0.52em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.odoo__tabs { display: flex; gap: 1.3em; margin-top: 0.9em; border-bottom: 1px solid var(--a-line); color: var(--a-text-2); white-space: nowrap; overflow: hidden; }
.odoo__tabs span { padding: 0.45em 0; }
.odoo__tabs .is-on { color: var(--a-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--odoo); }
.odoo__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55em 1.6em; margin-top: 0.9em; }
.odoo__fields div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6em; }
.odoo__fields dt { color: var(--a-text-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odoo__fields dd { border-bottom: 1px solid var(--a-line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brw { font-family: var(--app-font); color: #1a1a1a; font-size: var(--ui, 12px); line-height: 1.35; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--screen-shadow); -webkit-font-smoothing: antialiased; }
.brw__bar { padding: 0.55em 0.8em; background: #eef0f3; border-bottom: 1px solid #dde0e5; }
.brw__url { display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0.8em; border-radius: 999px; background: #fff; color: #555; font-size: 0.9em; white-space: nowrap; overflow: hidden; }
.brw__url svg { width: 1em; height: 1em; color: #3a8f47; flex: none; }
.shop { padding: 0 1.1em 1.1em; }
.shop__head { display: flex; align-items: center; gap: 1em; padding: 0.8em 0; border-bottom: 1px solid #eee; }
.shop__logo { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 800; font-size: 1.1em; letter-spacing: -0.01em; white-space: nowrap; }
.shop__logo svg { width: 2.2em; height: auto; overflow: visible; }
.shop__logo path { fill: none; stroke: var(--shop); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.shop__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.45em; padding: 0.42em 0.8em; border: 1px solid #ddd; border-radius: 999px; color: #999; white-space: nowrap; overflow: hidden; }
.shop__search svg { width: 1.05em; height: 1.05em; flex: none; }
.shop__cart { position: relative; }
.shop__cart svg { width: 1.6em; height: 1.6em; }
.shop__cart i { position: absolute; right: -0.45em; top: -0.3em; min-width: 1.35em; height: 1.35em; display: grid; place-items: center; border-radius: 999px; background: var(--shop); color: #fff; font-size: 0.72em; font-style: normal; font-weight: 700; }
.shop__crumbs { display: flex; align-items: center; gap: 0.3em; margin: 0.7em 0; color: #888; font-size: 0.88em; }
.shop__crumbs svg { width: 0.9em; height: 0.9em; }
.shop__prod { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 1.1em; align-items: start; }
.shop__img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: #f5f1ea; }
.pack { width: 70%; height: auto; overflow: visible; }
.pack__body { fill: #f7d24a; stroke: #b98d12; stroke-width: 2; }
.pack__fold { fill: #f3c52b; stroke: #b98d12; stroke-width: 2; }
.pack__band { fill: #c2410c; }
.pack text { font-family: var(--app-font); text-anchor: middle; }
.pack__brand { font-size: 15px; font-weight: 800; fill: #7c2d12; letter-spacing: 0.02em; }
.pack__kind { font-size: 12.5px; font-weight: 800; fill: #fff; }
.pack__sub { font-size: 10px; font-weight: 600; fill: #fde7c8; letter-spacing: 0.12em; }
.pack__kg { font-size: 18px; font-weight: 800; fill: #7c2d12; }
.shop__name { font-size: 1.3em; font-weight: 700; line-height: 1.2; }
.shop__price { margin-top: 0.45em; font-size: 1.5em; font-weight: 700; color: var(--shop); }
.shop__price small { display: block; color: #888; font-size: 0.55em; font-weight: 400; }
.shop__stock { display: flex; align-items: center; margin-top: 0.7em; padding: 0.35em 0.6em; border-radius: 5px; background: color-mix(in srgb, #fff3c4 calc(var(--flash, 0) * 100%), #eef8f0); color: #1f6b35; font-weight: 500; width: fit-content; }
.shop__stock i { width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: 50%; background: #2f9e4f; }
.shop__stock b { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop__buy { display: flex; gap: 0.5em; margin-top: 0.8em; }
.shop__qty { display: inline-flex; align-items: center; gap: 0.8em; padding: 0.45em 0.7em; border: 1px solid #ddd; border-radius: 6px; }
.shop__qty i { font-style: normal; color: #777; }
.shop__add { flex: 1; display: grid; place-items: center; padding: 0.5em 0.8em; border-radius: 6px; background: var(--shop); color: #fff; font-weight: 700; white-space: nowrap; }
.shop__ship { margin-top: 0.7em; color: #666; font-size: 0.88em; }

/* ==========================================================================
   04 · impresora fiscal, ticket y comprobante de retención
   ========================================================================== */
.fiscal__ticket { position: relative; display: grid; justify-items: center; align-self: end; }
.receipt {
  position: relative; z-index: 1;
  width: 17.5rem; margin-bottom: -6px;
  overflow: hidden;
  /* el ticket sale hacia arriba desde la ranura de la impresora */
  display: flex; flex-direction: column; justify-content: flex-end;
}
.receipt__paper {
  --zz: 6px;
  padding: 1.5rem 1rem 1.1rem;
  background: var(--receipt); color: var(--receipt-ink);
  font-family: var(--app-mono); font-size: 0.66rem; line-height: 1.62;
  box-shadow: 0 0 2rem -0.5rem oklch(0% 0 0 / 0.5);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--zz) * 2) 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--zz) * 2) 100%;
  transform-origin: 50% 100%;
}
.rc { display: flex; justify-content: space-between; gap: 1em; white-space: pre; }
.rc--c { justify-content: center; }
.rc--b { font-weight: 700; }
.rc--total { font-size: 1.18em; }
.rc--rule { height: 0; margin: 0.45em 0; border-top: 1px dashed oklch(26% 0.02 60 / 0.5); }
.fprinter { position: relative; z-index: 2; width: 21rem; height: 6.2rem; }
.fprinter__slot {
  position: absolute; left: 50%; top: 0; width: 18.6rem; height: 10px; margin-left: -9.3rem;
  border-radius: 5px; background: #050608; box-shadow: inset 0 2px 3px #000, 0 1px 0 oklch(100% 0 0 / 0.08);
}
.fprinter__face {
  position: absolute; left: 0; right: 0; top: 5px; bottom: 0;
  display: flex; align-items: center; gap: 0.8rem; padding: 0 1.3rem;
  border-radius: 12px 12px 16px 16px;
  background: linear-gradient(180deg, #34373e, #1d1f24 55%, #15161a);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14), 0 2rem 3rem -1rem oklch(0% 0 0 / 0.8);
  z-index: -1;
}
.fprinter__led { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.fiscal.is-printing .fprinter__led { animation: fp-blink 0.35s steps(2) infinite; }
@keyframes fp-blink { 50% { opacity: 0.15; } }
.fprinter__brand { font-family: var(--app-font); font-size: 0.62rem; letter-spacing: 0.24em; color: #8b8f99; }
.fprinter__btn { margin-left: auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a4d55, #202227); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.1), inset 0 -2px 3px #000; }

.voucher {
  position: relative; align-self: center;
  width: min(100%, 25rem);
  padding: 1.15rem 1.2rem 1.3rem;
  border-radius: 6px; background: var(--voucher); color: var(--voucher-ink);
  font-family: var(--app-font); font-size: 0.68rem; line-height: 1.35;
  box-shadow: 0 2.2rem 4rem -1.4rem oklch(0% 0 0 / 0.8);
  transform: rotate(1.4deg);
}
.voucher__head { font-weight: 800; font-size: 0.86rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.01em; }
.voucher__law { margin-top: 0.25rem; color: var(--voucher-dim); font-size: 0.6rem; }
.voucher__meta { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; gap: 0.5rem; margin-top: 0.8rem; padding: 0.55rem 0; border-block: 1px solid oklch(24% 0.03 262 / 0.18); }
.voucher__meta span, .voucher__parties span { display: block; color: var(--voucher-dim); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; }
.voucher b, .voucher small { font-variant-numeric: tabular-nums; }
.voucher__meta b { font-family: var(--app-mono); font-weight: 600; font-size: 0.66rem; min-height: 1.3em; display: block; white-space: nowrap; }
.voucher__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.65rem; }
.voucher__parties b { display: block; font-weight: 700; min-height: 1.3em; white-space: nowrap; }
.voucher__parties small { display: block; color: var(--voucher-dim); min-height: 1.2em; white-space: nowrap; }
.voucher__table { margin-top: 0.8rem; border: 1px solid oklch(24% 0.03 262 / 0.2); border-radius: 3px; }
.vt { display: grid; grid-template-columns: 1fr 1fr 1.15fr 0.9fr 1fr; gap: 0.35rem; padding: 0.4rem 0.5rem; font-variant-numeric: tabular-nums; }
.vt span:nth-child(n+3), .vt b { text-align: right; }
.vt--hd { background: oklch(24% 0.03 262 / 0.06); color: var(--voucher-dim); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.04em; }
.vt:not(.vt--hd) { font-family: var(--app-mono); font-size: 0.62rem; min-height: 1.9rem; }
.vt b { font-weight: 700; }
.voucher__sign { margin-top: 2.6rem; display: flex; justify-content: flex-end; }
.voucher__sign span { width: 55%; padding-top: 0.3rem; border-top: 1px solid oklch(24% 0.03 262 / 0.45); text-align: center; color: var(--voucher-dim); font-size: 0.58rem; }
.voucher [data-type].is-typing::after { content: "▍"; margin-left: 1px; color: var(--odoo); animation: fp-blink 0.7s steps(2) infinite; }
/* sello húmedo: tinta violeta con textura; mix-blend para que "manche" el papel */
.seal {
  position: absolute; right: 1.2rem; bottom: 0.4rem; width: 7.8rem; height: 7.8rem;
  overflow: visible; transform: rotate(-16deg);
  mix-blend-mode: multiply; opacity: 0.85;
}
.seal circle { fill: none; stroke: oklch(45% 0.16 295); stroke-width: 3.5; }
.seal circle + circle { stroke-width: 1.6; }
.seal text { fill: oklch(45% 0.16 295); font-family: var(--app-font); font-weight: 800; text-anchor: middle; }
.seal__ring { font-size: 13.2px; letter-spacing: 1.2px; text-anchor: start !important; }
.seal__mid { font-size: 19px; letter-spacing: 1px; }
.seal__sub { font-size: 9.5px; letter-spacing: 1.5px; }

.vt span, .vt b { white-space: nowrap; }
.voucher__parties b { white-space: normal; }
/* laptops: ticket algo más chico y el comprobante montado sobre la impresora */
@media (min-width: 64rem) and (max-width: 90rem) {
  .receipt { width: 15.5rem; }
  .fprinter { width: 18.5rem; }
  .fprinter__slot { width: 16.5rem; margin-left: -8.25rem; }
  .voucher { margin-left: -3rem; min-width: 23rem; z-index: 3; }
}

/* ==========================================================================
   05 · control de obra
   ========================================================================== */
.obra {
  --ui: 12.5px;
  position: relative;
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr);
  width: min(100%, 44em);
  font-family: var(--app-font); color: var(--a-text); font-size: var(--ui); line-height: 1.35;
  background: #f4f5f7; border-radius: 10px; overflow: hidden;
  box-shadow: var(--screen-shadow), 0 0 6rem -1rem oklch(75% 0.1 60 / 0.2);
  -webkit-font-smoothing: antialiased;
}
.obra__side { display: grid; align-content: start; justify-items: center; gap: 1.1em; padding: 1em 0; background: var(--obra); color: #9aa3b5; }
.obra__side svg { width: 1.45em; height: 1.45em; }
.obra__side .is-on { color: #fff; }
.obra__logo { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 8px; background: var(--obra-accent); color: var(--obra); margin-bottom: 0.4em; }
.obra__logo svg { width: 1.5em; height: 1.5em; }
.obra__main { padding: 0.95em 1.1em 1.05em; display: grid; gap: 0.75em; min-width: 0; }
.obra__top { display: flex; justify-content: space-between; align-items: end; gap: 1em; }
.obra__proj small { display: block; color: var(--a-text-3); font-size: 0.85em; }
.obra__proj b { font-size: 1.22em; font-weight: 700; white-space: nowrap; }
.obra__cut { display: inline-flex; align-items: center; gap: 0.35em; color: var(--a-text-2); font-size: 0.88em; white-space: nowrap; }
.obra__cut svg { width: 1.1em; height: 1.1em; }
.obra__tabs { display: flex; gap: 1.3em; border-bottom: 1px solid var(--a-line); color: var(--a-text-2); }
.obra__tabs span { padding: 0.35em 0; }
.obra__tabs .is-on { color: var(--a-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--obra-accent); }
.obra__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; }
.okpi { display: grid; gap: 0.15em; padding: 0.7em 0.75em; border-radius: 8px; background: #fff; border: 1px solid var(--a-line); min-width: 0; }
.okpi small { color: var(--a-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okpi b { font-size: 1.55em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.okpi b i { font-style: normal; }
.okpi b.is-warn { color: var(--a-warn); }
.okpi em { font-style: normal; color: var(--a-text-2); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okpi__bar { display: block; height: 0.42em; margin-top: 0.25em; border-radius: 999px; background: #e8eaee; overflow: hidden; }
.okpi__bar i { display: block; height: 100%; width: calc(var(--v, 0.72) * 100%); border-radius: inherit; background: var(--obra-accent); }
.okpi__bar--b i { background: #5b7cc4; }
.obra__chart { padding: 0.75em 0.85em 0.6em; border-radius: 8px; background: #fff; border: 1px solid var(--a-line); }
.obra__chart-hd { display: flex; align-items: center; gap: 1.2em; margin-bottom: 0.4em; color: var(--a-text-2); font-size: 0.9em; }
.obra__chart-hd b { color: var(--a-text); font-weight: 600; margin-right: auto; }
.lg { display: inline-block; width: 1.4em; height: 0; margin-right: 0.4em; vertical-align: middle; border-top: 2px solid; }
.lg--plan { border-top-style: dashed; color: #9aa3b5; }
.lg--real { color: var(--obra-accent); border-top-width: 3px; }
.obra__chart svg { display: block; width: 100%; height: 7.6em; overflow: visible; }
.obra__chart line { stroke: var(--a-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scurve { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.scurve--plan { stroke: #9aa3b5; stroke-width: 1.6; stroke-dasharray: 5 4; }
.scurve--real { stroke: var(--obra-accent); stroke-width: 3; clip-path: inset(-20% calc((1 - var(--draw, 1)) * 100%) -20% 0); }
.scurve__dot { fill: #fff; stroke: var(--obra-accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: var(--draw-dot, 1); }
.obra__months { display: flex; justify-content: space-between; color: var(--a-text-3); font-size: 0.8em; margin-top: 0.2em; }
.obra__table { border-radius: 8px; background: #fff; border: 1px solid var(--a-line); overflow: hidden; }
.ot { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.8em; align-items: center; padding: 0.45em 0.8em; border-bottom: 1px solid var(--a-line-2); font-variant-numeric: tabular-nums; }
.ot:last-child { border-bottom: 0; }
.ot--hd { background: #f8f9fa; color: var(--a-text-3); font-weight: 600; font-size: 0.88em; }
.ot span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot em { font-style: normal; color: var(--a-text-3); margin-right: 0.7em; }
.ot__bar { display: flex; align-items: center; gap: 0.6em; }
.ot__bar i { flex: 1; height: 0.42em; border-radius: 999px; background: linear-gradient(90deg, var(--obra-accent) calc(var(--v) * var(--grow, 1) * 100%), #e8eaee 0); }
.ot__bar b { font-weight: 600; min-width: 3.2em; text-align: right; }

/* ==========================================================================
   Servicios · portal de clientes
   ========================================================================== */
.portal {
  --ui: 12px;
  width: min(100%, 34rem);
  font-family: var(--app-font); color: #1d2433; font-size: var(--ui); line-height: 1.35;
  background: #f5f6f8; border-radius: 10px; overflow: hidden;
  box-shadow: var(--screen-shadow);
  transform: perspective(1400px) rotateY(-10deg) rotateX(4deg);
  -webkit-font-smoothing: antialiased;
}
.portal__top { display: flex; align-items: center; gap: 1.2em; padding: 0.75em 1em; background: #fff; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.portal__logo { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 800; }
.portal__logo svg { width: 2em; height: auto; overflow: visible; }
.portal__logo path { fill: none; stroke: var(--shop); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.portal__logo span { color: var(--a-text-3); font-weight: 400; margin-left: 0.3em; }
.portal__nav { display: flex; gap: 1em; color: var(--a-text-2); }
.portal__nav .is-on { color: var(--a-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--shop); padding-bottom: 0.2em; }
.portal__user { margin-left: auto; color: var(--a-text-2); }
.portal__body { padding: 0.9em 1em 1em; display: grid; gap: 0.8em; }
.portal__sum { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.6em; align-items: stretch; }
.portal__sum > div { padding: 0.7em 0.8em; border-radius: 8px; background: #fff; border: 1px solid var(--a-line); display: grid; }
.portal__sum small { color: var(--a-text-3); }
.portal__sum b { font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.portal__sum span { color: var(--a-text-2); font-size: 0.9em; }
.portal__sum .portal__pay { display: grid; place-items: center; background: var(--shop); border-color: var(--shop); color: #fff; font-weight: 700; padding-inline: 1.1em; }
.portal__pay span { color: #fff; font-size: 1em; }
.portal__table { border-radius: 8px; background: #fff; border: 1px solid var(--a-line); overflow: hidden; }
.pt { display: grid; grid-template-columns: 1fr 0.7fr 0.7fr 1.2fr 1fr 1.2em; gap: 0.6em; align-items: center; padding: 0.5em 0.8em; border-bottom: 1px solid var(--a-line-2); font-variant-numeric: tabular-nums; }
.pt:last-child { border-bottom: 0; }
.pt--hd { background: #f8f9fa; color: var(--a-text-3); font-weight: 600; font-size: 0.9em; }
.pt b { font-weight: 600; }
.pt svg { width: 1.15em; height: 1.15em; color: var(--a-text-3); }
.tag { justify-self: start; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.86em; font-weight: 600; white-space: nowrap; }
.tag--ok { background: var(--a-ok-bg); color: var(--a-ok); }
.tag--due { background: var(--a-warn-bg); color: var(--a-warn); }
.tag--late { background: var(--a-bad-bg); color: var(--a-bad); }

/* ==========================================================================
   Servicios · ERP (tipográfico)
   ========================================================================== */
.ae { display: grid; gap: 0.08em; justify-items: start; width: 100%; }
.ae__name {
  font-size: clamp(2.5rem, 1rem + 4.6vw, 5.6rem); font-weight: 900; font-stretch: 125%;
  line-height: 0.98; letter-spacing: -0.045em; color: oklch(100% 0 0 / 0.96);
  white-space: nowrap;
}
.ae__name--q { color: oklch(100% 0 0 / 0.32); }

/* ==========================================================================
   03 · la escena de las tres pantallas
   ========================================================================== */
.tri { position: relative; }
.tri__scene {
  --ry: 0deg;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 0.98fr);
  align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem);
  perspective: 2000px; perspective-origin: 50% 40%;
  transform-style: preserve-3d;
}
.tri__pane { --ui: 11.5px; --fr: 0deg; --fz: 0px; --fy: 0px; transform-style: preserve-3d; transition: none; will-change: transform, opacity; }
.tri__pos { transform: translateY(var(--fy)) rotateY(calc(24deg + var(--ry) + var(--fr))) translateZ(calc(-40px + var(--fz))); transform-origin: 100% 50%; }
.tri__erp { transform: translateY(var(--fy)) rotateY(calc(var(--ry) + var(--fr))) translateZ(calc(30px + var(--fz))); }
.tri__web { transform: translateY(var(--fy)) rotateY(calc(-24deg + var(--ry) + var(--fr))) translateZ(calc(-40px + var(--fz))); transform-origin: 0% 50%; }
.tri__beams { position: absolute; inset: -10% -5%; width: 110%; height: 120%; pointer-events: none; z-index: 5; }

/* ==========================================================================
   móvil
   ========================================================================== */
@media (max-width: 63.99rem), (max-height: 37.49rem) {
  .erp3d { --ui: clamp(7.5px, 2.3vw, 12px); }
  .erp__menu, .erp__company { display: none; }
  .erp__facet:nth-child(n+2) { display: none; }
  .tri__scene { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; perspective: none; }
  .tri__pos, .tri__erp, .tri__web { transform: none; }
  .tri__pane { --ui: clamp(9px, 2.6vw, 11.5px); }
  .obra { --ui: clamp(8px, 2.45vw, 12px); }
  .obra__side { display: none; }
  .obra { grid-template-columns: minmax(0, 1fr); }
  .portal, .win--wh { transform: none; }
  .voucher { font-size: 0.62rem; }
}
@media (max-width: 40rem) {
  .obra__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal__sum { grid-template-columns: 1fr 1fr; }
  .portal__sum .portal__pay { grid-column: 1 / -1; padding-block: 0.6em; }
  .pt { grid-template-columns: 1fr 0.8fr 1.3fr 1fr; }
  .pt > :nth-child(2), .pt > :nth-child(3) { display: none; }
  .pt svg { display: none; }
  .wh__grid > div { grid-template-columns: minmax(0, 2fr) 3.6em 3.8em; }
  .wh__grid > div > :nth-child(n+4) { display: none; }
  .receipt { width: 15.5rem; }
  .fprinter { width: 18rem; }
  .fprinter__slot { width: 16rem; margin-left: -8rem; }
  .shop__prod { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos__pays { display: none; }
}