/* ==========================================================================
   PROPIEX - hojas de las piezas ilustradas (maquetas de la app y dispositivos)
   GENERADO POR prepara.js A PARTIR DE _parts/. No lo edites a mano: edita la
   pieza correspondiente en _parts/ y vuelve a correr  node prepara.js

   Todas las clases llevan prefijo propio y no tocan nada de styles.css:
     .px-ui-*    tablero del propietario en escritorio (lienzo 1200x750)
     .px-m-*     pantallas del inquilino en celular (lienzo 375x812)
     .px-dev-*   marcos de dispositivo
     .px-badge-* badges de plataforma
   ========================================================================== */


/* ==========================================================================
   A) Tablero de escritorio
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────── */
.px-ui-root{
  width:1200px;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.45;
  color:#123A2C;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
.px-ui-root *,
.px-ui-root *::before,
.px-ui-root *::after{box-sizing:border-box;margin:0;padding:0}
.px-ui-root svg{display:block;flex:none}

.px-ui-app{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  height:750px;
  background:#FFFFFF;
  border:1px solid #DFE5E1;
  border-radius:16px;
  overflow:hidden;
}

/* ── Barra lateral ────────────────────────────────────────────────── */
.px-ui-side{
  background:#123A2C;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 8px 18px;
  gap:6px;
}
.px-ui-mark{color:#8ECFA6;margin-bottom:22px}
.px-ui-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%}
.px-ui-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 2px 9px;
  border-radius:12px;
  color:rgba(244,247,245,.55);
}
.px-ui-nav-item span{
  font-size:9.5px;font-weight:500;letter-spacing:.02em;line-height:1;
}
.px-ui-nav-item.is-active{background:rgba(255,255,255,.09);color:#F4F7F5}
.px-ui-side-foot{margin-top:auto;color:rgba(244,247,245,.42)}

/* ── Encabezado ───────────────────────────────────────────────────── */
.px-ui-top{
  height:66px;
  display:flex;align-items:center;gap:16px;
  padding:0 24px;
  border-bottom:1px solid #DFE5E1;
  background:#FFFFFF;
}
.px-ui-h1{font-size:19px;font-weight:600;letter-spacing:-.015em;color:#123A2C;white-space:nowrap}
.px-ui-sub{font-size:12px;color:#6F6E6B;white-space:nowrap;margin-left:-6px}

.px-ui-pill{
  font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#6F6E6B;border:1px solid #BFBBB8;border-radius:999px;
  padding:4px 9px;white-space:nowrap;
}

.px-ui-input{
  margin-left:auto;
  display:flex;align-items:center;gap:9px;
  width:286px;height:38px;
  padding:0 13px;
  border:1px solid #DFE5E1;border-radius:12px;
  background:#F4F7F5;
  color:#6F6E6B;font-size:13px;
  white-space:nowrap;overflow:hidden;
}
.px-ui-input svg{color:#6F6E6B}
.px-ui-avatar{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;
  background:#E8F0EA;color:#123A2C;
  font-size:12px;font-weight:600;letter-spacing:.02em;
}

/* ── Cuerpo ───────────────────────────────────────────────────────── */
.px-ui-body{padding:24px;background:#F4F7F5;height:calc(750px - 66px);overflow:hidden}

/* ── Tarjetas de cifra ────────────────────────────────────────────── */
.px-ui-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.px-ui-kpi{
  background:#FFFFFF;border:1px solid #DFE5E1;border-radius:14px;
  padding:16px 18px 15px;
}
.px-ui-kpi-lbl{
  font-size:10px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:#6F6E6B;margin-bottom:9px;
}
.px-ui-money{
  display:block;
  font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:#123A2C;
}
.px-ui-kpi .px-ui-money{font-size:25px;line-height:1.1}
.px-ui-kpi--neto .px-ui-money{font-weight:700}
.px-ui-cur{font-size:.58em;font-weight:500;letter-spacing:0;margin-right:3px;vertical-align:.06em}
.px-ui-delta{
  display:flex;align-items:center;gap:5px;
  margin-top:9px;font-size:11.5px;color:#6F6E6B;
}

/* ── Dos columnas ─────────────────────────────────────────────────── */
.px-ui-cols{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:20px;margin-top:20px}

/* ── Tabla ────────────────────────────────────────────────────────── */
.px-ui-card{background:#FFFFFF;border:1px solid #DFE5E1;border-radius:14px}
.px-ui-card-top{
  display:flex;align-items:center;gap:10px;
  padding:15px 20px 14px;border-bottom:1px solid #DFE5E1;
}
.px-ui-card-title{font-size:14px;font-weight:600;letter-spacing:-.01em}
.px-ui-tabs{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12px;color:#6F6E6B}
.px-ui-tab.is-active{color:#123A2C;font-weight:500;border-bottom:1px solid #123A2C;padding-bottom:2px}

.px-ui-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 138px 148px 150px;
  align-items:center;
  gap:12px;
  padding:0 20px;
}
.px-ui-row--head{
  height:34px;
  border-bottom:1px solid #DFE5E1;
  font-size:10px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#6F6E6B;
}
.px-ui-row--data{height:66px;border-bottom:1px solid #DFE5E1}
.px-ui-row--data:last-of-type{border-bottom:0}
.px-ui-row--flag{background:#F4F7F5}

.px-ui-inm{font-size:14px;font-weight:500;color:#123A2C;letter-spacing:-.005em}
.px-ui-meta{font-size:11.5px;color:#6F6E6B;margin-top:2px}
.px-ui-ten{font-size:13px;color:#6F6E6B}
.px-ui-num{text-align:right}
.px-ui-num .px-ui-money{font-size:14.5px;font-weight:500}
.px-ui-cell-end{display:flex;justify-content:flex-end}

/* ── Chips de estado ──────────────────────────────────────────────── */
.px-ui-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 11px;border-radius:999px;
  font-size:11.5px;font-weight:500;white-space:nowrap;
  border:1px solid transparent;
}
.px-ui-chip--ok{color:#2C7550;background:#E8F0EA}
.px-ui-chip--wait{color:#6F6E6B;border-color:#9C9895;background:#FFFFFF}
.px-ui-chip--late{color:#F4F7F5;background:#123A2C}
.px-ui-chip--rev{color:#123A2C;border-color:#57A177;background:#FFFFFF}

.px-ui-card-foot{
  display:flex;align-items:center;
  padding:12px 20px;border-top:1px solid #DFE5E1;
  font-size:11.5px;color:#6F6E6B;
}
.px-ui-link{margin-left:auto;color:#2F7D55;font-weight:500}

/* ── Panel de aprobación ──────────────────────────────────────────── */
.px-ui-panel{background:#FFFFFF;border:1px solid #DFE5E1;border-radius:14px;padding:18px}
.px-ui-panel-top{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.px-ui-panel-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.px-ui-badge{
  margin-left:auto;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:#E8F0EA;color:#123A2C;
  font-size:11px;font-weight:600;line-height:20px;text-align:center;
}
.px-ui-proof{display:flex;gap:14px;margin-bottom:16px}
.px-ui-thumb{
  width:88px;height:112px;flex:none;
  border:1px solid #DFE5E1;border-radius:10px;
  background:#F4F7F5;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.px-ui-proof-info{min-width:0;padding-top:2px}
.px-ui-proof-inm{font-size:13.5px;font-weight:500;line-height:1.3}
.px-ui-proof-meta{font-size:11.5px;color:#6F6E6B;margin-top:5px;line-height:1.5}
.px-ui-proof-amt{margin-top:10px}
.px-ui-proof-amt .px-ui-money{font-size:21px;font-weight:600}

.px-ui-kv{border-top:1px solid #DFE5E1;padding:10px 0;display:flex;align-items:center;gap:10px}
.px-ui-kv dt{font-size:11.5px;color:#6F6E6B}
.px-ui-kv dd{margin-left:auto;font-size:12.5px;font-weight:500;color:#123A2C;font-variant-numeric:tabular-nums}
.px-ui-kv--last{border-bottom:1px solid #DFE5E1;margin-bottom:16px}

.px-ui-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.px-ui-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:42px;border-radius:12px;
  font-size:13.5px;font-weight:500;letter-spacing:-.005em;
}
.px-ui-btn--solid{background:#123A2C;color:#F4F7F5}
.px-ui-btn--ghost{border:1px solid #BFBBB8;color:#123A2C;background:#FFFFFF}
.px-ui-note{
  display:block;margin-top:12px;
  font-size:11px;line-height:1.5;color:#6F6E6B;
}

/* ── Texto alterno ────────────────────────────────────────────────── */
.px-ui-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ==========================================================================
   B) Pantallas de celular
   ========================================================================== */

/* ============================================================
   PROPIEX — maquetas móviles · tokens y base
   ============================================================ */
.px-m-pantalla-a,
.px-m-pantalla-b{
  /* Paleta literal del producto */
  --px-m-verde-900:#123A2C;
  --px-m-verde-600:#2F7D55;   /* texto verde sobre blanco o crema */
  --px-m-verde-650:#2C7550;   /* texto verde sobre fondo tintado (verde-50) */
  --px-m-gris-tinte:#61605D;  /* gris de texto sobre fondo tintado */
  --px-m-verde-500:#57A177;
  --px-m-verde-300:#8ECFA6;
  --px-m-crema:#F4F7F5;
  --px-m-verde-50:#E8F0EA;
  --px-m-gris-texto:#6F6E6B;
  --px-m-gris-borde:#BFBBB8;
  --px-m-linea:#DFE5E1;
  --px-m-blanco:#FFFFFF;

  /* Radios */
  --px-m-r-ui:.75em;      /* 12px  botones y campos */
  --px-m-r-card:.875em;   /* 14px  tarjetas         */
  --px-m-r-screen:1em;    /* 16px  bloques grandes  */
  --px-m-r-chip:999px;

  /* Escala de la pieza. 16px = 1:1 (375 px de ancho). */
  --px-m-base:16px;

  /* Si la página ya carga Poppins, esto la hereda igual.
     Se puede cambiar a  font-family: inherit;  sin tocar nada más. */
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:400;
  color:var(--px-m-verde-900);
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
}

/* Texto solo para lectores de pantalla */
.px-m-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Marco del teléfono ---------- */
.px-m-device{
  font-size:var(--px-m-base);
  width:23.4375em;            /* 375px */
  max-width:100%;
  background:var(--px-m-blanco);
  border:1px solid var(--px-m-gris-borde);
  border-radius:2.5em;
  padding:.5em;
  box-sizing:border-box;
}
.px-m-screen{
  position:relative;
  height:50.75em;             /* 812px */
  background:var(--px-m-crema);
  border-radius:2.0625em;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.px-m-device *,
.px-m-device *::before,
.px-m-device *::after{ box-sizing:border-box; }

/* Escalado automático en pantallas angostas: la pieza nunca se sale del viewport */
@media (max-width:440px){
  .px-m-pantalla-a,
  .px-m-pantalla-b{ --px-m-base:calc((100vw - 2.5rem) / 23.4375); }
}

/* ---------- Barra de estado falsa ---------- */
.px-m-status{
  flex:0 0 auto;
  height:2.75em;                       /* 44px */
  padding:0 1.5em 0 1.75em;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--px-m-verde-900);
}
.px-m-status__hora{
  font-size:.875em; font-weight:500; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.px-m-status__iconos{ display:flex; align-items:center; gap:.4375em; }
.px-m-status__iconos svg{ display:block; }

/* ---------- Encabezado de la app ---------- */
.px-m-appbar{
  flex:0 0 auto;
  padding:.375em 1.25em .875em;
  display:flex; align-items:flex-start; gap:.75em;
}
.px-m-appbar__marca{ display:flex; align-items:center; gap:.5em; flex:0 0 auto; margin-top:.125em; }
.px-m-appbar__iso{ display:block; color:var(--px-m-verde-900); }
.px-m-appbar__txt{ flex:1 1 auto; min-width:0; }
.px-m-appbar__titulo{
  font-size:1.25em; font-weight:600; line-height:1.2; letter-spacing:-.02em;
  color:var(--px-m-verde-900); margin:0;
}
.px-m-appbar__sub{
  font-size:.8125em; line-height:1.35; color:var(--px-m-gris-texto);
  margin:.25em 0 0; font-weight:400;
}
.px-m-appbar__accion{
  flex:0 0 auto;
  width:2.25em; height:2.25em;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--px-m-linea); border-radius:var(--px-m-r-ui);
  background:var(--px-m-blanco); color:var(--px-m-gris-texto);
}
.px-m-back{
  flex:0 0 auto;
  width:2.25em; height:2.25em; margin-top:-.0625em;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--px-m-linea); border-radius:var(--px-m-r-ui);
  background:var(--px-m-blanco); color:var(--px-m-verde-900);
}

/* Píldora de honestidad — va SIEMPRE en el encabezado */

/* ---------- Cuerpo ---------- */
.px-m-body{
  flex:1 1 auto;
  padding:0 1.25em;
  overflow:hidden;
}

/* ---------- Cifras ---------- */
.px-m-cifra{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  letter-spacing:-.03em; font-weight:600; color:var(--px-m-verde-900);
  white-space:nowrap;
}
.px-m-cifra__peso{ font-size:.55em; font-weight:500; letter-spacing:0; margin-right:.15em; vertical-align:.12em; }

/* ---------- Chips de estado ---------- */
.px-m-chip{
  display:inline-flex; align-items:center;
  font-size:.6875em; font-weight:500; line-height:1; letter-spacing:.01em;
  border-radius:var(--px-m-r-chip); padding:.45em .75em;
  white-space:nowrap;
}
.px-m-chip--pendiente{ color:var(--px-m-gris-texto); border:1px solid var(--px-m-gris-borde); background:transparent; }
.px-m-chip--aprobado{ color:var(--px-m-verde-650); background:var(--px-m-verde-50); }
.px-m-chip--revision{ color:var(--px-m-gris-tinte); background:var(--px-m-verde-50); }

/* ---------- Tarjeta grande del canon (pantalla A) ---------- */
.px-m-canon{
  background:var(--px-m-blanco);
  border:1px solid var(--px-m-linea);
  border-radius:var(--px-m-r-screen);
  padding:1.25em;
}
.px-m-canon__top{ display:flex; align-items:center; justify-content:space-between; gap:.75em; }
.px-m-canon__label{
  font-size:.6875em; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--px-m-gris-texto);
}
.px-m-canon__monto{ font-size:2.375em; line-height:1.05; margin:.35em 0 0; }
.px-m-desglose{ margin-top:.75em; }
.px-m-desglose__fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:1em;
  font-size:.8125em; line-height:1.7; color:var(--px-m-gris-texto);
  margin:0;
}
.px-m-desglose__fila span:last-child{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  letter-spacing:-.02em; white-space:nowrap;
}
.px-m-canon__pie{
  margin-top:1.0625em; padding-top:.9375em;
  border-top:1px solid var(--px-m-linea);
  display:flex; align-items:center; justify-content:space-between; gap:.75em;
}
.px-m-canon__vence{ font-size:.8125em; color:var(--px-m-gris-texto); line-height:1.3; }
.px-m-canon__vence strong{ display:block; font-weight:500; color:var(--px-m-verde-900); margin-top:.15em; }
.px-m-canon__faltan{
  font-size:.8125em; font-weight:500; color:var(--px-m-gris-texto); text-align:right; line-height:1.3;
}

/* ---------- Botones ---------- */
.px-m-btns{ margin-top:1em; display:flex; flex-direction:column; gap:.625em; }
.px-m-btn{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  width:100%; height:3.25em;
  border-radius:var(--px-m-r-ui);
  font-size:1em; font-weight:500; letter-spacing:-.01em; line-height:1;
  text-decoration:none;
}
.px-m-btn--solido{ background:var(--px-m-verde-900); color:var(--px-m-crema); border:1px solid var(--px-m-verde-900); }
.px-m-btn--linea{ background:var(--px-m-blanco); color:var(--px-m-verde-900); border:1px solid var(--px-m-verde-900); }
.px-m-btn svg{ display:block; }

/* ---------- Lista de movimientos ---------- */
.px-m-mov{ margin-top:1.75em; }
.px-m-mov__titulo{
  font-size:.6875em; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--px-m-gris-texto); margin:0 0 .25em;
}
.px-m-mov__lista{ list-style:none; margin:0; padding:0; }
.px-m-mov__item{
  display:flex; align-items:center; justify-content:space-between; gap:.875em;
  padding:.9375em 0;
  border-top:1px solid var(--px-m-linea);
}
.px-m-mov__izq{ min-width:0; }
.px-m-mov__concepto{
  font-size:.875em; font-weight:500; line-height:1.3; color:var(--px-m-verde-900);
  margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.px-m-mov__fecha{ font-size:.75em; line-height:1.3; color:var(--px-m-gris-texto); margin:.1875em 0 0; }
.px-m-mov__der{ display:flex; flex-direction:column; align-items:flex-end; gap:.3125em; flex:0 0 auto; }
.px-m-mov__monto{ font-size:.875em; }

/* ---------- Formulario (pantalla B) ---------- */
.px-m-form{ margin-top:.25em; }
.px-m-campo{ margin-bottom:1.125em; }
.px-m-campo__label{
  display:block;
  font-size:.6875em; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--px-m-gris-texto); margin-bottom:.5em;
}
.px-m-input{
  display:flex; align-items:center; justify-content:space-between; gap:.75em;
  min-height:3.25em; padding:0 1em;
  background:var(--px-m-blanco);
  border:1px solid var(--px-m-linea);
  border-radius:var(--px-m-r-ui);
}
.px-m-input--monto{ min-height:4em; border-color:var(--px-m-verde-900); }
.px-m-input__valor{ font-size:1.75em; line-height:1.1; }
.px-m-input__texto{ font-size:.9375em; font-weight:500; color:var(--px-m-verde-900); line-height:1.2; }
.px-m-input__izq{ display:flex; align-items:center; gap:.625em; min-width:0; }
.px-m-input__izq svg{ display:block; color:var(--px-m-verde-500); flex:0 0 auto; }
.px-m-input svg.px-m-caret{ display:block; color:var(--px-m-gris-borde); flex:0 0 auto; }
.px-m-ayuda-campo{ font-size:.75em; color:var(--px-m-gris-texto); margin:.5em 0 0; line-height:1.4; }

/* ---------- Zona de comprobante ---------- */
.px-m-soporte{
  display:flex; align-items:center; gap:.875em;
  padding:.875em;
  background:var(--px-m-blanco);
  border:1px solid var(--px-m-linea);
  border-radius:var(--px-m-r-card);
}
.px-m-soporte__txt{ flex:1 1 auto; min-width:0; }
.px-m-soporte__nombre{
  font-size:.8125em; font-weight:500; color:var(--px-m-verde-900); margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.px-m-soporte__meta{ font-size:.75em; color:var(--px-m-gris-texto); margin:.1875em 0 0; }
.px-m-soporte__quitar{
  flex:0 0 auto; width:2em; height:2em;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--px-m-linea); border-radius:.5em;
  color:var(--px-m-gris-texto); background:var(--px-m-blanco);
}

/* Miniatura de recibo dibujada en CSS (nada de imágenes externas) */
.px-m-recibo{
  position:relative; flex:0 0 auto;
  width:3.125em; height:4em;
  background:var(--px-m-gris-borde);
  border-radius:.375em .375em 0 0;
  clip-path:polygon(0 0,100% 0,100% 93%,91.6% 100%,83.3% 93%,75% 100%,66.6% 93%,58.3% 100%,50% 93%,41.6% 100%,33.3% 93%,25% 100%,16.6% 93%,8.3% 100%,0 93%);
}
.px-m-recibo__hoja{
  position:absolute; inset:1px;
  background:var(--px-m-blanco);
  border-radius:.3125em .3125em 0 0;
  clip-path:polygon(0 0,100% 0,100% 93%,91.6% 100%,83.3% 93%,75% 100%,66.6% 93%,58.3% 100%,50% 93%,41.6% 100%,33.3% 93%,25% 100%,16.6% 93%,8.3% 100%,0 93%);
  padding:.5em .4375em;
  display:flex; flex-direction:column; gap:.25em;
}
.px-m-recibo__linea{ height:.125em; border-radius:1px; background:var(--px-m-gris-borde); }
.px-m-recibo__linea--titulo{ height:.1875em; width:80%; background:var(--px-m-verde-900); }
.px-m-recibo__linea--corta{ width:55%; }
.px-m-recibo__linea--total{ width:65%; background:var(--px-m-verde-300); height:.1875em; margin-top:.125em; }

/* ---------- Nota de ayuda ---------- */
.px-m-nota{
  display:flex; align-items:flex-start; gap:.625em;
  margin-top:.875em; padding:.875em 1em;
  background:var(--px-m-verde-50);
  border-radius:var(--px-m-r-card);
}
.px-m-nota svg{ display:block; flex:0 0 auto; color:var(--px-m-verde-600); margin-top:.0625em; }
.px-m-nota p{ margin:0; font-size:.75em; line-height:1.5; color:var(--px-m-gris-texto); }
.px-m-nota strong{ font-weight:500; color:var(--px-m-verde-900); }

/* ---------- Barra inferior del teléfono ---------- */
.px-m-home{
  flex:0 0 auto;
  height:1.75em;
  display:flex; align-items:center; justify-content:center;
}
.px-m-home__barra{
  width:8.375em; height:.3125em; border-radius:999px;
  background:var(--px-m-gris-borde);
}

/* ---------- Movimiento: nada se mueve ---------- */
@media (prefers-reduced-motion:reduce){
  .px-m-pantalla-a *, .px-m-pantalla-b *{ animation:none!important; transition-duration:.01ms!important; }
}


/* ==========================================================================
   C) Marcos de dispositivo y badges
   ========================================================================== */

/* ==========================================================================
   TOKENS LOCALES
   Todos con fallback: el fragmento funciona solo, y si la landing ya define
   los tokens globales, los hereda sin tocar nada.
   ========================================================================== */
.px-dev, .px-badge, .px-badge-fila, .px-dev-demo{
  --px-verde-900:  var(--verde-900,  #123A2C);
  --px-verde-600:  var(--verde-600,  #2F7D55);
  --px-verde-300:  var(--verde-300,  #8ECFA6);
  --px-crema:      var(--crema,      #F4F7F5);
  --px-linea:      var(--linea,      #DFE5E1);
  --px-gris-texto: var(--gris-texto, #6F6E6B);
  --px-gris-borde: var(--gris-borde, #BFBBB8);

  /* Grises del hardware. Nunca se usan fuera de los marcos. */
  --px-bisel:       #1a1d1c;
  --px-bisel-canto: #2b302e;
  --px-bisel-hueco: #0a0c0b;
}

/* ==========================================================================
   A) MARCOS DE DISPOSITIVO
   --------------------------------------------------------------------------
   COMO SE USA (los cuatro marcos comparten la misma anatomia):

     <div class="px-dev px-dev-monitor">
       <div class="px-dev-marco">
         <div class="px-dev-pantalla">
           <div class="px-dev-lienzo">
             ... AQUI VA EL FRAGMENTO DE UI, maquetado a 1200 x 750 px reales ...
           </div>
         </div>
       </div>
       <div class="px-dev-monitor__pie"  aria-hidden="true"></div>
       <div class="px-dev-monitor__base" aria-hidden="true"></div>
     </div>

   El lienzo se maqueta SIEMPRE en pixeles de diseno (como si fuera pantalla
   completa) y el marco lo encoge solo.

   VARIABLES QUE AJUSTAN LA ESCALA
   -------------------------------
   --px-dev-diseno-ancho : ancho real del fragmento de UI, con unidad (1200px)
   --px-dev-diseno-alto  : alto  real del fragmento de UI, con unidad (750px)
   --px-dev-ratio        : la misma proporcion, sin unidades (16/10, 3/4, 9/19.5)
   --px-dev-escala       : OPCIONAL y manda sobre todo lo demas. Un numero sin
                           unidad (ej. --px-dev-escala:.5 dibuja a la mitad).
                           Si NO la defines, el marco calcula la escala solo con
                           container queries y el lienzo calza exacto en el ancho
                           de la pantalla, a cualquier tamano del marco.
   --px-dev-bisel        : grosor del bisel. Cada marco trae un clamp sensato.
   --px-dev-radio        : radio exterior del marco.
   --px-dev-reflejo      : 0 apaga el reflejo diagonal. Por defecto 1.
   --px-dev-safe-top     : SOLO EN CELULAR. Alto que ocupa la isla dinamica, en
                           px de diseno (54px). Usalo como padding-top del
                           fragmento para que la isla no le tape el encabezado.

   ANCHO DEL MARCO: ocupa el 100 % de su contenedor. Contrólalo desde afuera
   con max-width o con la reja; nunca con un width fijo adentro.
   ========================================================================== */

.px-dev{
  --px-dev-radio: 14px;
  --px-dev-bisel: clamp(6px, .9vw, 12px);
  --px-dev-reflejo: 1;
  --px-dev-ratio: 16/10;
  --px-dev-diseno-ancho: 1200px;
  --px-dev-diseno-alto: 750px;

  position: relative;
  display: block;
  width: 100%;
}

/* El bisel. Es el unico sitio de toda la pagina con sombra, y es interior:
   simula el hueco fisico del cristal, no una tarjeta flotando. */
.px-dev-marco{
  position: relative;
  background: var(--px-bisel);
  border-radius: var(--px-dev-radio);
  padding: var(--px-dev-bisel);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* La pantalla: recorta el contenido y es el contenedor de consulta que permite
   calcular la escala sin una sola media query. */
.px-dev-pantalla{
  position: relative;
  overflow: hidden;
  background: #fff;
  aspect-ratio: var(--px-dev-ratio);
  border-radius: calc(var(--px-dev-radio) - var(--px-dev-bisel));
  container-type: inline-size;
}

/* El lienzo: dimensiones de diseno fijas, encogidas por transform.
   transform-origin en la esquina superior izquierda para que el recorte
   coincida exactamente con el borde de la pantalla. */
.px-dev-lienzo{
  width: var(--px-dev-diseno-ancho);
  height: var(--px-dev-diseno-alto);
  transform: scale(var(--px-dev-escala, var(--px-dev-escala-auto, 1)));
  transform-origin: top left;
  background: #fff;
}

/* Auto-escala. tan(atan2(a, b)) es la forma estandar de dividir dos longitudes
   y obtener un numero sin unidad. Va dentro de @supports: en un navegador viejo
   simplemente se usa --px-dev-escala (o 1) y no se rompe nada. */
/* OJO: la prueba va contra `scale`, no contra `width`.
   tan(atan2(a,b)) devuelve un NUMERO, y `width: <numero>` es invalido incluso en
   navegadores que si soportan las funciones: con `width` el @supports daba siempre
   falso y el lienzo se quedaba a escala 1, mostrando solo la esquina de la maqueta. */
@supports (scale: tan(atan2(1px, 1px))){
  .px-dev-lienzo{
    --px-dev-escala-auto: tan(atan2(100cqw, var(--px-dev-diseno-ancho)));
  }
}

/* Reflejo diagonal. Muy sutil a proposito: sobre una UI blanca casi no se ve,
   y esa es la idea, insinuar cristal sin ensuciar el contenido. */
.px-dev-pantalla::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: var(--px-dev-reflejo);
  background: linear-gradient(112deg,
              rgba(255,255,255,.16) 0%,
              rgba(255,255,255,.05) 15%,
              rgba(255,255,255,0)   33%,
              rgba(255,255,255,0)   100%);
}

/* --------------------------------------------------------------------------
   A.1 MONITOR DE ESCRITORIO  ·  .px-dev-monitor
   Lienzo de referencia: 1200 x 750 (16/10).
   Bisel delgado, pie trapezoidal y base. Sin logotipo en el marco.
   Requiere los dos hijos finales: __pie y __base.
   -------------------------------------------------------------------------- */
.px-dev-monitor{
  --px-dev-ratio: 16/10;
  --px-dev-diseno-ancho: 1200px;
  --px-dev-diseno-alto: 750px;
  --px-dev-radio: 14px;
  --px-dev-bisel: clamp(6px, .85vw, 11px);
}
.px-dev-monitor .px-dev-marco{ padding-bottom: calc(var(--px-dev-bisel) * 1.6); }

.px-dev-monitor__pie{
  width: clamp(56px, 7%, 96px);
  height: clamp(18px, 2.4vw, 30px);
  margin: 0 auto;
  background: var(--px-bisel-canto);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
.px-dev-monitor__base{
  width: clamp(130px, 19%, 230px);
  height: 9px;
  margin: 0 auto;
  border-radius: 0 0 8px 8px;
  background: var(--px-bisel-canto);
}

/* --------------------------------------------------------------------------
   A.2 PORTATIL  ·  .px-dev-laptop
   Lienzo de referencia: 1280 x 800 (16/10).
   Bisel con muesca de camara arriba, barbilla abajo, y base trapezoidal con
   la lengueta del touchpad al frente. Requiere el hijo final __base.
   -------------------------------------------------------------------------- */
.px-dev-laptop{
  --px-dev-ratio: 16/10;
  --px-dev-diseno-ancho: 1280px;
  --px-dev-diseno-alto: 800px;
  --px-dev-radio: 12px;
  --px-dev-bisel: clamp(8px, .8vw, 11px);
}
.px-dev-laptop .px-dev-marco{
  padding-bottom: calc(var(--px-dev-bisel) * 2.1);
  border-radius: var(--px-dev-radio) var(--px-dev-radio) 5px 5px;
}
/* Muesca de camara: un punto, no un agujero negro. */
.px-dev-laptop .px-dev-marco::before{
  content: "";
  position: absolute;
  top: calc(var(--px-dev-bisel) / 2 - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3d4341;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}
.px-dev-laptop__base{
  position: relative;
  width: 112%;
  margin-inline: -6%;
  height: 13px;
  background: var(--px-bisel-canto);
  clip-path: polygon(0 0, 100% 0, 97.6% 100%, 2.4% 100%);
}
/* Lengueta del touchpad: la muesca del borde frontal. */
.px-dev-laptop__base::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 15%;
  height: 5px;
  border-radius: 0 0 7px 7px;
  background: var(--px-bisel-canto);
}

/* --------------------------------------------------------------------------
   A.3 TABLETA  ·  .px-dev-tablet
   Lienzo de referencia vertical: 768 x 1024 (3/4).
   Bisel uniforme por los cuatro lados y esquinas muy redondeadas.
   Variante horizontal: anade .px-dev-tablet--horizontal y maqueta a 1024 x 768.
   -------------------------------------------------------------------------- */
.px-dev-tablet{
  --px-dev-ratio: 3/4;
  --px-dev-diseno-ancho: 768px;
  --px-dev-diseno-alto: 1024px;
  --px-dev-radio: 26px;
  --px-dev-bisel: clamp(9px, 1.6vw, 15px);
}
.px-dev-tablet--horizontal{
  --px-dev-ratio: 4/3;
  --px-dev-diseno-ancho: 1024px;
  --px-dev-diseno-alto: 768px;
}
/* Camara frontal centrada en el bisel superior. */
.px-dev-tablet .px-dev-marco::before{
  content: "";
  position: absolute;
  top: calc(var(--px-dev-bisel) / 2 - 1.5px);
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #3d4341;
}

/* --------------------------------------------------------------------------
   A.4 CELULAR  ·  .px-dev-celular
   Lienzo de referencia: 390 x 844 (9/19.5).
   Isla dinamica, botones laterales y 44 px de radio exterior.
   Requiere dos hijos: __isla (dentro del marco) y __marco-botones (fuera).
   Deja padding-top: 54px en el fragmento para librar la isla.
   -------------------------------------------------------------------------- */
.px-dev-celular{
  --px-dev-ratio: 9/19.5;
  --px-dev-diseno-ancho: 390px;
  --px-dev-diseno-alto: 844px;
  --px-dev-radio: 44px;
  --px-dev-bisel: clamp(7px, 2.6%, 11px);
  --px-dev-safe-top: 54px;
}
/* Isla dinamica. Va por encima del reflejo. */
.px-dev-celular__isla{
  position: absolute;
  z-index: 5;
  top: calc(var(--px-dev-bisel) + 2.1%);
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  max-width: 104px;
  aspect-ratio: 100/27;
  border-radius: 999px;
  background: var(--px-bisel-hueco);
  pointer-events: none;
}
/* Botones laterales: silencio y volumen a la izquierda, encendido a la derecha. */
.px-dev-celular__marco-botones{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.px-dev-celular__marco-botones::before,
.px-dev-celular__marco-botones::after{
  content: "";
  position: absolute;
  width: 3px;
  background: var(--px-bisel-canto);
  border-radius: 2px;
}
.px-dev-celular__marco-botones::before{ left: -3px;  top: 20%; height: 13%; }
.px-dev-celular__marco-botones::after{  right: -3px; top: 26%; height: 11%; }

/* --------------------------------------------------------------------------
   A.5 RESPONSIVE DE LOS MARCOS
   No hacen falta media queries por elemento: el marco es fluido y la escala se
   recalcula sola. Estos topes son higiene, para que un marco no se estire mas
   de lo razonable dentro de una reja ancha, y para afinar remates en celular.
   -------------------------------------------------------------------------- */
.px-dev-tablet { max-width: 420px; }
.px-dev-celular{ max-width: 300px; }

@media (max-width: 600px){
  .px-dev-monitor{ --px-dev-bisel: 6px; --px-dev-radio: 11px; }
  .px-dev-laptop { --px-dev-bisel: 7px; --px-dev-radio: 10px; }
  .px-dev-tablet { --px-dev-bisel: 8px; --px-dev-radio: 20px; }
  .px-dev-celular{ --px-dev-bisel: 6px; --px-dev-radio: 34px; }
}

/* Contenedor de ayuda por si se ponen varios marcos en fila. */
.px-dev-fila{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 40px);
}


/* ==========================================================================
   B) BADGES DE TIENDA Y DE NAVEGADOR
   --------------------------------------------------------------------------
   Tres piezas, un solo lenguaje visual:
     .px-badge--navegador  -> <a> real a app.propiex.co. Es el protagonista.
     .px-badge--tienda     -> <span>, nunca <a>. Siempre con .px-badge--pronto.

   El estado "Pronto" se lee tres veces: en la pildora sobre la esquina, en el
   aria-label y en el texto para lector de pantalla. Cero promesa de descarga.
   ========================================================================== */

.px-badge-fila{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  /* La pildora "Pronto" sobresale 10 px por encima del badge: este colchon
     evita que la recorte un contenedor con overflow. */
  padding-top: 12px;
}
.px-badge-fila__nota{
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--px-gris-texto);
}
.px-badge-fila--sobre-oscuro .px-badge-fila__nota{ color: rgba(244,247,245,.66); }

.px-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 178px;
  padding: 10px 20px 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0E1211;
  color: #fff;
  font-family: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 160ms cubic-bezier(.22,.61,.36,1),
              border-color   160ms cubic-bezier(.22,.61,.36,1);
}
.px-badge__icono{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: block;
}
.px-badge__texto{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.px-badge__linea1{
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .06em;
  opacity: .78;
}
.px-badge__linea2{
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  white-space: nowrap;
}
/* Texto solo para lector de pantalla, prefijado para no chocar con la landing. */
.px-badge__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Estado PRONTO -------------------------------------------------------
   Se apaga el contenido, NO la pildora: la etiqueta tiene que leerse como
   estado, no como decoracion. El color del icono de Google Play se desatura
   a proposito, para que un badge apagado no se confunda con uno activo. */
.px-badge--pronto{
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  background: #141817;
  border-color: rgba(255,255,255,.10);
}
.px-badge--pronto .px-badge__icono,
.px-badge--pronto .px-badge__texto{
  opacity: .5;
  filter: saturate(0);
}
.px-badge__pronto{
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--px-verde-300);
  color: var(--px-verde-900);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 1;
  filter: none;
}
/* Variante neutra de la pildora, por si al ensamblar el presupuesto de color
   ya esta gastado en esa pantalla: cero verde, misma legibilidad de estado.
   Uso: <span class="px-badge__pronto px-badge__pronto--neutro">Pronto</span> */
.px-badge__pronto--neutro{
  background: var(--px-crema);
  color: var(--px-verde-900);
  box-shadow: inset 0 0 0 1px var(--px-gris-borde);
}
.px-badge--sobre-oscuro .px-badge__pronto--neutro{
  background: transparent;
  color: var(--px-crema);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}

/* --- Badges OFICIALES de tienda ------------------------------------------
   Imagen oficial recortada ("Disponible en App Store" / "Disponible en Google
   Play"). No se le cambia color, opacidad ni proporción: las guías de Apple y
   de Google no permiten alterar el badge. El estado "Pronto" lo lleva la
   píldora, y mientras la app no esté publicada no es un enlace. */
.px-badge-oficial{
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
  cursor: default;
  pointer-events: none;
  user-select: none;
}
.px-badge-oficial__img{
  display: block;
  height: 54px;
  width: auto;
  max-width: none;
}
/* La píldora va por ENCIMA del borde del badge oficial, sin taparle el
   "Disponible en": la pieza de Apple y Google no se cubre. */
.px-badge-oficial .px-badge__pronto{ top: -15px; right: 10px; }

.px-badge-tiendas{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

/* --- Badge activo: navegador --------------------------------------------- */
.px-badge--navegador{
  background: var(--px-verde-900);
  border-color: transparent;
  color: var(--px-crema);
}
.px-badge--navegador:hover{ background: #0D2E23; }
.px-badge--navegador .px-badge__linea1{ opacity: .74; }

.px-badge:focus-visible{
  outline: 2px solid var(--px-verde-600);
  outline-offset: 3px;
}

/* --- Sobre fondo verde oscuro (seccion de cierre) ------------------------ */
.px-badge--sobre-oscuro.px-badge--tienda{
  background: transparent;
  border-color: rgba(255,255,255,.22);
}
.px-badge--sobre-oscuro.px-badge--pronto .px-badge__icono,
.px-badge--sobre-oscuro.px-badge--pronto .px-badge__texto{ opacity: .78; }
.px-badge--sobre-oscuro.px-badge--navegador{
  background: var(--px-crema);
  border-color: transparent;
  color: var(--px-verde-900);
}
.px-badge--sobre-oscuro.px-badge--navegador:hover{ background: #fff; }
.px-badge--sobre-oscuro:focus-visible{
  outline: 2px solid var(--px-verde-300);
  outline-offset: 3px;
}

/* --- Responsive: fila en escritorio, apilados en celular ------------------ */
@media (max-width: 560px){
  .px-badge-fila{ gap: 26px 10px; }
  .px-badge{ width: 100%; min-width: 0; justify-content: flex-start; }
  .px-badge-oficial__img{ height: 46px; }
  .px-badge .px-badge__pronto{ right: 10px; }
}

@media (prefers-reduced-motion: reduce){
  .px-badge{ transition-duration: .01ms; }
}