#ejemplo{
  --pd-oliva:#14A44D;
  --pd-oliva-osc:#0B7A38;
  --pd-crema-claro:#F5FBF1;
  --pd-naranja:#FF6F3C;
  --pd-azul:#2F6FED;
  --pd-turquesa:#00BFA6;
  --pd-texto-osc:#1E2B1E;
  --pd-gris-texto:#6E7568;
  --pd-rojo:#E0393E;
  --pd-card-bg:var(--demo-bg);
  --pd-card-border:var(--demo-border);
}

.ejemplo-grid{
  display:grid;
  grid-template-columns: 1fr 0.86fr;
  gap:64px;
  align-items:center;
}
@media(max-width:900px){
  .ejemplo-grid{ grid-template-columns:1fr; gap:44px; }
}
@media(max-width:520px){
  .ejemplo-grid{ gap:28px; }

  .pd-card{ zoom:.82; }

  .ejemplo-copy .btn{ white-space:normal; text-align:center; line-height:1.3; }
}

.ejemplo-copy{ padding:2px 4px 0 12px; min-width:0; }
.ejemplo-demo{ min-width:0; }
.ejemplo-copy h3{ font-size: clamp(1.5rem,2.6vw,2rem); margin-bottom:18px; }
.ejemplo-copy p{
  color: var(--text-dim);
  font-size:16.5px;
  max-width:480px;
  margin-bottom:26px;
}
.ejemplo-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:30px;
}
.ejemplo-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  color:var(--text-dim);
}
.ejemplo-list li svg{ flex-shrink:0; color:var(--btn-bg); }

.pd-card{
  position:relative;
  max-width:420px;
  margin:0 auto;
  background:var(--pd-card-bg);
  border:1px solid var(--pd-card-border);
  border-radius:28px;
  padding:40px 20px;
  overflow:hidden;

  box-shadow:var(--demo-shadow);
}

@media (min-width:901px) and (max-height:820px){ .pd-card{ zoom:.88; } }
@media (min-width:901px) and (max-height:700px){ .pd-card{ zoom:.78; } }

.pd-blob{
  position:absolute; inset:0; z-index:0;
  background:var(--demo-fondo);
}
.pd-phone-wrap{ position:relative; z-index:1; display:flex; justify-content:center; }

.pd-phone{
  width:260px; height:530px;
  background:#0D0F0C;
  border-radius:40px;
  padding:11px;
  box-shadow:
    0 45px 70px -25px rgba(0,0,0,0.45),
    0 10px 24px -10px rgba(0,0,0,0.32);
}
.pd-phone-screen{
  position:relative; width:100%; height:100%;
  background:var(--pd-crema-claro);
  border-radius:30px;
  overflow:hidden;
  font-family:'Poppins', -apple-system, sans-serif;
}

.pd-app-scroll{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  touch-action:none;
  pointer-events:none;
}
.pd-app-scroll::-webkit-scrollbar{ display:none; }

.pd-app-header{
  background:var(--pd-oliva);
  padding:32px 18px 24px;
  border-radius:0 0 20px 20px;
  color:#fff;
  opacity:0; transform:translateY(-10px);
  transition:opacity .5s ease, transform .5s ease;
}
.pd-app-header.show{ opacity:1; transform:translateY(0); }
.pd-app-header .pd-saludo{ font-size:14px; font-weight:600; }
.pd-app-header .pd-fecha{ font-size:11px; opacity:.85; margin-top:2px; text-transform:capitalize; }

.pd-app-body{ padding:15px 15px 28px; }

.pd-mini-card{
  background:#fff;
  border-radius:13px;
  box-shadow:0 2px 10px rgba(20,164,77,0.10);
}

.pd-ganancia-card{
  padding:15px;
  margin-bottom:17px;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
}
.pd-ganancia-card.show{ opacity:1; transform:translateY(0); }
.pd-ganancia-label{ font-size:10.5px; color:var(--pd-gris-texto); font-weight:500; }
.pd-ganancia-monto{ font-size:21px; font-weight:700; color:var(--pd-oliva-osc); margin-top:2px; }
.pd-ganancia-comp{ font-size:10px; color:var(--pd-oliva); font-weight:600; margin-top:4px; }

