/*
  components.css
  Botoes, cards, tabelas, forms, SelectBusca, modais, badges, icones.
  Toda cor, raio, sombra e z-index vem de tokens.css. Nada de valor solto.
*/

/* ===== Botoes ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  color: var(--texto);
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: var(--transicao);
}

.btn:hover {
  border-color: var(--borda-forte);
  background: var(--fundo-alt);
}

/* Alvo de toque minimo no celular (ver Responsividade_Sempre) */
@media (max-width: 720px) {
  .btn {
    min-height: 44px;
    padding: 11px 16px;
  }
}

.btn-primary {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--branco);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
}

.btn-outline {
  background: transparent;
}

/* As notas da vault escrevem o botao principal ora como .btn-primary
   (Padrao_Acao_Primaria_na_Topbar.md:67) ora como .btn-primario
   (Padrao_Modal.md:251, Padrao_Barra_de_Filtros.md:48). Sao a MESMA coisa. Em
   vez de escolher uma e deixar metade dos exemplos da vault quebrando em
   silencio, as duas grafias valem. */
.btn-primario {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--branco);
  font-weight: 600;
}

.btn-primario:hover {
  background: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
}

/* Acao destrutiva NUNCA usa o primario laranja (Padrao_Modal.md:378) */
.btn-perigo {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: var(--branco);
  font-weight: 600;
}

.btn-perigo:hover {
  background: #C0392B;
  border-color: #C0392B;
}

.btn-secundario {
  background: var(--branco);
  border-color: var(--borda);
  color: var(--texto);
}

.btn-fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--texto-suave);
}

.btn-fantasma:hover {
  background: var(--fundo-alt);
  color: var(--texto);
}

.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.btn-sm {
  min-height: 30px;
  padding: 6px 10px;
  font-size: var(--fs-xs);
}

/* O alvo de toque de 44x44 de Responsividade_Sempre vale para TODO botao, e o
   .btn-sm e declarado depois do .btn: sem esta regra ele reduzia de volta para
   30px no celular e o dedo errava. Achado na conferencia visual em 375px. */
@media (max-width: 720px) {
  .btn-sm {
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* ===== Formularios ===== */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.campo label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--texto);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 40px;
  padding: 8px var(--sp-3);
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  color: var(--texto);
  font-size: 16px; /* nao diminuir: iOS da zoom no foco abaixo de 16px */
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: var(--anel-foco);
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.linha-campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.linha-campos-2 { grid-template-columns: repeat(2, 1fr); }
.linha-campos-3 { grid-template-columns: repeat(3, 1fr); }
.linha-campos-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 880px) {
  .linha-campos-2,
  .linha-campos-3 {
    grid-template-columns: 1fr;
  }

  .linha-campos-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 720px) {
  .input, .textarea, .select {
    font-size: var(--fs-md);
  }
}

/* ===== Card / Box ===== */

.cd {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* `height: 100%` e o par de `align-items: stretch` que Padrao_Box_Card.md:69-72
   manda para card IRMAO DENTRO DE GRID, e o seletor da nota e `.grid > .cd`,
   nao `.cd`. Estava no `.cd` solto ate a Fase 5: fora de grid, o card herdava a
   altura inteira de `.pagina` e uma caixa de duas linhas de texto ocupava a
   pagina toda. Mesma familia do bug do logo gigante da Fase 3: regra de
   componente presa ao contexto errado. */
.grid > .cd,
.grid-kpis > .cd {
  height: 100%;
}

.cd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cd-titulo {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--texto);
}

.cd-acoes {
  display: flex;
  gap: var(--sp-1);
}

.cd-clicavel {
  cursor: pointer;
  transition: var(--transicao);
}

.cd-clicavel:hover {
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.cd-vazio {
  align-items: center;
  text-align: center;
  padding: 40px var(--sp-4);
  gap: var(--sp-2);
}

.cd-vazio-titulo {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.cd-vazio-msg {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

/* Card de alerta */
.cd-sucesso { border-color: var(--verde); background: var(--verde-suave); }
.cd-aviso   { border-color: var(--ambar); background: var(--ambar-suave); }
.cd-erro    { border-color: var(--vermelho); background: var(--vermelho-suave); }
.cd-info    { border-color: var(--azul-info); background: var(--azul-info-suave); }

/* ===== KPI ===== */

.kpi-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
}

.kpi-valor {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.02em;
  color: var(--texto);
}

/* ===== Tabela ===== */

.tabela th {
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  text-align: left;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--borda);
}

.tabela td {
  font-size: var(--fs-md);
  color: var(--texto);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--borda);
}

.tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  .tabela { min-width: 640px; }
  .tabela td, .tabela th { white-space: nowrap; }
}

