/* components.css - componentes reusaveis.
   Base da Fase 1. Tabela, filtros, modal, SelectBusca, toggle e loading ganham o
   detalhe especifico nas suas fases (5, 6, 7), reusando estas bases. */

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn:hover { background: var(--surface-2); }

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

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

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

.btn-sm {
  height: 34px;
  padding: 0 var(--sp-3);
  font-size: 12.5px;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-ghost:hover { background: var(--surface-2); }

/* Botao "Limpar cache" armado (2o clique confirma): vira perigo para avisar que e destrutivo. */
.btn-ghost.armado, .btn-ghost.armado:hover {
  background: var(--cor-perigo);
  border-color: var(--cor-perigo);
  color: var(--sobre-primaria);
}

/* ---------- Card / box ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-corpo { padding: var(--sp-5); }

/* ---------- Icones (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-primaria { color: var(--cor-primaria); }
.icon-ok { color: var(--cor-ok); }
.icon-perigo { color: var(--cor-perigo); }
.icon-dim { color: var(--text-dim); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-dim);
}

/* ---------- Spinner / loading (base; overlay na Fase 5) ---------- */
.spinner-circle {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--cor-primaria-suave);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

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

/* ---------- Formulario base (detalhe na Fase 3) ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.campo label {
  font-size: 13px;
  font-weight: 600;   /* SEM uppercase, SEM letter-spacing (Sistema_de_Estilos) */
  color: var(--text);
}

.input {
  height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}

.input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}

/* ---------- Formulario vertical (login, minha conta) ---------- */
.form-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-vertical .campo .input { width: 100%; }

/* ---------- Mensagens flash (sem popup nativo) ---------- */
.flash {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
}
.flash-erro { background: rgba(229, 72, 77, 0.12); border-color: var(--cor-perigo); color: var(--cor-perigo); }
.flash-ok { background: rgba(22, 163, 74, 0.12); border-color: var(--cor-ok); color: var(--cor-ok); }

/* ---------- Tela de login (standalone, fora do app-shell) ---------- */
.login-tela {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--bg);
}

.login-cartao {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}

.login-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.login-marca .marca-nome {
  font-family: var(--font-titulo);
  font-weight: 800;               /* marca de login: Sora 800 17px (Sistema_de_Estilos) */
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--text);
}

.login-cartao .btn-primary { width: 100%; justify-content: center; }

/* Logo da ferramenta (imagem "Gestao de Faturamento") - topnav e login.
   O PNG tem fundo claro; recebe um cartao branco arredondado com leve respiro
   para ficar limpo tanto no tema claro quanto no escuro. */
.marca-logo {
  height: 30px;                    /* topnav usa o logo horizontal (compacto), otimizando o espaco */
  width: auto;
  display: block;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}
.marca-logo-login { height: 92px; padding: 8px 14px; }   /* login usa o logo empilhado, maior */

/* ---------- Modal (Padrao_Modal): centralizado, tamanho em vw/vh, ESC/backdrop fecham ---------- */
.modal-bg {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-bg.visivel { display: flex; }

.modal-caixa {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow);
  animation: modalSobe .2s ease;
}
.modal-caixa.modal-sm { width: 40vw; max-height: 86vh; }
.modal-caixa.modal-md { width: 55vw; max-height: 70vh; }
.modal-caixa.modal-lg { width: 89vw; max-height: 90vh; }

@media (max-width: 1280px) {
  .modal-caixa.modal-md { width: 68vw; }
}
@media (max-width: 880px) {
  .modal-caixa.modal-sm,
  .modal-caixa.modal-md,
  .modal-caixa.modal-lg { 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(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-cab h3 { font-size: 17px; }

.modal-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-dim);
  display: grid;
  place-items: center;
}
.modal-x:hover { color: var(--text); }

.modal-corpo { padding: 22px; display: flex; flex-direction: column; gap: var(--sp-4); }

/* Secao "Limpar cache" dentro do modal de Atualizar Dados (acao secundaria, destrutiva) */
.modal-limpar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px; padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
}
.modal-limpar-hint { font-size: 12px; }