.pd-section-label{
  font-size:11.5px; font-weight:700; color:var(--pd-texto-osc);
  margin:0 0 9px 2px;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.pd-section-label.show{ opacity:1; transform:translateY(0); }

.pd-accesos{ display:flex; gap:9px; margin-bottom:19px; }
.pd-acceso{
  flex:1; text-align:center;
  opacity:0; transform:scale(.7);
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.pd-acceso.show{ opacity:1; transform:scale(1); }
.pd-acceso-icono{
  width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 5px;
}
.pd-acceso-icono svg{ width:17px; height:17px; }
.pd-acceso-txt{ font-size:8px; color:var(--pd-gris-texto); font-weight:500; line-height:1.2; }

.pd-resumen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:19px; }
.pd-resumen-card{
  padding:11px;
  opacity:0; transform:translateY(12px);
  transition:opacity .4s ease, transform .4s ease;
}
.pd-resumen-card.show{ opacity:1; transform:translateY(0); }
.pd-resumen-icono{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:7px;
}
.pd-resumen-icono svg{ width:14px; height:14px; }
.pd-resumen-valor{ font-size:15px; font-weight:700; }
.pd-resumen-titulo{ font-size:9px; color:var(--pd-gris-texto); margin-top:1px; }

.pd-stock-header{
  display:flex; align-items:center; gap:6px; margin:0 0 9px 2px;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.pd-stock-header.show{ opacity:1; transform:translateY(0); }
.pd-stock-header svg{ width:13px; height:13px; }
.pd-stock-header span{ font-size:11.5px; font-weight:700; color:var(--pd-rojo); }

.pd-stock-item{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; margin-bottom:7px;
  opacity:0; transform:translateX(16px);
  transition:opacity .4s ease, transform .4s ease;
}
.pd-stock-item.show{ opacity:1; transform:translateX(0); }
.pd-stock-icono{
  width:34px; height:34px; border-radius:9px;
  background:rgba(224,57,62,0.13);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
.pd-stock-icono img{ width:100%; height:100%; object-fit:cover; }
.pd-stock-icono svg{ width:13px; height:13px; }
.pd-stock-info{ flex:1; min-width:0; }
.pd-stock-nombre{ font-size:11px; font-weight:600; color:var(--pd-texto-osc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-stock-cat{ font-size:9px; color:var(--pd-gris-texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-stock-cant{ font-size:10.5px; font-weight:700; color:var(--pd-rojo); flex-shrink:0; }

@media (prefers-reduced-motion: reduce){
  .pd-app-header,.pd-ganancia-card,.pd-section-label,.pd-acceso,.pd-resumen-card,.pd-stock-header,.pd-stock-item{
    transition:none !important;
  }
}

.pd-venta-screen{
  position:absolute; inset:0;
  background:var(--pd-crema-claro);
  z-index:30;
  transform:translateX(102%);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.pd-venta-screen.show{ transform:translateX(0); }

.pd-venta-bar{
  background:var(--pd-oliva);
  padding:32px 15px 13px;
  display:flex; align-items:center; gap:9px;
  flex-shrink:0;
}
.pd-venta-bar svg{ width:17px; height:17px; }
.pd-venta-bar span{ color:#fff; font-size:14px; font-weight:600; }

.pd-venta-body{
  padding:17px 15px; flex:1;
  display:flex; flex-direction:column; align-items:center;
}

.pd-venta-total{
  width:100%; background:var(--pd-oliva);
  border-radius:13px; padding:13px 15px;
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; margin-bottom:28px; flex-shrink:0;
}
.pd-venta-total span:first-child{ font-size:11.5px; opacity:.9; }
.pd-venta-total span:last-child{ font-size:17px; font-weight:700; }

.pd-venta-states{ position:relative; width:100%; flex:1; }
.pd-venta-state{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.pd-venta-state.show{ opacity:1; pointer-events:auto; }

.pd-mini-spinner{
  width:19px; height:19px; border-radius:50%;
  border:2.5px solid rgba(20,164,77,0.18);
  border-top-color:var(--pd-oliva);
  animation:pd-spin .8s linear infinite;
}
@keyframes pd-spin{ to{ transform:rotate(360deg); } }

.pd-venta-txt{ font-size:12px; color:var(--pd-gris-texto); margin-top:11px; font-weight:500; }
.pd-venta-txt-strong{ font-size:12.5px; color:var(--pd-texto-osc); font-weight:600; margin-top:11px; }

.pd-qr-box{
  background:#fff; border:1px solid #E7ECE3; border-radius:13px;
  padding:11px; margin-bottom:15px;
}
.pd-qr-grid{ display:grid; grid-template-columns:repeat(13, 6px); grid-template-rows:repeat(13, 6px); }
.pd-qr-cell{ width:6px; height:6px; }
.pd-qr-cell.on{ background:var(--pd-texto-osc); }

.pd-check-circle{
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,164,77,0.15);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:11px;
}
.pd-check-circle svg{ width:28px; height:28px; }

.pd-venta-comprobante{ font-size:10px; color:var(--pd-gris-texto); margin-top:4px; }

.pd-venta-switch-row{
  display:flex; align-items:center; gap:8px; margin-top:18px;
  font-size:10.5px; color:var(--pd-texto-osc); font-weight:500;
}
.pd-switch-pill{ width:28px; height:16px; border-radius:8px; background:var(--pd-oliva); position:relative; flex-shrink:0; }
.pd-switch-pill::after{
  content:''; position:absolute; top:2px; right:2px;
  width:12px; height:12px; border-radius:50%; background:#fff;
}

.pd-venta-btn{
  width:100%; background:var(--pd-oliva); color:#fff;
  border-radius:10px; padding:10px; text-align:center;
  font-size:12px; font-weight:600; margin-top:15px;
}

html[data-theme="dark"] .pd-phone{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 45px 70px -25px rgba(0,0,0,0.7),
    0 10px 24px -10px rgba(0,0,0,0.5);
}