/* ===== Badge ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--raio-full);
  font-weight: 600;
  font-size: var(--fs-xs);
}

.badge-sucesso  { background: var(--verde-suave); color: var(--verde); }
.badge-aviso    { background: var(--ambar-suave); color: var(--ambar); }
.badge-erro     { background: var(--vermelho-suave); color: var(--vermelho); }
.badge-info     { background: var(--azul-info-suave); color: var(--azul-info); }
.badge-primaria { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

/* ===== SelectBusca (Componente_SelectBusca) =====
   Nomes das classes vem da nota, verbatim: .selectbusca, .sb-display,
   .sb-label, .sb-panel, .sb-search, .sb-opt. Nao inventar sinonimo: o JS do
   componente e o grep de conformidade procuram exatamente esses nomes. */

.selectbusca {
  position: relative;
  min-width: 200px;
}

.selectbusca .sb-display {
  width: 100%;
  min-height: var(--form-h);
  padding: 8px var(--sp-3);
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  cursor: pointer;
}

.selectbusca.open .sb-display {
  border-color: var(--cor-primaria);
  box-shadow: var(--anel-foco);
}

.selectbusca .sb-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selectbusca .sb-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.selectbusca.open .sb-panel { display: block; }

.selectbusca .sb-search {
  width: 100%;
  padding: var(--sp-3);
  border: none;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo);
  font-size: var(--fs-md);
  outline: none;
}

.selectbusca .sb-opt {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md);
  cursor: pointer;
}

.selectbusca .sb-opt:hover {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
}

@media (min-width: 720px) {
  .selectbusca .sb-display { font-size: var(--fs-md); }
}

/* ===== Modal (Padrao_Modal) =====
   Tamanho SEMPRE em vw/vh, nunca em px: modal calibrado em pixel num monitor
   fica minusculo no ultrawide e estoura no notebook (nota, principio 3). */

.modal-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-bg.aberto { display: flex; }

.modal-caixa {
  position: relative;
  z-index: var(--z-modal);
  background: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  width: 100%;
  overflow-y: auto;
  animation: modalSobe .2s ease;
}

.modal-caixa.modal-sm { width: 34vw; max-height: 42vh; }
.modal-caixa.modal-md { width: 55vw; max-height: 70vh; }
.modal-caixa.modal-lg { width: 89vw; max-height: 90vh; }

/* Caixa sem tamanho declarado cai no md, que e o default seguro da nota */
.modal-caixa:not(.modal-sm):not(.modal-md):not(.modal-lg):not(.modal-confirm) {
  width: 55vw;
  max-height: 70vh;
}

@media (max-width: 1280px) {
  .modal-caixa.modal-md,
  .modal-caixa:not(.modal-sm):not(.modal-md):not(.modal-lg):not(.modal-confirm) {
    width: 68vw;
  }
}

@media (max-width: 880px) {
  .modal-caixa.modal-sm,
  .modal-caixa.modal-md,
  .modal-caixa.modal-lg,
  .modal-caixa.modal-confirm,
  .modal-caixa:not(.modal-sm):not(.modal-md):not(.modal-lg):not(.modal-confirm) {
    width: 96vw;
    max-height: 92vh;
  }
}

