/* ==========================================================================
   HELPAR · Panel privado — CSS AISLADO
   Este archivo solo lo usan las páginas dentro de /panel-helpar/.
   No se importa desde, ni afecta a, ninguna página pública de la web,
   ni al panel de HELPRO (/panel/), que usa su propio panel.css.
   Adaptación del panel de HELPRO a la identidad visual de HELPAR
   (crema / dorado / taupe), mismas variables que css/helpar-brand.css.
   ========================================================================== */

:root{
  --hp-taupe:#5C5148;
  --hp-taupe2:#463d36;
  --hp-gold:#C99A35;
  --hp-gold2:#dcae55;
  --hp-gold-text:#8a6b22;
  --hp-ink:#3C332C;
  --hp-muted:#8a7f74;
  --hp-bg:#F7EBDD;
  --hp-line:#EEDBC2;
  --hp-card:#FFF9F1;
  --hp-green:#16a34a;
  --hp-red:#c0392b;
  --hp-shadow:0 16px 45px rgba(60,51,44,.12);
  --hp-r:18px;
}

.hpPanel *{box-sizing:border-box}
.hpPanel{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--hp-ink);
  background:var(--hp-bg);
  line-height:1.55;
  display:flex;
  flex-direction:column;
}

/* ---- Cabecera simple del panel ---- */
.hpBar{
  background:var(--hp-taupe);
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.hpBar .hpBarTag{
  color:#fff;
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.85;
}

/* ---- Contenedor centrado ---- */
.hpWrap{
  flex:1;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:36px 18px 60px;
}

/* ---- Logo ---- */
.hpLogoWrap{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}
.hpLogoWrap img{
  width:150px;
  height:auto;
  display:block;
}

/* ---- Tarjeta principal ---- */
.hpCard{
  background:var(--hp-card);
  border:1px solid var(--hp-line);
  border-radius:var(--hp-r);
  padding:34px 30px;
  box-shadow:var(--hp-shadow);
  position:relative;
}
.hpCard:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--hp-r);
  border:1px solid var(--hp-gold);
  opacity:.35;
  pointer-events:none;
}

.hpCard h1{
  margin:0 0 8px;
  font-size:1.5rem;
  font-weight:900;
  color:var(--hp-taupe);
  text-align:center;
}
.hpCard p.hpLead{
  margin:0 0 26px;
  color:var(--hp-muted);
  text-align:center;
  font-size:.92rem;
  line-height:1.6;
}

/* ---- Formularios ---- */
.hpField{margin-bottom:16px}
.hpField label{
  display:block;
  font-size:.82rem;
  font-weight:800;
  color:var(--hp-taupe);
  margin-bottom:6px;
}
.hpField input[type="text"],
.hpField select{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--hp-line);
  border-radius:10px;
  font-size:.92rem;
  font-family:inherit;
  color:var(--hp-ink);
  background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.hpField input:focus,
.hpField select:focus{
  outline:none;
  border-color:var(--hp-gold);
  box-shadow:0 0 0 3px rgba(201,154,53,.20);
}
.hpBtn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--hp-taupe);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:13px 16px;
  font-weight:900;
  font-size:.94rem;
  cursor:pointer;
  font-family:inherit;
  transition:transform .15s ease,background .2s ease;
}
.hpBtn:hover{background:var(--hp-taupe2);transform:translateY(-1px)}
.hpBtn.hpGold{background:var(--hp-gold);color:#fff}
.hpBtn.hpGold:hover{background:var(--hp-gold2)}
.hpBtn.hpOutline{
  background:#fff;
  color:var(--hp-taupe);
  border:1.5px solid var(--hp-gold);
  text-decoration:none;
}
.hpBtn.hpOutline:hover{background:rgba(201,154,53,.10)}
.hpBtn.hpMail{margin-top:10px}
.hpBtn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ---- Alternativa a WhatsApp: videollamada ---- */
.hpVideoBlock{
  margin-top:24px;
  padding-top:20px;
  border-top:1px dashed var(--hp-line);
  text-align:center;
}
.hpVideoLabel{
  margin:0 0 12px;
  font-size:.9rem;
  font-weight:800;
  color:var(--hp-taupe);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.hpVideoLabel i{color:var(--hp-gold-text)}

.hpMsgOk{
  display:none;
  margin-top:14px;
  background:#eaf7ee;
  border:1px solid #bfe6c9;
  color:var(--hp-green);
  border-radius:10px;
  padding:10px 13px;
  font-size:.85rem;
  font-weight:700;
  text-align:center;
}
.hpMsgOk.show{display:block}

/* ---- Radios "¿Qué necesitas?" ---- */
.hpRadioGroup{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.hpRadioGroup label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  font-weight:600;
  color:var(--hp-ink);
  border:1px solid var(--hp-line);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.hpRadioGroup label:hover{border-color:var(--hp-gold)}
.hpRadioGroup input{margin-top:3px;accent-color:var(--hp-gold-text)}
.hpRadioGroup input:checked + span{color:var(--hp-taupe);font-weight:800}
.hpRadioGroup label:has(input:checked){
  border-color:var(--hp-gold);
  background:rgba(201,154,53,.10);
}

@media(max-width:600px){
  .hpCard{padding:26px 18px}
  .hpWrap{padding:24px 14px 48px}
}
.hpMsgErr{
  display:none;
  margin-top:14px;
  background:#fdecea;
  border:1px solid #f5c2bd;
  color:#a12a1f;
  border-radius:10px;
  padding:10px 13px;
  font-size:.85rem;
  font-weight:700;
  text-align:center;
}
.hpMsgErr.show{display:block}

/* ---- Selector de idioma (mismo aspecto que el de la web) ---- */
.langSwitch{display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:3px}
.langBtn{text-decoration:none;display:inline-block;font-family:inherit;background:transparent;border:0;color:#d8d6cf;font-weight:900;font-size:.76rem;letter-spacing:.03em;padding:5px 10px;border-radius:16px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.langBtn:hover,.langBtn:focus-visible{color:#fff;background:rgba(255,255,255,.16);transform:translateY(-1px)}
.langBtn.active{background:var(--hp-gold);color:#fff}
.langBtn.active:hover,.langBtn.active:focus-visible{background:var(--hp-gold);color:#fff}
@media (max-width:420px){.hpBar{padding:10px 14px}.hpBar .hpBarTag{font-size:.7rem}}