/* =====================================================================
   TuMicroneedling v2.0 — Estilos del flujo de profesionales
   (registro, acceso, panel). Usa las variables de marca si existen en
   variables.css; incluye fallbacks por si se carga de forma aislada.
   ===================================================================== */
:root {
  --tmn-teal:      #14A08C;
  --tmn-teal-osc:  #0D6B5E;
  --tmn-salmon:    #DCB4A0;
  --tmn-crema:     #FAF7F2;
  --tmn-negro:     #0F0C08;
}

/* El atributo hidden debe ganar siempre (si no, display:flex lo anula) */
[hidden] { display: none !important; }

.reg-wrap {
  min-height: 60vh;
  display: flex;
  justify-content: center;
  padding: 48px 16px;
  background: var(--tmn-crema);
}

.reg-card {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 10px 40px rgba(15, 12, 8, .08);
}
.reg-card--estrecha { max-width: 460px; }

/* --- Cabecera --- */
.reg-head { margin-bottom: 24px; }
.reg-kicker {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tmn-teal);
  margin-bottom: 8px;
}
.reg-head h1 { margin: 0 0 8px; font-size: 1.55rem; color: var(--tmn-negro); line-height: 1.2; }
.reg-head p  { margin: 0; color: #555; font-size: .98rem; line-height: 1.55; }

/* --- Pasos --- */
.reg-paso {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid #eee;
}
.reg-paso-num {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tmn-teal);
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.reg-paso-body { flex: 1 1 auto; min-width: 0; }

/* --- Buscador + sugerencias --- */
.reg-buscador { position: relative; }
.reg-buscador-ico {
  position: absolute;
  left: 13px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
  color: var(--tmn-teal-osc); opacity: .6; pointer-events: none;
}
.reg-input--search { padding-left: 38px; }
.reg-buscador-spin {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(20,160,140,.25); border-top-color: var(--tmn-teal);
  animation: reg-spin .7s linear infinite;
}
@keyframes reg-spin { to { transform: translateY(-50%) rotate(360deg); } }
.reg-sugerencias {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  position: absolute;
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 12, 8, .12);
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.reg-sugerencias li {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .92rem;
  color: var(--tmn-negro);
}
.reg-sugerencias li:hover { background: var(--tmn-crema); }

/* --- Estado de verificación --- */
.reg-verif {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.4;
}
.reg-verif--cargando { background: #f2f2f2; color: #555; }
.reg-verif--ok       { background: rgba(20,160,140,.10); color: var(--tmn-teal-osc); border: 1px solid rgba(20,160,140,.30); }
.reg-verif--ko       { background: rgba(220,120,90,.10); color: #a4552f; border: 1px solid rgba(220,120,90,.30); }
.reg-verif--ok       { display: flex; flex-direction: column; gap: 5px; }
.reg-verif-l1        { font-size: .96rem; }
.reg-verif-l2        { font-size: .86rem; color: #4a7a70; line-height: 1.45; }

/* --- Resumen verificado dentro del form --- */
.reg-verificado {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--tmn-crema);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.reg-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--tmn-teal);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.reg-verificado strong { font-size: 1.02rem; color: var(--tmn-negro); }
.reg-dir { font-size: .84rem; color: #777; }

/* --- Campos --- */
.reg-label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--tmn-negro);
  margin: 14px 0 6px;
}
.reg-req { color: #c0562f; }
.reg-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--tmn-negro);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.reg-input:focus {
  outline: none;
  border-color: var(--tmn-teal);
  box-shadow: 0 0 0 3px rgba(20,160,140,.15);
}
textarea.reg-input { resize: vertical; }
.reg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .reg-grid2 { grid-template-columns: 1fr; } }

.reg-check-line {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 18px 0 8px;
  font-size: .86rem; color: #555; line-height: 1.4;
}
.reg-check-line input { margin-top: 3px; }

.reg-hint { font-size: .82rem; color: #888; margin: 8px 0 0; }

/* --- Botones --- */
.reg-btn {
  display: block;
  box-sizing: border-box;
  margin-top: 20px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--tmn-teal);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
/* Cuando el botón es un <a>, evitar que los estilos globales de enlace cambien el color */
.reg-btn,
.reg-btn:hover,
.reg-btn:focus,
.reg-btn:visited { color: #fff; text-decoration: none; }
.reg-btn:hover  { background: var(--tmn-teal-osc); }
.reg-btn:active { transform: translateY(1px); }

.reg-btn-sec {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #ddd;
  color: var(--tmn-negro);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}
.reg-btn-sec:hover { border-color: var(--tmn-teal); color: var(--tmn-teal-osc); }

/* --- Mensajes --- */
.reg-errores {
  background: rgba(200, 60, 40, .07);
  border: 1px solid rgba(200, 60, 40, .25);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.reg-errores p { margin: 4px 0; color: #a03018; font-size: .9rem; }
.reg-ok {
  background: rgba(20,160,140,.08);
  border: 1px solid rgba(20,160,140,.28);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.reg-ok p { margin: 0; color: var(--tmn-teal-osc); font-size: .92rem; }
.reg-aviso { color: #a4552f; font-size: .86rem; margin: 8px 0 0; }

.reg-login-link { margin-top: 22px; text-align: center; font-size: .9rem; color: #666; }
.reg-login-link a { color: var(--tmn-teal-osc); font-weight: 600; }

/* --- Éxito --- */
.reg-exito { text-align: center; padding: 12px 0; }
.reg-check {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--tmn-teal);
  color: #fff; font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
}
.reg-exito h1 { font-size: 1.4rem; margin: 0 0 8px; color: var(--tmn-negro); }
.reg-exito p  { color: #555; line-height: 1.55; margin: 0 auto 14px; max-width: 420px; }

/* =====================  Panel  ===================== */
.panel-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 20px;
}
.estado-badge {
  display: inline-block; font-size: .75rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px;
}
.estado-teal  { background: rgba(20,160,140,.15); color: var(--tmn-teal-osc); }
.estado-verde { background: rgba(40,160,80,.15);  color: #1f7a3d; }
.estado-gris  { background: #ececec; color: #666; }
.estado-rojo  { background: rgba(200,60,40,.12);  color: #a03018; }

.panel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 8px 0 18px;
}
@media (max-width: 520px) { .panel-grid { grid-template-columns: 1fr; } }
.panel-dato {
  background: var(--tmn-crema);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.panel-dato span   { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #999; }
.panel-dato strong { font-size: 1.15rem; color: var(--tmn-negro); }
.panel-dato small  { color: #888; }
.panel-h2 { font-size: 1.05rem; margin: 22px 0 4px; color: var(--tmn-negro); border-top: 1px solid #eee; padding-top: 20px; }

/* =====================  Paso 0 — Comprobación de zona  ===================== */
.reg-cp-row { display: flex; gap: 10px; align-items: stretch; }
.reg-cp-row .reg-input { flex: 1 1 auto; }
.reg-btn--inline { margin-top: 0; width: auto; white-space: nowrap; padding: 12px 20px; }
@media (max-width: 460px) {
  .reg-cp-row { flex-direction: column; }
  .reg-btn--inline { width: 100%; }
}

.reg-zona {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: .95rem;
  line-height: 1.5;
}
.reg-zona p { margin: 0 0 4px; }
.reg-zona .reg-btn { width: 100%; margin-top: 14px; }
.reg-zona--cargando { background: #f2f2f2; color: #555; }
.reg-zona--ok {
  background: rgba(20,160,140,.10);
  border: 1px solid rgba(20,160,140,.30);
  color: var(--tmn-teal-osc);
}
.reg-zona--espera {
  background: rgba(220,180,160,.18);   /* salmón suave */
  border: 1px solid var(--tmn-salmon);
  color: #8a5a3f;
}
.reg-zona--ko {
  background: rgba(200,60,40,.07);
  border: 1px solid rgba(200,60,40,.25);
  color: #a03018;
}
.reg-espera-inline { display: inline-block; margin-top: 4px; color: #8a5a3f; font-size: .88rem; }

/* ===== Panel v2 ===== */
.panel-top-acc{display:flex;gap:8px;flex-wrap:wrap;}
.plan-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-left:6px;}
.plan-destacado{background:rgba(20,160,140,.15);color:var(--tmn-teal-osc);}
.plan-basico{background:#ececec;color:#666;}

.panel-compl{margin:18px 0 10px;}
.panel-compl-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:.9rem;margin-bottom:6px;}
.panel-compl-top span{color:#999;}
.panel-bar{height:9px;background:#eee;border-radius:999px;overflow:hidden;}
.panel-bar span{display:block;height:100%;background:var(--tmn-teal);border-radius:999px;transition:width .4s;}
.panel-warn{margin:8px 0 0;font-size:.84rem;color:#a4552f;}

.panel-plan-box{border:1px solid #eee;border-radius:16px;padding:20px;background:var(--tmn-crema);}
.panel-plan-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:560px){.panel-plan-cols{grid-template-columns:1fr;}}
.panel-plan-cols h3{margin:0 0 8px;font-size:1rem;}
.panel-plan-actual{font-size:.68rem;font-weight:700;background:var(--tmn-teal);color:#fff;padding:2px 8px;border-radius:999px;margin-left:4px;vertical-align:middle;}
.panel-list{list-style:none;margin:0;padding:0;}
.panel-list li{font-size:.9rem;color:#444;padding:4px 0;}
.panel-list.is-locked li{color:#aaa;}
.panel-cta-form{margin-top:16px;padding-top:16px;border-top:1px solid #e6ded4;}
.panel-cta-form p{margin:0 0 10px;font-size:.95rem;color:#444;}
.panel-cta-activo{margin-top:16px;padding:12px 16px;background:rgba(40,160,80,.12);color:#1f7a3d;border-radius:12px;font-weight:700;font-size:.92rem;}

/* Panel: estadísticas (4 columnas) */
.panel-stats{grid-template-columns:repeat(4,1fr);}
@media(max-width:560px){.panel-stats{grid-template-columns:1fr 1fr;}}

/* Enlaces legales en el checkbox de condiciones */
.reg-check-line a{color:var(--tmn-teal-osc);font-weight:600;text-decoration:underline;}

/* Módulo IA en el panel */
.ia-box{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--tmn-crema);border:1px dashed var(--tmn-salmon);border-radius:14px;
  padding:16px 18px;margin:18px 0 6px;}
.ia-box strong{display:block;font-size:.95rem;}
.ia-box span{display:block;color:#888;font-size:.84rem;margin-top:2px;}
.ia-btn{margin-top:0;width:auto;white-space:nowrap;padding:12px 20px;}
@media(max-width:520px){.ia-btn{width:100%;}}
.char-count{text-align:right;margin-top:4px;color:#aaa;font-size:.78rem;}

/* Panel: fotos antes/después */
.panel-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:14px;}
.panel-foto{position:relative;border-radius:12px;overflow:hidden;border:1px solid #eee;}
.panel-foto img{width:100%;height:120px;object-fit:cover;display:block;}
.panel-foto-del{position:absolute;top:6px;right:6px;background:rgba(200,60,40,.9);color:#fff;
  border:none;border-radius:8px;padding:5px 9px;font-size:.75rem;font-weight:700;cursor:pointer;}
.panel-foto-add .reg-input{padding:9px;}

/* Guardar ficha sticky */
.panel-save-sticky{position:sticky;bottom:12px;z-index:6;box-shadow:0 6px 20px rgba(20,160,140,.35);}

/* Plan destacado con más peso + gancho anual */
.panel-plan-box.is-basico,.panel-plan-box.is-destacado{position:relative;}
.panel-cta-destacado{background:#fff;border:2px solid var(--tmn-teal);border-radius:14px;padding:16px;margin-top:16px;}
.panel-anual{background:var(--tmn-crema);border-radius:10px;padding:10px 12px;font-size:.9rem;color:#6a4a38;margin:10px 0 12px !important;}
.panel-anual strong{color:var(--tmn-teal-osc);}

/* Panel: reseñas */
.panel-resenas{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.panel-resena{position:relative;background:var(--tmn-crema);border-radius:12px;padding:12px 14px;}
.panel-resena-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.panel-stars{color:#e8a72e;font-size:.9rem;}
.panel-resena p{margin:6px 0 0;font-size:.9rem;color:#444;}
.panel-resena-del{position:absolute;top:10px;right:10px;background:none;border:none;color:#a03018;
  font-size:.78rem;font-weight:700;cursor:pointer;text-decoration:underline;}
.panel-resena-add{margin-top:6px;}

/* ===== Panel v2: layout 2 columnas ===== */
.reg-card--panel{max-width:1040px;}
.panel-cols{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start;margin-top:6px;}
.panel-col-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px;}
.panel-side-datos{display:flex;flex-direction:column;gap:10px;}
@media(max-width:820px){
  .panel-cols{grid-template-columns:1fr;}
  .panel-col-side{position:static;}
}
/* En la columna estrecha, el comparativo de planes se apila */
.panel-col-side .panel-plan-cols{grid-template-columns:1fr;gap:14px;}
.panel-col-side .panel-plan-box{padding:16px;}

/* Cabecera del panel: título + acciones bien alineados */
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.panel-top-acc{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.panel-top-acc .reg-btn-sec{padding:9px 14px;font-size:.86rem;white-space:nowrap;}

/* Preview de imagen de cabecera */
.panel-hero-prev{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:8px;
  background:var(--tmn-crema);border-radius:12px;}
.panel-hero-prev img{width:96px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.panel-hero-prev span{font-size:.84rem;color:#888;}

/* PIN de canje (panel lateral) */
.panel-pin{background:var(--tmn-negro);color:#fff;border-radius:16px;padding:18px;text-align:center;}
.panel-pin h3{margin:0 0 10px;font-size:.95rem;color:#fff;}
.panel-pin-code{font-size:2.1rem;font-weight:800;letter-spacing:8px;color:var(--tmn-salmon);
  background:rgba(255,255,255,.06);border-radius:10px;padding:10px;margin-bottom:10px;}
.panel-pin p{font-size:.8rem;color:#c9c2b8;line-height:1.45;margin:0 0 12px;}
.panel-pin p strong{color:#fff;}
.panel-pin-regen{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:9px;
  padding:8px 16px;font-size:.82rem;font-weight:600;cursor:pointer;}
.panel-pin-regen:hover{border-color:var(--tmn-teal);color:var(--tmn-teal);}

/* ===== Banner de venta de exclusividad (panel Básico) ===== */
.panel-upsell{background:linear-gradient(135deg,#0D6B5E 0%,#0a4f45 100%);color:#fff;
  border-radius:18px;padding:26px 28px;margin:0 0 22px;box-shadow:0 14px 40px rgba(13,107,94,.25);}
.panel-upsell-kicker{display:inline-block;color:var(--tmn-salmon);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;}
.panel-upsell h2{color:#fff;font-size:1.5rem;line-height:1.2;margin:0 0 10px;}
.panel-upsell-lead{color:#e3efec;line-height:1.55;margin:0 0 18px;font-size:.96rem;}
.panel-upsell-lead strong{color:#fff;}
.panel-upsell-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;}
@media(max-width:720px){.panel-upsell-cols{grid-template-columns:1fr;gap:18px;}}
.panel-upsell-benes{list-style:none;margin:0;padding:0;}
.panel-upsell-benes li{padding:6px 0 6px 26px;position:relative;color:#f0f7f5;font-size:.92rem;}
.panel-upsell-benes li::before{content:'✓';position:absolute;left:0;color:var(--tmn-salmon);font-weight:800;}
.panel-upsell-benes strong{color:#fff;}
.panel-upsell-side{text-align:center;}
.panel-upsell-ancla{background:rgba(255,255,255,.1);border-radius:12px;padding:14px;
  color:#fff;font-size:.9rem;line-height:1.5;margin:0 0 14px;}
.panel-upsell-ancla strong{color:var(--tmn-salmon);}
.panel-upsell-btn{width:100%;background:#fff;color:var(--tmn-teal-osc);border:none;border-radius:11px;
  padding:14px 18px;font-weight:800;font-size:1rem;cursor:pointer;transition:background .15s;}
.panel-upsell-btn:hover{background:var(--tmn-salmon);color:var(--tmn-negro);}
.panel-upsell-nota{display:block;margin-top:10px;color:#cfe0dc;font-size:.8rem;}

/* Botón "así se vería como aliado" (panel básico) */
.reg-btn-sec--aliado{background:var(--tmn-teal);color:#fff;border-color:var(--tmn-teal);}
.reg-btn-sec--aliado:hover{background:var(--tmn-teal-osc);border-color:var(--tmn-teal-osc);color:#fff;}