/* ==========================================================================
   HELPRO · Panel privado — CSS AISLADO
   Este archivo solo lo usan las páginas dentro de /panel/.
   No se importa desde, ni afecta a, ninguna página pública de la web.
   Reutiliza la paleta e identidad visual actual de HELPRO (mismas variables
   de color y tipografía que css/home.css) pero como fichero independiente,
   para no tocar ni depender de los CSS globales de la web pública.
   ========================================================================== */

:root{
  --p-navy:#111111;
  --p-navy2:#2a2a2a;
  --p-gold:#c6922a;
  --p-gold2:#d9a94d;
  --p-gold-text:#7a5a1e;
  --p-ink:#111111;
  --p-muted:#666666;
  --p-bg:#f8f7f3;
  --p-line:#e5e3dc;
  --p-white:#ffffff;
  --p-green:#16a34a;
  --p-red:#c0392b;
  --p-shadow:0 16px 45px rgba(17,17,17,.10);
  --p-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(--p-ink);
  background:var(--p-bg);
  line-height:1.55;
  display:flex;
  flex-direction:column;
}

/* ---- Cabecera simple del panel ---- */
.hpBar{
  background:var(--p-navy);
  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(--p-white);
  border:1px solid var(--p-line);
  border-radius:var(--p-r);
  padding:34px 30px;
  box-shadow:var(--p-shadow);
  position:relative;
}
.hpCard:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--p-r);
  border:1px solid var(--p-gold);
  opacity:.35;
  pointer-events:none;
}

.hpCard h1{
  margin:0 0 8px;
  font-size:1.5rem;
  font-weight:900;
  color:var(--p-navy);
  text-align:center;
}
.hpCard p.hpLead{
  margin:0 0 26px;
  color:var(--p-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(--p-navy);
  margin-bottom:6px;
}
.hpField input[type="text"],
.hpField select{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--p-line);
  border-radius:10px;
  font-size:.92rem;
  font-family:inherit;
  color:var(--p-ink);
  background:var(--p-white);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.hpField input:focus,
.hpField select:focus{
  outline:none;
  border-color:var(--p-gold);
  box-shadow:0 0 0 3px rgba(198,146,42,.18);
}
.hpBtn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--p-navy);
  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(--p-navy2);transform:translateY(-1px)}
.hpBtn.hpGold{background:var(--p-gold);color:var(--p-navy)}
.hpBtn.hpGold:hover{background:var(--p-gold2)}
.hpBtn.hpOutline{
  background:var(--p-white);
  color:var(--p-navy);
  border:1.5px solid var(--p-gold);
  text-decoration:none;
}
.hpBtn.hpOutline:hover{background:rgba(198,146,42,.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(--p-line);
  text-align:center;
}
.hpVideoLabel{
  margin:0 0 12px;
  font-size:.9rem;
  font-weight:800;
  color:var(--p-navy);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.hpVideoLabel i{color:var(--p-gold-text)}

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

/* ---- Casillas "¿Qué te interesa mejorar?" (selección múltiple; la clase conserva el nombre antiguo hpRadioGroup) ---- */
.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(--p-ink);
  border:1px solid var(--p-line);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.hpRadioGroup label:hover{border-color:var(--p-gold)}
.hpRadioGroup input{margin-top:3px;accent-color:var(--p-gold-text)}
.hpRadioGroup input[type="checkbox"]{flex:0 0 auto;width:18px;height:18px;margin-top:1px;cursor:pointer}
.hpHint{margin:-2px 0 10px;font-size:.78rem;line-height:1.4;color:var(--p-muted,#6b7280)}
.hpRadioGroup input:checked + span{color:var(--p-navy);font-weight:800}
.hpRadioGroup label:has(input:checked){
  border-color:var(--p-gold);
  background:rgba(198,146,42,.08);
}

@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(--p-gold);color:var(--p-navy)}
.langBtn.active:hover,.langBtn.active:focus-visible{background:var(--p-gold2);color:var(--p-navy)}
@media (max-width:420px){.hpBar{padding:10px 14px}.hpBar .hpBarTag{font-size:.7rem}}