/* =====================================================================
   config-admin.css — padrão único das telas de configuração e
   administração (onda 4 de design, 14/10/2026)
   =====================================================================

   Telas cobertas: Configurações (conta, notificações, feriados,
   dispositivos, agente de prazos, faturas), Equipe, Gestão, Admin,
   Certificados, Credenciais, Logs, Agendamentos de relatório,
   Biblioteca, Base de Conhecimento, IA Jurídica, Conversas, Gmail,
   Suporte, Planos, Assinar, Exclusão de dados, Termos e Privacidade.

   Princípios (lidos de Linear e Stripe, traduzidos para os tokens):
     • Uma superfície por seção, borda de cabelo, sem sombra e sem
       "levantar" no hover — cartão parado é cartão confiável.
     • Seção = cabeçalho (título + uma linha de explicação) → linhas
       rótulo/explicação/controle → rodapé com UMA ação primária.
     • Estado sempre por palavra (lt-badge), nunca só por cor.
     • Nenhuma cor literal aqui: tudo vem de lt-tokens.css.

   Tudo é escopado em .lt-cfg para não vazar para as outras telas.
   ===================================================================== */

/* ── Escopo da página ─────────────────────────────────────────────── */
.lt-cfg{
  --cfg-max: 1080px;
  --cfg-label-w: 280px;
  max-width: var(--cfg-max);
  margin-inline: auto;
  color: var(--lt-tx-2);
  font-family: var(--lt-font);
}
.lt-cfg--wide{ --cfg-max: 1360px; }
.lt-cfg--narrow{ --cfg-max: 760px; }

.lt-cfg :where(h1,h2,h3,h4,h5,h6){ text-wrap: balance; color: var(--lt-tx-1); }
.lt-cfg :where(p, li, dd){ text-wrap: pretty; }
.lt-cfg :where([id]){ scroll-margin-top: calc(var(--topbar-height, 64px) + var(--lt-s16)); }
.lt-cfg :where(button, .btn, a, [role="button"], summary, label){ touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lt-cfg :where(.lt-num, td.num, th.num, .table td, .table th){ font-variant-numeric: tabular-nums; }

/* ── Cabeçalho da página ──────────────────────────────────────────── */
.lt-cfg-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--lt-s12) var(--lt-s24);
  padding-bottom: var(--lt-s20);
  margin-bottom: var(--lt-s24);
  border-bottom: 1px solid var(--lt-line);
}
.lt-cfg-head__texto{ min-width: 0; flex: 1 1 320px; }
.lt-cfg-head h1,
.lt-cfg-title{
  margin: 0;
  font: 600 22px/1.3 var(--lt-font);
  letter-spacing: var(--lt-track-20);
  color: var(--lt-tx-1);
}
.lt-cfg-head p,
.lt-cfg-sub{
  margin: var(--lt-s4) 0 0;
  max-width: 68ch;
  font-size: 14px; line-height: 1.5;
  color: var(--lt-tx-3);
}
.lt-cfg-head__acoes{ display: flex; align-items: center; gap: var(--lt-s8); flex-wrap: wrap; }

/* ── Layout com navegação de seções à esquerda ───────────────────── */
.lt-cfg-layout{
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: var(--lt-s32);
  align-items: start;
}
.lt-cfg-layout > nav{ position: sticky; top: calc(var(--topbar-height, 64px) + var(--lt-s16)); min-width: 0; }
.lt-cfg-nav{
  display: flex; flex-direction: column; gap: var(--lt-s2);
  margin: 0; padding: 0; list-style: none;
}
.lt-cfg-nav a{
  display: flex; align-items: center; min-height: var(--lt-h-nav);
  padding: 0 var(--lt-s12);
  border-radius: var(--lt-r-ctl);
  font: 500 13.5px/1.3 var(--lt-font);
  color: var(--lt-tx-2); text-decoration: none;
  transition: background-color var(--lt-t-fast) var(--lt-ease), color var(--lt-t-fast) var(--lt-ease);
}
.lt-cfg-nav a:hover{ background: var(--lt-sunken); color: var(--lt-tx-1); }
.lt-cfg-nav a[aria-current="true"],
.lt-cfg-nav a[aria-current="page"]{ background: var(--lt-primary-tint); color: var(--lt-primary-deep); font-weight: 600; }
.lt-cfg-main{ min-width: 0; display: flex; flex-direction: column; gap: var(--lt-s24); }
@media (max-width: 991.98px){
  .lt-cfg-layout{ grid-template-columns: minmax(0, 1fr); gap: var(--lt-s16); }
  .lt-cfg-layout > nav{ position: static; }
  .lt-cfg-nav{
    flex-direction: row; overflow-x: auto;
    padding-bottom: var(--lt-s4); border-bottom: 1px solid var(--lt-line);
    overscroll-behavior-x: contain;
  }
  .lt-cfg-nav a{ white-space: nowrap; }
}