@keyframes modalSobe {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-cab {
  padding: 18px 22px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.modal-cab h3 { font-size: 17px; }

.modal-x {
  font-size: 22px;
  color: var(--texto-fraco);
  display: grid;
  place-items: center;
}

.modal-x:hover { color: var(--texto); }

.modal-corpo { padding: 22px; }

.modal-rodape {
  padding: var(--sp-4) 22px;
  border-top: 1px solid var(--borda);
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;  /* primario sempre a direita */
}

/* Variante CONFIRM: destrutiva ou aviso curto.
   O tamanho fica DENTRO de uma media query de largura minima porque esta regra
   e declarada depois do bloco de 880px: sem isso ela reconquistava os 34vw no
   celular, e o modal virava uma tira de 127px. Achado na conferencia visual. */
.modal-caixa.modal-confirm { text-align: center; }

@media (min-width: 881px) {
  .modal-caixa.modal-confirm {
    width: 34vw;
    max-height: 42vh;
  }
}

.modal-confirm .modal-rodape { justify-content: center; }

.confirm-corpo { padding: 32px 28px var(--sp-3); }
.confirm-corpo h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.confirm-corpo p { color: var(--texto-suave); font-size: var(--fs-md); }

.confirm-icone {
  width: 68px;
  height: 68px;
  border-radius: var(--raio-full);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.confirm-icone i { font-size: 36px; }
.confirm-icone.confirm-perigo { background: var(--vermelho-suave); color: var(--vermelho); }
.confirm-icone.confirm-aviso  { background: var(--ambar-suave);    color: var(--ambar); }
.confirm-icone.confirm-info   { background: var(--azul-info-suave); color: var(--azul-info); }

/* Variante popup-centrado: <dialog> HTML5 obrigatorio quando o modal contem
   SelectBusca. Sem o overflow visivel, o dropdown corta na borda do dialog
   (Padrao_Modal_Popup_Centrado.md:41). O !important e proposital: e override
   de comportamento nativo do proprio elemento. */
dialog.popup-centrado {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  background: var(--branco);
  color: var(--texto);
  /* Tamanho em vw e vh, igual as outras variantes. A nota desta variante
     escreve `max-width: 520px; width: 92%` (Padrao_Modal_Popup_Centrado.md:38-39),
     mas Padrao_Modal.md:373 e mais nova e e regra inegociavel: "tamanho sempre
     em vw/vh, nunca em px", porque modal calibrado em pixel fica minusculo no
     ultrawide e estoura no notebook. Vence a regra geral, e a variante herda os
     mesmos .modal-sm, .modal-md e .modal-lg. */
  width: 55vw;
  max-height: 70vh;
  overflow: visible !important;
}

dialog.popup-centrado.modal-sm { width: 34vw; max-height: 42vh; }
dialog.popup-centrado.modal-md { width: 55vw; max-height: 70vh; }
dialog.popup-centrado.modal-lg { width: 89vw; max-height: 90vh; }

@media (max-width: 1280px) {
  dialog.popup-centrado,
  dialog.popup-centrado.modal-md { width: 68vw; }
}

dialog.popup-centrado::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}

@media (max-width: 880px) {
  dialog.popup-centrado,
  dialog.popup-centrado.modal-sm,
  dialog.popup-centrado.modal-md,
  dialog.popup-centrado.modal-lg {
    width: 96vw;
    max-height: 92vh;
  }
}

/* SelectBusca dentro de <dialog> top-layer: o JS reposiciona por coordenada,
   entao o painel sai do fluxo do proprio componente. */
.selectbusca .sb-panel.sb-in-dialog {
  position: fixed;
  z-index: var(--z-tooltip);
}

/* ===== Toast ===== */

.toast {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-toast);
  background: var(--texto);
  color: var(--branco);
  border-radius: var(--raio-sm);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sombra-md);
  font-size: var(--fs-sm);
}

/* ===== Icones (Phosphor) ===== */

.icon {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  vertical-align: middle;
}

.icon-sm { font-size: .9rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.75rem; }
.icon-xl { font-size: 2.5rem; }

.icon-primaria { color: var(--cor-primaria); }
.icon-sucesso  { color: var(--verde); }
.icon-erro     { color: var(--vermelho); }
.icon-muted    { color: var(--texto-fraco); }

/* ===== Marca (tela de login, standalone) ===== */

.login-marca {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--texto);
}

/* ===== Barra de formulario (Padrao_Formulario) =====
   Regra dura: todo controle da barra em 40px, alinhamento pela BASE, e o
   botao de acao ganha um <label>&nbsp;</label> para ficar com a mesma altura
   total dos campos. Sem esse label, o botao fica mais alto que os inputs. */

.ra-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 18px;
  /* Mesmo motivo do .fu-bar: o vao vem do gap da pagina. */
}

.ra-bar .campo { display: flex; flex-direction: column; gap: 5px; }

.ra-bar label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texto-suave);
}

.ra-bar .input,
.ra-bar .selectbusca,
.ra-bar .selectbusca .sb-display,
.ra-bar > .btn,
.ra-bar .campo > .btn {
  height: var(--form-h);
  min-height: var(--form-h);
  box-sizing: border-box;
}

.ra-bar .input { min-width: 240px; }
.ra-bar .selectbusca { min-width: 170px; }

/* O campo principal estica, os outros ficam no min-width. E classe, e nao
   style="flex:1" no HTML, porque Sistema_de_Estilos.md:14 proibe CSS na tela. */
.ra-bar .campo-principal { flex: 1; }

/* ===== Barra de filtros (Padrao_Barra_de_Filtros) ===== */

.fu-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Sem margin-bottom: quem separa a barra do que vem depois e o `gap` da
     .pagina. Margem aqui somaria com ele e daria 40px so nesta tela. */
}

.fu-bar .g { display: flex; flex-direction: column; gap: 4px; }

.fu-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
}

.fu-bar .input,
.fu-bar .selectbusca,
.fu-bar .selectbusca .sb-display,
.fu-bar .btn {
  height: var(--fu-h);
  min-height: var(--fu-h);
  box-sizing: border-box;
  font-size: var(--fs-sm);
}

