/* =========================================================
   PUN CORE — advisor.css
   Asesor PUN v1.0 (categoría Palas). Minimalista, sin iconos
   decorativos ni ilustraciones, animaciones muy discretas.
   ========================================================= */

/* ---------- BLOQUE DE ENTRADA ---------- */
.pun-advisor-intro{
  padding:var(--pun-space-6) var(--pun-space-5);
  margin-bottom:var(--pun-space-5);
  border:1px solid var(--pun-gray-100);
  border-radius:var(--pun-radius-lg);
  text-align:center;
}
.pun-advisor-intro__title{
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 var(--pun-space-3);
}
.pun-advisor-intro__text{
  color:var(--pun-gray-700);
  max-width:520px;
  margin:0 auto var(--pun-space-2);
  font-size:1rem;
}
.pun-advisor-intro__cta{ margin-top:var(--pun-space-4); }

/* PUN UX Review 1 (2026-08-06): sin barra lateral de filtros, el Asesor ya ocupa
   todo el ancho disponible en móvil por construcción; solo se ajusta el padding
   para una lectura cómoda en pantallas estrechas. */
@media (max-width:480px){
  .pun-advisor-intro{ padding:var(--pun-space-5) var(--pun-space-3); }
}

/* ---------- DIALOG ---------- */
.pun-advisor{
  border:none;
  padding:0;
  width:min(640px,92vw);
  max-height:88vh;
  border-radius:var(--pun-radius-lg);
  opacity:0;
  transition:opacity 200ms ease;
}
.pun-advisor.is-open{ opacity:1; }
.pun-advisor::backdrop{
  background:rgba(10,10,10,.55);
}
@media (max-width:640px){
  .pun-advisor{
    width:100vw;
    max-width:none;
    height:100%;
    max-height:none;
    border-radius:0;
  }
}

.pun-advisor__close{
  position:absolute;
  top:var(--pun-space-3);
  right:var(--pun-space-3);
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--pun-gray-300);
  background:var(--pun-white);
  font-size:1.4rem;
  line-height:1;
  color:var(--pun-black);
}
.pun-advisor__close:hover{ background:var(--pun-gray-100); }

.pun-advisor__progress{
  height:3px;
  background:var(--pun-gray-100);
}
.pun-advisor__progress-bar{
  display:block;
  height:100%;
  width:12.5%;
  background:var(--pun-black);
  transition:width 300ms ease;
}

.pun-advisor__form,
.pun-advisor__results{
  padding:var(--pun-space-6) var(--pun-space-5) var(--pun-space-5);
  overflow-y:auto;
}

/* ---------- PREGUNTAS ---------- */
.pun-advisor__step{
  border:none;
  padding:0;
  margin:0 0 var(--pun-space-5);
  min-height:280px;
}
.pun-advisor__question{
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 var(--pun-space-4);
  padding:0;
}
.pun-advisor__options{
  display:flex;
  flex-direction:column;
  gap:var(--pun-space-2);
}
.pun-advisor__option{
  display:flex;
  align-items:center;
  gap:var(--pun-space-3);
  padding:14px var(--pun-space-4);
  border:1px solid var(--pun-gray-300);
  border-radius:var(--pun-radius-md);
  cursor:pointer;
  transition:border-color var(--pun-transition), background var(--pun-transition);
}
.pun-advisor__option:hover{ border-color:var(--pun-black); }
.pun-advisor__option input{ accent-color:var(--pun-black); width:18px; height:18px; flex-shrink:0; }
.pun-advisor__option:has(input:checked){
  border-color:var(--pun-black);
  background:var(--pun-gray-100);
  font-weight:600;
}

.pun-advisor__other{ margin-top:var(--pun-space-4); }
.pun-advisor__other label{ display:block; font-size:0.9rem; margin-bottom:var(--pun-space-2); }
.pun-advisor__other input{
  width:100%;
  padding:12px;
  border:1px solid var(--pun-gray-300);
  border-radius:var(--pun-radius-sm);
}

.pun-advisor__nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--pun-space-3);
  margin-top:var(--pun-space-5);
}
.pun-advisor__back{
  background:none;
  border:none;
  font-weight:600;
  color:var(--pun-gray-700);
  padding:12px 8px;
}
.pun-advisor__back:hover{ color:var(--pun-black); }
.pun-advisor__next{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  border:none;
  font-weight:700;
  background:var(--pun-black);
  color:var(--pun-white);
  transition:opacity var(--pun-transition), transform var(--pun-transition);
}
.pun-advisor__next:hover:not(:disabled){ transform:translateY(-2px); }
.pun-advisor__next:disabled{ opacity:.35; cursor:not-allowed; }

/* ---------- RESULTADOS ---------- */
.pun-advisor__results{ transition:opacity 200ms ease; }
.pun-advisor__results.is-loading{ opacity:.4; }

.pun-advisor__winner{ text-align:center; margin-bottom:var(--pun-space-6); }
.pun-advisor__winner-label{
  font-weight:700;
  letter-spacing:0.02em;
  margin:0 0 var(--pun-space-3);
}
.pun-advisor__winner-card{ max-width:280px; margin-inline:auto; }
.pun-advisor-result__reason{
  max-width:480px;
  margin:var(--pun-space-3) auto 0;
  font-size:0.95rem;
  color:var(--pun-gray-700);
}

.pun-advisor__also-title{
  font-size:1rem;
  font-weight:700;
  text-align:center;
  margin:0 0 var(--pun-space-4);
}
.pun-advisor__others{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--pun-space-3);
}
@media (max-width:780px){ .pun-advisor__others{ grid-template-columns:repeat(2,1fr); } }

.pun-advisor__others .pun-product-card,
.pun-advisor__winner-card .pun-product-card{ height:100%; }
.pun-product-card--winner{
  border:2px solid var(--pun-black);
}

.pun-advisor__all-link{
  text-align:center;
  margin:var(--pun-space-5) 0;
  font-size:0.9rem;
}
.pun-advisor__all-link a{ text-decoration:underline; }

.pun-advisor__save{
  border-top:1px solid var(--pun-gray-100);
  padding-top:var(--pun-space-5);
  text-align:center;
}
.pun-advisor__save-form{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:end;
  gap:var(--pun-space-3);
  margin-top:var(--pun-space-3);
}
.pun-advisor__save-form label{
  display:block;
  text-align:left;
  font-size:0.85rem;
  margin-bottom:6px;
}
.pun-advisor__save-form input{
  padding:12px;
  border:1px solid var(--pun-gray-300);
  border-radius:var(--pun-radius-sm);
  min-width:220px;
}
.pun-advisor__save-note{
  max-width:480px;
  margin:var(--pun-space-3) auto 0;
  font-size:0.8rem;
  color:var(--pun-gray-500);
}

/* ---------- MENSAJES DE ESTADO (éxito/error — nunca se ocultan) ---------- */
.pun-advisor__results-status,
.pun-advisor__save-status{
  text-align:center;
  font-size:0.9rem;
  font-weight:600;
  margin:0 0 var(--pun-space-4);
  color:var(--pun-black);
}
.pun-advisor__save-status{ margin:var(--pun-space-3) 0 0; }
.pun-advisor__results-status.is-error,
.pun-advisor__save-status.is-error{
  color:#b3261e;
}

@media (prefers-reduced-motion: reduce){
  .pun-advisor{ transition:none; }
}