/* Abas de subpágina (links, não JS): mesma linguagem da navegação. */
.lt-cfg-tabs{
  display: flex; gap: var(--lt-s4); flex-wrap: wrap;
  margin: 0 0 var(--lt-s24); padding: 0; list-style: none;
  border-bottom: 1px solid var(--lt-line);
}
.lt-cfg-tabs a, .lt-cfg-tabs button{
  display: inline-flex; align-items: center; gap: var(--lt-s6);
  height: 40px; padding: 0 var(--lt-s12); margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  font: 500 13.5px/1 var(--lt-font); color: var(--lt-tx-3); text-decoration: none;
  transition: color var(--lt-t-fast) var(--lt-ease), border-color var(--lt-t-fast) var(--lt-ease);
}
.lt-cfg-tabs a:hover, .lt-cfg-tabs button:hover{ color: var(--lt-tx-1); }
.lt-cfg-tabs [aria-current="page"], .lt-cfg-tabs [aria-selected="true"], .lt-cfg-tabs .active{
  color: var(--lt-tx-1); border-bottom-color: var(--lt-primary); font-weight: 600;
}

/* ── Seção ────────────────────────────────────────────────────────── */
.lt-sec{
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  min-width: 0;
}
.lt-sec + .lt-sec{ margin-top: 0; }
.lt-sec__head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--lt-s12) var(--lt-s16); flex-wrap: wrap;
  padding: var(--lt-s20) var(--lt-s24) var(--lt-s16);
}
.lt-sec__head > div:first-child{ min-width: 0; flex: 1 1 280px; }
.lt-sec__title{
  margin: 0;
  font: 600 15.5px/1.35 var(--lt-font);
  letter-spacing: var(--lt-track-16);
  color: var(--lt-tx-1);
}
.lt-sec__desc{
  margin: var(--lt-s4) 0 0;
  max-width: 72ch;
  font-size: 13.5px; line-height: 1.5;
  color: var(--lt-tx-3);
}
.lt-sec__body{ padding: 0 var(--lt-s24) var(--lt-s20); }
.lt-sec__body--flush{ padding: 0; }
.lt-sec__foot{
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--lt-s8);
  padding: var(--lt-s12) var(--lt-s24);
  border-top: 1px solid var(--lt-line);
  background: var(--lt-sunken);
  border-radius: 0 0 var(--lt-r-card) var(--lt-r-card);
}
.lt-sec__foot-nota{ margin-right: auto; font-size: 12.5px; color: var(--lt-tx-3); }
.lt-sec--risk{ border-color: var(--bs-danger-border-subtle, var(--lt-line-strong)); }
.lt-sec--risk .lt-sec__title{ color: var(--lt-risk); }

/* ── Linha rótulo / explicação / controle ─────────────────────────── */
.lt-row{
  display: grid;
  grid-template-columns: minmax(0, var(--cfg-label-w)) minmax(0, 1fr);
  gap: var(--lt-s8) var(--lt-s32);
  align-items: start;
  padding: var(--lt-s16) var(--lt-s24);
  border-top: 1px solid var(--lt-line-soft);
}
.lt-sec__body > .lt-row:first-child{ border-top: 0; }
.lt-row__label{
  display: block; margin: 0;
  font: 600 13.5px/1.4 var(--lt-font);
  color: var(--lt-tx-1);
}
.lt-row__hint{
  margin: var(--lt-s2) 0 0;
  font-size: 12.5px; line-height: 1.45;
  color: var(--lt-tx-3);
}
.lt-row__ctl{ min-width: 0; }
.lt-row__ctl > .form-control,
.lt-row__ctl > .form-select,
.lt-row__ctl > .input-group{ max-width: 420px; }
.lt-row--inline{ align-items: center; }
.lt-row--inline .lt-row__ctl{ display: flex; justify-content: flex-end; align-items: center; gap: var(--lt-s8); }
@media (max-width: 767.98px){
  .lt-row{ grid-template-columns: minmax(0, 1fr); padding: var(--lt-s12) var(--lt-s16); }
  .lt-sec__head{ padding: var(--lt-s16) var(--lt-s16) var(--lt-s12); }
  .lt-sec__body{ padding: 0 var(--lt-s16) var(--lt-s16); }
  .lt-sec__foot{ padding: var(--lt-s12) var(--lt-s16); }
  .lt-row--inline .lt-row__ctl{ justify-content: flex-start; }
}

