:root {
  /* Paleta basada en el logo de TusLibritos.com — el azul como color base */
  --pe-primary: #3137DC;        /* azul principal (lomo azul del logo) */
  --pe-primary-dark: #1E2299;   /* azul oscuro para hover / header */
  --pe-primary-light: #5B7CFA;  /* azul claro para detalles */
  --pe-cyan: #00B5B3;           /* celeste del logo */
  --pe-accent: #FFB900;         /* naranja/amarillo cálido del logo (CTA) */
  --pe-accent-dark: #E0A100;
  --pe-pink: #FA2498;           /* rosa/magenta del logo */
  --pe-green: #008432;          /* verde del logo (éxito) */
  --pe-purple: #7851A7;         /* morado del logo */
  --pe-bg: #F2F5FF;             /* fondo con tinte azulado suave */
  --pe-text: #1A1F3D;
  --pe-error: #D6336C;
  --pe-radius: 16px;
}

body {
  background: linear-gradient(180deg, #EAF0FF 0%, #F7F9FF 320px, var(--pe-bg) 320px);
  color: var(--pe-text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
}

.pe-header {
  background: linear-gradient(135deg, var(--pe-primary) 0%, var(--pe-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(49, 55, 220, 0.25);
}
.pe-logo-img {
  height: 44px;
  width: auto;
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.pe-header h1 { letter-spacing: 0.2px; }
.pe-header-tag {
  font-size: 0.85rem;
  color: #DCE3FF;
  display: block;
  margin-top: -2px;
}

.pe-main-wrap { max-width: 1100px; }
.pe-main { max-width: 720px; }

/* ---------- Espacios de AdSense ---------- */
/* Contenedor con altura mínima para no producir "salto" de layout (CLS)
   mientras el anuncio carga, y separación generosa respecto a botones
   cercanos para evitar clics accidentales (política de AdSense). */
.pe-ad-slot {
  background: #F7F8FC;
  border: 1px dashed #D7DBEF;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  min-height: 100px;
  overflow: hidden;
}
.pe-ad-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa3c7;
  margin-bottom: 6px;
}
.pe-ads-unit { min-height: 90px; }

.pe-ad-slot-sidebar {
  min-height: 250px;
  top: 90px; /* deja ver el header al hacer scroll */
}
.pe-ad-slot-sidebar .pe-ads-unit { min-height: 600px; }

/* En el paso de resultado dejamos más aire arriba/abajo: el usuario ya
   descargó su PDF, así que el anuncio no compite con ningún botón activo. */
.pe-ad-slot-resultado { margin-top: 28px; margin-bottom: 28px; }

/* En celular no mostramos el anuncio "en línea" del paso de resultado
   pegado al botón "Crear otro Pack": basta con dejar el espaciado ya
   definido arriba; el sidebar ya está oculto por Bootstrap (d-lg-block). */

/* ---------- Pasos ---------- */
.pe-steps ol { gap: 4px; }
.pe-step {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: #9aa3c7;
  transition: color .2s ease;
}
.pe-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E3E8FB;
  color: #8790C4;
  font-weight: 700;
  margin-bottom: 4px;
  transition: all .25s ease;
}
.pe-step.active .pe-step-num {
  background: linear-gradient(135deg, var(--pe-primary), var(--pe-cyan));
  color: #fff;
  box-shadow: 0 0 0 4px rgba(49,55,220,0.15);
  transform: scale(1.08);
}
.pe-step.done .pe-step-num {
  background: var(--pe-green);
  color: #fff;
}
.pe-step.active { color: var(--pe-primary); font-weight: 700; }
.pe-step-label { display: block; }

/* ---------- Panel ---------- */
.pe-panel {
  background: #fff;
  border-radius: var(--pe-radius);
  padding: 28px 22px;
  box-shadow: 0 6px 24px rgba(49, 55, 220, 0.10);
  border: 1px solid #EAEDFB;
}

.pe-titulo {
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--pe-primary-dark);
}
.pe-subtitulo {
  color: #5B6284;
  margin-bottom: 24px;
}

/* ---------- Formulario ---------- */
.pe-label {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
  display: block;
  color: var(--pe-text);
}
.pe-input {
  font-size: 1.15rem;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid #DCE1F7;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pe-input:focus {
  border-color: var(--pe-primary);
  box-shadow: 0 0 0 0.2rem rgba(49,55,220,0.15);
}
.pe-error {
  color: var(--pe-error);
  font-size: 0.95rem;
  margin-top: 6px;
  min-height: 1.2em;
}
.pe-error:not(:empty)::before { content: "⚠️ "; }

/* ---------- Botones grandes ---------- */
.btn {
  font-size: 1.15rem;
  font-weight: 700;
  padding: 16px 20px;
  border-radius: 14px;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active { transform: scale(0.97); }

.pe-btn-principal {
  background: linear-gradient(135deg, var(--pe-primary), var(--pe-primary-dark));
  border-color: var(--pe-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(49,55,220,0.30);
}
.pe-btn-principal:hover,
.pe-btn-principal:focus { background: var(--pe-primary-dark); color: #fff; transform: translateY(-1px); }
.pe-btn-principal:disabled { opacity: 0.5; }

.pe-btn-generar {
  background: linear-gradient(135deg, var(--pe-accent), var(--pe-pink));
  border-color: var(--pe-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(250,36,152,0.30);
}
.pe-btn-generar:hover, .pe-btn-generar:focus { filter: brightness(1.05); color: #fff; transform: translateY(-1px); }

.pe-btn-secundario {
  background: #fff;
  border: 2px solid #C9D1F5;
  color: var(--pe-primary-dark);
}
.pe-btn-secundario:hover { background: #F2F5FF; border-color: var(--pe-primary); }

/* ---------- Tarjetas de diseño ---------- */
.pe-diseno-card {
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: var(--pe-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(49,55,220,0.10);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  height: 100%;
}
.pe-diseno-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(49,55,220,0.20);
}
.pe-diseno-card.selected {
  border-color: var(--pe-primary);
  box-shadow: 0 0 0 4px rgba(49,55,220,0.18);
}
.pe-diseno-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.pe-diseno-card .pe-diseno-nombre {
  text-align: center;
  font-weight: 700;
  padding: 10px 6px;
  color: var(--pe-text);
}
.pe-diseno-card .pe-check {
  display: none;
  color: var(--pe-primary);
  font-size: 1.4rem;
  position: absolute;
  top: 8px;
  right: 12px;
  background: #fff;
  border-radius: 50%;
}
.pe-diseno-card.selected .pe-check { display: block; }
.pe-diseno-wrap { position: relative; }

/* ---------- Vista previa ---------- */
.pe-preview-caption {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--pe-primary-dark);
}
.pe-preview-img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(49,55,220,0.18);
  background: #fff;
  border: 1px solid #EAEDFB;
}
.pe-preview-img-utiles { max-height: 90px; }

/* ---------- Resultado ---------- */
.pe-resumen { font-size: 1.15rem; margin-bottom: 24px; }
.pe-resumen li { margin-bottom: 6px; }
.pe-tip {
  background: #EAF6FF;
  border: 1px solid #BEE3FF;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.98rem;
  text-align: left;
  color: #1A3D66;
}

/* ---------- Spinners con color de marca ---------- */
.spinner-border { color: var(--pe-primary); }

/* ---------- Emojis flotantes / detalles animados ---------- */
.pe-emoji-float {
  display: inline-block;
  animation: pe-float 2.4s ease-in-out infinite;
}
@keyframes pe-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ---------- Móvil ---------- */
@media (max-width: 420px) {
  body { font-size: 17px; }
  .pe-step-label { font-size: 0.7rem; }
  .pe-logo-img { height: 36px; }
}