/* ============================================================
   COMPONENTE: Selector de asesor de WhatsApp (modal)
   Mobile-first: se muestra como "bottom sheet" (hoja inferior)
   en movil, y como tarjeta centrada en pantallas mas anchas.
   ============================================================ */
.wa-modal-overlay{
  position:fixed;
  inset:0;
  z-index:400;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(15,27,51,.55);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
  padding:0;
}
.wa-modal-overlay[hidden]{ display:none; }
.wa-modal-overlay.is-open{ opacity:1; pointer-events:auto; }

@media (min-width:640px){
  .wa-modal-overlay{ align-items:center; padding:20px; }
}

.wa-modal{
  width:100%;
  max-width:440px;
  background:var(--paper);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:14px 22px 26px;
  position:relative;
  box-shadow:var(--shadow-md);
  transform:translateY(100%);
  transition:transform .3s var(--ease);
  max-height:88vh;
  overflow-y:auto;
}
.wa-modal-overlay.is-open .wa-modal{ transform:translateY(0); }

@media (min-width:640px){
  .wa-modal{
    border-radius:var(--radius-lg);
    padding:26px 26px 28px;
    transform:translateY(16px) scale(.98);
  }
  .wa-modal-overlay.is-open .wa-modal{ transform:translateY(0) scale(1); }
}

.wa-modal-handle{
  display:block;
  width:40px; height:4px;
  border-radius:999px;
  background:var(--line);
  margin:0 auto 14px;
}
@media (min-width:640px){ .wa-modal-handle{ display:none; } }

.wa-modal-close{
  position:absolute;
  top:14px; right:14px;
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  background:var(--bg-alt);
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.wa-modal-close:hover{ background:var(--line); color:var(--text-dark); }

.wa-modal-header{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding-right:30px;
  margin-bottom:20px;
}
.wa-modal-icon{
  flex-shrink:0;
  width:42px; height:42px;
  border-radius:12px;
  background:#e9fbf1;
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
}
.wa-modal-header h2{
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--text-dark);
  margin:0 0 4px;
}
.wa-modal-header p{
  font-size:.86rem;
  color:var(--text-muted);
  margin:0;
  line-height:1.5;
}

.wa-modal-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.wa-advisor-option{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  background:var(--bg-alt);
  border:1.5px solid transparent;
  border-radius:var(--radius-md);
  padding:14px 16px;
  cursor:pointer;
  appearance:none;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.wa-advisor-option:hover{
  border-color:var(--orange);
  background:#fff5f0;
  transform:translateY(-1px);
}

.wa-advisor-avatar{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--navy-deep);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}

.wa-advisor-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.wa-advisor-name{
  font-weight:700;
  font-size:.95rem;
  color:var(--text-dark);
}
.wa-advisor-sub{
  font-size:.78rem;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wa-advisor-arrow{
  flex-shrink:0;
  width:18px; height:18px;
  color:var(--text-muted);
}
.wa-advisor-option:hover .wa-advisor-arrow{ color:var(--orange); }