/* KYRON Studios — homologacao estabilizada. */

/* Encaixe da tela inicial: container proprio, fora de .admin-atalhos. */
#kyron-encaixe-atalho-independente[hidden] {
  display: none !important;
}
#kyron-encaixe-atalho-independente:not([hidden]) {
  display: block !important;
  margin: 0 0 12px !important;
}
#kyron-encaixe-atalho-independente .kyron-encaixe-botao-home {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(212,175,55,.42) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #efbd5a, #d89b32) !important;
  color: #171719 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  font: inherit !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
#kyron-encaixe-atalho-independente .kyron-encaixe-botao-home > span {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
}
#kyron-encaixe-atalho-independente .kyron-encaixe-botao-home svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#kyron-encaixe-atalho-independente .kyron-encaixe-botao-home strong {
  display: inline !important;
  color: inherit !important;
  font-size: 1rem !important;
}

/* Card/submenu legado de Encaixe: nunca aparece na Agenda. */
section.admin-card.atendimento-avulso-card:not(.horario-fixo-card)[data-admin-painel="agenda"] {
  display: none !important;
}

/* Modal independente de Encaixe. */
#kyron-encaixe-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482500 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important;
  overflow: auto !important;
  background: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-sizing: border-box !important;
}
.kyron-encaixe-modal {
  width: min(100%, 430px) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow: auto !important;
  padding: 22px !important;
  border: 1px solid rgba(212,175,55,.42) !important;
  border-radius: 22px !important;
  background: #171719 !important;
  color: #f7f7f8 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.72) !important;
  box-sizing: border-box !important;
}
.kyron-encaixe-topo {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.kyron-encaixe-topo h2 {
  margin: 2px 0 0 !important;
}
.kyron-encaixe-fechar {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  background: #242427 !important;
  color: #f7f7f8 !important;
  font-size: 1.7rem !important;
  line-height: 1 !important;
}
.kyron-encaixe-nota {
  margin: 12px 0 16px !important;
}
#kyron-encaixe-overlay #atendimento-avulso-form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--espacamento-base, 12px) !important;
  margin: 0 !important;
}

/* Confirmacao de recebimento: overlay real, sem vazamento para o rodape. */
#kyron-confirmacao-recebimento[hidden] {
  display: none !important;
}
#kyron-confirmacao-recebimento.kyron-confirmacao-overlay:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important;
  overflow: auto !important;
  background: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-sizing: border-box !important;
}
#kyron-confirmacao-recebimento .kyron-confirmacao-modal {
  position: relative !important;
  display: block !important;
  width: min(100%, 420px) !important;
  max-height: calc(100dvh - 36px) !important;
  margin: auto !important;
  padding: 24px !important;
  overflow: auto !important;
  border: 1px solid rgba(212,175,55,.42) !important;
  border-radius: 22px !important;
  background: #171719 !important;
  color: #f7f7f8 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.72) !important;
  box-sizing: border-box !important;
}
#kyron-confirmacao-recebimento .kyron-confirmacao-acoes {
  display: grid !important;
  grid-template-columns: .85fr 1.15fr !important;
  gap: 10px !important;
}
#kyron-confirmacao-recebimento .kyron-confirmacao-acoes button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(212,175,55,.42) !important;
  border-radius: 12px !important;
  background: #242427 !important;
  color: #f2d28f !important;
  font-weight: 850 !important;
}
#kyron-confirmacao-recebimento .kyron-confirmacao-acoes button.primario {
  background: #dfaa48 !important;
  border-color: #dfaa48 !important;
  color: #171719 !important;
}

@media (max-width: 520px) {
  #kyron-encaixe-overlay,
  #kyron-confirmacao-recebimento.kyron-confirmacao-overlay:not([hidden]) {
    align-items: end !important;
    padding: 14px !important;
  }
  .kyron-encaixe-modal,
  #kyron-confirmacao-recebimento .kyron-confirmacao-modal {
    width: 100% !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 20px 18px !important;
  }
  #kyron-confirmacao-recebimento .kyron-confirmacao-acoes {
    grid-template-columns: 1fr !important;
  }
}


/* Encaixe aprovado: expansão abaixo do botão, dentro do fluxo da Agenda. */
#kyron-encaixe-atalho-independente {
  display: grid !important;
  gap: 12px !important;
}
#kyron-encaixe-inline {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(212,175,55,.28) !important;
  border-radius: 18px !important;
  background: #19191b !important;
  color: #f7f7f8 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.kyron-encaixe-inline-topo {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
.kyron-encaixe-inline-topo h2 {
  margin: 2px 0 0 !important;
}
#kyron-encaixe-inline .kyron-encaixe-nota {
  margin: 10px 0 16px !important;
}
#kyron-encaixe-inline #atendimento-avulso-form {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
}
#kyron-encaixe-inline .kyron-encaixe-fechar {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: #242427 !important;
  color: #f7f7f8 !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
}
@media (max-width: 520px) {
  #kyron-encaixe-inline {
    padding: 16px !important;
    border-radius: 16px !important;
  }
}


/* Encaixe integrado visualmente ao card principal da Agenda. */
#admin-lista-agendamentos + #kyron-encaixe-atalho-independente,
section.admin-card[data-admin-painel="agenda"] > #kyron-encaixe-atalho-independente {
  margin: 18px 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}