/* Modal da Reserva: tabela rolavel dentro do modal */
.reserva-scroll {
  overflow: auto;
  max-height: 68vh;   /* modal largo (modal-lg): cabe a coluna nova sem rolagem horizontal e mais linhas */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.reserva-tab { width: 100%; }

/* Celula clicavel: "Reservado" (abre a reserva) e "Estoque" com estoque em 2+ locais (abre o
   detalhe por unidade). Mesmo tratamento azul/sublinhado. */
.te-tab tbody td.reserva-link,
.te-tab.te-congela tbody td.reserva-link,
.te-tab tbody td.estoque-link,
.te-tab.te-congela tbody td.estoque-link {
  color: var(--cor-primaria-escura);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Linha de total no modal (soma das unidades = o que a coluna Estoque mostra no escopo Todas). */
.reserva-tab tbody tr.reserva-total td {
  font-weight: 700;
  border-top: 2px solid var(--border-forte);
}

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

/* ---------- Loading overlay global (Padrao_Loading_Estado) ---------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.loading-overlay.aberto { display: flex; }

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

.loading-overlay .spinner-circle {
  width: 44px;
  height: 44px;
  border: 4px solid var(--cor-primaria-suave);
  border-top-color: var(--cor-primaria);
}

.loading-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

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

/* ---------- Box de resultado (card alerta) ---------- */
.box-resultado {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.box-resultado.ok { border-color: var(--cor-ok); background: rgba(22, 163, 74, 0.10); }
.box-resultado.erro { border-color: var(--cor-perigo); background: rgba(229, 72, 77, 0.10); }
.box-resultado .br-titulo { font-weight: 600; margin-bottom: 2px; }
.box-resultado .br-detalhe { font-size: 13px; color: var(--text-dim); }

/* ---------- Barra de status (faixa informativa, NAO e KPI) ---------- */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.status-bar .st-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.status-bar .st-item strong { color: var(--text); font-weight: 600; }

/* ---------- Barra de filtros (Padrao_Barra_de_Filtros) ---------- */
.fu-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--sp-4);
}
/* Barra de filtros recolhida (botao "Ocultar filtros"): libera espaco para a tabela */
html.filtros-ocultos .fu-bar { display: none; }
.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(--text-dim);
}
.fu-bar input,
.fu-bar .fu-ms-btn {
  height: var(--fu-h);
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border-forte);
  border-radius: 7px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.fu-bar input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-suave); }

/* Multi-select (empresa): botao + popup com busca + checkboxes (Sem_Select_Nativo) */
.fu-ms { position: relative; min-width: 200px; }
.fu-ms-btn { justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; font-weight: 500; }
.fu-ms-btn .fu-ms-cv { color: var(--text-dim); font-size: 12px; }
.fu-ms-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 50;
  display: none;
  max-height: 300px;
  overflow-y: auto;
}
.fu-ms.open .fu-ms-pop { display: block; }
.fu-ms-busca {
  width: 100%; height: 32px; margin-bottom: 4px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev); color: var(--text); font-size: 13px;
}
.fu-ms-pop label {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.fu-ms-pop label:hover { background: var(--surface-2); }
.fu-ms-pop label input { accent-color: var(--cor-primaria); margin: 0; }
.fu-ms-pop hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* ---------- Autocomplete (descricao: sugere produtos enquanto digita) ---------- */
.ac-wrap { position: relative; width: 100%; }
.ac-wrap > input { width: 100%; }
.ac-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 60;
  display: none;
  max-height: 300px;
  overflow-y: auto;
}
.ac-lista.aberta { display: block; }
.ac-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-item:hover, .ac-item.ativo { background: var(--surface-2); color: var(--cor-primaria); }

/* ---------- Tabela com ferramentas (Padrao_Tabela) ---------- */
.tabela-topo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
/* paginacao empurrada p/ direita; o menu de 3 pontos vem logo ao lado dela */
.tabela-topo .ta-paginacao { margin-left: auto; }
.tabela-info { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }

/* Legenda dos icones (BL / SEP / SI / PI), ao lado do botao Retrair todos */
.ta-legenda {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px; color: var(--text-dim);
}
.ta-legenda .lg-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ta-legenda i { font-size: 15px; }
.lg-bl-bloq, .ic-bl-bloq { color: var(--cor-perigo); }
.lg-bl-lib,  .ic-bl-lib  { color: var(--cor-ok); }
.lg-sim,     .ic-sim     { color: var(--cor-ok); }
.lg-nao,     .ic-nao     { color: var(--cor-alerta); }   /* caixa vazia laranja (padrao ERP) */

