/* ==========================================================================
   MiPdfCraftGratis — DEMO de colocación de anuncios (capa de simulación)
   --------------------------------------------------------------------------
   Todo es visual: no hay red publicitaria real conectada. Sirve para decidir
   DÓNDE van los anuncios y cómo se ve la app con ellos.
   Paleta: tema claro tipo iLovePDF (workspace/design/tema-claro.css).
   ========================================================================== */

:root{
  --demo-fondo:#f3f0f7;
  --demo-panel:#ffffff;
  --demo-borde:#e7e3ef;
  --demo-borde-fuerte:#ddd6e8;
  --demo-titulo:#2b2740;
  --demo-texto:#333333;
  --demo-texto-2:#5f596e;
  --demo-acento:#e5322d;
  --demo-radio:16px;
  --demo-sombra:0 2px 10px rgba(45,35,70,.10),0 18px 40px rgba(45,35,70,.14);
  --demo-alto-top:0px;
  --demo-alto-anchor:0px;
}

.demo-ad,
.demo-hud,
.demo-intersticial{
  font:400 13px/1.45 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color:var(--demo-texto);
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------ slots */
.demo-ad{
  position:fixed;
  z-index:2147482000;
  display:flex;
  flex-direction:column;
  background:var(--demo-panel);
  border:1px solid var(--demo-borde);
  border-radius:var(--demo-radio);
  box-shadow:var(--demo-sombra);
  overflow:hidden;
  transition:opacity .18s ease, transform .18s ease;
}
.demo-ad[hidden]{display:none !important}

.demo-ad__tag{
  position:absolute;top:6px;left:8px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#9a93aa;background:rgba(255,255,255,.92);
  padding:1px 5px;border-radius:5px;pointer-events:none;
}
.demo-ad__close{
  position:absolute;top:4px;right:4px;
  width:20px;height:20px;line-height:1;
  border:0;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.9);color:#8b8499;font-size:14px;
}
.demo-ad__close:hover{background:#f1eef7;color:var(--demo-titulo)}

/* creatividad de ejemplo (rayado diagonal = "aquí va el banner") */
.demo-ad__box{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;margin:8px;padding:10px 14px;text-align:center;
  border:1.5px dashed #cfc7de;border-radius:11px;
  background:
    repeating-linear-gradient(135deg,#faf8fd 0 10px,#f4f1fa 10px 20px);
}
.demo-ad__label{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#a49cb5;
}
.demo-ad__copy{font-size:13.5px;font-weight:600;color:var(--demo-titulo);margin:0;max-width:92%}
.demo-ad__copy--corto{display:none}
.demo-ad__sub{font-size:12px;color:var(--demo-texto-2);margin:0}
.demo-ad__cta{
  display:inline-block;margin-top:2px;padding:6px 14px;border-radius:9px;
  background:var(--demo-acento);color:#fff;text-decoration:none;font-size:12.5px;font-weight:600;
}

/* leaderboard superior */
.demo-ad--leaderboard{
  top:10px;left:50%;transform:translateX(-50%);
  width:min(970px,calc(100vw - 32px));height:90px;
}
.demo-ad--leaderboard .demo-ad__box{flex-direction:row;gap:14px}

/* skyscraper derecho */
.demo-ad--skyscraper{
  top:calc(10px + 100px);right:12px;width:160px;height:600px;
}
.demo-ad--skyscraper .demo-ad__box{writing-mode:horizontal-tb}

/* rectángulo in-app (abajo a la derecha) */
.demo-ad--rectangulo{
  right:16px;bottom:calc(14px + var(--demo-alto-anchor));
  width:336px;height:280px;
}
/* si el skyscraper está activo, el rectángulo se corre a su izquierda */
body.demo-skyscraper .demo-ad--rectangulo{right:186px}

/* anchor inferior */
.demo-ad--anchor{
  left:0;right:0;bottom:0;
  height:90px;border-radius:0;border-left:0;border-right:0;border-bottom:0;
}
.demo-ad--anchor .demo-ad__box{flex-direction:row;gap:14px;margin:8px 16px}

/* --------------------------------------------------- modo "espacio reservado"
   Demuestra la alternativa a flotar encima: encoger el lienzo de la app. */
body.demo-reservado canvas#pdfcraft{
  height:calc(100% - var(--demo-alto-top) - var(--demo-alto-anchor)) !important;
  margin-top:var(--demo-alto-top);
}

/* --------------------------------------------------------------- panel demo */
.demo-hud{position:fixed;left:14px;bottom:calc(14px + var(--demo-alto-anchor));z-index:2147483000}
.demo-hud__btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--demo-borde-fuerte);background:var(--demo-panel);
  color:var(--demo-titulo);font:600 12.5px/1 inherit;box-shadow:var(--demo-sombra);
}
.demo-hud__btn:hover{border-color:#c9bfdb}
.demo-hud__punto{width:7px;height:7px;border-radius:50%;background:var(--demo-acento)}

.demo-hud__panel{
  position:absolute;left:0;bottom:calc(100% + 10px);
  width:318px;max-height:min(70vh,560px);overflow:auto;
  background:var(--demo-panel);border:1px solid var(--demo-borde);
  border-radius:18px;box-shadow:var(--demo-sombra);padding:16px 16px 14px;
}
.demo-hud__panel[hidden]{display:none}
.demo-hud__panel h4{
  margin:0 0 4px;font-size:14px;color:var(--demo-titulo);letter-spacing:-.01em;
}
.demo-hud__lead{margin:0 0 12px;font-size:12px;color:var(--demo-texto-2)}
.demo-hud__grupo{border-top:1px solid var(--demo-borde);padding-top:10px;margin-top:10px}
.demo-hud__grupo:first-of-type{border-top:0;padding-top:0;margin-top:0}
.demo-hud__titulo{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#a49cb5;margin:0 0 7px;
}
.demo-hud label{
  display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:12.8px;cursor:pointer;
}
.demo-hud label input{margin:2px 0 0;accent-color:var(--demo-acento)}
.demo-hud label small{display:block;color:#8b8499;font-size:11.2px;line-height:1.35}
.demo-hud__accion{
  width:100%;margin-top:10px;padding:9px 12px;border-radius:11px;cursor:pointer;
  border:1px solid var(--demo-borde-fuerte);background:#faf8fd;color:var(--demo-titulo);
  font:600 12.5px/1 inherit;
}
.demo-hud__accion:hover{background:#f2eefb;border-color:#c9bfdb}
.demo-hud__nota{
  margin:10px 0 0;font-size:11px;color:#9a93aa;line-height:1.4;
  border-top:1px solid var(--demo-borde);padding-top:9px;
}
.demo-hud__plan{
  display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.demo-hud__plan--gratis{background:#fdeceb;color:#c42a26}
.demo-hud__plan--pro{background:#e8f7ee;color:#0e9f6e}

/* ------------------------------------------------------- anuncio intersticial
   Lo que vería el usuario al pulsar "Descargar": espera forzada + salto. */
.demo-intersticial{
  position:fixed;inset:0;z-index:2147483600;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,24,45,.55);padding:20px;
}
.demo-intersticial[hidden]{display:none}
.demo-intersticial__caja{
  width:min(560px,100%);background:var(--demo-panel);border-radius:22px;
  border:1px solid var(--demo-borde);box-shadow:0 24px 60px rgba(20,14,35,.35);
  padding:18px 18px 16px;position:relative;
}
.demo-intersticial__cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.demo-intersticial__cab h3{margin:0;font-size:15.5px;color:var(--demo-titulo)}
.demo-intersticial__tag{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#9a93aa;
}
.demo-intersticial__lienzo{
  height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1.5px dashed #cfc7de;border-radius:16px;text-align:center;padding:16px;
  background:repeating-linear-gradient(135deg,#faf8fd 0 12px,#f4f1fa 12px 24px);
}
.demo-intersticial__pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;
}
.demo-intersticial__salto{
  padding:9px 16px;border-radius:11px;border:1px solid var(--demo-borde-fuerte);
  background:#fff;color:var(--demo-texto-2);font:600 12.5px/1 inherit;cursor:not-allowed;
}
.demo-intersticial__salto.listo{cursor:pointer;color:var(--demo-titulo);border-color:#c9bfdb;background:#faf8fd}
.demo-intersticial__salto.listo:hover{background:#f2eefb}
.demo-intersticial__nota{font-size:11.5px;color:#8b8499;margin:0}

/* el intersticial sustituye a los demás anuncios (nada de doble impacto) */
body.demo-en-intersticial .demo-ad{display:none !important}

/* ------------------------------------------------------------------ móvil */
@media (max-width:760px){
  .demo-ad--leaderboard{height:56px;width:calc(100vw - 16px);top:6px;left:8px;transform:none}
  .demo-ad--leaderboard .demo-ad__box{flex-direction:row;gap:8px;margin:4px;padding:14px 24px 4px 8px}
  .demo-ad--leaderboard .demo-ad__sub{display:none}
  .demo-ad--leaderboard .demo-ad__copy{display:none}
  .demo-ad--leaderboard .demo-ad__copy--corto{display:block;font-size:12px;max-width:66%}
  .demo-ad--leaderboard .demo-ad__cta{padding:4px 10px;font-size:11px;margin-top:0}
  .demo-ad--leaderboard .demo-ad__label{display:none}
  .demo-ad__tag{font-size:8px;top:3px;left:6px;padding:0 4px}
  .demo-ad--skyscraper{display:none !important}
  .demo-ad--rectangulo{right:8px;bottom:calc(58px + var(--demo-alto-anchor));width:calc(100vw - 16px);height:250px}
  body.demo-skyscraper .demo-ad--rectangulo{right:8px}
  .demo-ad--anchor{height:56px}
  .demo-ad--anchor .demo-ad__box{margin:4px 8px;padding:14px 24px 3px 8px;gap:8px;align-items:center}
  .demo-ad--anchor .demo-ad__sub{display:none}
  .demo-ad--anchor .demo-ad__label{display:none}
  .demo-ad--anchor .demo-ad__copy{display:none}
  .demo-ad--anchor .demo-ad__copy--corto{display:block;font-size:12px;max-width:64%;line-height:1.25}
  .demo-ad--anchor .demo-ad__cta{padding:4px 10px;font-size:11px;margin-top:0}
  .demo-hud{left:8px}
  .demo-hud__panel{width:calc(100vw - 16px)}
}