/* Perfil ZIVO — experiencia móvil aislada
   Este archivo se carga únicamente en pantallas <= 768px. */

app-mi-perfil {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: calc(100dvh - 58px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #f3f6fa;
}

app-mi-perfil .sp-bg {
  width: 100% !important;
  min-height: calc(100dvh - 58px) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: #f3f6fa;
}

app-mi-perfil .sp-card {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100dvh - 58px);
  margin: 0 !important;
  padding: 12px 12px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f6f8fb !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

app-mi-perfil .sp-card::before {
  height: 4px !important;
  position: fixed !important;
  top: 58px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 35;
}

/* Navegación de pasos: de grilla vertical a carrusel táctil */
app-mi-perfil .sp-steps-wrapper {
  position: sticky !important;
  top: 58px !important;
  z-index: 30 !important;
  margin: -12px -12px 14px !important;
  padding: 12px 10px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 45, 82, 0.12) !important;
  border-radius: 0 0 16px 16px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 22px rgba(8, 26, 47, 0.08) !important;
  backdrop-filter: blur(16px);
}

app-mi-perfil .sp-steps {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  padding: 1px 1px 5px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

app-mi-perfil .sp-steps::-webkit-scrollbar {
  display: none;
}

app-mi-perfil .sp-step {
  flex: 0 0 138px !important;
  min-width: 138px !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 9px !important;
  border: 1px solid rgba(15, 45, 82, 0.1);
  border-radius: 13px !important;
  background: #ffffff;
  text-align: left !important;
  opacity: 0.62 !important;
  scroll-snap-align: start;
  transform: none !important;
  box-shadow: none;
}

app-mi-perfil .sp-step.clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

app-mi-perfil .sp-step.active,
app-mi-perfil .sp-step.completed {
  opacity: 1 !important;
}

app-mi-perfil .sp-step.active {
  border-color: rgba(45, 108, 223, 0.38) !important;
  background: linear-gradient(135deg, rgba(45, 108, 223, 0.1), #ffffff) !important;
  box-shadow: 0 5px 14px rgba(29, 79, 143, 0.12) !important;
}

app-mi-perfil .sp-step.completed:not(.active) {
  border-color: rgba(15, 45, 82, 0.14);
  background: #f8fafc;
}

app-mi-perfil .sp-step-circle {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-width: 1.5px !important;
  font-size: 0.8rem !important;
}

app-mi-perfil .sp-step-label {
  min-width: 0;
  max-width: none !important;
  font-size: 0.7rem !important;
  line-height: 1.18 !important;
  font-weight: 760 !important;
  text-align: left !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

app-mi-perfil .sp-progress-bar {
  height: 5px !important;
  margin: 0 2px;
  background: rgba(15, 45, 82, 0.08) !important;
}

/* Formulario principal */
app-mi-perfil .sp-form {
  gap: 12px !important;
}

app-mi-perfil .sp-step-panel {
  width: 100%;
  margin: 0 !important;
  padding: 15px 13px 17px !important;
  border: 1px solid rgba(15, 45, 82, 0.1) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(8, 26, 47, 0.05) !important;
}

app-mi-perfil .sp-section-title {
  margin-bottom: 13px !important;
  padding-bottom: 9px !important;
  font-size: 0.78rem !important;
  line-height: 1.25;
  letter-spacing: 0.06em !important;
}

app-mi-perfil .sp-grid,
app-mi-perfil .sp-ident-bottom,
app-mi-perfil .sp-ident-layout {
  grid-template-columns: 1fr !important;
  gap: 13px !important;
}

app-mi-perfil .sp-ident-layout {
  margin-bottom: 14px !important;
}

app-mi-perfil .sp-ident-main {
  gap: 13px !important;
}

app-mi-perfil .sp-field {
  gap: 6px !important;
}

app-mi-perfil .sp-field label {
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}

/* 16px evita zoom automático de Safari/iOS */
app-mi-perfil .sp-field input,
app-mi-perfil .sp-field select,
app-mi-perfil .sp-field textarea {
  min-height: 50px !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  line-height: 1.25;
}

app-mi-perfil .sp-field textarea {
  min-height: 100px !important;
}

app-mi-perfil .sp-field select {
  padding-right: 38px !important;
}

/* Foto de perfil */
app-mi-perfil .sp-ident-photo {
  width: min(170px, 55vw) !important;
  max-width: 170px !important;
  margin: 2px auto 4px !important;
}

app-mi-perfil .sp-photo-box {
  height: 180px !important;
  border-radius: 14px 14px 0 0 !important;
}

app-mi-perfil .sp-photo-actions-bar {
  border-radius: 0 0 14px 14px !important;
}

app-mi-perfil .sp-photo-action-btn {
  min-height: 46px !important;
  font-size: 0.8rem !important;
}

/* Documento + carga */
app-mi-perfil .sp-input-group {
  flex-direction: column !important;
  border-radius: 10px !important;
}

app-mi-perfil .sp-input-group input[type="text"] {
  min-height: 50px !important;
  font-size: 16px !important;
}

app-mi-perfil .sp-input-group-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border-left: 0 !important;
  border-top: 1px solid rgba(15, 45, 82, 0.12) !important;
  border-radius: 0 !important;
}

app-mi-perfil .sp-input-group-file {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px !important;
}

app-mi-perfil .sp-input-group-file small {
  overflow-wrap: anywhere;
}

app-mi-perfil .sp-input-group-file-actions {
  justify-content: flex-end;
}

/* Tarjetas repetibles */
app-mi-perfil .family-card,
app-mi-perfil .bank-card {
  padding: 12px !important;
  border-radius: 12px !important;
}

app-mi-perfil .family-card-header {
  align-items: flex-start !important;
  gap: 8px;
}

app-mi-perfil .family-title {
  font-size: 0.78rem !important;
  line-height: 1.3;
}

app-mi-perfil .bank-card {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

app-mi-perfil .bank-actions {
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
}

app-mi-perfil .license-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

app-mi-perfil .license-option {
  min-height: 66px !important;
  padding: 9px !important;
}

app-mi-perfil .status-toggle {
  flex-wrap: wrap;
}

app-mi-perfil .status-toggle button {
  min-height: 44px;
}

/* Acciones cómodas para pulgar */
app-mi-perfil .sp-actions {
  gap: 9px !important;
  margin-top: 4px;
}

app-mi-perfil .sp-btn,
app-mi-perfil .sp-btn-secondary,
app-mi-perfil .btn-add {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 11px !important;
  font-size: 0.9rem !important;
}

app-mi-perfil .sp-error-message {
  font-size: 0.75rem !important;
}

/* Ajuste extra para teléfonos estrechos */
@media (max-width: 420px) {
  app-mi-perfil .sp-card {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  app-mi-perfil .sp-steps-wrapper {
    margin-left: -9px !important;
    margin-right: -9px !important;
  }

  app-mi-perfil .sp-step {
    flex-basis: 128px !important;
    min-width: 128px !important;
  }

  app-mi-perfil .sp-step-panel {
    padding: 13px 11px 15px !important;
  }

  app-mi-perfil .license-grid {
    grid-template-columns: 1fr !important;
  }
}