/* Grade de campos dentro de uma seção (formulários mais densos). */
.lt-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lt-s16) var(--lt-s20); }
.lt-fields--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lt-fields .lt-span-2{ grid-column: span 2; }
.lt-fields .lt-span-all{ grid-column: 1 / -1; }
@media (max-width: 767.98px){
  .lt-fields, .lt-fields--3{ grid-template-columns: minmax(0, 1fr); }
  .lt-fields .lt-span-2{ grid-column: auto; }
}

/* ── Lista de itens (contas, dispositivos, credenciais) ─────────── */
.lt-list{ margin: 0; padding: 0; list-style: none; }
.lt-list__item{
  display: flex; align-items: center; gap: var(--lt-s12) var(--lt-s16); flex-wrap: wrap;
  padding: var(--lt-s12) var(--lt-s24);
  border-top: 1px solid var(--lt-line-soft);
  min-width: 0;
}
.lt-list__item:first-child{ border-top: 0; }
.lt-list__main{ flex: 1 1 240px; min-width: 0; }
.lt-list__title{ font: 600 14px/1.4 var(--lt-font); color: var(--lt-tx-1); overflow-wrap: anywhere; }
.lt-list__meta{ font-size: 12.5px; line-height: 1.45; color: var(--lt-tx-3); overflow-wrap: anywhere; }
.lt-list__acoes{ display: flex; align-items: center; gap: var(--lt-s6); margin-left: auto; }

/* Pares chave → valor (status, metadados). */
.lt-kv{ display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--lt-s6) var(--lt-s20); margin: 0; font-size: 13.5px; }
.lt-kv dt{ font-weight: 500; color: var(--lt-tx-3); }
.lt-kv dd{ margin: 0; color: var(--lt-tx-1); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ── Estado vazio ─────────────────────────────────────────────────── */
.lt-empty{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--lt-s6);
  padding: var(--lt-s40) var(--lt-s24);
  color: var(--lt-tx-3);
}
.lt-empty__icone{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: var(--lt-s6);
  border-radius: 50%; background: var(--lt-sunken); color: var(--lt-tx-3);
  font-size: 18px;
}
.lt-empty__titulo{ margin: 0; font: 600 14.5px/1.4 var(--lt-font); color: var(--lt-tx-1); }
.lt-empty__texto{ margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.5; }
.lt-empty .btn{ margin-top: var(--lt-s8); }

/* ── Carregando ───────────────────────────────────────────────────── */
.lt-loading{
  display: flex; align-items: center; justify-content: center; gap: var(--lt-s8);
  padding: var(--lt-s32) var(--lt-s16);
  font-size: 13.5px; color: var(--lt-tx-3);
}

/* ── Erro de campo (inline, perto do controle) ───────────────────── */
.lt-field-error{
  display: block; margin-top: var(--lt-s4);
  font-size: 12.5px; line-height: 1.4; color: var(--lt-risk);
}
.lt-field-error:empty{ display: none; }
.lt-cfg .form-control[aria-invalid="true"],
.lt-cfg .form-select[aria-invalid="true"]{ border-color: var(--lt-risk); }

/* ── Indisponível / em preparação: honesto e discreto ────────────── */
.lt-unavailable{
  display: flex; gap: var(--lt-s12); align-items: flex-start;
  padding: var(--lt-s12) var(--lt-s16);
  border: 1px dashed var(--lt-line-strong); border-radius: var(--lt-r-ctl);
  background: var(--lt-sunken);
  font-size: 13.5px; line-height: 1.5; color: var(--lt-tx-2);
}
.lt-unavailable > .bi{ color: var(--lt-tx-3); margin-top: 2px; }

/* ── Normalização dos componentes Bootstrap dentro do escopo ─────── */
/* Cartão parado: sem sombra, sem translateY no hover. */
.lt-cfg .card{
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-r-card);
  box-shadow: none;
  background: var(--lt-surface);
  transform: none;
  transition: border-color var(--lt-t-fast) var(--lt-ease);
}
.lt-cfg .card:hover{ box-shadow: none; transform: none; }
.lt-cfg .card-header{
  background: transparent;
  border-bottom: 1px solid var(--lt-line);
  padding: var(--lt-s16) var(--lt-s20);
  font: 600 14.5px/1.4 var(--lt-font);
  color: var(--lt-tx-1);
}
.lt-cfg .card-header :where(h1,h2,h3,h4,h5,h6){ font-size: 15px; font-weight: 600; margin: 0; }
.lt-cfg .card-body{ padding: var(--lt-s20); }
.lt-cfg .card-footer{ background: var(--lt-sunken); border-top: 1px solid var(--lt-line); padding: var(--lt-s12) var(--lt-s20); }