.fu-bar .sp { flex: 1; }
.fu-bar .g-principal { flex: 1; }
.fu-acao { align-self: flex-end; }

/* Toggle TIPO 1: escolha entre valores. Marca com a cor da MARCA, nunca verde
   (Padrao_Toggle_Tipos.md:27 e :34). */
.fu-presets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  height: var(--fu-h);
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--branco);
}

.fu-presets button {
  height: calc(var(--fu-h) - 8px);
  border: 1px solid transparent;
  background: var(--branco);
  border-radius: 5px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
  /* Padrao_Toggle_Tipos.md:83-93: a opcao pode carregar icone Phosphor, e sem
     inline-flex o glifo e o texto nao alinham na mesma linha de base. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fu-presets button:hover { color: var(--cor-primaria); }

.fu-presets button.on {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
}

/* Multi-select do filtro: substitui o select multiple nativo */
.fu-ms { position: relative; }

.fu-ms-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 200px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  padding: 6px;
  z-index: var(--z-dropdown);
  display: none;
}

.fu-ms.open .fu-ms-pop { display: block; }

.fu-ms-pop label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 10px;
  border-radius: var(--raio-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
}

.fu-ms-pop label:hover { background: var(--fundo); }
.fu-ms-pop label input { accent-color: var(--cor-primaria); }

@media (max-width: 720px) {
  .fu-bar .g { flex: 1 1 100%; }
  .fu-presets { flex-wrap: wrap; height: auto; }

  /* Mesma familia do achado de 375px na Fase 5, agora no toggle tipo 1: o
     `height: calc(var(--fu-h) - 8px)` deixa cada opcao com 30px de altura, abaixo
     do alvo de toque de 44x44 que Responsividade_Sempre.md:138 exige. Corrigido
     na causa, no proprio componente, e nao na tela: assim vale tambem para o
     toggle que ja existe em /admin/seguranca. */
  .fu-presets button {
    height: 44px;
    min-height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Os 38px de `--fu-h` sao a altura de DESKTOP que Padrao_Barra_de_Filtros.md:14
     manda. No celular eles brigam com Responsividade_Sempre.md:138, que exige
     alvo de toque de 44x44: uma altura fixa vence o `min-height: 44px` do
     `.btn`, entao o Consultar ficava com 38px de alto. Achado so no navegador,
     em 375px. */
  .fu-bar .input,
  .fu-bar .selectbusca,
  .fu-bar .selectbusca .sb-display,
  .fu-bar .btn {
    height: 44px;
    min-height: 44px;
  }

  /* Responsividade_Sempre.md:170-177: input abaixo de 16px faz o iOS dar zoom
     ao focar, e a tela pula na cara do usuario. Os 13px da barra de filtros
     valem no desktop; aqui nao. */
  .fu-bar .input,
  .fu-bar .selectbusca .sb-display {
    font-size: 16px;
  }
}

/* ===== Tabela com ferramentas (Padrao_Tabela / Tabela_Sempre_com_Ferramentas)
   Nao existe tabela simples no sistema: toda tabela e .te-tab e nasce com
   menu de 3 pontos, filtro por coluna, ordenacao e exportacao. */

.te-wrap { position: relative; }

.te-tab {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
}

.te-tab th {
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  text-align: left;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

.te-tab td {
  font-size: var(--fs-md);
  color: var(--texto);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

.te-tab tbody tr:hover { background: var(--fundo); }

.te-tab th.ta-ordenavel { cursor: pointer; user-select: none; }
.te-tab th.ta-ordenavel:hover { color: var(--cor-primaria); }
.ta-sort { color: var(--cor-primaria); font-size: 10px; margin-left: 4px; }

.te-tab .ta-filtro-linha th { padding: 4px var(--sp-3) var(--sp-2); }

.ta-filtro-inp {
  width: 100%;
  height: 30px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.ta-filtro-inp:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: var(--anel-foco);
}

.tabela-vazia {
  text-align: center;
  color: var(--texto-fraco);
  padding: 40px var(--sp-4);
}

.te-info {
  font-size: var(--fs-xs);
  color: var(--texto-fraco);
  padding: var(--sp-2) var(--sp-3);
}

.ta-menu-wrap { position: relative; display: inline-block; }

.ta-menu-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto-suave);
}

.ta-menu-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

/* ACHADO SO NO NAVEGADOR, em 375px, na conferencia da Fase 7: o botao de 3
   pontos da tabela media 32x32, abaixo do alvo de toque de 44x44 que
   Responsividade_Sempre.md:138 exige. Ele tem `width` e `height` FIXOS, entao o
   `min-height` do `.btn` nao o alcanca, e nenhum grep pegaria isso.
   Corrigido no COMPONENTE e nao na tela: e o mesmo botao em toda tabela do
   sistema, das fases 3, 4, 5 e 7. */
@media (max-width: 720px) {
  .ta-menu-btn {
    width: 44px;
    height: 44px;
  }
}
.ta-menu-btn i { font-size: 18px; }

.ta-menu,
.ta-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
  z-index: var(--z-dropdown);
  display: none;
}

