/*
 * Mesa do Sócio · J2CA
 * Painel secundário: Nuvem e Sessão
 *
 * Herda os tokens de mesa-secondary-components.css e adapta o painel real existente,
 * preservando IDs, onclicks e comportamento atual.
 */

#seletoModal.seleto-modal--account {
  --cloud-shell-bg: var(--mesa-secondary-bg);
  --cloud-shell-surface: var(--mesa-secondary-surface);
  --cloud-shell-soft: var(--mesa-secondary-subtle);
  --cloud-shell-raised: var(--mesa-secondary-surface);
  --cloud-shell-border: var(--mesa-secondary-border);
  --cloud-shell-border-strong: color-mix(in srgb, var(--mesa-secondary-border) 72%, var(--mesa-secondary-text) 28%);
  --cloud-shell-text: var(--mesa-secondary-text);
  --cloud-shell-muted: var(--mesa-secondary-muted);
  --cloud-shell-dim: var(--mesa-secondary-dim);
  --cloud-shell-accent: var(--mesa-secondary-gold);
  --cloud-shell-danger: var(--mesa-secondary-danger);
  --cloud-shell-shadow: var(--mesa-secondary-shadow);
  --cloud-shell-card-shadow: var(--mesa-secondary-section-shadow);
  --cloud-shell-radius: var(--mesa-secondary-radius);
  --cloud-shell-card-radius: var(--mesa-secondary-section-radius);
  --cloud-shell-control-radius: var(--mesa-secondary-control-radius);
  --cloud-shell-button-font-size: 13px;
  --cloud-shell-action-w: var(--mesa-secondary-action-width);
  --cloud-shell-header-divider-width: var(--mesa-secondary-header-divider-width);
  --cloud-shell-header-accent-width: var(--mesa-secondary-header-accent-width);
  --cloud-shell-x: var(--mesa-secondary-x);
  --cloud-shell-header-h: auto;
  --cloud-shell-footer-h: auto;
  --cloud-shell-body-y: 28px;
}

#seletoModal.seleto-modal--account .seleto-modal__card {
  width: min(92vw, 880px) !important;
  height: min(820px, calc(100dvh - 56px)) !important;
  max-height: min(820px, calc(100dvh - 56px)) !important;
  background: var(--cloud-shell-bg) !important;
  border-color: var(--cloud-shell-border) !important;
}

#seletoModal.seleto-modal--account .seleto-modal__header {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 30px var(--cloud-shell-x) 24px !important;
  border-bottom: 0 !important;
  background: var(--cloud-shell-bg) !important;
}

#seletoModal.seleto-modal--account .seleto-modal__header::before,
#seletoModal.seleto-modal--account .seleto-modal__header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
}

#seletoModal.seleto-modal--account .seleto-modal__header::before {
  left: 0 !important;
  width: var(--cloud-shell-header-divider-width) !important;
  background: var(--cloud-shell-border) !important;
}

#seletoModal.seleto-modal--account .seleto-modal__header::after {
  left: var(--cloud-shell-x) !important;
  right: auto !important;
  width: var(--cloud-shell-header-accent-width) !important;
  background: var(--cloud-shell-accent) !important;
}

#seletoModal.seleto-modal--account .seleto-modal__title {
  font-size: clamp(1.95rem, 3vw, 2.2rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-shell__subtitle {
  max-width: 640px;
  margin-top: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  white-space: normal !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-shell__meta {
  width: fit-content;
  display: inline-flex !important;
  align-items: center;
  margin-top: 14px !important;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--cloud-shell-accent) 30%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--cloud-shell-accent) 10%, transparent);
  color: var(--cloud-shell-accent) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

#seletoModal.seleto-modal--account .seleto-modal__close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--cloud-shell-border) !important;
  border-radius: 9px !important;
  background: var(--cloud-shell-surface) !important;
  color: var(--cloud-shell-muted) !important;
  font: 300 22px/1 'Inter', system-ui, sans-serif !important;
}

#seletoModal.seleto-modal--account .seleto-modal__close:hover {
  border-color: color-mix(in srgb, var(--cloud-shell-accent) 64%, var(--cloud-shell-border)) !important;
  background: var(--cloud-shell-surface) !important;
  color: var(--cloud-shell-text) !important;
}