/* Celula que mostra icone no lugar do texto (BL/SEP/SI/PI) */
.te-tab tbody td.cel-icone { text-align: center; }
.te-tab tbody td.cel-icone i { font-size: 18px; vertical-align: middle; }

.te-scroll {
  overflow: auto;          /* rolagem horizontal E vertical */
  max-height: 72vh;        /* aproveita o espaco recuperado do respiro topo/rodape */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Uma rolagem so nas telas de tabela (Consulta/Operacao/Pedidos Compras): a area da tabela
   preenche a altura restante da janela e rola sozinha. Assim o cabecalho sticky (thead top:0)
   fica REALMENTE fixo ao rolar para baixo, sem a rolagem da janela competindo com a da tabela.
   So no desktop (>880px); no mobile segue o fluxo com max-height/rolagem da janela.
   Fora das telas de tabela (Leia-me/Configuracao) nada muda: rolagem normal da janela. */
@media (min-width: 881px) {
  body.pg-tabela { overflow: hidden; }
  body.pg-tabela .app-shell { height: 100vh; }
  body.pg-tabela .content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  body.pg-tabela .te-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}
.te-tab { border-collapse: collapse; width: 100%; font-size: 13px; }
.te-tab th, .te-tab td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  max-width: 240px;              /* colunas nao esticam demais; texto longo trunca */
}
/* Celulas: uma linha, corta com "..."; o texto completo aparece no tooltip (title) ao passar o cursor */
.te-tab td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.te-tab thead th {
  position: sticky; top: 0; z-index: 4;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: normal;           /* cabecalho pode quebrar em 2 linhas */
  vertical-align: bottom;
  line-height: 1.2;
  min-width: 78px;
}
.te-tab thead th:hover { color: var(--cor-primaria); }
/* rotulo do cabecalho: no maximo 2 linhas, corta com "..." (tooltip mostra por extenso) */
.te-tab thead th { padding-right: 22px; }
.te-tab thead th .th-rotulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* no maximo 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: normal;       /* quebra so entre palavras, nunca no meio da palavra */
  word-break: normal;
}
/* Separa por cor a origem das colunas: pedido (padrao), estoque (verde leve), compra (ambar leve).
   Fundo OPACO (tinta sobre --surface-2): o cabecalho e sticky, entao um fundo semitransparente
   deixaria as linhas rolando por tras vazarem atraves dele (uma "linha" passando ao rolar). */
.te-tab thead th[data-grupo="estoque"] { background: linear-gradient(rgba(22, 163, 74, 0.14), rgba(22, 163, 74, 0.14)), var(--surface-2); }
.te-tab thead th[data-grupo="compra"]  { background: linear-gradient(rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.16)), var(--surface-2); }
.te-tab tbody td[data-grupo="estoque"] { background: rgba(22, 163, 74, 0.05); }
.te-tab tbody td[data-grupo="compra"]  { background: rgba(245, 158, 11, 0.06); }
.te-tab tbody tr:hover td[data-grupo="estoque"] { background: rgba(22, 163, 74, 0.10); }
.te-tab tbody tr:hover td[data-grupo="compra"]  { background: rgba(245, 158, 11, 0.12); }
.te-tab thead th .th-sort { position: absolute; top: 6px; right: 8px; opacity: .5; font-size: 11px; }
.te-tab thead th.sorted .th-sort { opacity: 1; color: var(--cor-primaria); }
.te-tab tbody tr:hover { background: var(--surface-2); }
.te-tab tbody tr.selecionada { background: var(--cor-primaria-suave); }
/* Demarcacao: separa visualmente os grupos de pedido (1a linha de cada pedido) */
.te-tab tbody tr.novo-pedido td { border-top: 2px solid var(--border-forte); }
.te-tab tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Handle de redimensionar coluna (borda direita do th) */
.te-tab thead th .col-resize {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; user-select: none;
}
/* NAO redeclarar position:relative aqui: o th ja e position:sticky (top:0), o que tambem serve
   de contexto para o .col-resize/.th-sort absolutos. Um "position: relative" solto anulava o
   sticky das colunas NAO congeladas (o cabecalho nao ficava fixo na rolagem vertical). */

/* Congela as 2 primeiras colunas (Pedido e Descricao) ao rolar na horizontal, mantendo a
   referencia de qual pedido/produto se esta olhando. Larguras fixas p/ o offset da 2a ser exato.
   So nas telas Consulta/Operacao (.te-congela); a tela Pedidos Compras nao congela. */
