/* AVIZIFY · Pantallas de servicio (Tableros, Automatización, Sistemas de control)
   Ilustraciones hechas con HTML y CSS, no capturas de clientes.
   Usan los tokens de site.css; los valores después de la coma son respaldo. */

.px {
  --px-ink: var(--ink, #1F1E1C);
  --px-ink2: var(--ink-2, #262522);
  --px-ink3: var(--ink-3, #2E2D2A);
  --px-bone: var(--bone, #E8E6E1);
  --px-forest: #003922;
  --px-mint: #9FFFD8;
  --px-ok: #07D16E;
  --px-warn: #F5B800;
  --px-stop: #E5484D;
  --px-dim: rgba(232, 230, 225, .52);
  --px-mute: rgba(232, 230, 225, .74);
  --px-line: rgba(232, 230, 225, .10);
  --px-font: var(--font, 'Geist', ui-sans-serif, sans-serif);
  --px-mono: var(--mono, 'Geist Mono', ui-monospace, monospace);
  --px-ease: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.px *, .px *::before, .px *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Cuadro 1:1 ---------- */
.px-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  container-type: size;
  border-radius: 20px; border: 1px solid var(--px-line);
  background: #161614; overflow: hidden;
  display: grid; place-items: center;
  font-family: var(--px-font); color: var(--px-bone);
}
.px-stage::before { /* retícula */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(232,230,225,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(232,230,225,.045) 1px, transparent 1px);
  background-size: 6.25cqw 6.25cqw;
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.px-stage::after { /* luz verde bajo el teléfono */
  content: ""; position: absolute; width: 70cqw; aspect-ratio: 1; left: 15cqw; bottom: -42cqw;
  background: radial-gradient(closest-side, rgba(7,209,110,.20), transparent); pointer-events: none;
}
.px-cap { /* etiqueta de esquina */
  position: absolute; top: 4cqw; left: 4cqw; z-index: 3;
  font-family: var(--px-mono); font-size: max(9px, 1.9cqw); letter-spacing: .14em; text-transform: uppercase;
  color: var(--px-dim); display: flex; align-items: center; gap: 1.4cqw;
}
.px-cap::before { content: ""; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--px-ok); box-shadow: 0 0 0 .8cqw rgba(7,209,110,.15); }

/* ---------- Teléfono ---------- */
.px-phone {
  position: relative; z-index: 2;
  height: 86cqh; aspect-ratio: 9 / 18.6;
  font-size: 2.05cqh; /* todo dentro se mide en em */
  border-radius: 3.1em; padding: .55em;
  background: linear-gradient(160deg, #3A3935, #121211 40%);
  box-shadow: 0 2.5em 4em -2em rgba(0,0,0,.9), inset 0 0 0 1px #4A4844;
}
.px-screen {
  position: relative; height: 100%; border-radius: 2.6em; overflow: hidden;
  background: var(--px-ink); display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px #2E2D2A;
}
.px-status { display: flex; justify-content: space-between; align-items: center; padding: 1.05em 1.6em .3em; font-family: var(--px-mono); font-size: .78em; color: var(--px-mute); }
.px-status i { width: 5.6em; height: 1.55em; border-radius: 1em; background: #0E0E0D; font-style: normal; }
.px-status span:last-child { display: flex; gap: .35em; align-items: center; }
.px-batt { width: 1.9em; height: .9em; border: 1px solid var(--px-mute); border-radius: .25em; position: relative; }
.px-batt::after { content: ""; position: absolute; inset: .12em; right: .5em; background: var(--px-mute); border-radius: .1em; }

.px-head { padding: .7em 1.25em .9em; }
.px-eyebrow { font-family: var(--px-mono); font-size: .68em; letter-spacing: .13em; text-transform: uppercase; color: var(--px-dim); }
.px-title { font-size: 1.32em; font-weight: 600; letter-spacing: -.015em; margin-top: .2em; line-height: 1.15; }
.px-body { flex: 1; padding: 0 1em; display: flex; flex-direction: column; gap: .62em; overflow: hidden; }
.px-card { background: var(--px-ink2); border: 1px solid var(--px-line); border-radius: 1em; padding: .85em .95em; }
.px-num { font-variant-numeric: tabular-nums; }
.px-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); padding: .75em 1em 1.25em; border-top: 1px solid var(--px-line); background: #1A1918; }
.px-tabbar span { display: grid; justify-items: center; gap: .3em; font-size: .62em; color: var(--px-dim); }
.px-tabbar span svg { width: 1.9em; height: 1.9em; }
.px-tabbar span.on { color: var(--px-mint); }

.px-chip { display: inline-flex; align-items: center; gap: .4em; padding: .28em .6em; border-radius: .4em; font-family: var(--px-mono); font-size: .62em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.px-chip.ok { background: rgba(7,209,110,.14); color: var(--px-ok); }
.px-chip.warn { background: rgba(245,184,0,.14); color: var(--px-warn); }
.px-chip.stop { background: rgba(229,72,77,.16); color: #FF8A8E; }

/* ---------- Aviso flotante fuera del teléfono (lo que le pasa al dueño) ---------- */
.px-float {
  position: absolute; z-index: 4; font-size: 2.05cqh;
  width: 13.8em; padding: .7em .8em; border-radius: 1em;
  background: rgba(38,37,34,.92); border: 1px solid #44423E;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1.5em 3em -1.4em rgba(0,0,0,.9);
  display: grid; grid-template-columns: 2.3em 1fr; gap: .7em; align-items: start;
}
.px-float .ic { width: 2.3em; height: 2.3em; border-radius: .6em; display: grid; place-items: center; background: var(--px-forest); color: var(--px-mint); }
.px-float .ic svg { width: 1.3em; height: 1.3em; }
.px-float small { display: flex; justify-content: space-between; font-family: var(--px-mono); font-size: .62em; letter-spacing: .1em; text-transform: uppercase; color: var(--px-dim); }
.px-float b { display: block; font-size: .82em; font-weight: 600; margin-top: .25em; line-height: 1.25; }
.px-float p { font-size: .74em; color: var(--px-mute); margin-top: .2em; line-height: 1.3; }
.px-float.r { right: 3.5cqw; } .px-float.l { left: 3.5cqw; }

/* =========================================================
   1 · TABLEROS (Data)
   ========================================================= */
.px-kpi b { display: block; font-size: 2.05em; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin-top: .15em; }
.px-kpi-row { display: flex; justify-content: space-between; align-items: center; margin-top: .45em; font-size: .72em; color: var(--px-mute); }
.px-spark { display: block; width: 100%; height: 3.4em; margin-top: .55em; }
.px-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .62em; }
.px-mini .px-card b { display: block; font-size: 1.2em; font-weight: 600; margin-top: .2em; letter-spacing: -.02em; }
.px-mini .px-card span { font-size: .66em; color: var(--px-dim); }
.px-bars { display: grid; gap: .5em; margin-top: .6em; }
.px-bar { display: grid; grid-template-columns: 3.4em 1fr 3.9em; align-items: center; gap: .55em; font-size: .72em; }
.px-bar span:first-child { font-family: var(--px-mono); color: var(--px-mute); }
.px-bar u { display: block; height: .55em; border-radius: .3em; background: rgba(232,230,225,.07); text-decoration: none; overflow: hidden; }
.px-bar u i { display: block; height: 100%; width: var(--w); border-radius: .3em; background: var(--px-ok); }
.px-bar.neg u i { background: var(--px-stop); }
.px-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.px-bar.neg em { color: #FF8A8E; }

/* =========================================================
   2 · AUTOMATIZACIÓN (Systems)
   ========================================================= */
.px-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25em; padding: .25em; border-radius: .8em; background: var(--px-ink2); border: 1px solid var(--px-line); font-size: .74em; }
.px-seg span { text-align: center; padding: .5em 0; border-radius: .6em; color: var(--px-mute); }
.px-seg span.on { background: var(--px-ink3); color: var(--px-bone); font-weight: 600; box-shadow: inset 0 0 0 1px #4A4844; }
.px-seg span b { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: .3em; border-radius: 1em; background: var(--px-ok); color: #1F1E1C; font-size: .85em; }
.px-req { display: grid; gap: .55em; }
.px-req-top { display: flex; justify-content: space-between; align-items: start; gap: .6em; }
.px-req-top b { font-size: .92em; font-weight: 600; line-height: 1.2; }
.px-req-top strong { font-size: 1em; font-weight: 600; font-variant-numeric: tabular-nums; }
.px-who { display: flex; align-items: center; gap: .55em; font-size: .7em; color: var(--px-dim); }
.px-av { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: #3A3935; color: var(--px-bone); font-size: .9em; font-weight: 600; flex: none; }
.px-evid { display: flex; gap: .4em; }
.px-evid span { flex: 1; height: 2.6em; border-radius: .5em; background: repeating-linear-gradient(135deg, #2E2D2A 0 .5em, #353430 .5em 1em); border: 1px solid #44423E; display: grid; place-items: center; font-family: var(--px-mono); font-size: .58em; color: var(--px-dim); letter-spacing: .08em; text-transform: uppercase; }
.px-act { display: grid; grid-template-columns: 1fr 1.6fr; gap: .45em; }
.px-act span { display: grid; place-items: center; height: 2.6em; border-radius: .7em; font-size: .78em; font-weight: 600; }
.px-act .no { border: 1px solid #5A5853; color: var(--px-mute); }
.px-act .si { background: var(--px-ok); color: #102016; }
.px-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5em; }
.px-line b { display: block; font-size: .8em; font-weight: 600; }
.px-line span.s { display: block; font-size: .66em; color: var(--px-dim); margin-top: .15em; }
.px-steps { display: flex; gap: .25em; margin-top: .55em; }
.px-steps i { flex: 1; height: .3em; border-radius: .2em; background: rgba(232,230,225,.12); }
.px-steps i.d { background: var(--px-ok); }
.px-steps i.w { background: var(--px-warn); }

/* =========================================================
   3 · SISTEMAS DE CONTROL (OPS)
   ========================================================= */
.px-field { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .7em .85em; border-radius: .8em; background: var(--px-ink2); border: 1px solid var(--px-line); }
.px-field span { font-family: var(--px-mono); font-size: .62em; letter-spacing: .1em; text-transform: uppercase; color: var(--px-dim); }
.px-field b { font-size: .84em; font-weight: 600; text-align: right; }
.px-qty { display: flex; align-items: center; gap: .5em; }
.px-qty i { width: 1.9em; height: 1.9em; border-radius: .5em; display: grid; place-items: center; background: var(--px-ink3); border: 1px solid #4A4844; font-style: normal; font-weight: 600; }
.px-qty b { min-width: 2.2em; text-align: center; font-size: 1.05em; }
.px-scan { display: grid; grid-template-columns: 2.4em 1fr auto; gap: .65em; align-items: center; padding: .65em .85em; border-radius: .8em; background: rgba(7,209,110,.08); border: 1px solid rgba(7,209,110,.32); }
.px-scan .ic { width: 2.4em; height: 2.4em; border-radius: .55em; background: var(--px-forest); color: var(--px-mint); display: grid; place-items: center; }
.px-scan .ic svg { width: 1.3em; height: 1.3em; }
.px-scan b { font-size: .8em; font-weight: 600; display: block; }
.px-scan span { font-family: var(--px-mono); font-size: .62em; color: var(--px-dim); letter-spacing: .06em; }
.px-photo { position: relative; height: 5.6em; border-radius: .8em; overflow: hidden; border: 1px solid #44423E;
  background:
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)),
    linear-gradient(115deg, #6B5236 0 38%, #7C6040 38% 39%, #5E4730 39% 70%, #6E5538 70%),
    #5E4730; }
.px-photo::before { /* cinta de la caja */ content: ""; position: absolute; left: 0; right: 0; top: 42%; height: .9em; background: rgba(210,190,150,.55); }
.px-photo::after { /* abolladura */ content: ""; position: absolute; right: 22%; top: 18%; width: 2.4em; height: 1.8em; border-radius: 40% 60% 50% 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); }
.px-photo span { position: absolute; left: .6em; bottom: .55em; z-index: 1; }
.px-photo em { position: absolute; right: .6em; bottom: .6em; z-index: 1; font-style: normal; font-family: var(--px-mono); font-size: .6em; color: rgba(255,255,255,.8); }
.px-go { display: flex; justify-content: center; align-items: center; gap: .5em; height: 3.1em; border-radius: .9em; background: var(--px-ok); color: #102016; font-weight: 600; font-size: .9em; }
.px-go svg { width: 1.2em; height: 1.2em; }
.px-log { display: grid; grid-template-columns: 3em 1fr auto; gap: .5em; align-items: center; font-size: .7em; padding: .2em 0; }
.px-log span:first-child { font-family: var(--px-mono); color: var(--px-dim); }

/* ---------- Animación sutil al entrar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .px-stage.in .px-phone { animation: px-up .7s var(--px-ease) both; }
  .px-stage.in .px-float { animation: px-up .7s var(--px-ease) .25s both; }
  .px-stage.in .px-bar u i { animation: px-grow .9s var(--px-ease) .3s both; transform-origin: left; }
}
@keyframes px-up { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes px-grow { from { transform: scaleX(.05); } to { transform: scaleX(1); } }

/* =========================================================
   Interacción (v18)
   ========================================================= */
.px [hidden] { display: none !important; }
.px button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.px button:focus-visible { outline: 2px solid var(--px-mint); outline-offset: 2px; }
.px-seg button { text-align: center; padding: .5em 0; border-radius: .6em; color: var(--px-mute); transition: background-color 160ms var(--px-ease), color 160ms var(--px-ease); }
.px-seg button[aria-pressed="true"] { background: var(--px-ink3); color: var(--px-bone); font-weight: 600; box-shadow: inset 0 0 0 1px #4A4844; }
.px-seg button b { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: .3em; border-radius: 1em; background: var(--px-ok); color: #1F1E1C; font-size: .85em; }
.px-act button, .px-go, .px-qty button, .px-bar { transition: transform 140ms var(--px-ease), background-color 160ms var(--px-ease), opacity 160ms var(--px-ease); }
.px-act button:active, .px-go:active, .px-qty button:active, .px-bar:active { transform: scale(.96); }
.px-act button { display: grid; place-items: center; height: 2.6em; border-radius: .7em; font-size: .78em; font-weight: 600; }
.px-qty button { width: 1.9em; height: 1.9em; border-radius: .5em; display: grid; place-items: center; background: var(--px-ink3); border: 1px solid #4A4844; font-weight: 600; }
.px-go { width: 100%; }
.px-go.done { background: var(--px-bone); color: #102016; }
.px-bar { width: 100%; text-align: left; padding: .15em 0; border-radius: .3em; }
.px-bar.sel { background: rgba(232,230,225,.06); box-shadow: 0 0 0 .3em rgba(232,230,225,.06); }
.px-bar u i { transition: width 600ms var(--px-ease); }
.px-spark path { transition: d 600ms var(--px-ease); }
.px-req { transition: transform 240ms var(--px-ease), opacity 240ms var(--px-ease); }
.px-req.out-r { transform: translateX(30%); opacity: 0; }
.px-req.out-l { transform: translateX(-30%); opacity: 0; }
.px-req.enter { animation: px-up 320ms var(--px-ease) both; }
.px-empty { display: grid; justify-items: center; gap: .5em; text-align: center; padding: 1.6em 1em; }
.px-empty .ok { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: rgba(7,209,110,.14); color: var(--px-ok); }
.px-empty .ok svg { width: 1.3em; height: 1.3em; }
.px-empty b { font-size: .95em; }
.px-empty p { font-size: .72em; color: var(--px-dim); }
.px-empty button { margin-top: .3em; font-size: .72em; color: var(--px-mint); text-decoration: underline; text-underline-offset: .2em; }
.px-list { display: grid; gap: .62em; }
.px-log { animation: px-up 320ms var(--px-ease) both; }
.px-float.pop { animation: px-pop 420ms var(--px-ease) both; }
@keyframes px-pop { from { opacity: .3; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.px-hint { position: absolute; z-index: 4; bottom: 2.4cqh; left: 50%; transform: translateX(-50%); font-family: var(--px-mono); font-size: max(9px, 1.6cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--px-dim); white-space: nowrap; }
.px-photo.merma { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)), linear-gradient(115deg, #4E3B28 0 38%, #5A4430 38% 39%, #47362A 39% 70%, #554030 70%), #47362A; }
.px-photo.salida { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)), repeating-linear-gradient(90deg, #7A6448 0 3.2em, #6B563D 3.2em 3.35em), #7A6448; }
.px-photo.salida::after { display: none; }

/* En pantallas angostas el cuadro se hace más alto para que el celular se lea */
@media (max-width: 640px) {
  .px-stage { aspect-ratio: 3 / 4.4; border-radius: 16px; }
  .px-phone { height: 80cqh; margin-top: 6cqh; }
  .px-float { font-size: 1.6cqh; width: 16.5em; }
  .px-float.r { right: 2cqw; } .px-float.l { left: 2cqw; }
  .px-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .px-req, .px-bar u i, .px-log, .px-float.pop { transition: none; animation: none; }
}

[data-px="data"] .px-spark { height: 2.9em; }
[data-px="data"] .px-body { padding-bottom: 1em; }

/* =========================================================
   v18b · celular completo (sin cuadro), guía y avisos
   ========================================================= */
.px-stage {
  aspect-ratio: auto; container-type: normal; border: 0; border-radius: 0; background: none; overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 4px 0 12px;
}
.px-stage::before { display: none; }
.px-stage::after { width: 90%; left: 5%; bottom: -8%; top: auto; aspect-ratio: 1; }
.px-pw { position: relative; z-index: 2; order: 2; width: min(350px, 88%); container-type: inline-size; }
.px-phone { width: 100%; height: auto; aspect-ratio: 9 / 18.6; font-size: 4.9cqw; }

/* Guía: dice que se puede usar */
.px-guide { order: 0; position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(7,209,110,.10); border: 1px solid rgba(7,209,110,.38);
  font-family: var(--px-font); font-size: 14px; line-height: 1.3; color: var(--px-bone); }
.px-guide i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--px-ok); color: #102016; flex: none; }
.px-guide i svg { width: 17px; height: 17px; }
.px-guide b { font-weight: 600; color: var(--px-mint); }
@media (prefers-reduced-motion: no-preference) {
  .px-guide i { animation: px-tap 1.8s var(--px-ease) infinite; }
}
@keyframes px-tap { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(2px) scale(.92); } }

/* Pulso sobre el botón que hay que tocar */
.px .px-pulse { position: relative; }
.px .px-pulse::after { content: ""; position: absolute; inset: -.3em; border-radius: inherit; border: 2px solid var(--px-ok); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .px .px-pulse::after { animation: px-ring 1.6s var(--px-ease) infinite; }
}
@keyframes px-ring { 0% { opacity: .95; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.14); } }

/* Avisos: a los lados del celular en escritorio */
.px-float { font-size: 13.5px; width: 15em; }
.px-float.r { right: 0; top: 13%; }
.px-float.l { left: 0; bottom: 9%; }

/* En celular: los avisos van arriba del teléfono */
@media (max-width: 640px) {
  .px-stage { aspect-ratio: auto; gap: 10px; }
  .px-phone { height: auto; margin-top: 0; }
  .px-pw { width: min(330px, 90%); margin-top: 6px; }
  .px-guide { font-size: 13.5px; }
  .px-float { position: relative; order: 1; inset: auto; top: auto; bottom: auto; left: auto; right: auto;
    width: min(340px, 100%); font-size: 13.5px; }
}
@media (min-width: 641px) {
  .px-pw { width: min(370px, 64%); }
  .px-float { width: 13em; font-size: 13px; }
  .px-float.r { right: -1%; top: 24%; }
  .px-float.l { left: -1%; bottom: 14%; }
}
@media (min-width: 641px) {
  .px-float.r { right: -7%; }
  .px-float.l { left: -7%; }
}
/* v18c · celulares más compactos en escritorio */
@media (min-width: 641px) {
  .px-pw { width: min(300px, 62%); }
  .px-float { width: 12.5em; font-size: 12.5px; }
}