/* Identidade visual VnSolution (Manual de Marca)
   Cores: azul #242844 | verde #79BCAB | grafite #343B3B.
   Fontes: Montserrat (texto) e uma face geométrica arredondada nos títulos
   (Cocogoose da marca é licenciada; se os arquivos forem adicionados em
   assets/fonts como cocogoose-*.woff2, passam a ser usados automaticamente). */
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Titulo VN"; font-weight: 400 700; font-style: normal; font-display: swap; src: local("Cocogoose Pro DemiBold"), local("Cocogoose DemiBold"), url("../fonts/cocogoose-demibold.woff2") format("woff2"), url("../fonts/varelaround-regular.woff2") format("woff2"); }

* { box-sizing: border-box; }

:root {
    --cor-marca: #242844;
    --cor-marca-clara: #343b5e;
    --cor-verde: #79bcab;
    --cor-verde-escuro: #2f7a67;
    --cor-verde-claro: #e8f4f1;
    --cor-grafite: #343b3b;
    --cor-destaque: #2f7a67;
    --cor-texto: #343b3b;
    --cor-texto-suave: #667070;
    --cor-borda: #dde5e3;
    --cor-fundo: #f3f6f5;
    --fonte-texto: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    --fonte-titulo: "Titulo VN", "Montserrat", "Segoe UI", sans-serif;
    --raio: 10px;
    --sombra: 0 1px 2px rgba(36, 40, 68, .06), 0 4px 16px rgba(36, 40, 68, .06);
}