.lt-cfg .form-label{ font: 600 13px/1.4 var(--lt-font); color: var(--lt-tx-2); margin-bottom: var(--lt-s6); }
.lt-cfg .form-text{ font-size: 12.5px; color: var(--lt-tx-3); }
.lt-cfg .form-control, .lt-cfg .form-select{
  border-color: var(--lt-line-ctl);
  border-radius: var(--lt-r-ctl);
  background-color: var(--lt-surface);
  color: var(--lt-tx-1);
  font-size: 14px;
}
.lt-cfg .form-control::placeholder{ color: var(--lt-tx-3); opacity: .85; }
.lt-cfg .form-control[readonly], .lt-cfg .form-control:disabled{ background-color: var(--lt-sunken); color: var(--lt-tx-2); }

.lt-cfg .btn{
  transition: color var(--lt-t-fast) var(--lt-ease), background-color var(--lt-t-fast) var(--lt-ease),
              border-color var(--lt-t-fast) var(--lt-ease), box-shadow var(--lt-t-fast) var(--lt-ease);
  transform: none;
  font-weight: 500;
}
.lt-cfg .btn:hover{ transform: none; }

/* Botão só de ícone: alvo de 32px, quieto até o hover. */
.lt-icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: var(--lt-r-ctl);
  background: transparent; color: var(--lt-tx-3);
  transition: background-color var(--lt-t-fast) var(--lt-ease), color var(--lt-t-fast) var(--lt-ease), border-color var(--lt-t-fast) var(--lt-ease);
}
.lt-icon-btn:hover{ background: var(--lt-sunken); color: var(--lt-tx-1); border-color: var(--lt-line); }
.lt-icon-btn--risk:hover{ background: var(--lt-risk-tint); color: var(--lt-risk); border-color: transparent; }

/* Tabela quieta: cabeçalho pequeno em cinza, linhas de cabelo. */
.lt-cfg .table{
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--lt-primary-wash);
  margin-bottom: 0;
  font-size: 13.5px;
  color: var(--lt-tx-2);
}
.lt-cfg .table > thead > tr > th{
  background: var(--lt-sunken);
  border-bottom: 1px solid var(--lt-line);
  font: 600 12px/1.3 var(--lt-font);
  letter-spacing: .01em;
  color: var(--lt-tx-3);
  text-transform: none;
  white-space: nowrap;
  padding: var(--lt-s8) var(--lt-s12);
}
.lt-cfg .table > tbody > tr > td{
  border-bottom: 1px solid var(--lt-line-soft);
  padding: var(--lt-s12);
  vertical-align: middle;
}
.lt-cfg .table > tbody > tr:last-child > td{ border-bottom: 0; }
.lt-cfg .table-responsive{ border-radius: inherit; }

/* Abas Bootstrap (nav-tabs) no padrão sublinhado. */
.lt-cfg .nav-tabs{ border-bottom: 1px solid var(--lt-line); gap: var(--lt-s4); }
.lt-cfg .nav-tabs .nav-link{
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: var(--lt-s8) var(--lt-s12); margin-bottom: -1px;
  font: 500 13.5px/1.4 var(--lt-font); color: var(--lt-tx-3);
  background: transparent;
}
.lt-cfg .nav-tabs .nav-link:hover{ color: var(--lt-tx-1); }
.lt-cfg .nav-tabs .nav-link.active{ color: var(--lt-tx-1); border-bottom-color: var(--lt-primary); font-weight: 600; background: transparent; }

/* Alertas Bootstrap viram faixa quieta dentro do escopo. */
.lt-cfg .alert{ font-size: 13.5px; line-height: 1.5; padding: var(--lt-s12) var(--lt-s16); }

/* Textos legais (Termos, Privacidade): medida de leitura. */
.lt-doc{ max-width: 72ch; color: var(--lt-tx-2); font-size: 15px; line-height: 1.7; }
.lt-doc h2{ font: 600 18px/1.35 var(--lt-font); letter-spacing: var(--lt-track-16); margin: var(--lt-s32) 0 var(--lt-s8); }
.lt-doc h3{ font: 600 15.5px/1.4 var(--lt-font); margin: var(--lt-s24) 0 var(--lt-s6); }
.lt-doc p, .lt-doc li{ margin-bottom: var(--lt-s8); }

/* Dica de teclado e código curto. */
.lt-cfg kbd{ font: 500 12px/1 var(--lt-mono); padding: 2px 6px; border-radius: var(--lt-r-ctl-sm); background: var(--lt-sunken); color: var(--lt-tx-1); border: 1px solid var(--lt-line); box-shadow: none; }
.lt-mono{ font-family: var(--lt-mono); font-size: .94em; }

/* Modais abertos a partir destas telas: rolagem não vaza para a página. */
.modal-body{ overscroll-behavior: contain; }