/**
 * Modal #seletoModal — overlay, cartão, header e painel «Nuvem e Sessão» (clean + dark).
 * Carregar após mesa-guest-entry.css (e mesa-premium-ui.css). Não altera outros modais nem o Livro fora deste ID.
 */

@keyframes mesaSeletoModalIn{
  from{
    opacity:0;
    transform:scale(0.97);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes mesaSeletoOverlayIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

#seletoModal.open{
  align-items:center;
  justify-content:center;
  animation:mesaSeletoOverlayIn 0.18s ease both;
}

[data-theme="clean"] #seletoModal.open{
  background:rgba(26, 26, 24, 0.4);
  backdrop-filter:blur(8px);
}

[data-theme="dark"] #seletoModal.open{
  background:rgba(0, 0, 0, 0.72);
  backdrop-filter:blur(8px);
}

#seletoModal .seleto-modal__card{
  width:min(100%, 600px);
  max-height:min(85vh, 85dvh);
  margin:0 auto;
  animation:mesaSeletoModalIn 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}

[data-theme="clean"] #seletoModal .seleto-modal__card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  box-shadow:0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] #seletoModal .seleto-modal__card{
  border-radius:10px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  box-shadow:0 8px 40px rgba(0, 0, 0, 0.6);
}

#seletoModal .seleto-modal__card::before{
  display:none;
}

#seletoModal .seleto-modal__header{
  padding:40px 40px 12px;
  gap:12px;
}

#seletoModal .seleto-modal__kicker{
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:8px;
}

#seletoModal .seleto-modal__title{
  font-family:'DM Serif Display','Cormorant Garamond',Georgia,serif;
  font-size:36px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:0.01em;
  color:var(--text);
}

[data-theme="dark"] #seletoModal .seleto-modal__title{
  color:var(--text);
}

#seletoModal .seleto-modal__close{
  width:40px;
  height:40px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--text-dim);
  transition:color 0.15s ease, background 0.15s ease;
}

[data-theme="clean"] #seletoModal .seleto-modal__close:hover{
  color:var(--text);
  background:color-mix(in srgb, var(--text) 06%, transparent);
}

[data-theme="dark"] #seletoModal .seleto-modal__close:hover{
  color:var(--gold);
  background:transparent;
}

#seletoModal .seleto-modal__body-scroll{
  padding:8px 40px 24px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}

[data-theme="dark"] #seletoModal .seleto-modal__body-scroll{
  scrollbar-color:var(--gold-dim) transparent;
}

#seletoModal .seleto-modal__body-scroll::-webkit-scrollbar{
  width:4px;
}

#seletoModal .seleto-modal__body-scroll::-webkit-scrollbar-track{
  background:transparent;
}

#seletoModal .seleto-modal__body-scroll::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:4px;
}

[data-theme="dark"] #seletoModal .seleto-modal__body-scroll::-webkit-scrollbar-thumb{
  background:var(--gold-dim);
}

#seletoModal .seleto-modal__member-hint{
  font-size:14px;
  line-height:1.6;
  color:var(--text-mid);
}

#seletoModal .seleto-modal__member-hint strong{
  font-weight:700;
  color:var(--text);
}

/* Painel nuvem */
#seletoModal .seleto-cloud-panel{
  margin-top:20px;
  padding:24px;
  border-radius:8px;
  position:relative;
  overflow:visible;
  box-sizing:border-box;
}

[data-theme="clean"] #seletoModal .seleto-cloud-panel{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  box-shadow:none;
}

[data-theme="dark"] #seletoModal .seleto-cloud-panel{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  box-shadow:none;
}

#seletoModal .seleto-cloud-panel::before{
  display:none;
}

#seletoModal #seletoCloudGuest,
#seletoModal #seletoCloudUser{
  margin:0;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}

#seletoModal .seleto-cloud-panel__head{
  margin-bottom:16px;
}

#seletoModal .seleto-cloud-panel__title{
  font-family:'DM Sans','Inter',system-ui,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--text);
  margin-bottom:10px;
}

#seletoModal .seleto-cloud-panel__note,
#seletoModal .seleto-cloud-panel__note-fine{
  font-size:13px;
  line-height:1.6;
  color:var(--text-mid);
}

