/* assets/css/pv_home_pro.css */

.fw-black{ font-weight: 900; }
.pv-badge{
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 900;
  letter-spacing: .2px;
}

.pv-card{
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-bs-theme="dark"] .pv-card{
  background: rgba(15,23,42,.30);
  border-color: rgba(255,255,255,.10);
}
.pv-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(2,6,23,.18);
  border-color: rgba(255,255,255,.26);
}

/* barra superior de color */
.pv-accent{
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(99,102,241,1), rgba(34,197,94,1));
}
.pv-accent-success{ background: linear-gradient(90deg, rgba(34,197,94,1), rgba(56,189,248,1)); }
.pv-accent-primary{ background: linear-gradient(90deg, rgba(99,102,241,1), rgba(56,189,248,1)); }

/* animaciones */
@keyframes pvFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.pv-anim{ animation: pvFadeUp .35s ease both; }
.pv-d1{ animation-delay:.02s; }
.pv-d2{ animation-delay:.07s; }
.pv-d3{ animation-delay:.12s; }
.pv-d4{ animation-delay:.17s; }

@media (prefers-reduced-motion: reduce){
  .pv-anim{ animation:none !important; }
  .pv-card{ transition:none !important; }
}

/* Alertas ahora usan Bootstrap .alert (sin CSS extra) */
/* =========================================================
   BLOQUES PRO (COLORIDOS + RESPONSIVOS + CLARO/OSCURO)
   ========================================================= */

.ui-block{
  border-radius: 18px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
  overflow: hidden;
}

/* barra superior con gradiente */
.ui-block .ui-block-top{
  height: 6px;
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(99,102,241,1), rgba(34,197,94,1));
}

/* bloque “información” con brillo */
.ui-block-glow{
  position: relative;
}
.ui-block-glow::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 200px at 20% 0%, rgba(56,189,248,.18), transparent 60%),
              radial-gradient(600px 200px at 80% 0%, rgba(99,102,241,.18), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

/* Alertas: usar Bootstrap .alert (sin CSS extra) */

/* =======================
   Botón gradiente pro
   ======================= */
.ui-btn-gradient{
  border: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  background: linear-gradient(90deg, rgba(56,189,248,1), rgba(99,102,241,1), rgba(34,197,94,1));
  box-shadow: 0 16px 34px rgba(2,6,23,.18);
}
.ui-btn-gradient:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(2,6,23,.22);
}

/* =======================
   Mini-cards de pasos
   ======================= */
.ui-step-card{
  border-radius: 16px;
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.12);
  transition: transform .18s ease;
}
html[data-bs-theme="dark"] .ui-step-card{
  background: rgba(15,23,42,.22);
}
.ui-step-card:hover{ transform: translateY(-3px); }

/* Animación suave */
@keyframes uiFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.ui-anim{ animation: uiFadeUp .35s ease both; }
.ui-d1{ animation-delay:.03s; }
.ui-d2{ animation-delay:.08s; }
.ui-d3{ animation-delay:.13s; }

@media (prefers-reduced-motion: reduce){
  .ui-anim{ animation:none !important; }
  .ui-step-card, .ui-btn-gradient{ transition:none !important; }
}

/* Alertas: usar Bootstrap .alert (sin CSS extra) */

.pv-step-card{
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 14px 16px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  [data-bs-theme="dark"] .pv-step-card{
    background: rgba(33,37,41,.55);
    border-color: rgba(255,255,255,.08);
  }
  .pv-step-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    border-color: rgba(13,110,253,.18);
  }

  .pv-step-icon{
    width:44px;
    height:44px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(13,110,253,.10);
  }
  [data-bs-theme="dark"] .pv-step-icon{
    background: rgba(13,110,253,.20);
  }

  .pv-step-chip{
    font-size:.78rem;
    padding:.18rem .5rem;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.6);
    white-space:nowrap;
  }
  [data-bs-theme="dark"] .pv-step-chip{
    border-color: rgba(255,255,255,.12);
    background: rgba(33,37,41,.35);
  }

  /* mobile: alinear mejor el “PASO” */
  @media (max-width: 576px){
    .pv-timeline-line{ left: 26px; }
    .pv-timeline-item{ column-gap: 12px; }
  }

  /* Animación de alerta: “pop” + “shake” + “glow” suave */
  .ui-err-pop{
    position: relative;
    border-width: 1px;
    animation:
      uiPop .22s ease-out both,
      uiShake .55s ease-in-out .10s both,
      uiGlow 1.25s ease-in-out .15s 3;
  }

  /* Entrada tipo “pop” */
  @keyframes uiPop {
    from { transform: scale(.98); opacity: .0; }
    to   { transform: scale(1);   opacity: 1; }
  }

  /* Sacudida corta */
  @keyframes uiShake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-6px); }
    30%     { transform: translateX(6px); }
    45%     { transform: translateX(-4px); }
    60%     { transform: translateX(4px); }
    75%     { transform: translateX(-2px); }
  }

  /* “Glow” suave (parpadeo elegante, no invasivo) */
  @keyframes uiGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
    50%      { box-shadow: 0 0 0.85rem rgba(220, 53, 69, .25); }
  }

  /* Respeta accesibilidad: si el usuario pide menos animación */
  @media (prefers-reduced-motion: reduce){
    .ui-err-pop{ animation: none; }
  }

  /* Pulso infinito “elegante” */
  .ui-err-pulse{
    animation: uiPulse 1.15s ease-in-out infinite;
  }

  /* Glow + leve escala */
  @keyframes uiPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
    50%      { transform: scale(1.01); box-shadow: 0 0 1.05rem rgba(220, 53, 69, .30); }
  }

  /* Accesibilidad */
  @media (prefers-reduced-motion: reduce){
    .ui-err-pulse{ animation: none; }
  }