#seletoModal.seleto-modal--account .seleto-modal__body-scroll {
  padding: var(--cloud-shell-body-y) var(--cloud-shell-x) 34px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel__head,
#seletoModal.seleto-modal--account .seleto-cloud-profile,
#seletoModal.seleto-modal--account .seleto-cloud-notifications,
#seletoModal.seleto-modal--account .seleto-cloud-reports {
  padding: 24px 28px !important;
  border: 1px solid var(--cloud-shell-border) !important;
  border-radius: var(--cloud-shell-card-radius) !important;
  background: var(--cloud-shell-surface) !important;
  box-shadow: var(--cloud-shell-card-shadow) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel__head ~ #seletoCloudGuest:not([hidden]),
#seletoModal.seleto-modal--account .seleto-cloud-panel__head ~ #seletoCloudUser:not([hidden]),
#seletoModal.seleto-modal--account #seletoCloudUser > * + * {
  margin-top: 20px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel__title,
#seletoModal.seleto-modal--account .seleto-cloud-profile__kicker {
  margin: 0 0 6px !important;
  color: var(--cloud-shell-text) !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel__note,
#seletoModal.seleto-modal--account .seleto-cloud-panel__note-fine,
#seletoModal.seleto-modal--account .seleto-cloud-panel__sync-hint,
#seletoModal.seleto-modal--account .seleto-cloud-notifications__text,
#seletoModal.seleto-modal--account .seleto-cloud-reports__copy,
#seletoModal.seleto-modal--account .seleto-cloud-msg,
#seletoModal.seleto-modal--account .seleto-cloud-profile__assist {
  color: var(--cloud-shell-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel__note p,
#seletoModal.seleto-modal--account .seleto-cloud-panel__sync-hint {
  margin-top: 6px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-userline {
  margin-top: 18px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--mesa-secondary-border-subtle) !important;
  border-radius: var(--cloud-shell-control-radius) !important;
  background: var(--cloud-shell-soft) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-userline__email {
  font-size: 0.92rem !important;
  font-weight: 650 !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-profile {
  border-top: 1px solid var(--cloud-shell-border) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-profile__kicker:not(:first-of-type) {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--cloud-shell-border);
  font-size: 0.86rem !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-profile .seleto-cloud-profile__assist {
  margin: -4px 0 14px !important;
  color: var(--cloud-shell-dim) !important;
  font-size: 0.76rem !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-field.field.field--float {
  margin-bottom: 16px !important;
  gap: 8px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .field--float > label {
  color: var(--cloud-shell-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.1em !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .field--float > input,
#seletoModal.seleto-modal--account .seleto-cloud-panel .field--float > select.app-select,
#seletoModal.seleto-modal--account .seleto-cloud-panel .field--float > .mesa-password-wrap {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-color: var(--cloud-shell-border) !important;
  border-radius: var(--cloud-shell-control-radius) !important;
  background: var(--cloud-shell-soft) !important;
  box-shadow: none !important;
  font: 500 0.9rem/1.3 'Inter', system-ui, sans-serif !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .field--float > input:focus,
#seletoModal.seleto-modal--account .seleto-cloud-panel .field--float > select.app-select:focus,
#seletoModal.seleto-modal--account .seleto-cloud-panel .field--float > .mesa-password-wrap:focus-within {
  border-color: var(--cloud-shell-text) !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 24, 0.06) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-field input.seleto-cloud-field__input--readonly {
  background: var(--mesa-secondary-inset) !important;
  color: var(--cloud-shell-dim) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-actions,
#seletoModal.seleto-modal--account .seleto-cloud-notifications__actions,
#seletoModal.seleto-modal--account .seleto-cloud-panel__head #seletoCloudSyncActions:not([hidden]) {
  gap: 10px !important;
  margin-top: 20px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-actions--stack {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .btn-seleto,
#seletoModal.seleto-modal--account .seleto-cloud-panel .btn-seleto-ghost,
#seletoModal.seleto-modal--account .seleto-cloud-notifications__actions .btn-seleto,
#seletoModal.seleto-modal--account .seleto-cloud-notifications__actions .btn-seleto-ghost,
#seletoModal.seleto-modal--account .seleto-cloud-reports__btn {
  width: var(--cloud-shell-action-w) !important;
  min-width: var(--cloud-shell-action-w) !important;
  min-height: 42px !important;
  flex: 0 0 var(--cloud-shell-action-w) !important;
  padding: 0 18px !important;
  border-radius: var(--cloud-shell-control-radius) !important;
  font: 650 var(--cloud-shell-button-font-size)/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.04em !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .btn-seleto,
#seletoModal.seleto-modal--account #mesaCloudPushBtn.btn-seleto,
#seletoModal.seleto-modal--account #mesaPushEnableBtn.btn-seleto,
#seletoModal.seleto-modal--account .seleto-cloud-profile .seleto-cloud-actions .btn-seleto-ghost,
#seletoModal.seleto-modal--account .seleto-cloud-reports__btn {
  border-color: var(--cloud-shell-text) !important;
  background: var(--cloud-shell-text) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

#seletoModal.seleto-modal--account #mesaCloudPullBtn.btn-seleto-ghost,
#seletoModal.seleto-modal--account #mesaPushDisableBtn.btn-seleto-ghost,
#seletoModal.seleto-modal--account #seletoCloudGuest .btn-seleto-ghost {
  border-color: var(--cloud-shell-border) !important;
  background: var(--cloud-shell-surface) !important;
  color: var(--cloud-shell-text) !important;
  box-shadow: none !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .btn-seleto:hover:not(:disabled),
#seletoModal.seleto-modal--account #mesaPushEnableBtn.btn-seleto:hover:not(:disabled),
#seletoModal.seleto-modal--account .seleto-cloud-profile .seleto-cloud-actions .btn-seleto-ghost:hover:not(:disabled),
#seletoModal.seleto-modal--account .seleto-cloud-reports__btn:hover:not(:disabled) {
  border-color: #000000 !important;
  background: #000000 !important;
  color: #FFFFFF !important;
}

#seletoModal.seleto-modal--account #mesaCloudPullBtn.btn-seleto-ghost:hover:not(:disabled),
#seletoModal.seleto-modal--account #mesaPushDisableBtn.btn-seleto-ghost:hover:not(:disabled),
#seletoModal.seleto-modal--account #seletoCloudGuest .btn-seleto-ghost:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cloud-shell-accent) 64%, var(--cloud-shell-border)) !important;
  background: var(--cloud-shell-surface) !important;
  color: var(--cloud-shell-text) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .seleto-cloud-logout-desktop.btn-seleto-ghost,
#seletoModal.seleto-modal--account #mesaSeletoCloudLogoutBtn {
  border-color: var(--cloud-shell-danger) !important;
  background: var(--cloud-shell-danger) !important;
  color: #FFFFFF !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel .seleto-cloud-logout-desktop.btn-seleto-ghost:hover:not(:disabled),
#seletoModal.seleto-modal--account #mesaSeletoCloudLogoutBtn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cloud-shell-danger) 86%, #000000) !important;
  background: color-mix(in srgb, var(--cloud-shell-danger) 86%, #000000) !important;
  color: #FFFFFF !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-reports {
  align-items: center !important;
  gap: 24px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-notifications {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-notifications__text {
  min-width: 0 !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-notifications__text .seleto-cloud-profile__kicker {
  margin-bottom: 6px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-notifications__actions {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

#seletoModal.seleto-modal--account #mesaPushPanel[data-push-state="enabled"] {
  border-color: color-mix(in srgb, var(--green, #007a4d) 28%, var(--cloud-shell-border)) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-reports .seleto-cloud-profile__kicker {
  margin-bottom: 6px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-shell__footer {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 20px var(--cloud-shell-x) 24px !important;
  border-top: 1px solid var(--cloud-shell-border) !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-shell__footer::before {
  content: none !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-shell__footer p {
  color: var(--cloud-shell-dim) !important;
  font-size: 0.64rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  #seletoModal.seleto-modal--account {
    --cloud-shell-x: 22px;
    --cloud-shell-body-y: 22px;
    --cloud-shell-action-w: 100%;
  }

  #seletoModal.seleto-modal--account .seleto-modal__card {
    width: 100% !important;
    height: 100dvh !important;
    max-height: none !important;
  }

  #seletoModal.seleto-modal--account .seleto-modal__header {
    padding: calc(max(0px, env(safe-area-inset-top, 0px)) + 24px) var(--cloud-shell-x) 22px !important;
  }

  #seletoModal.seleto-modal--account .seleto-modal__title {
    font-size: 1.72rem !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-shell__subtitle {
    font-size: 0.82rem !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-panel__head,
  #seletoModal.seleto-modal--account .seleto-cloud-profile,
  #seletoModal.seleto-modal--account .seleto-cloud-notifications,
  #seletoModal.seleto-modal--account .seleto-cloud-reports {
    padding: 20px !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-actions,
  #seletoModal.seleto-modal--account .seleto-cloud-notifications__actions,
  #seletoModal.seleto-modal--account .seleto-cloud-actions--stack,
  #seletoModal.seleto-modal--account .seleto-cloud-panel__head #seletoCloudSyncActions:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-panel .btn-seleto,
  #seletoModal.seleto-modal--account .seleto-cloud-panel .btn-seleto-ghost,
  #seletoModal.seleto-modal--account .seleto-cloud-notifications__actions .btn-seleto,
  #seletoModal.seleto-modal--account .seleto-cloud-notifications__actions .btn-seleto-ghost,
  #seletoModal.seleto-modal--account .seleto-cloud-reports__btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-reports {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-notifications {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

/* Micropasso: mantém email e texto de alinhamento dentro do mesmo bloco, como no shell. */
#seletoModal.seleto-modal--account .seleto-cloud-userline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 18px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-userline__copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-panel__sync-hint {
  margin: 0 !important;
  color: var(--cloud-shell-dim) !important;
}

/* Micropasso: helper curto do Nome de uso vira placeholder, como no shell/reference. */
#seletoModal.seleto-modal--account #mesaProfilePreferredName::placeholder {
  color: var(--cloud-shell-dim) !important;
  opacity: 1 !important;
}

/* Micropasso: bloco de Alterar senha aninhado, empilhado e com largura controlada. */
#seletoModal.seleto-modal--account .seleto-cloud-password-block {
  max-width: 660px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-password-block .seleto-cloud-field.field.field--float {
  margin-bottom: 22px !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-password-block .seleto-cloud-actions {
  margin-top: 2px !important;
}

/* Micropasso: mais respiro entre o título da subseção e os campos de senha. */
#seletoModal.seleto-modal--account .seleto-cloud-profile__kicker--password {
  margin-bottom: 24px !important;
}

/* Micropasso: Relatórios do Sócio usa ação primária navy/preto, como no shell. */
#seletoModal.seleto-modal--account .seleto-cloud-reports__btn.btn-seleto-ghost {
  border-color: var(--cloud-shell-text) !important;
  background: var(--cloud-shell-text) !important;
  color: #FFFFFF !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-reports__btn.btn-seleto-ghost:hover:not(:disabled) {
  border-color: #000000 !important;
  background: #000000 !important;
  color: #FFFFFF !important;
}

/* Micropasso: CPF readonly com helper visível abaixo do campo. */
#seletoModal.seleto-modal--account .seleto-cloud-field__helper {
  display: block !important;
  margin-top: -4px !important;
  color: var(--cloud-shell-dim) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-field input.seleto-cloud-field__input--readonly {
  cursor: not-allowed !important;
  caret-color: transparent !important;
  user-select: none !important;
}

#seletoModal.seleto-modal--account .seleto-cloud-field input.seleto-cloud-field__input--readonly:focus,
#seletoModal.seleto-modal--account .seleto-cloud-field input.seleto-cloud-field__input--readonly:focus-visible {
  border-color: var(--cloud-shell-border) !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Micropasso mobile: mais respiro no divisor do header e texto da conta em 2 linhas. */
@media (max-width: 768px) {
  #seletoModal.seleto-modal--account .seleto-modal__header {
    padding-bottom: 54px !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-userline {
    align-items: stretch !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 14px 12px !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-userline__copy {
    width: 100% !important;
    min-width: 0 !important;
  }

  #seletoModal.seleto-modal--account .seleto-cloud-panel__sync-hint {
    max-width: none !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    text-wrap: pretty;
  }

  #seletoModal.seleto-modal--account #mesaProfilePreferredName::placeholder {
    font-size: 0.82rem !important;
  }


  /* Micropasso mobile: reduz levemente o respiro entre “Alterar senha” e o primeiro campo. */
  #seletoModal.seleto-modal--account .seleto-cloud-profile__kicker--password {
    margin-bottom: 16px !important;
  }
}