.ta-menu { min-width: 220px; }
.ta-pop { min-width: 300px; }
.ta-menu.aberto, .ta-pop.aberto { display: block; }

.ta-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--texto);
  text-align: left;
}

.ta-menu-item:hover { background: var(--fundo); color: var(--cor-primaria); }
.ta-menu-item i { font-size: 16px; color: var(--texto-suave); }
.ta-menu-item:hover i { color: var(--cor-primaria); }
.ta-menu-div { height: 1px; background: var(--borda); margin: 4px 0; }

.ta-pop-cab {
  padding: var(--sp-3) 14px;
  border-bottom: 1px solid var(--borda);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.ta-pop-cab i { color: var(--cor-primaria); }
.ta-pop-corpo { padding: var(--sp-2); max-height: 320px; overflow-y: auto; }

.ta-pop-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 10px;
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.ta-pop-item:hover { background: var(--fundo); }
.ta-pop-item input { accent-color: var(--cor-primaria); }

.ta-pop-rodape {
  padding: 10px 14px;
  border-top: 1px solid var(--borda);
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.ta-ord-regra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 7px 10px;
  font-size: var(--fs-sm);
}

.ta-vazio-dica { padding: 6px 10px; font-size: var(--fs-xs); color: var(--texto-fraco); }

/* ===== Coluna de acoes (Padrao_Tabela, slots fixos com esmaecimento)
   Todo slot existe em toda linha. Sem permissao vira span esmaecido com
   tooltip que diz o motivo, nunca button disabled e nunca slot omitido. */

.celula-acoes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.btn-icone {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  background: transparent;
  border: none;
  color: var(--texto-suave);
  transition: var(--transicao);
}

.btn-icone:hover { background: var(--fundo-alt); color: var(--texto); }
.btn-icone.perigo:hover { color: var(--vermelho); }

.btn-icone.desabilitado { opacity: .30; cursor: not-allowed; }
.btn-icone.desabilitado:hover { background: transparent; color: var(--texto-suave); }

@media (max-width: 720px) {
  .btn-icone { width: 44px; height: 44px; }
}

/* ===== Toggle liga/desliga, TIPO 3 (Padrao_Toggle_OnOff) =====
   Trio obrigatorio: span.cv-sw + input checkbox + label[for]. O display none
   no input e o que impede o navegador de desenhar a caixinha nativa dele por
   cima do interruptor. */

.cv-sw {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}

.cv-sw input { display: none; }

.cv-sw label {
  position: absolute;
  inset: 0;
  background: var(--borda-forte);
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: .15s;
}

.cv-sw label::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--branco);
  border-radius: 50%;
  transition: .15s;
  box-shadow: var(--sombra-sm);
}

.cv-sw input:checked + label { background: var(--verde-ligado); }
.cv-sw input:checked + label::after { transform: translateX(18px); }

.cv-sw input:focus-visible + label {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.cv-sw input:disabled + label { opacity: .5; cursor: wait; }

/* ===== Upload (Padrao_Upload_Arquivo) ===== */

.im-drop {
  display: block;
  border: 2px dashed var(--borda);
  border-radius: var(--raio-sm);
  padding: 32px;
  text-align: center;
  color: var(--texto-suave);
  cursor: pointer;
  transition: var(--transicao);
  user-select: none;
}

.im-drop:hover,
.im-drop.over {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  border-style: solid;
}

.im-drop.loaded {
  border-style: solid;
  border-color: var(--verde-ligado);
  background: var(--verde-ligado-fundo);
  color: var(--verde-ligado-texto);
}

.im-drop i { font-size: 36px; display: block; margin-bottom: 6px; }
.im-arquivo { display: block; margin-top: 6px; font-weight: 600; }

/* Input file fora da tela: nunca o visual nativo do navegador */
.im-inp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.im-acao {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  /* O Confirmar ancora na DIREITA (Padrao_Upload_Arquivo.md:318, regra 6-B), e a
     mensagem fica na esquerda pelo `margin-right: auto` dela. A ORDEM no HTML
     importa: a mensagem vem ANTES do botao, senao esse mesmo margin arrasta o
     grupo todo pra esquerda. Foi o bug que a propria nota conta ter cometido. */
  justify-content: flex-end;
  margin-top: 14px;
}

/* Mensagem inline da linha de acao. Ela existia na nota e nao existia no CSS
   deste projeto: a Fase 5 usava `.texto-fraco`, que nao carrega o
   `margin-right: auto` que ancora o botao. Achado ao escrever a tela de pacotes
   (Classe_Sem_CSS: classe escrita no HTML sem regra no CSS e ausencia, e nenhum
   grep de proibicao enxerga o que nao foi escrito). */
.im-msg {
  margin-right: auto;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  max-width: 60ch;
}

.im-msg.ok   { color: var(--verde-ligado-texto); font-weight: 600; }
.im-msg.erro { color: var(--vermelho); font-weight: 600; }

/* Rotulo de pre-requisito do upload (Padrao_Upload_Arquivo.md:145-153). E
   cabecalho CATEGORIAL, e por isso aqui o uppercase e correto: mesma familia do
   `.fu-lbl` da barra de filtros, e nao do label de formulario. */
.im-lbl {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  margin: var(--sp-4) 0 var(--sp-2);
}

/* ===== Loading (Padrao_Loading_Estado / Sempre_Mostrar_Loading) =====
   Spinner 44x44 com borda de 4px e texto descritivo. Loading nunca vai dentro
   do botao: vai na area que vai receber o resultado. */

.spinner-circle {
  width: 44px;
  height: 44px;
  border: 4px solid var(--borda);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: spinner-rotate .8s linear infinite;
}

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.loading-inline {
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--branco);
}

.loading-text {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--texto);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
}

.loading-overlay.aberto { display: flex; }

.loading-spinner {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 28px 44px;
  box-shadow: var(--sombra-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: modalSobe .2s ease;
}

.spinner-icone { display: inline-block; animation: spinner-rotate .8s linear infinite; }

/* ===== Flash (mensagem de resultado, no lugar do popup nativo) ===== */

.flash-area {
  position: fixed;
  right: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(380px, 92vw);
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--branco);
  box-shadow: var(--sombra-md);
  font-size: var(--fs-sm);
  transition: opacity .4s ease, transform .4s ease;
}

.flash.success { border-color: var(--verde); background: var(--verde-suave); }
.flash.error   { border-color: var(--vermelho); background: var(--vermelho-suave); }
.flash.aviso   { border-color: var(--ambar); background: var(--ambar-suave); }

.flash-sumindo { opacity: 0; transform: translateX(12px); }

/* ===== Matriz de permissoes ===== */

.matriz-grupo { margin-bottom: var(--sp-5); }

.matriz-grupo-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.matriz-grupo-nome {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
}

.matriz-auto {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

.matriz-auto-item { display: inline-flex; align-items: center; gap: var(--sp-2); }

.col-estreita { width: 90px; text-align: center; }
.celula-centro { text-align: center; }

/* ===== Tela de login (standalone, sem sidebar) ===== */

.login-tela {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--fundo);
}

.login-caixa {
  width: 100%;
  max-width: 420px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.login-topo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Na marca do login o quadro cresce, mas com tamanho declarado: e o unico
   lugar onde o logo e o elemento principal da tela. */
.login-topo .logo-quadro {
  width: 56px;
  height: 56px;
}

.login-topo .logo-quadro i { font-size: 30px; }

/* O bloco de texto ocupa o resto da linha. Sem isto ele fica preso na largura
   do conteudo e o nome da plataforma quebra letra a letra ao lado do logo. */
.login-topo > div:last-child {
  flex: 1;
  min-width: 0;
}

.login-sub { font-size: var(--fs-sm); color: var(--texto-suave); }

.campo-senha { position: relative; }
.campo-senha .input { padding-right: 44px; }

.toggle-senha {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--texto-fraco);
}

/* ===== Tela de convite (Fase 14) =====
   A mesma caixa do login, mais larga, porque aqui cabem o cracha e tres campos.
   Nao e componente novo: e a variante de largura do que ja existe. */

.login-caixa-larga { max-width: 520px; }

/* O cracha: bloco NAO editavel com o que o convite concede
   (Padrao_Convite_de_Acesso.md:205). Herda `.cd`, entao raio, borda e sombra vem
   de token, como todo card. */
.cd-cracha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--cor-primaria-suave);
  border-color: var(--cor-primaria);
}

.cracha-titulo {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cracha-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
}

.cracha-lista > div {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}

.cracha-lista dt {
  min-width: 108px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}

.cracha-lista dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--texto);
  min-width: 0;
}

/* Separador "ou" entre as duas portas de entrada. A linha e desenhada com
   pseudo-elemento para nao precisar de <hr> nem de div vazia no HTML. */