.te-tab.te-congela th:nth-child(1), .te-tab.te-congela td:nth-child(1) {
  position: sticky; left: 0; z-index: 3;
  width: 96px; min-width: 96px; max-width: 96px;   /* cabe o +/- e o numero do pedido no cabecalho */
  background: var(--surface);
}
.te-tab.te-congela th:nth-child(2), .te-tab.te-congela td:nth-child(2) {
  position: sticky; left: 96px; z-index: 3;
  width: 230px; min-width: 230px; max-width: 230px;
  background: var(--surface);
  border-right: 2px solid var(--border-forte);   /* separa a area congelada do scroll */
}
.te-tab.te-congela thead th:nth-child(1), .te-tab.te-congela thead th:nth-child(2) {
  z-index: 6;                       /* canto sticky top+left: acima de tudo */
  background: var(--surface-2);
}
/* hover/selecionada tambem nas colunas congeladas (senao ficariam "brancas") */
.te-tab.te-congela tbody tr:hover td:nth-child(1), .te-tab.te-congela tbody tr:hover td:nth-child(2) { background: var(--surface-2); }
.te-tab.te-congela tbody tr.selecionada td:nth-child(1), .te-tab.te-congela tbody tr.selecionada td:nth-child(2) { background: var(--cor-primaria-suave); }
/* nao deixa redimensionar as congeladas (quebraria o offset da 2a) */
.te-tab.te-congela thead th:nth-child(1) .col-resize, .te-tab.te-congela thead th:nth-child(2) .col-resize { display: none; }

/* Realce: descricao de produto com MAIS DE UM pedido de compra em aberto (tela Operacao).
   Fundo azul suave, texto de marca, clicavel. A descricao e a 2a coluna congelada, cujas regras
   (base/hover/selecionada) tem alta especificidade: os seletores abaixo repetem o contexto
   .te-congela + estados para vencer o fundo, e vem depois na cascata para desempatar. */
.te-tab tbody td.te-desc-multipc,
.te-tab.te-congela tbody td.te-desc-multipc,
.te-tab.te-congela tbody tr:hover td.te-desc-multipc,
.te-tab.te-congela tbody tr.selecionada td.te-desc-multipc {
  /* fundo OPACO (azul suave por cima da superficie): a descricao e coluna congelada, entao um
     fundo semitransparente deixaria o conteudo rolando por tras vazar (sobreposicao de texto). */
  background: linear-gradient(var(--cor-primaria-suave), var(--cor-primaria-suave)), var(--surface);
  color: var(--cor-primaria-escura);
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 3px 0 0 var(--cor-primaria);
}
.te-tab tbody td.te-desc-multipc:hover { text-decoration: underline; }

/* ---------- Agrupamento por pedido: cabecalho-resumo com +/- (expandir/retrair) ----------
   O cabecalho e uma LINHA REAL com uma celula por coluna (alinhada com o corpo). Os campos de
   nivel pedido ate "Lim. Exped." ficam preenchidos, entao um pedido retraido ja mostra a situacao. */
