/* ============================================================
   PEYPO — Formulario del perfil del cuidador (asistente por pasos)
   ============================================================ */

body { background: var(--color-gray-100); }

.setup-page { max-width: 820px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-16); }
.setup-title h1 { font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.setup-title p { color: var(--color-dark-500); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.setup-loading { text-align: center; color: var(--color-dark-300); padding: var(--space-12); }

/* ─── Progreso ─── */
.wiz-steps { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-3); margin-bottom: var(--space-4); }
.wiz-step {
  flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; font-size: 11px; color: var(--color-dark-300); font-weight: var(--weight-semibold);
}
.wiz-step:disabled { cursor: default; }
.wiz-dot {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-gray-200); color: var(--color-dark-500); font-weight: var(--weight-bold); font-size: var(--text-sm);
}
.wiz-step.current .wiz-dot { background: var(--color-primary); color: var(--color-white); box-shadow: 0 0 0 4px rgba(255,107,53,0.2); }
.wiz-step.current { color: var(--color-dark); }
.wiz-step.done .wiz-dot { background: var(--color-secondary); color: var(--color-white); }
.wiz-label { text-align: center; line-height: 1.2; }

/* ─── Tarjeta del paso ─── */
.wiz-card { background: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-8); }
.wiz-card h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.wiz-card h3 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.wiz-card h3 small { font-weight: var(--weight-regular); color: var(--color-dark-300); }
.wiz-lead { color: var(--color-dark-500); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.wiz-hint { display: block; color: var(--color-dark-300); font-size: var(--text-xs); margin-top: 4px; }
.wiz-field { margin-bottom: var(--space-5); }
.wiz-group { margin: var(--space-6) 0; padding-top: var(--space-5); border-top: 1px solid var(--color-gray-200); }

.wiz-check { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-sm); cursor: pointer; }
.wiz-check input { width: 20px; height: 20px; accent-color: var(--color-primary); flex-shrink: 0; }

.wiz-errors { margin-top: var(--space-4); }
.wiz-errors ul { list-style: none; background: var(--color-error-light); color: #b91c1c; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); display: flex; flex-direction: column; gap: 4px; }
.wiz-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.wiz-spacer { flex: 1; }

.wiz-banner { border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-sm); margin: var(--space-4) 0; }
.wiz-banner.ok { background: var(--color-success-light); color: #166534; }
.wiz-banner.warn { background: var(--color-warning-light); color: #92400e; }
.wiz-banner ul { margin: var(--space-2) 0 0 var(--space-5); }
.wiz-banner a { text-decoration: underline; font-weight: var(--weight-semibold); }

/* ─── Foto de perfil ─── */
.wiz-photo { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); }
.wiz-photo img, .wiz-photo-ph { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wiz-photo-ph { background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.wiz-photo [hidden] { display: none !important; }

/* ─── Servicios ─── */
.svc-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.svc-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.svc-row.on { border-color: var(--color-secondary); background: var(--color-secondary-ultra); }
.svc-toggle { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; flex: 1; }
.svc-toggle input { width: 20px; height: 20px; accent-color: var(--color-secondary-dark); }
.svc-icon { font-size: 1.6rem; }
.svc-info strong { display: block; font-size: var(--text-sm); }
.svc-info small { color: var(--color-dark-300); font-size: var(--text-xs); }
.svc-price { display: flex; align-items: center; gap: var(--space-2); }
.svc-price .form-input { width: 100px; padding: 0.55rem 0.7rem; }
.svc-unit { font-size: var(--text-xs); color: var(--color-dark-500); white-space: nowrap; }
.extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.extras-grid .svc-price .form-input { width: 100%; }

.policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.policy-card { border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative; }
.policy-card input { position: absolute; opacity: 0; }
.policy-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-ultra); }
.policy-card small { color: var(--color-dark-500); font-size: var(--text-xs); }

/* ─── Chips (tamaños, vivienda) ─── */
.chip-checks { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip-check { cursor: pointer; position: relative; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: flex; flex-direction: column; align-items: center; min-width: 110px; padding: var(--space-3) var(--space-4); border: 2px solid var(--color-gray-200); border-radius: var(--radius-md); font-size: var(--text-sm); }
.chip-check small { color: var(--color-dark-300); font-size: var(--text-xs); }
.chip-check input:checked + span { border-color: var(--color-primary); background: var(--color-primary-ultra); }
.chip-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255,107,53,0.3); }

/* ─── Semana ─── */
.week-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.week-chip { cursor: pointer; position: relative; }
.week-chip input { position: absolute; opacity: 0; }
.week-chip span { display: flex; width: 54px; height: 44px; align-items: center; justify-content: center; border: 2px solid var(--color-gray-200); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.week-chip input:checked + span { background: #BDE9CC; border-color: #6CC48C; color: #14532D; }

/* ─── Fotos y mapa ─── */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.photo-item { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-gray-100); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item.main { outline: 3px solid var(--color-primary); }
.photo-item button, .photo-tag {
  position: absolute; border: none; border-radius: var(--radius-full); background: rgba(26,26,46,0.75); color: var(--color-white);
  font-size: 12px; cursor: pointer; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.photo-item [data-main] { bottom: 6px; left: 6px; }
.photo-del { top: 6px; right: 6px; }
.photo-tag { bottom: 6px; left: 6px; width: auto; padding: 0 var(--space-2); background: var(--color-primary); cursor: default; }
.locate-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); }
#setup-map { height: 300px; border-radius: var(--radius-lg); margin-top: var(--space-3); overflow: hidden; }

/* ─── Revisar ─── */
.review-card { border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.review-head { display: flex; gap: var(--space-4); align-items: center; }
.review-head img, .review-head .wiz-photo-ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.review-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.wiz-publish { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.wiz-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.wiz-done p { color: var(--color-dark-500); }

@media (max-width: 640px) {
  .wiz-card { padding: var(--space-5); }
  .svc-row { flex-direction: column; align-items: flex-start; }
  .locate-row { flex-direction: column; }
  .wiz-nav { flex-wrap: wrap; }
  .wiz-label { display: none; }
  .wiz-step { min-width: 40px; }
}