.ou-separador {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--texto-fraco);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ou-separador::before,
.ou-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borda);
}

/* Botao do Google. Fica NEUTRO de proposito: a acao principal da tela e criar a
   conta, e dois botoes na cor da marca competiriam entre si
   (Padrao_Modal: um primario por contexto). */
.btn-google {
  width: 100%;
  justify-content: center;
  background: var(--branco);
  border: 1px solid var(--borda-forte);
  color: var(--texto);
  font-weight: 600;
}

.btn-google:hover { background: var(--fundo); border-color: var(--texto-fraco); }
.btn-google .icon { font-size: 18px; }

.login-rodape-nota {
  font-size: var(--fs-xs);
  color: var(--texto-fraco);
  text-align: center;
}

/* ===== Utilitarios de pagina ===== */

.pagina-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  /* Sem margin-bottom: o vao vem do gap da .pagina, como em todo bloco. */
}

.texto-fraco { color: var(--texto-fraco); font-size: var(--fs-sm); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.erro-tela { display: grid; place-items: center; min-height: 60vh; text-align: center; }

/* ===== Marca de IA (Padrao_Marca_IA / Sempre_Marcar_IA) =====
   Roxo em todo elemento de IA, nunca a cor da marca. Icone sempre ph-sparkle.
   O botao desabilitado durante a geracao usa --roxo-claro e cursor wait, como
   Padrao_Marca_IA.md:130 escreve. */

.bloco-ia {
  background: linear-gradient(135deg, var(--roxo-pastel-1), var(--roxo-pastel-2));
  border: 1px solid var(--roxo-borda);
  border-radius: var(--raio);
  padding: 14px 18px;
  /* Sem margin-bottom: o vao vem do gap da .pagina, como em todo bloco. */
}

.bloco-ia h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--roxo-texto);
}

.bloco-ia p {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--roxo-texto);
}

.bloco-ia-acoes {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-ia {
  background: var(--roxo);
  color: var(--branco);
  border: 0;
  border-radius: var(--raio-sm);
  padding: 10px 18px;
  min-height: 36px;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transicao);
}
.btn-ia:hover { background: var(--roxo-escuro); }
.btn-ia:disabled { background: var(--roxo-claro); cursor: wait; }

/* Responsividade_Sempre.md:138: alvo de toque de 44x44 no celular. O .btn ja
   tem esta regra; o botao de IA e componente proprio e precisa da sua. */
@media (max-width: 720px) {
  .btn-ia { min-height: 44px; padding: 11px 16px; }
}

.tag-ia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--roxo-suave);
  color: var(--roxo);
  border: 1px solid var(--roxo-borda);
  border-radius: var(--raio-full);
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tag-ia i { font-size: var(--fs-xs); }

/* Resultado da sugestao, dentro do proprio bloco roxo. */
.ia-saida {
  margin-top: 10px;
  background: var(--branco);
  border: 1px solid var(--roxo-borda);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: var(--texto);
}
.ia-saida .ia-titulo {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--roxo-texto);
  display: block;
  margin-bottom: 4px;
}
.ia-saida ul { margin: 6px 0 0; padding-left: 18px; }
.ia-saida li { margin-bottom: 3px; }

/* Spinner da geracao por IA: mesmo componente de Padrao_Loading_Estado, com a
   borda superior roxa em vez da cor da marca (nota:272-276). */
.loading-inline.loading-ia .spinner-circle { border-top-color: var(--roxo); }
.loading-inline.loading-ia .loading-text { color: var(--roxo-texto); }

/* ===== Editor de markdown (Fase 5) =====
   Sem biblioteca: a CSP e script-src 'self' e nao ha CDN, e um editor rico
   seria peso morto para escrever markdown. Textarea com fonte monoespacada,
   que e o que o criador espera ao escrever markdown. */
.editor-md {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-md);
  line-height: 1.6;
  tab-size: 2;
}

.editor-meta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

/* Aviso de item somente leitura (regra local 2 do LASTRO). */
.cd-leitura {
  border-color: var(--ambar);
  background: var(--ambar-suave);
}

/* Bloco de codigo curto que a tela mostra para copiar (URL e segredo do
   webhook). Quebra a linha em vez de estourar a largura no celular. */
.bloco-copiar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 8px 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
}
.bloco-copiar span { flex: 1; min-width: 0; }

/* ===== Tela de instalacao (Fase 7) =====
   Esta e a unica tela do produto que o ASSINANTE DO CLIENTE le, e o
   PLANO_FASEADO diz que ela decide o custo de suporte do produto inteiro. Por
   isso a hierarquia e explicita: passo numerado, uma coisa por bloco, e o token
   como o elemento mais alto da pagina, porque ele e o unico que desaparece.

   Os passos SAO uma sequencia de verdade (copiar o token, colar a configuracao,
   conferir), entao a numeracao carrega informacao e nao e enfeite. */