.te-tab tbody tr.grupo-cab td {
  background: var(--surface-2);
  border-top: 2px solid var(--border-forte);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
/* pedido/descricao congeladas: no cabecalho tambem em surface-2 (vence a regra nth-child do congelamento) */
.te-tab.te-congela tbody tr.grupo-cab td:nth-child(1),
.te-tab.te-congela tbody tr.grupo-cab td:nth-child(2),
.te-tab.te-congela tbody tr.grupo-cab:hover td:nth-child(1),
.te-tab.te-congela tbody tr.grupo-cab:hover td:nth-child(2) {
  background: var(--surface-2);
}
.te-tab tbody tr.grupo-cab:hover td { background: var(--surface-2); }
.gc-toggle {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  border: 1px solid var(--border-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--cor-primaria-escura);
  cursor: pointer;
  font-size: 15px;
}
.gc-num { font-family: var(--font-titulo); font-weight: 700; color: var(--text); margin-left: 6px; }
.gc-cont { color: var(--text-dim); font-weight: 600; font-style: italic; }
.te-tab tbody tr.item-linha.oculto { display: none; }

/* ---------- Regras de cor da Operacao ----------
   Vencem as regras de fundo das colunas congeladas (nth-child 1/2), grupos e hover repetindo o
   contexto .te-congela + estado e vindo depois na cascata. */

/* Limite de Expedicao no futuro: SO o campo Lim. Exped. em vermelho (fundo claro + texto forte) */
.te-tab tbody td.op-lim-futura,
.te-tab tbody tr:hover td.op-lim-futura {
  background: var(--cor-perigo-suave);
  color: var(--cor-perigo);
  font-weight: 700;
}

/* BL do pedido bloqueado: numero do pedido (1a coluna, congelada) em vermelho */
.te-tab tbody td.op-pedido-bl,
.te-tab.te-congela tbody td.op-pedido-bl:nth-child(1),
.te-tab.te-congela tbody tr.op-linha-futura td.op-pedido-bl:nth-child(1) {
  color: var(--cor-perigo);
  font-weight: 700;
}

/* Status Recebimento "Confirmado Recebimento na Empresa": celula em verde claro */
.te-tab tbody td.op-status-ok,
.te-tab tbody tr:hover td.op-status-ok,
.te-tab.te-congela tbody tr.op-linha-futura td.op-status-ok,
.te-tab.te-congela tbody tr.op-linha-futura:hover td.op-status-ok {
  background: var(--cor-ok-suave);
}

/* Contadores Pedidos/Itens na barra de status da Operacao (mesmo formato dos demais st-item,
   com o valor destacado na cor da marca). Fica logo depois de "Registros no cache". */
.st-item.st-kpi strong { color: var(--cor-primaria-escura); }

.te-tab td.te-vazia {
  position: static; left: auto;
  width: auto; min-width: 0; max-width: none;
  padding: 40px 20px; text-align: center; color: var(--text-dim);
  border-right: none;
}

/* Menu 3 pontos da tabela */
.ta-menu-wrap { position: relative; }
.ta-menu-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border-forte); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; color: var(--text-dim);
}
.ta-menu-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.ta-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); display: none; z-index: 60; padding: 6px;
}
.ta-menu.aberto { display: block; }
.ta-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--text);
  border-radius: 6px; background: none; border: none; width: 100%; text-align: left;
}
.ta-menu-item:hover { background: var(--surface-2); color: var(--cor-primaria); }
.ta-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.ta-menu-titulo { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.ta-cols { max-height: 220px; overflow-y: auto; }
.ord-item { justify-content: space-between; }
.ord-item.ativo { color: var(--cor-primaria); font-weight: 600; }
.ord-item .ord-dir { color: var(--cor-primaria); font-size: 11px; }
.ta-cols label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.ta-cols label:hover { background: var(--surface-2); }
.ta-cols label input { accent-color: var(--cor-primaria); }

/* Paginacao */
/* Paginacao agora fica no topo da tabela, ao lado da legenda (nao ha mais faixa embaixo) */
.ta-paginacao { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 12.5px; }
.ta-paginacao .pg-info { color: var(--text-dim); white-space: nowrap; }

/* ---------- Toggle On/Off (Tipo 3, sol-lua) - Padrao_Toggle_OnOff ---------- */
.tema-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.tema-toggle .icon-sm { font-size: 15px; }

.cv-sw { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.cv-sw input { display: none; }
.cv-sw label {
  position: absolute; inset: 0;
  background: var(--border-forte);
  border-radius: 999px; cursor: pointer; transition: .15s;
}
.cv-sw label::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.cv-sw input:checked + label { background: var(--cor-ok); }   /* estado ligado verde (#16a34a via token) */
.cv-sw input:checked + label::after { transform: translateX(18px); }
.cv-sw input:focus-visible + label { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------- Utilitarios ---------- */
.texto-dim { color: var(--text-dim); }
.limitador-form { max-width: 420px; }
.erro-inline { color: var(--cor-perigo); font-size: 12.5px; font-weight: 500; }
.g-flex1 { flex: 1; }

/* Tela de Configuracao do acesso ao banco */
.form-titulo { font-size: 18px; margin: 0 0 var(--sp-2); }
#formConfig { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.input-senha { position: relative; }
.input-senha .input { width: 100%; padding-right: 42px; }
.btn-olho {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; border-radius: var(--radius-sm); font-size: 18px;
}
.btn-olho:hover { color: var(--cor-primaria); background: var(--surface-2); }
.campo-ajuda { font-size: 12px; }
.form-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--sp-2); }
#cfgResultado { margin-top: var(--sp-4); }

/* iOS nao da zoom no foco se o input tiver >= 16px (Responsividade_Sempre).
   Fica no components.css (carregado por ultimo) para vencer .fu-bar input/.input de 13-14px. */
@media (max-width: 720px) {
  .input, .fu-bar input, .fu-ms-busca { font-size: 16px; }
}

/* ---------- Conteudo do Leia-me ---------- */
.limitador-leiame { max-width: 760px; }
.leiame h2 { font-size: 16px; margin: var(--sp-5) 0 var(--sp-2); }
.leiame h2:first-child { margin-top: 0; }
.leiame p { margin-bottom: var(--sp-2); line-height: 1.6; }
.leiame ol { margin: 0 0 var(--sp-2) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.leiame code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px;
}
.leiame ul { margin: 0 0 var(--sp-2) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); line-height: 1.6; }
.leiame-credito { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-style: italic; }
.leiame-versao { margin-top: var(--sp-1); font-size: 12px; }
/* Legenda de icones dentro do Leia-me */
.leiame-icones { list-style: none; margin-left: 0; gap: var(--sp-2); }
.leiame-icones li { display: flex; align-items: center; gap: 10px; }
.leiame-icones i { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }

/* ==========================================================================
   Configuracao (submenu), Usuarios, Logs, IA config e o chat IA - Analise
   ========================================================================== */

/* Submenu da Configuracao (abas horizontais) */
.sub-nav {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.sub-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-dim); font-weight: 500; font-size: 13px; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sub-item i { font-size: 16px; }
.sub-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sub-item.ativo { color: var(--cor-primaria-escura); border-bottom-color: var(--cor-primaria); font-weight: 600; }

/* Cabecalho de tela com botao a direita (Usuarios) */
.cfg-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }

/* Tabela em area de configuracao: rola sozinha, altura limitada (sem depender de pg-tabela) */
.te-scroll-auto { overflow: auto; max-height: 62vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* Tags de papel */
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text-dim); }
.tag-admin { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

/* Acoes na tabela (editar/excluir) */
.col-acoes { white-space: nowrap; width: 1%; }
.btn-icone-acao {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-dim); cursor: pointer; margin-left: 4px;
}
.btn-icone-acao:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-icone-acao i { font-size: 16px; }

/* Botao de perigo (excluir) */
.btn-perigo { background: var(--cor-perigo); color: #fff; border: 1px solid var(--cor-perigo); }
.btn-perigo:hover { filter: brightness(0.94); }

/* Controle segmentado (papel: comum/admin) */
.seg { display: inline-flex; border: 1px solid var(--border-forte); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { padding: 8px 16px; border: none; background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 13px; font-weight: 500; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.ativo { background: var(--cor-primaria); color: var(--text-inverso); font-weight: 600; }

/* Lista de permissoes (checkboxes de telas) */
.perm-lista { display: flex; flex-direction: column; gap: 6px; }
.perm-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }

/* Barra de filtros / formulario em linha (Padrao_Formulario) */
.bf {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: var(--sp-4);
}
.bf .campo { display: flex; flex-direction: column; gap: 5px; }
.bf label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.bf .input { height: 40px; box-sizing: border-box; min-width: 200px; }
.bf .input-data { min-width: 150px; }
.bf > .campo > .btn { height: 40px; box-sizing: border-box; }
.col-datahora { min-width: 150px; }

/* Perguntas padrao: coluna do texto completo (caixa de texto read-only para o admin ler tudo) */
.te-tab td.pg-col-texto { max-width: none; white-space: normal; min-width: 420px; vertical-align: top; }
.te-tab td.pg-col-titulo { white-space: normal; min-width: 160px; vertical-align: top; font-weight: 600; }
.pg-ver {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; font-family: inherit; font-size: 12.5px; line-height: 1.45;
}

/* Linha do campo Modelo (input + botao Listar) na config da IA */
.ia-modelo-linha { display: flex; gap: var(--sp-2); align-items: stretch; }
.ia-modelo-linha .input { flex: 1; }
.ia-modelo-linha .btn { white-space: nowrap; flex-shrink: 0; }

/* ---------- IA - Analise (chat) ---------- */
.ia-wrap { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; }
/* Perguntas padrao (botoes prontos) */
.ia-padrao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ia-padrao-rot { font-size: 12.5px; color: var(--text-dim); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ia-padrao-rot i { color: var(--cor-alerta); }
.ia-pbtn {
  border: 1px solid var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ia-pbtn:hover { background: var(--cor-primaria); color: var(--text-inverso); }
.pg-texto { resize: vertical; min-height: 160px; line-height: 1.45; font-family: inherit; }
.ia-topo .form-titulo { display: flex; align-items: center; gap: 8px; }
.ia-topo .form-titulo i { color: var(--cor-primaria); }
.ia-sub { margin-top: 2px; }
.ia-aviso {
  display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px;
  background: rgba(245, 165, 36, 0.12); color: var(--text);
  border: 1px solid var(--cor-alerta); border-radius: var(--radius-sm); padding: 10px 12px;
}
.ia-aviso i { color: var(--cor-alerta); font-size: 18px; flex-shrink: 0; }
.ia-nota {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
}
.ia-nota i { font-size: 18px; }

.ia-msgs {
  overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 240px;
}
.ia-vazio { margin: auto; text-align: center; color: var(--text-dim); max-width: 520px; }
.ia-vazio > i { font-size: 40px; color: var(--border-forte); }
.ia-vazio p { margin: 10px 0; }
.ia-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ia-chip {
  border: 1px solid var(--border-forte); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
}
.ia-chip:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); background: var(--cor-primaria-suave); }

.ia-msg { display: flex; }
.ia-msg.ia-user { justify-content: flex-end; }
.ia-msg.ia-assistant { flex-direction: column; align-items: flex-start; max-width: 92%; }
.ia-bolha {
  max-width: 100%; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5;
  word-wrap: break-word; overflow-x: auto;
}
.ia-user .ia-bolha { max-width: 80%; white-space: pre-wrap; background: var(--cor-primaria); color: var(--text-inverso); border-bottom-right-radius: 4px; }
.ia-assistant .ia-bolha { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.ia-bolha.ia-pensando { color: var(--text-dim); font-style: italic; }
.ia-bolha.ia-erro { background: var(--cor-perigo-suave); color: var(--cor-perigo); }
/* Conteudo renderizado (markdown) dentro da bolha da IA */
.ia-bolha p { margin: 0 0 8px; }
.ia-bolha p:last-child, .ia-bolha ul:last-child, .ia-bolha ol:last-child, .ia-bolha table:last-child { margin-bottom: 0; }
.ia-bolha h3, .ia-bolha h4, .ia-bolha h5 { margin: 10px 0 6px; color: var(--cor-primaria-escura); font-size: 14px; }
.ia-bolha ul, .ia-bolha ol { margin: 4px 0 8px; padding-left: 20px; }
.ia-bolha li { margin: 2px 0; }
.ia-bolha code { background: var(--surface); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.ia-bolha table.ia-tab { border-collapse: collapse; margin: 6px 0; font-size: 12.5px; }
.ia-bolha table.ia-tab th, .ia-bolha table.ia-tab td { border: 1px solid var(--border-forte); padding: 5px 9px; text-align: left; white-space: nowrap; }
.ia-bolha table.ia-tab th { background: var(--surface); color: var(--text); font-weight: 600; }
/* Barra Copiar / Word / Excel abaixo da resposta */
.ia-ferramentas { display: flex; gap: 6px; margin-top: 6px; }
.ia-fbtn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-dim); padding: 4px 10px;
}
.ia-fbtn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.ia-fbtn i { font-size: 14px; }

.ia-composer { display: flex; gap: var(--sp-2); align-items: flex-end; }
.ia-input { flex: 1; resize: none; min-height: 44px; max-height: 160px; line-height: 1.4; padding: 11px 14px; }
.ia-enviar { height: 44px; width: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.ia-enviar i { font-size: 18px; }

@media (min-width: 881px) {
  body.pg-ia { overflow: hidden; }
  body.pg-ia .app-shell { height: 100vh; }
  body.pg-ia .content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body.pg-ia .ia-wrap { flex: 1 1 auto; min-height: 0; }
  body.pg-ia .ia-msgs { flex: 1 1 auto; min-height: 0; }
}

/* Logout e um POST (protegido por CSRF): o botao precisa parecer o icone-link vizinho. */
.form-sair { display: contents; }
button.btn-icone { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }