/* Minha Conta — tela pos-login self-service (projeto credenciais-visiveis-e-portal, D-004,
   tarefa 5, 08/09/2026). Reaproveita tokens.css (mesma paleta/fontes ja usadas em login.css).

   Tema escuro-vidro (09/09/2026, 4a rodada — pedido do Gabriel, com referencia visual real: o
   painel de app.kw24.com.br, ex. tela "Clientes", tem fundo NAVY ESCURO translucido com blur, nao
   claro/branco como a 1a versao desta tela usava. Valor canonico confirmado por leitura direta do
   app.kw24.com.br (base-shell.css, .painel-lateral/.modal-card-escuro, repetido literalmente em
   varios arquivos de la, sem token central — reproduzido aqui do mesmo jeito, por consistencia
   com o padrao real, nao inventado): fundo rgba(9,40,51,.94-.97) + blur(6px) + borda
   1px solid rgba(244,252,255,.20). --panel/--border/--text/etc. abaixo foram invertidos pra esse
   tema (texto claro sobre fundo escuro), mantendo os NOMES das variaveis (so o valor mudou) pra
   nao precisar reescrever cada regra que ja as usava. */

:root {
  --panel: rgba(244,252,255,.05);
  --panel-2: rgba(244,252,255,.08);
  --border: rgba(244,252,255,.16);
  --text: var(--kw24-gelo);
  --text-2: rgba(244,252,255,.72);
  --text-muted: rgba(244,252,255,.5);
  --label: rgba(244,252,255,.62);
  --vidro-bg: rgba(9,40,51,.94);
  --vidro-bg-forte: rgba(9,40,51,.97);
  --vidro-border: 1px solid rgba(244,252,255,.20);
  --vidro-blur: blur(6px);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; width:100%; min-height:100%; }
body {
  /* Mesmo gradiente + canvas de particulas do padrao do site (login.css/bg-login.js). */
  position:relative; overflow-x:hidden;
  background: linear-gradient(135deg, var(--kw24-navy-escuro) 0%, var(--kw24-azul) 50%, var(--kw24-teal) 100%);
  font-family:'Inter',system-ui,sans-serif; color:var(--text);
  min-height:100vh;
}
#kw24-bg-login { position:fixed; inset:0; z-index:0; display:block; }
h1, h2, h3 { font-family:'Rubik',system-ui,sans-serif; }

.tela-estado {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; gap:1rem; color:var(--kw24-gelo); font-size:.95rem;
}
.tela-estado .btn { margin-top:.5rem; }

.shell {
  position:relative; z-index:1; margin:0 auto;
  padding:2rem 2rem 2rem; height:100vh; display:flex; flex-direction:column;
}