/* Faixa de contexto: quem, plano, servidor, situacao. */
.in-contexto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.in-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.in-quem-nome {
  font-family: var(--font-titulo);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
}

.in-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.in-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

.in-meta-item .icon { color: var(--texto-fraco); }

/* Passo numerado. */
.in-passo {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.in-passo-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-full);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-family: var(--font-titulo);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.in-passo-titulo {
  font-size: var(--fs-lg);
  margin: 0 0 2px;
}

.in-passo-sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  line-height: 1.5;
}

/* O bloco do token que aparece uma vez so. E o unico lugar da tela com borda na
   cor da marca: gastar o destaque em um lugar so e o que faz o destaque
   funcionar. */
.in-token-novo {
  border-color: var(--cor-primaria);
  box-shadow: var(--anel-foco);
}

.in-escolha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-start;
}

.in-cliente {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.in-oculto { display: none; }

.in-instrucao {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  line-height: 1.6;
  /* Line-length: texto corrido de instrucao nao vai de ponta a ponta numa tela
     larga, senao o olho perde a linha na volta. */
  max-width: 68ch;
}

.in-caminhos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
}

.in-caminho-os {
  display: inline-block;
  min-width: 110px;
  color: var(--texto-suave);
  font-weight: 600;
}

.in-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* Bloco de codigo de VARIAS linhas, para copiar. Diferente de .bloco-copiar,
   que e de uma linha so.

   Responsividade_Sempre.md:90: a linha longa rola DENTRO deste container, e a
   pagina nao rola de lado. `min-width: 0` porque o bloco e item de flex, e sem
   ele o conteudo mais largo empurra a pagina inteira (mesmo achado da Fase 5 no
   .conteudo-wrapper). */
.bloco-codigo {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: var(--sp-3);
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.bloco-codigo pre {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  tab-size: 2;
  white-space: pre;
}

/* Botao que existe so para explicar por que a acao nao esta disponivel.
   Padrao_Tabela.md:409: <span> nao e clicavel por natureza, entao nao precisa de
   `disabled` (que engole o tooltip em alguns navegadores). */
.btn.btn-travado {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .in-contexto { align-items: flex-start; }
  .in-acoes .btn,
  .in-acoes .btn-travado { flex: 1 1 auto; justify-content: center; }
  /* O toggle de escolha do programa ocupa a largura no celular, senao as duas
     opcoes ficam apertadas e o dedo erra. */
  .in-escolha .fu-presets { width: 100%; }
}

/* ===== Aviso de validacao DENTRO do modal (Padrao_Modal_Nao_Fecha_Sozinho) =====
   Aparece quando a pessoa clica em Salvar e falta alguma coisa. O modal NAO
   fecha: ela decide se arruma ou se sai pelo Cancelar. */
.modal-aviso {
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.modal-aviso ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Campo que segurou o salvamento. Borda mais o icone de alerta seriam redundantes
   num campo so, entao aqui a cor faz o trabalho e a LISTA do aviso diz o motivo
   por extenso: cor sozinha nao carrega significado (WCAG 1.4.1). */
.campo-invalido .input,
.campo-invalido .textarea,
.campo-invalido .selectbusca .sb-display {
  border-color: var(--vermelho);
}

.campo-invalido .input:focus,
.campo-invalido .textarea:focus {
  box-shadow: 0 0 0 3px var(--vermelho-suave);
}

.campo-invalido label,
.campo-invalido .fu-lbl {
  color: var(--vermelho);
}

/* ===== Faixa de sessao impersonada (deeplink de espiao) =====
   Fica FIXA no topo do conteudo e nao some ao rolar. Quem entrou por deeplink
   precisa lembrar disso a cada clique: sem a faixa, alguem mexe achando que e a
   propria conta. Cor de aviso, e nao a da marca: nao e estado normal. */
.faixa-espiao {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 10px var(--sp-5);
  background: var(--ambar-suave);
  border-bottom: 2px solid var(--ambar);
  font-size: var(--fs-sm);
  color: var(--texto);
}

.faixa-espiao i { font-size: 18px; color: var(--ambar); }
.faixa-espiao span { flex: 1; min-width: 0; }
.faixa-espiao form { margin-left: auto; }

/* Bloco do link gerado, no modal do espiao. Quebra a linha em vez de estourar,
   porque a URL do deeplink e longa. */
.link-espiao {
  word-break: break-all;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 10px;
  display: block;
}