#seletoModal .seleto-cloud-panel__note strong{
  font-weight:600;
  color:var(--text);
}

#seletoModal .seleto-cloud-userline{
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-subtle);
}

#seletoModal .seleto-cloud-userline__email{
  font-size:14px;
  font-weight:500;
  color:var(--text-mid);
}

#seletoModal #mesaSeletoCloudLogoutBtn{
  min-height:auto;
  padding:4px 8px;
  font-size:13px;
  font-weight:500;
  border:none;
  background:transparent;
  color:var(--text-dim);
  box-shadow:none;
  text-decoration:none;
}

[data-theme="clean"] #seletoModal #mesaSeletoCloudLogoutBtn:hover:not(:disabled){
  color:var(--negative);
  background:transparent;
}

[data-theme="dark"] #seletoModal #mesaSeletoCloudLogoutBtn:hover:not(:disabled){
  color:#D95F5F;
  background:transparent;
}

#seletoModal .seleto-cloud-profile{
  margin-top:16px;
  padding-top:18px;
  border-top:1px solid var(--border-subtle);
}

#seletoModal .seleto-cloud-profile__kicker{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 12px;
}

#seletoModal .seleto-cloud-profile__kicker:not(:first-of-type){
  margin-top:20px;
}

#seletoModal .seleto-cloud-field{
  color:var(--text-mid);
}

#seletoModal .seleto-cloud-panel .field--float > input,
#seletoModal .seleto-cloud-panel .field--float > select.app-select{
  border-radius:6px !important;
  padding-left:12px !important;
  padding-right:12px !important;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > input,
[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > select.app-select{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}

[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > input:focus,
[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > select.app-select:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(44, 95, 138, 0.1) !important;
  outline:none;
}

[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > input,
[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > select.app-select{
  background:var(--bg-root) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}

[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > input:focus,
[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > select.app-select:focus{
  border-color:var(--gold-soft) !important;
  box-shadow:0 0 0 3px rgba(201, 168, 76, 0.1) !important;
  outline:none;
}

#seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap{
  border-radius:6px !important;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap{
  background:#FFFFFF !important;
  border:1px solid var(--border) !important;
}

[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap:focus-within{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(44, 95, 138, 0.1) !important;
}

[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap{
  background:var(--bg-root) !important;
  border:1px solid var(--border) !important;
}

[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap:focus-within{
  border-color:var(--gold-soft) !important;
  box-shadow:0 0 0 3px rgba(201, 168, 76, 0.1) !important;
}

[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > input:focus + label,
[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > input:not(:placeholder-shown) + label,
[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float.field--float-select > select.app-select:focus + label,
[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float.field--float-select > select.app-select:not([value='']) + label,
[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap:focus-within + label,
[data-theme="clean"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap:has(.mesa-password-input:not(:placeholder-shown)) + label{
  background:#FFFFFF;
  color:var(--text-mid);
}

[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > input:focus + label,
[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > input:not(:placeholder-shown) + label,
[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float.field--float-select > select.app-select:focus + label,
[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float.field--float-select > select.app-select:not([value='']) + label,
[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap:focus-within + label,
[data-theme="dark"] #seletoModal .seleto-cloud-panel .field--float > .mesa-password-wrap:has(.mesa-password-input:not(:placeholder-shown)) + label{
  background:var(--bg-root);
  color:var(--text-mid);
}

#seletoModal .seleto-cloud-field .mesa-password-toggle{
  color:var(--text-dim);
  background:transparent;
  border:1px solid transparent;
}

[data-theme="clean"] #seletoModal .seleto-cloud-field .mesa-password-toggle:hover{
  color:var(--text);
}

[data-theme="dark"] #seletoModal .seleto-cloud-field .mesa-password-toggle:hover{
  color:var(--gold);
}

[data-theme="clean"] #seletoModal .seleto-cloud-field input.seleto-cloud-field__input--readonly{
  background:color-mix(in srgb, var(--bg-subtle) 88%, var(--border) 12%) !important;
  border-color:var(--border) !important;
  color:var(--text-mid) !important;
}

[data-theme="dark"] #seletoModal .seleto-cloud-field input.seleto-cloud-field__input--readonly{
  background:var(--bg-root) !important;
  opacity:0.92;
}

#seletoModal .seleto-cloud-actions{
  margin-top:12px;
  gap:10px;
}

#seletoModal .seleto-cloud-actions--stack{
  gap:0;
}

#seletoModal .seleto-cloud-actions--stack .btn-seleto-ghost#mesaCloudPullBtn{
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid var(--border-subtle);
}

/* Secundários: Salvar perfil, Atualizar senha, Restaurar */
#seletoModal .seleto-cloud-panel .btn-seleto-ghost:not(#mesaSeletoCloudLogoutBtn):not(#mesaCloudPullBtn){
  font-size:13px;
  font-weight:500;
  padding:8px 16px;
  border-radius:4px;
  background:transparent;
  color:var(--text-mid);
  border:1px solid var(--border);
  box-shadow:none;
}

[data-theme="clean"] #seletoModal .seleto-cloud-panel .btn-seleto-ghost:not(#mesaSeletoCloudLogoutBtn):not(#mesaCloudPullBtn):hover:not(:disabled){
  background:var(--bg-subtle);
  border-color:var(--text);
  color:var(--text-mid);
}

[data-theme="dark"] #seletoModal .seleto-cloud-panel .btn-seleto-ghost:not(#mesaSeletoCloudLogoutBtn):not(#mesaCloudPullBtn):hover:not(:disabled){
  border-color:var(--gold-soft);
  color:var(--gold);
  background:transparent;
}

#seletoModal #mesaCloudPullBtn.btn-seleto-ghost{
  font-size:13px;
  font-weight:500;
  padding:8px 16px;
  border-radius:4px;
  background:transparent;
  color:var(--text-mid);
  border:1px solid var(--border);
  box-shadow:none;
}

[data-theme="clean"] #seletoModal #mesaCloudPullBtn.btn-seleto-ghost:hover:not(:disabled){
  background:var(--bg-subtle);
  border-color:var(--text);
  color:var(--text);
}

[data-theme="dark"] #seletoModal #mesaCloudPullBtn.btn-seleto-ghost:hover:not(:disabled){
  border-color:var(--border);
  color:var(--text);
}

/* CTA primária — salvar carteira (largura total) */
#seletoModal #mesaCloudPushBtn.btn-seleto{
  width:100%;
  padding:15px;
  font-size:15px;
  font-weight:600;
  border-radius:6px;
  border:none;
  box-shadow:none;
}

/* Criar conta no fluxo convidado do painel */
#seletoModal #seletoCloudGuest .btn-seleto{
  padding:15px;
  font-size:15px;
  font-weight:600;
  border-radius:6px;
  border:none;
  box-shadow:none;
}

[data-theme="clean"] #seletoModal #seletoCloudGuest .btn-seleto,
[data-theme="clean"] #seletoModal #mesaCloudPushBtn.btn-seleto{
  background:var(--text);
  color:var(--bg-surface);
}

[data-theme="clean"] #seletoModal #seletoCloudGuest .btn-seleto:hover:not(:disabled),
[data-theme="clean"] #seletoModal #mesaCloudPushBtn.btn-seleto:hover:not(:disabled){
  background:#2A2A28;
}

[data-theme="dark"] #seletoModal #seletoCloudGuest .btn-seleto,
[data-theme="dark"] #seletoModal #mesaCloudPushBtn.btn-seleto{
  background:var(--gold);
  color:#0D0D0B;
  font-weight:700;
}

[data-theme="dark"] #seletoModal #seletoCloudGuest .btn-seleto:hover:not(:disabled),
[data-theme="dark"] #seletoModal #mesaCloudPushBtn.btn-seleto:hover:not(:disabled){
  background:var(--gold-bright);
  color:#0D0D0B;
}

#seletoModal .seleto-cloud-msg{
  margin-top:14px;
  font-size:13px;
  color:var(--text-mid);
}

@media (prefers-reduced-motion: reduce){
  #seletoModal .seleto-modal__card,
  #seletoModal.open{
    animation:none;
  }
}

@media (max-width:640px){
  #seletoModal .seleto-modal__header{
    padding:28px 20px 10px;
  }
  #seletoModal .seleto-modal__body-scroll{
    padding:6px 20px 20px;
  }
  #seletoModal .seleto-modal__title{
    font-size:28px;
  }
}