/* Identidade visual — tema do cliente e quatro cores com leitura protegida. */
.identidade-tema {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.identidade-tema > strong {
  color: #f4f4f5;
  font-size: .84rem;
}
.identidade-tema-opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.identidade-tema-opcoes label {
  position: relative;
  cursor: pointer;
}
.identidade-tema-opcoes input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.identidade-tema-opcoes span {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: #202124;
  color: #f4f4f5;
  font-weight: 850;
}
.identidade-tema-opcoes input:checked + span {
  border-color: #d8a74f;
  outline: 2px solid rgba(216,167,79,.22);
  background: rgba(216,167,79,.12);
  color: #f2d28f;
}
.identidade-cores-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.identidade-cor-campo {
  min-width: 0;
  display: grid !important;
  gap: 7px !important;
  padding: 11px !important;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.identidade-cor-campo > span:first-child {
  color: #f4f4f5;
  font-size: .72rem;
  font-weight: 850;
}
.identidade-cor-controle {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.identidade-cor-controle input[type="color"] {
  width: 46px !important;
  min-width: 46px;
  height: 42px !important;
  padding: 3px !important;
  border-radius: 11px !important;
  cursor: pointer;
}
.identidade-cor-controle b {
  min-width: 0;
  overflow: hidden;
  color: #f4f4f5;
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identidade-cor-campo code {
  color: #aaaeb2;
  font: 750 .68rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
}
.identidade-legibilidade {
  margin: 11px 0 2px !important;
}
.identidade-preview-cliente {
  --preview-bg: #f7f8f6;
  --preview-surface: #ffffff;
  --preview-text: #151816;
  --preview-muted: #626a64;
  --preview-support-1: #8f6f35;
  --preview-support-2: #fff1cf;
  background: var(--preview-bg) !important;
  color: var(--preview-text) !important;
}
.identidade-preview-topo small,
.identidade-preview-cliente > small { color: var(--preview-muted) !important; }
.identidade-preview-topo strong { color: var(--preview-text) !important; }
.identidade-preview-acoes > span {
  border-color: var(--preview-border) !important;
  background: var(--preview-surface) !important;
  color: var(--preview-text) !important;
}
.identidade-preview-paleta {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  margin-top: 9px;
}
.identidade-preview-paleta i {
  height: 9px;
  border: 1px solid color-mix(in srgb, var(--preview-text) 18%, transparent);
  border-radius: 999px;
}
html[data-tema-cliente] .cliente-auth-shell { color: var(--client-text); }
html[data-tema-cliente] .cliente-auth-shell .cliente-auth-card {
  border-color: var(--client-border) !important;
  background: var(--client-surface) !important;
  color: var(--client-text) !important;
}
html[data-tema-cliente] .cliente-auth-card h1,
html[data-tema-cliente] .cliente-auth-card h2,
html[data-tema-cliente] .cliente-auth-card label,
html[data-tema-cliente] .cliente-auth-card strong { color: var(--client-text) !important; }
html[data-tema-cliente] .cliente-auth-card p,
html[data-tema-cliente] .cliente-auth-card small,
html[data-tema-cliente] .cliente-auth-card .auth-alternativa { color: var(--client-muted) !important; }
html[data-tema-cliente] .cliente-auth-card .campo-formulario input,
html[data-tema-cliente] .cliente-auth-card .campo-pin input {
  border-color: var(--client-border) !important;
  background: var(--client-surface-alt) !important;
  color: var(--client-text) !important;
}
html[data-tema-cliente] .cliente-auth-card input::placeholder { color: var(--client-muted) !important; }

@media (max-width: 520px) {
  .identidade-cores-grid { grid-template-columns: 1fr; }
}


/* Redes públicas — disponíveis no login e em todas as telas autenticadas do cliente. */
.cliente-contatos-publicos {
  display: grid;
  gap: 8px;
}
.cliente-contatos-publicos[hidden] { display: none !important; }
.cliente-contatos-publicos > span {
  color: var(--client-muted, #aeb5af);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .035em;
}
.cliente-contatos-publicos .contatos-negocio {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}
.cliente-contatos-publicos .contato-negocio {
  min-height: 36px;
  flex: 1 1 92px;
  padding: 7px 10px;
  border-color: var(--client-border, var(--brand-border)) !important;
  border-radius: 999px;
  background: var(--client-surface-alt, var(--brand-primary-soft)) !important;
  color: var(--client-text, #f5f3ef) !important;
  font-size: .69rem;
}
.cliente-contatos-publicos .contato-negocio::before {
  content: "●";
  margin-right: 6px;
  color: var(--brand-primary);
  font-size: .58rem;
}
.cliente-contatos-login {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--client-border, rgba(255,255,255,.1));
}
.cliente-contatos-app {
  margin: 18px 0 4px;
  padding: 13px;
  border: 1px solid var(--client-border);
  border-radius: 16px;
  background: var(--client-surface);
}
@media (max-width: 430px) {
  .cliente-contatos-publicos .contatos-negocio { grid-template-columns: none; }
  .cliente-contatos-publicos .contato-negocio { flex-basis: calc(50% - 4px); }
}