.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.85rem; gap:1rem; }
.page-title { display:flex; align-items:center; gap:.65rem; font-size:1.5rem; font-weight:600; color:#fff; margin:0; }
.page-title svg { flex:none; }
.page-sub { margin:.3rem 0 0 2.15rem; font-size:.8rem; color:rgba(255,255,255,.55); }
.identity-chip {
  /* Mesmo tom escuro-vidro canonico do resto da tela, em vez do branco translucido da rodada
     anterior — consistencia total com o app.kw24.com.br real. */
  display:flex; align-items:center; gap:.6rem;
  background:var(--vidro-bg); backdrop-filter:var(--vidro-blur); -webkit-backdrop-filter:var(--vidro-blur);
  border:var(--vidro-border);
  border-radius:999px; padding:.4rem .9rem .4rem .4rem;
}
.identity-avatar {
  width:30px; height:30px; border-radius:50%; background:var(--kw24-azul);
  color:#061920; font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}
.identity-chip .name { font-size:.8rem; font-weight:600; color:#fff; line-height:1.15; }
.identity-chip .email { font-size:.68rem; color:rgba(255,255,255,.5); line-height:1.15; }

.alerta {
  margin-bottom:1.25rem; padding:.75rem 1rem; border-radius:10px; font-size:.82rem;
  background:var(--kw24-erro-bg); color:var(--kw24-erro-texto);
}
.alerta.sucesso { background:#d1fae5; color:#059669; }

/* Mestre-detalhe cheio de tela: lista a esquerda, detalhe do item selecionado a direita, sem
   overlay — mesmo padrao de app.kw24.com.br (ex. tela "Clientes"). */
.window-box {
  flex:1; min-height:0; display:flex;
  background:var(--vidro-bg); backdrop-filter:var(--vidro-blur); -webkit-backdrop-filter:var(--vidro-blur);
  border:var(--vidro-border); border-radius:16px;
  overflow:hidden; box-shadow:-20px 0 50px rgba(3,25,32,.35), 0 24px 60px rgba(3,25,32,.3);
}
.master-lista {
  width:340px; flex:none; border-right:1px solid var(--border);
  overflow-y:auto; padding:.75rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.divisor-lista {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); padding:1rem .6rem .5rem;
}
.item-lista {
  display:flex; align-items:center; gap:.75rem;
  background:none; border:none; border-left:3px solid transparent; border-radius:8px;
  padding:.75rem .6rem; cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit;
  transition:background .15s, border-color .15s;
}
.item-lista:hover { background:rgba(244,252,255,.06); }
.item-lista.ativo { background:rgba(13,194,255,.14); border-left-color:var(--kw24-azul); }
.item-lista .item-info { flex:1; min-width:0; }
.item-lista .item-info h2 { margin:0; font-size:.88rem; font-weight:600; color:var(--text); font-family:'Rubik',system-ui,sans-serif; }
.item-lista .item-info .desc { margin:.15rem 0 0; font-size:.72rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-lista .badge { flex:none; }

.master-detalhe { flex:1; min-width:0; overflow-y:auto; padding:2rem 2.5rem; }
.master-detalhe .detalhe-cabecalho { margin-bottom:1.75rem; }
.master-detalhe .detalhe-cabecalho h2 { margin:0; font-size:1.3rem; font-weight:600; color:var(--text); }
.master-detalhe .detalhe-cabecalho p { margin:.3rem 0 0; font-size:.82rem; color:var(--text-muted); }
.master-detalhe .detalhe-vazio { color:var(--text-muted); font-size:.9rem; text-align:center; margin-top:3rem; }

.textarea-grande {
  width:100%; min-height:46vh; padding:.85rem 1rem; border:1.5px solid var(--border);
  border-radius:10px; font-size:.9rem; font-family:inherit; color:var(--text);
  background:var(--panel); resize:vertical; line-height:1.55;
}
.textarea-grande:focus { outline:none; border-color:var(--kw24-azul); }
.textarea-grande:disabled { background:var(--panel); color:var(--text-muted); }

.module-icon {
  width:36px; height:36px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,194,255,.15); color:var(--kw24-azul);
}

.subsection-title {
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--label); margin:0 0 .8rem; padding-bottom:.55rem; border-bottom:1px solid var(--border);
}

.field-label {
  display:block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--label); margin-bottom:.4rem;
}
.field { margin-bottom:1rem; }
.field:last-child { margin-bottom:0; }
.input-row { display:flex; gap:.5rem; }
input[type=text], input[type=password] {
  flex:1; min-width:0; padding:.65rem .85rem; border:1.5px solid var(--border);
  border-radius:10px; font-size:.85rem; font-family:inherit; color:var(--text);
  background:var(--panel); transition:border-color .15s;
}
input:focus { outline:none; border-color:var(--kw24-azul); }
input::placeholder { color:var(--text-muted); }
input[readonly] { background:rgba(244,252,255,.03); color:var(--text-2); }

.btn {
  border:none; border-radius:8px; padding:.6rem 1rem; font-size:.8rem;
  font-weight:600; font-family:inherit; cursor:pointer; display:inline-flex;
  align-items:center; gap:.4rem; white-space:nowrap; transition:transform .1s, background .15s;
}
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:default; pointer-events:none; }
.btn-primary { background:var(--kw24-azul); color:#061920; }
.btn-primary:hover { background:var(--kw24-azul-hover); }
.btn-ghost { background:var(--panel-2); color:var(--text-2); border:1.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--kw24-azul); color:var(--kw24-azul); }
.btn-icon { padding:.6rem .7rem; }
.btn.copied { background:#059669 !important; color:#fff !important; border-color:#059669 !important; }

.row-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.1rem; }

.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.68rem; font-weight:600; padding:.25rem .6rem; border-radius:999px;
}
.badge-ok { background:#d1fae5; color:#059669; }
.badge-off { background:rgba(244,252,255,.1); color:var(--text-muted); }

.hint { font-size:.72rem; color:var(--text-muted); margin-top:.5rem; line-height:1.5; }

.example-box { margin-top:.85rem; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.example-box summary {
  list-style:none; cursor:pointer; padding:.6rem .9rem; background:var(--panel);
  font-size:.75rem; font-weight:600; color:var(--kw24-azul);
  display:flex; align-items:center; gap:.4rem; user-select:none;
}
.example-box summary::-webkit-details-marker { display:none; }
.example-box summary svg { transition:transform .15s; }
.example-box[open] summary svg { transform:rotate(90deg); }
.example-box pre {
  margin:0; padding:.9rem 1rem; background:#04141c; color:#c9e9f5;
  font-family:'SF Mono',Consolas,monospace; font-size:.74rem; line-height:1.55; overflow-x:auto;
}
.example-box-rodape {
  display:flex; align-items:center; justify-content:flex-end; gap:.6rem;
  padding:.5rem .9rem; background:#04141c; border-top:1px solid rgba(255,255,255,.08);
}
.copy-note { font-size:.68rem; color:rgba(255,255,255,.45); font-style:italic; }
.btn-copiar-escuro { background:transparent; border-color:rgba(255,255,255,.25); color:#c9e9f5; flex:none; }

.area-row-flat {
  display:flex; align-items:center; gap:.7rem; padding:.85rem .95rem;
  border:1px solid var(--border); border-radius:10px; margin-bottom:.6rem; background:var(--panel);
}
.area-row-flat:last-child { margin-bottom:0; }
.area-row-flat.sem-borda { border:none; padding:0; margin-bottom:0; background:none; }
.area-row-flat .info { flex:1; min-width:0; }
.area-row-flat .titulo { font-size:.85rem; font-weight:600; color:var(--text); }
.area-row-flat .org { font-size:.7rem; color:var(--text-muted); margin-top:.1rem; }

.conexao-row {
  display:flex; align-items:center; gap:.75rem; padding:.75rem .95rem;
  border:1px solid var(--border); border-radius:10px; margin-bottom:.75rem; background:var(--panel);
}
.conexao-row .dot { width:8px; height:8px; border-radius:50%; background:var(--kw24-verde); flex:none; }
.conexao-row .info { flex:1; min-width:0; }
.conexao-row .org-nome { font-size:.85rem; font-weight:600; color:var(--text); }
.conexao-row .org-webhook {
  font-size:.72rem; color:var(--text-muted); font-family:'SF Mono',Consolas,monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.modal-status { font-size:.78rem; margin-top:.85rem; padding:.65rem .8rem; border-radius:8px; display:none; }
.modal-status.testing { display:block; background:rgba(244,252,255,.08); color:var(--text-2); }
.modal-status.ok { display:block; background:#d1fae5; color:#059669; }
.modal-status.erro { display:block; background:var(--kw24-erro-bg); color:var(--kw24-erro-texto); }

.modal-overlay {
  position:fixed; inset:0; background:rgba(3,25,32,.7); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:2.5rem;
}
.modal-overlay.open { display:flex; }
.modal-box {
  /* Mesmo padrao "modal-card-escuro" canonico do app.kw24.com.br. */
  background:var(--vidro-bg-forte); backdrop-filter:var(--vidro-blur); -webkit-backdrop-filter:var(--vidro-blur);
  border:var(--vidro-border); border-radius:16px; width:100%; max-width:800px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 70px rgba(3,25,32,.5);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.15rem 1.5rem; border-bottom:1px solid var(--border); }
.modal-header h3 { margin:0; font-size:1.05rem; font-weight:600; color:var(--text); }
.modal-close { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.3rem; display:flex; }
.modal-close:hover { color:var(--text); }
.modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; }