body {
    font-family: var(--fonte-texto);
    background: var(--cor-fundo);
    margin: 0;
    color: var(--cor-texto);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body:not(.login-body) { min-height: 100vh; display: flex; flex-direction: column; }
body:not(.login-body) > .conteudo { flex: 1; width: 100%; }
a { color: var(--cor-verde-escuro); }
h1, h2, h3, legend { font-family: var(--fonte-titulo); font-weight: 400; font-synthesis: none; letter-spacing: .01em; }

/* Cabeçalho / menu */
.topbar {
    background: var(--cor-marca);
    border-bottom: 3px solid var(--cor-verde);
    box-shadow: 0 2px 12px rgba(36, 40, 68, .25);
}
.topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 24px;
}
.marca { display: flex; align-items: center; text-decoration: none; line-height: 0; flex-shrink: 0; }
.marca-logo { height: 34px; width: auto; display: block; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu-item {
    color: #d5dbe6;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
a.menu-item:hover { background: rgba(121, 188, 171, .16); color: #fff; }
a.menu-item.ativo { color: #fff; font-weight: 600; background: rgba(121, 188, 171, .22); }
.topbar-usuario { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-usuario-nome { color: #d5dbe6; font-size: 13px; font-weight: 500; }
.topbar-usuario-sair { color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; padding: 6px 14px; border: 1px solid rgba(121, 188, 171, .6); border-radius: 8px; transition: background .15s; }
.topbar-usuario-sair:hover { background: var(--cor-verde); color: var(--cor-marca); }

.menu-dropdown { position: relative; }
.menu-dropdown-toggle { cursor: pointer; display: inline-block; }
.menu-dropdown:hover > .menu-dropdown-toggle { background: rgba(121, 188, 171, .16); color: #fff; }
.menu-dropdown.ativo > .menu-dropdown-toggle { color: #fff; font-weight: 600; background: rgba(121, 188, 171, .22); }
.menu-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-top: 3px solid var(--cor-verde);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(36, 40, 68, .18);
    min-width: 250px;
    z-index: 20;
    padding: 6px;
}
.menu-dropdown:hover .menu-dropdown-content,
.menu-dropdown:focus-within .menu-dropdown-content { display: block; }
.menu-dropdown-content a { display: block; padding: 9px 14px; color: var(--cor-texto); text-decoration: none; font-size: 13.5px; border-radius: 6px; }
.menu-dropdown-content a:hover { background: var(--cor-verde-claro); color: var(--cor-marca); }
.menu-dropdown-content a.ativo { color: var(--cor-verde-escuro); font-weight: 600; background: var(--cor-verde-claro); }
/* Segundo nível do menu (ex: Financeiro › Contas a Receber › Conciliação Recebimento): abre ao lado do item. */
.menu-submenu { position: relative; }
.menu-submenu-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; color: var(--cor-texto); font-size: 13.5px; border-radius: 6px; cursor: pointer; }
.menu-submenu:hover > .menu-submenu-toggle, .menu-submenu:focus-within > .menu-submenu-toggle { background: var(--cor-verde-claro); color: var(--cor-marca); }
.menu-submenu.ativo > .menu-submenu-toggle { color: var(--cor-verde-escuro); font-weight: 600; }
.menu-submenu-content {
    display: none;
    position: absolute;
    top: -6px;
    left: 100%;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-left: 3px solid var(--cor-verde);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 12px 28px rgba(36, 40, 68, .18);
    min-width: 230px;
    z-index: 21;
    padding: 6px;
}
.menu-submenu:hover > .menu-submenu-content,
.menu-submenu:focus-within > .menu-submenu-content { display: block; }
/* Tela estreita: o submenu fica aberto e recuado dentro do grupo (não abre para o lado, sem rolagem horizontal). */
@media (max-width: 900px) {
    .menu-submenu-content { display: block; position: static; box-shadow: none; border: 0; border-left: 2px solid var(--cor-borda); border-radius: 0; min-width: 0; margin-left: 14px; padding: 0 0 0 6px; }
    .menu-submenu-toggle > span { display: none; }
}

/* Estrutura da página */
.conteudo { padding: 32px 24px 48px; }
.container { max-width: 1180px; margin: 0 auto; padding: 32px; background: #fff; border-radius: var(--raio); border: 1px solid var(--cor-borda); box-shadow: var(--sombra); }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--cor-borda); }
h1 { font-size: 22px; margin: 0; color: var(--cor-marca); position: relative; padding-left: 16px; }
h1::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 22px; margin-top: -11px; border-radius: 3px; background: var(--cor-verde); }

/* Dashboard */
.dashboard-kpis { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.kpi-card {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 24px;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
    border-left: 5px solid var(--cor-verde);
    background: linear-gradient(135deg, #fff 0%, var(--cor-verde-claro) 100%);
}
.kpi-card-contratos { border-left-color: var(--cor-marca); background: linear-gradient(135deg, #fff 0%, #eceef6 100%); }
.kpi-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); }
.kpi-valor { font-family: var(--fonte-titulo); font-size: 38px; font-weight: 400; color: var(--cor-marca); line-height: 1.2; }
.kpi-legenda { font-size: 12px; color: var(--cor-texto-suave); }

.dashboard-bloco { margin-bottom: 32px; }
.dashboard-bloco-titulo { font-size: 16px; color: var(--cor-marca); margin: 0 0 16px; }
.dashboard-bloco-grupo { display: flex; gap: 32px; flex-wrap: wrap; }
.dashboard-bloco-grupo .dashboard-bloco { flex: 1 1 420px; }


/* Rodapé */
.rodape { background: var(--cor-grafite); border-top: 3px solid var(--cor-verde); }
.rodape-inner { max-width: 1180px; margin: 0 auto; padding: 16px 24px; font-size: 12px; color: #c3cccb; text-align: center; }
.rodape-ambiente { font-weight: 700; }
.rodape-ambiente--teste { color: #ff9b8e; }
.rodape-ambiente--producao { color: var(--cor-verde); }
.rodape-ambiente--local { color: #8ec5ff; }

/* Botões */
.btn { display: inline-block; padding: 9px 16px; border: 1px solid #c9d4d1; border-radius: 8px; background: #fff; color: var(--cor-marca); text-decoration: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 500; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { background: var(--cor-verde-claro); border-color: var(--cor-verde); }
.btn-primary { background: var(--cor-marca); color: #fff; border-color: var(--cor-marca); font-weight: 600; }
.btn-primary:hover { background: var(--cor-marca-clara); border-color: var(--cor-marca-clara); box-shadow: 0 4px 12px rgba(36, 40, 68, .25); }
.btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn-danger:hover { background: #a5301f; border-color: #a5301f; }
.btn-sucesso { background: var(--cor-verde-escuro); color: #fff; border-color: var(--cor-verde-escuro); font-weight: 600; }
.btn-sucesso:hover { background: #256655; border-color: #256655; }

/* Tabela */
.table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.table th { padding: 11px 10px; background: #f6f9f8; border-bottom: 2px solid var(--cor-verde); text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--cor-marca); }
.table td { padding: 11px 10px; border-bottom: 1px solid var(--cor-borda); text-align: left; font-size: 13.5px; }
.table tbody tr:hover { background: #f6faf9; }
.table td input, .table td select { width: 100%; box-sizing: border-box; }
.logo-thumb { max-height: 32px; }

/* Badges de status */
.badge { display: inline-block; padding: 3px 11px; border-radius: 12px; font-size: 11.5px; font-weight: 600; }
.badge-ativo { background: #d9f0e9; color: #1f5f4f; }
.badge-inativo { background: #eceff0; color: #5f6969; }
.badge-novo { background: #e0e3f3; color: #242844; }
.badge-enviado { background: #d8e9f2; color: #1d4d6b; }
.badge-andamento { background: #fdf0cf; color: #7a5300; }
.badge-aprovado { background: #cfeee6; color: #19584a; }
.badge-assinado { background: #d9f0e9; color: #1f5f4f; }
.badge-cancelado { background: #fbdedb; color: #8a2a20; }

/* Contas em atraso (vencidas e sem pagamento) */
.table tbody tr.linha-atraso { background: #fdf1f0; }
.table tbody tr.linha-atraso:hover { background: #fbe6e3; }
.table tbody tr.linha-atraso td { color: #b3261e; font-weight: 600; }
.badge-atraso { background: #c0392b; color: #fff; }

/* Ícones de ação nas listagens */
.acoes-icones { display: flex; gap: 8px; align-items: center; }
/* Em <td> o display:flex quebra o layout da tabela (a célula sai do cartão); mantém célula de tabela. */
td.acoes-icones { display: table-cell; white-space: nowrap; width: 1%; }
td.acoes-icones .icone-acao { margin-right: 4px; vertical-align: middle; }
td.acoes-icones .icone-acao:last-child { margin-right: 0; }
/* 3 ícones por linha: 3 x 34px + o espaço entre eles + 20px de espaço interno da célula. */
td.acoes-icones.acoes-quebra { white-space: normal; width: 132px; min-width: 132px; line-height: 0; }
td.acoes-icones.acoes-quebra .icone-acao { margin: 0 2px 2px 0; }
.icone-acao { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--cor-texto-suave); text-decoration: none; transition: background .15s, color .15s; }
.icone-acao:hover { background: var(--cor-verde-claro); color: var(--cor-verde-escuro); }
.icone-acao.icone-danger:hover { background: #fbdedb; color: #c0392b; }
.icone-acao.icone-desabilitado, .icone-acao.icone-desabilitado:hover { opacity: .35; cursor: not-allowed; background: none; color: var(--cor-texto-suave); }

/* Barra de filtros */
.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; padding: 16px; background: #f6f9f8; border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.filtros .form-row { margin-bottom: 0; }
.filtros label { color: var(--cor-texto-suave); }

/* Logo (campo do cadastro) */
.logo-field { display: flex; gap: 16px; align-items: flex-start; }
.logo-box { width: 120px; height: 120px; flex-shrink: 0; border: 1px dashed #b9c8c4; border-radius: var(--raio); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafcfb; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-box span { font-size: 12px; color: #8a9693; }
.logo-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* Foto do contato (tabela de Contatos) */
.contato-foto-box { width: 40px; height: 40px; border: 1px dashed #b9c8c4; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafcfb; margin-bottom: 4px; }
.contato-foto-preview { max-width: 100%; max-height: 100%; object-fit: cover; }
.contato-foto-placeholder { font-size: 9px; color: #8a9693; text-align: center; }
.btn-buscar-foto-contato { font-size: 12px; padding: 4px 8px; }
.input-foto-contato { display: block; margin-top: 4px; font-size: 12px; max-width: 140px; }
.contato-foto-status { display: block; margin-top: 2px; }
.contato-foto-status.erro { color: #c0392b; }
.contato-foto-status.sucesso { color: var(--cor-verde-escuro); }

/* Formulário */
fieldset { border: 1px solid var(--cor-borda); border-radius: var(--raio); margin-bottom: 22px; padding: 18px 20px; background: #fcfdfd; }
legend { font-size: 14px; padding: 0 8px; color: var(--cor-marca); }
.form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-row-group { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.form-row-group .form-row { flex: 1; min-width: 120px; margin-bottom: 0; }
label { font-size: 12.5px; font-weight: 600; color: var(--cor-grafite); }
input, select, textarea { padding: 9px 10px; border: 1px solid #c9d4d1; border-radius: 8px; font-size: 13.5px; font-family: inherit; color: var(--cor-texto); background: #fff; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-verde); box-shadow: 0 0 0 3px rgba(121, 188, 171, .35); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cor-verde-escuro); }
small { color: var(--cor-texto-suave); }
.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1; }
.tags-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: var(--cor-verde-claro); color: var(--cor-marca); padding: 4px 11px; border-radius: 12px; font-size: 12px; font-weight: 500; }
#cnpj-status.erro, #logo-status.erro { color: #c0392b; }
#cnpj-status.sucesso, #logo-status.sucesso { color: var(--cor-verde-escuro); }
.alert { padding: 11px 16px; border-radius: 8px; margin-bottom: 16px; border-left: 4px solid transparent; }
.alert-success { background: #e1f3ee; color: #1f5f4f; border-left-color: var(--cor-verde); }
.alert-info { background: #e8f0fa; color: #214a7a; border-left-color: #3b78c4; }
body.modo-visualizar .ql-toolbar { display: none; }
body.modo-visualizar input:disabled, body.modo-visualizar select:disabled, body.modo-visualizar textarea:disabled { background: #f6f7f8; color: inherit; opacity: 1; cursor: default; }
.alert-erro { background: #fbe6e3; color: #8a2a20; border-left-color: #c0392b; }
/* Campos obrigatórios não preenchidos ao salvar (campos-obrigatorios.js) */
.alerta-campos-obrigatorios { border-left-width: 6px; font-size: 14px; }
.alerta-campos-obrigatorios ul { margin: 6px 0 0 18px; padding: 0; }
.campo-obrigatorio-faltando { border: 2px solid #c0392b !important; background: #fdf2f0 !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }
.form-row:has(.campo-obrigatorio-faltando) > label { color: #c0392b; }
.form-actions { text-align: right; }
.auditoria-rodape { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--cor-borda); font-size: 12px; color: var(--cor-texto-suave); }

/* Conteúdo rico (documento convertido do Word: editor, cabeçalho/rodapé e visualização).
   Documentos Word costumam ter imagens e tabelas com largura fixa em pixels, que sem isso
   estouram a largura da tela. */
[data-editor-target],
.ql-editor,
.documento-contrato,
.doc-cabecalho,
.doc-rodape {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.doc-cabecalho { margin-bottom: 16px; }
.doc-rodape { margin-top: 16px; }
[data-editor-target] img,
.ql-editor img,
.documento-contrato img,
.doc-cabecalho img,
.doc-rodape img {
    max-width: 100%;
    height: auto;
}
[data-editor-target] table,
.ql-editor table,
.documento-contrato table {
    max-width: 100%;
}

/* Paginação das listagens */
.paginacao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cor-borda); font-size: 13px; color: var(--cor-texto-suave); }
.paginacao-tamanho { display: flex; align-items: center; gap: 8px; margin: 0; }
.paginacao-tamanho label { margin: 0; font-weight: 500; color: var(--cor-texto-suave); }
.paginacao-tamanho select { padding: 5px 8px; }
.paginacao-nav { display: flex; align-items: center; gap: 4px; }
.paginacao-nav a { min-width: 34px; padding: 6px 10px; text-align: center; text-decoration: none; color: var(--cor-marca); border: 1px solid var(--cor-borda); border-radius: 8px; background: #fff; font-weight: 500; }
.paginacao-nav a:hover { background: var(--cor-verde-claro); border-color: var(--cor-verde); }
.paginacao-nav a.ativo { background: var(--cor-marca); border-color: var(--cor-marca); color: #fff; font-weight: 600; }
.paginacao-reticencias { padding: 0 4px; }

/* Totais do filtro (Contas a Pagar) */
.totais-filtro { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.totais-filtro-item { flex: 1 1 180px; padding: 12px 16px; border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-verde); border-radius: var(--raio); background: #fcfdfd; }
.totais-filtro-item.destaque { border-left-color: var(--cor-marca); background: #f2f3f9; }
.totais-filtro-item.atraso { border-left-color: #c0392b; background: #fdf1f0; }
.totais-filtro-rotulo { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-suave); }
.totais-filtro-valor { display: block; font-family: var(--fonte-titulo); font-size: 20px; color: var(--cor-marca); line-height: 1.3; }
.totais-filtro-item.atraso .totais-filtro-valor { color: #b3261e; }
.totais-filtro-qtd { font-size: 12px; color: var(--cor-texto-suave); }

/* Caixa e Banco */
.tabela-caixa-banco td.valor-entrada { color: var(--cor-verde-escuro); }
.tabela-caixa-banco td.valor-saida { color: #b3261e; }
.tabela-caixa-banco td.valor-negativo, .totais-filtro-valor.valor-negativo { color: #b3261e; }
.titulo-caixa-aberto { margin: 28px 0 10px; font-size: 17px; }

/* Gráfico de Contas a Pagar (Dashboard) */
.grafico-resumo { margin: 0 0 12px; color: var(--cor-texto-suave); font-size: 13px; }
.grafico-resumo strong { color: var(--cor-marca); }
.grafico-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; padding: 0; font-size: 13px; }
.grafico-legenda li { display: flex; align-items: center; gap: 8px; }
.grafico-legenda-cor { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.grafico-legenda-nome { color: var(--cor-grafite); font-weight: 600; }
.grafico-legenda-total { color: var(--cor-texto-suave); }
.grafico-wrap { position: relative; }
.grafico-barras { width: 100%; height: auto; display: block; }
.grafico-grade { stroke: #e3eae8; stroke-width: 1; }
.grafico-eixo { fill: #667070; font-size: 11px; font-family: var(--fonte-texto); }
.grafico-barra { transition: opacity .12s; }
.grafico-alvo { fill: transparent; }
.grafico-coluna.ativo .grafico-alvo { fill: rgba(121, 188, 171, .14); }
.grafico-dica { position: absolute; pointer-events: none; background: var(--cor-marca); color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 12px; line-height: 1.6; box-shadow: 0 6px 18px rgba(36, 40, 68, .3); white-space: nowrap; transform: translateY(-100%); z-index: 5; }
.grafico-dica-linha { display: flex; align-items: center; gap: 8px; }
.grafico-dica-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .25); font-weight: 600; }
.grafico-tabela { margin-top: 10px; font-size: 13px; }
.grafico-tabela summary { cursor: pointer; color: var(--cor-verde-escuro); font-weight: 600; }
.tabela-rolagem { overflow-x: auto; }
.table th.num, .table td.num { text-align: right; white-space: nowrap; }
.table tr.linha-total td { background: #f6f9f8; border-top: 2px solid var(--cor-borda); }

/* Funil de verdade (Dashboard) */
.funil-real { max-width: 640px; margin: 0 auto; }
.funil-svg { width: 100%; height: auto; display: block; overflow: visible; }
.funil-fatia { transition: filter .15s; }
.funil-fatia:hover { filter: brightness(1.07) drop-shadow(0 3px 6px rgba(36, 40, 68, .25)); }
.funil-nome { font-family: var(--fonte-texto); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.funil-nome--escuro { fill: #242844; }
.funil-nome--claro { fill: #fff; }
.funil-guia { stroke: #cdd8d5; stroke-width: 1; stroke-dasharray: 3 3; }
.funil-qtd { font-family: var(--fonte-titulo); font-size: 26px; fill: var(--cor-marca); }
.funil-pct { font-family: var(--fonte-texto); font-size: 13px; font-weight: 600; fill: #667070; }
.funil-trilho { fill: #e6eceb; }
.funil-fatia--vazia .funil-qtd { fill: #9aa5a3; }

/* Relatório: cadastro e envio */
.acoes-cabecalho { display: flex; gap: 10px; align-items: center; }
.btn[disabled], .botao-icone[disabled] { opacity: .45; cursor: not-allowed; }
.botao-icone { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; }
.texto-alerta { color: #b3261e; font-size: 12px; }
.form-upload { margin: 0; }
.lista-contatos { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.contato-opcao { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--cor-borda); border-radius: 8px; background: #fff; font-weight: 500; cursor: pointer; }
.contato-opcao:hover { border-color: var(--cor-verde); background: var(--cor-verde-claro); }
.contato-opcao input { width: auto; }

/* Informação Sigilosa sem permissão de ver o arquivo */
.info-sigilosa { color: #b3261e; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.info-sigilosa svg { flex-shrink: 0; }

/* Cartas de renovação listadas sob o contrato */
.table tr.linha-carta td { background: #f6faf9; font-size: 12.5px; color: #3c4a47; }
.table tr.linha-carta td:first-child { padding-left: 22px; }

.btn-remover-linha { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; }
.btn-remover-linha svg, .icone-acao svg { pointer-events: none; }

/* Ordenação por clique no título da coluna (listagens) */
/* O título quebra entre palavras (ex.: "TIPO DE CONTRATO"): com nowrap a coluna ficava larga e a tabela rolava na horizontal. */
.table th.ordenavel { cursor: pointer; user-select: none; }
.table th.ordenavel:hover { color: var(--cor-verde-escuro); }
/* Espaço antes da seta: com a coluna apertada a seta desce para a linha de baixo em vez de alargar a coluna. */
.table th.ordenavel::after { content: ' \2195'; opacity: .35; font-size: 11px; }
.table th.ordenavel.ord-asc::after { content: ' \25B2'; opacity: 1; }
.table th.ordenavel.ord-desc::after { content: ' \25BC'; opacity: 1; }

/* Pesquisa com lista (autocompletar) */
.autocomplete { position: relative; }
.autocomplete-lista { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; max-height: 260px; overflow-y: auto; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; box-shadow: var(--sombra); }
.autocomplete-lista li { padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.autocomplete-lista li:hover, .autocomplete-lista li.ativo { background: var(--cor-verde-claro); color: var(--cor-verde-escuro); }

/* Tipos de contato (Cliente/Fornecedor): um contato pode ter mais de um tipo. Seletor compacto
   (seletor-tipos-contato.js): etiquetas dos tipos marcados + botão que abre painel com busca e lista com rolagem. */
.campo-tipos-contato { min-width: 150px; }
.tipo-contato-opcao { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; padding: 6px 10px; border-radius: 6px; line-height: 1.3; }
.tipo-contato-opcao:hover { background: var(--cor-verde-claro); }
.tipo-contato-opcao[hidden] { display: none; }
.table td .tipo-contato-opcao input, .tipo-contato-opcao input { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
.seletor-tipos { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.seletor-tipos-chips { display: contents; }
.seletor-tipos-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--cor-verde-claro); color: var(--cor-verde-escuro); font-size: 12px; font-weight: 600; line-height: 1.5; max-width: 100%; }
.seletor-tipos-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.seletor-tipos-chip button:hover { background: rgba(47, 122, 103, .15); }
.seletor-tipos-nenhum { color: var(--cor-texto-suave); font-size: 12px; }
.seletor-tipos-abrir { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px dashed var(--cor-verde-escuro); border-radius: 999px; background: #fff; color: var(--cor-verde-escuro); cursor: pointer; }
.seletor-tipos-abrir:hover, .seletor-tipos-abrir[aria-expanded="true"] { background: var(--cor-verde-claro); border-style: solid; }
.seletor-tipos-painel { position: absolute; z-index: 40; top: calc(100% + 4px); right: 0; width: 240px; max-width: 80vw; padding: 8px; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; box-shadow: var(--sombra); box-sizing: border-box; }
.seletor-tipos-painel[hidden] { display: none; }
.table td .seletor-tipos-busca, .seletor-tipos-busca { width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 7px 9px; }
.seletor-tipos-lista { max-height: 220px; overflow-y: auto; }
.seletor-tipos-vazio { padding: 6px 10px; color: var(--cor-texto-suave); font-size: 12.5px; }

/* Documentos exibidos na tela (contrato, proposta, carta, pré-visualizações): o editor (Quill) grava alinhamento
   e recuo como classes; fora do editor elas precisam destes estilos (o PDF tem o equivalente em pdf_service.php). */
.documento-contrato .ql-align-center { text-align: center; }
.documento-contrato .ql-align-right { text-align: right; }
.documento-contrato .ql-align-justify { text-align: justify; }
.documento-contrato .ql-indent-1 { padding-left: 3em; }
.documento-contrato .ql-indent-2 { padding-left: 6em; }
.documento-contrato .ql-indent-3 { padding-left: 9em; }

/* Imagem do usuário (topo do sistema e cadastro de usuários) */
.topbar-usuario-foto { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, .35); }
.usuario-foto-preview { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cor-borda); margin-bottom: 6px; }

/* Abas do cadastro de Colaborador (Dados do Colaborador | Atestados e Declarações) */
.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--cor-borda); margin: 6px 0 18px; flex-wrap: wrap; }
.aba { padding: 10px 16px; text-decoration: none; color: var(--cor-texto-suave); font-weight: 600; font-size: 13.5px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.aba:hover { color: var(--cor-marca); }
.aba.aba-ativa { color: var(--cor-marca); border-bottom-color: var(--cor-verde); }

/* Sem barra de rolagem na horizontal em nenhuma tela (regra do CLAUDE.MD).
   O menu quebra linha, o conteúdo nunca passa da largura da tela e as tabelas quebram o texto das células. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, canvas { max-width: 100%; }
.menu { flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
.conteudo, main { min-width: 0; max-width: 100%; }
/* Quebra só entre palavras: com word-break: break-word o navegador partia palavras curtas ("FORNECED/OR", "Ati/vo",
   "13/10/20/26") ao apertar as colunas. Texto longo sem espaço (e-mail, código) ainda quebra se não couber. */
.table th, .table td { word-break: normal; overflow-wrap: break-word; }
/* Tela estreita (notebook pequeno ou com zoom): tabela compacta, para listagens com muitas colunas caberem sem rolagem
   horizontal. Os ícones de Ações podem ir para duas linhas (no mínimo dois por linha). */
@media (max-width: 1200px) {
    .table th, .table td { padding-left: 5px; padding-right: 5px; }
    .table .badge { padding: 3px 7px; font-size: 11px; }
    .table td { font-size: 12px; }
    .table th { font-size: 10px; letter-spacing: .02em; }
    td.acoes-icones { white-space: normal; width: 86px; min-width: 86px; line-height: 0; }
    td.acoes-icones .icone-acao { margin: 0 2px 2px 0; }
    td.acoes-icones.acoes-quebra { width: 86px; min-width: 86px; }
}
.page-header { flex-wrap: wrap; gap: 8px; }
.form-row, .form-row-group > .form-row { min-width: 0; }
.form-row-group .form-row { min-width: min(120px, 100%); }
@media (max-width: 900px) {
    .conteudo { padding: 20px 16px 36px; }
    .form-row-group { flex-direction: column; }
    .form-row-group .form-row { flex: 1 1 auto; min-width: 0; width: 100%; }
    .dashboard-kpis { flex-direction: column; }
    .table th, .table td { padding: 8px 6px; font-size: 12.5px; }
}

/* Painel de TAGs nas telas de edição (includes/tags_ajuda.php) */
.painel-tags { margin: 14px 0; background: #f6f9f8; }
.painel-tags-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; font-size: 12.5px; }
.painel-tags-lista code { font-size: 12px; background: #fff; border: 1px solid var(--cor-borda); border-radius: 4px; padding: 1px 4px; }

/* Cartão de contratos ativos no dashboard */
.kpi-card-contratos-ativos { border-left-color: var(--cor-verde-escuro); background: linear-gradient(135deg, #fff 0%, var(--cor-verde-claro) 100%); }

/* Janela de confirmação (ex: conferência do valor do comprovante antes de salvar). */
.dialogo-confirmacao { border: 1px solid var(--cor-borda); border-top: 4px solid var(--cor-verde); border-radius: 10px; padding: 20px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.dialogo-confirmacao.dialogo-alerta { border-top-color: #c0392b; }
.dialogo-confirmacao::backdrop { background: rgba(0,0,0,.4); }
.dialogo-confirmacao h2 { margin-top: 0; }
.dialogo-confirmacao .form-actions { justify-content: flex-end; }

/* Dados para o pagamento (Registrar Pagamento): coluna do rótulo com largura fixa e a do valor com o
   restante; textos longos (PIX, código de barras) só quebram quando não cabem, sem espremer a coluna. */
.tabela-dados-pagamento { table-layout: fixed; width: 100%; }
.tabela-dados-pagamento td:first-child { width: 200px; }
.tabela-dados-pagamento td:last-child { width: auto; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) { .tabela-dados-pagamento td:first-child { width: 40%; } }

/* Template de Proposta: perguntas do produto, abaixo do item, com a quantidade de cada uma. */
.item-perguntas:empty, .item-perguntas:not(:has(.item-pergunta)) { display: none; }
.item-perguntas { margin-top: 8px; padding: 6px 8px; border-left: 3px solid var(--cor-verde); background: #f6faf9; }
.item-pergunta { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.item-pergunta-descricao { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.item-pergunta-valor { white-space: nowrap; color: #555; }
.table td .item-pergunta input.pergunta-quantidade { width: 70px; flex: 0 0 70px; }

/* Cliente / Fornecedor: rodapé do campo Resumo da Empresa (texto de ajuda + contador à esquerda, botão de gerar à direita). */
.resumo-empresa-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.resumo-empresa-rodape small { flex: 1 1 auto; min-width: 0; }

/* Gerenciar › Consultar Cliente */
.consulta-cliente-dados { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 13.5px; }
.consulta-cliente-dados > div { min-width: 0; overflow-wrap: anywhere; }
.consulta-cliente-resumo { margin: 12px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.consulta-cliente-titulo { font-size: 15px; margin: 18px 0 8px; color: var(--cor-marca); }
.consulta-cliente-acoes { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* Gerenciar › Conciliar Recebimento: lista do resumo */
.conciliacao-resumo { margin: 0; padding-left: 18px; line-height: 1.6; overflow-wrap: anywhere; }

/* Contas a Pagar: "Código de barras ou PIX" (PIX copia-e-cola é longo) quebra linha, sem rolagem horizontal. */
code#codigo-barras { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }

/* Contrato: Tipo(s) de Contrato em caixas de marcar (quebram linha, sem rolagem horizontal). */
.lista-tipos-contrato { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 0; }
.lista-tipos-contrato .opcao-tipo-contrato { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.lista-tipos-contrato input[type="checkbox"] { width: auto; margin: 0; }
.form-row:has(.campo-obrigatorio-faltando) .lista-tipos-contrato { outline: 2px solid #c0392b; outline-offset: 2px; border-radius: 6px; background: #fdf2f0; }

/* Parâmetro de Backup: segredo já salvo (nunca reexibido), opções em linha e campo da chave SSH */
.info-segredo-salvo { margin: 2px 0 6px; font-size: 13px; color: var(--cor-verde-escuro); }
.opcao-inline { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: normal; cursor: pointer; }
.opcao-inline input { width: auto; margin: 0; }
.campo-chave-ssh { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* Consultar Cliente › Backup: pizza (rosca) usado × livre e barras de evolução com a projeção (backup_graficos.php) */
.backup-pizza-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 18px; }
.backup-pizza { width: 180px; height: 180px; flex: 0 0 auto; }
.backup-pizza-percentual { font-size: 30px; font-weight: 700; fill: var(--cor-marca); font-family: var(--fonte-texto); }
.backup-pizza-legenda { font-size: 12px; fill: var(--cor-texto-suave); font-family: var(--fonte-texto); }
.backup-pizza-info { flex: 1 1 240px; min-width: 0; }
.backup-pizza-info p { margin: 0 0 8px; }
.backup-legenda-vertical { flex-direction: column; gap: 6px; }
.backup-legenda-vertical .grafico-legenda-nome { min-width: 86px; }
.backup-legenda-contorno { background: transparent; border: 2px dashed #667070; box-sizing: border-box; }
.backup-pizza-data { display: flex; align-items: center; gap: 8px; color: var(--cor-texto-suave); font-size: 13px; }
.backup-falha { color: #8a2a20; font-size: 12.5px; }
.backup-legenda-projecao { background: repeating-linear-gradient(45deg, #b9650c 0 3px, #d39a63 3px 5px); }
.backup-legenda-linha { display: inline-block; width: 18px; border-top: 2px dashed #667070; }
.backup-linha-contratado { stroke: #667070; stroke-width: 1.5; stroke-dasharray: 5 4; }
.backup-rotulo-projecao { fill: #8a4a08; font-weight: 600; }

/* Consultar Cliente: logo à direita, da altura do texto (dados + resumo); a largura (altura × proporção) vem do script da tela */
.consulta-cliente-cabecalho { display: flex; align-items: stretch; gap: 24px; }
.consulta-cliente-textos { flex: 1 1 auto; min-width: 0; }
.consulta-cliente-logo { position: relative; flex: 0 0 auto; height: auto; max-width: 30%; }
.consulta-cliente-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
    .consulta-cliente-cabecalho { flex-direction: column; gap: 12px; }
    .consulta-cliente-logo { height: 72px; width: 160px; max-width: 100%; align-self: flex-start; }
    .consulta-cliente-logo img { object-position: left center; }
}
.consulta-tipos-contrato { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.consulta-tipo-cartao { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 12px 14px; background: #fff; }
.consulta-tipo-titulo { font-weight: 600; color: var(--cor-marca); }
.consulta-tipo-contrato { font-size: 12px; color: var(--cor-texto-suave); margin-bottom: 6px; }
.consulta-tipo-valor { font-size: 13px; }

/* Serviço › Status do Backup: um cartão por cliente com a pizza do uso; excedidos com borda vermelha */
.status-backup-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.status-backup-cartao { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 14px 16px 4px; background: #fff; min-width: 0; }
.status-backup-cartao.status-backup-excedido { border: 2px solid #c0392b; background: #fffafa; }
.status-backup-cliente { font-size: 15px; margin: 0 0 10px; color: var(--cor-marca); }
.status-backup-cliente a { color: inherit; }
.status-backup-cartao .backup-pizza-bloco { margin-bottom: 10px; }
.status-backup-cartao .backup-pizza { width: 150px; height: 150px; }
.backup-pizza-percentual.backup-pizza-percentual-longo { font-size: 22px; }

/* Checklist Diário: pergunta "Deseja enviar o e-mail?" depois de salvar */
.confirmacao-email-checklist { border: 1px solid var(--cor-verde); background: var(--cor-verde-claro); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 16px; }
.confirmacao-email-checklist p { margin: 0 0 8px; overflow-wrap: anywhere; }
.confirmacao-email-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Checklist Diário: tabela de jobs (Failed destacado) e lista dos últimos 7 dias no Status do Backup */
.tabela-jobs-checklist td { vertical-align: top; }
.tabela-jobs-checklist .job-observacao { min-height: 38px; resize: vertical; }
.tabela-jobs-checklist tr.job-failed { background: #fdf1f0; }
.jobs-ultimos-dias { margin-top: 4px; }
.jobs-ultimos-dias summary { cursor: pointer; font-weight: 600; color: var(--cor-marca); font-size: 13px; margin-bottom: 6px; }
.jobs-ultimos-dias .table td, .jobs-ultimos-dias .table th { padding: 6px 8px; font-size: 12.5px; }
.tabela-jobs-checklist .job-nome { font-weight: 600; color: var(--cor-marca); }
.tabela-jobs-checklist .job-observacao { width: 100%; box-sizing: border-box; }

/* Sistema › Integrações › Chamados: colunas principais na linha do chamado e as demais informações na linha de
   detalhes logo abaixo (rótulo: valor), para a tabela caber na tela sem rolagem horizontal. */
.tabela-chamados th, .tabela-chamados td { vertical-align: top; font-size: 12.5px; }
.tabela-chamados td small { color: #5f6969; }
.tabela-chamados .chamado-descricao { display: block; margin-top: 4px; }
.tabela-chamados tr.linha-chamado td { border-bottom: 0; padding-bottom: 4px; }
.tabela-chamados tr.linha-chamado-detalhe td { padding-top: 2px; font-size: 12px; color: #5f6969; }
.tabela-chamados tr.linha-chamado-detalhe:hover { background: transparent; }
.chamado-detalhes { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.chamado-detalhes strong { color: #3c4a47; font-weight: 600; }
/* Serviço › Relatório de Atendimento: gráfico de barras do uso de horas (SVG gerado no servidor) */
.grafico-uso-horas { max-width: 900px; margin: 4px 0 18px; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px; }
.grafico-uso-horas svg { display: block; width: 100%; height: auto; }
.grafico-uso-horas svg text { font-family: inherit; }

/* Relatório de Atendimento: Período Inicial / Final com seletor de Mês e de Ano lado a lado */
.seletores-mes-ano { display: flex; gap: 6px; flex-wrap: wrap; }
/* Tabelas dos relatórios de atendimento: palavras inteiras (sem partir "SALDO", "EXCEDENTE" no meio) */
.tabela-relatorio-horas th, .tabela-relatorio-horas td { word-break: normal; overflow-wrap: normal; }

/* Gerenciar › Consultar Cliente › documentação técnica (Firewall, Network, Servidores, Cloud e Licenciamento): pré-visualização
   dos anexos (imagem na própria tela; PDF e documento do Word num quadro de leitura, sempre dentro da largura da
   tela, sem rolagem horizontal). */
.doc-tecnico-anexo { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px; margin: 0 0 14px; background: #fff; }
.doc-tecnico-anexo-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc-tecnico-anexo-nome { font-weight: 600; color: var(--cor-marca); min-width: 0; overflow-wrap: anywhere; }
.doc-tecnico-anexo-imagem { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.doc-tecnico-anexo-documento { display: block; width: 100%; max-width: 100%; height: 75vh; min-height: 420px; border: 0; }
/* Linha da pré-visualização que abre na própria tela, logo abaixo do registro (assets/js/doc-tecnico-preview.js). */
.linha-doc-tecnico-preview[hidden] { display: none; }
.linha-doc-tecnico-preview > td { background: #f7f9f9; padding: 12px; }
.linha-doc-tecnico-preview:hover > td { background: #f7f9f9; }
.linha-doc-tecnico-preview .doc-tecnico-anexo:last-child { margin-bottom: 0; }
[data-abrir-documento] { cursor: pointer; }
/* Consultar Cliente › seções que vêm ocultas (Escopo do Contrato e Firewall): abrem em "Mostrar detalhes" e o
   texto do próprio resumo troca para "Ocultar detalhes". */
.consulta-detalhes > summary { cursor: pointer; font-weight: 600; color: var(--cor-marca); font-size: 13px; margin-bottom: 6px; }
.consulta-detalhes .detalhes-texto-ocultar { display: none; }
.consulta-detalhes[open] .detalhes-texto-mostrar { display: none; }
.consulta-detalhes[open] .detalhes-texto-ocultar { display: inline; }
/* Documentação técnica em texto (Firewall, Network, Servidores e Cloud): campo do editor e o texto na consulta. */
.editor-documento-tecnico { height: 360px; background: #fff; }
.doc-tecnico-texto { background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.doc-tecnico-texto img { max-width: 100%; height: auto; }
.doc-tecnico-texto :first-child { margin-top: 0; }
.doc-tecnico-texto :last-child { margin-bottom: 0; }