html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =====================================================================
   Paleta CoreBox — Opção 1 (documento "Paleta de Cores Corebox")
   ===================================================================== */
:root {
    --azul-profundo: #0a2c42;  /* autoridade, solidez institucional */
    --azul-petroleo: #2f5f73;  /* profissionalismo com modernidade */
    --azul-aco:      #a1c4ce;  /* serenidade, transparência        */
    --gelo:          #d6e1ef;  /* base limpa, clareza              */
    --ouro:          #f3a125;  /* energia, inovação, atenção       */

    --texto:         var(--azul-profundo);
    --texto-fraco:   var(--azul-petroleo);
    --linha:         var(--gelo);
    --fundo-suave:   #eef3f9;  /* gelo diluído, para superfícies   */
}

body { color: var(--texto); }

/* ===== Barra lateral ===== */
.app { display: flex; min-height: 100vh; align-items: stretch; }

.barra {
    width: 216px;
    flex: 0 0 216px;
    background: var(--azul-profundo);
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.barra-marca { display: block; text-align: center; padding: 4px 0 22px; }
/* Só a altura é fixa: o logo é quadrado e travar a largura o esticaria. */
.barra-marca img { height: 66px; width: auto; border-radius: 8px; }

.barra-menu { display: flex; flex-direction: column; gap: 3px; }

.barra-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--azul-aco);
    text-decoration: none;
    font-size: .93rem;
    line-height: 1.2;
    transition: background .12s ease, color .12s ease;
}
.barra-item svg { width: 19px; height: 19px; fill: currentColor; opacity: .9; flex: 0 0 19px; }
.barra-item:hover { background: var(--azul-petroleo); color: #fff; }

/* O ouro é o único matiz quente da paleta: reservado ao que está ativo.
   Texto escuro por cima — branco sobre #f3a125 não passa em contraste. */
.barra-item.ativo { background: var(--ouro); color: var(--azul-profundo); font-weight: 600; }
.barra-item.ativo svg { opacity: 1; }
.barra-item.ativo:hover { background: var(--ouro); color: var(--azul-profundo); }

.barra-item-inativo { opacity: .34; cursor: not-allowed; }
.barra-item-inativo:hover { background: transparent; color: var(--azul-aco); }

/* Bloco do usuário no pé da barra. Fica colado embaixo com margin-top:auto,
   então a lista de módulos nunca empurra o "Sair" para fora da tela. */
.barra-usuario {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(161, 196, 206, .18);
    display: flex; align-items: center; gap: 10px;
}
.barra-avatar {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 50%;
    background: var(--azul-petroleo); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .86rem; font-weight: 700;
}
.barra-usuario-dados { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barra-usuario-nome {
    font-size: .84rem; color: var(--azul-aco);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: none; /* é link para o perfil, mas continua parecendo o nome */
}
.barra-usuario-nome:hover { color: #fff; }
.barra-usuario form { margin: 0; }
.barra-sair {
    background: none; border: none; padding: 0;
    font-size: .78rem; color: var(--ouro); cursor: pointer; text-align: left;
}
.barra-sair:hover { text-decoration: underline; }

.conteudo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }

.conteudo main { padding: 22px 26px 30px; flex: 1 1 auto; min-width: 0; }

/* ===== Quadro do funil ===== */
.quadro-topo {
    /* Uma linha só. nowrap de propósito: com wrap, qualquer aperto joga o
       botão de novo negócio para a linha de baixo. */
    display: flex; flex-wrap: nowrap; gap: 10px 14px;
    align-items: center;
    padding: 6px 0 14px; border-bottom: 1px solid var(--linha); margin-bottom: 18px;
}
.quadro-titulo { font-size: 1.15rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
.quadro-resumo { color: var(--texto-fraco); font-size: .84rem; white-space: nowrap; }

/* A rolagem horizontal fica NA faixa do quadro, nunca no corpo da página. */
.quadro { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }

.coluna {
    flex: 0 0 288px;
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
    border-radius: 4px;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 230px);
}
.coluna-topo {
    padding: 12px 14px 10px;
    border-top: 3px solid var(--azul-petroleo);
    border-bottom: 1px solid var(--linha);
    border-radius: 4px 4px 0 0;
    background: #fff;
}
.coluna-nome { font-size: .95rem; font-weight: 600; margin: 0; line-height: 1.3; color: var(--texto); }
.coluna-resumo { font-size: .78rem; color: var(--texto-fraco); margin: 3px 0 0; font-variant-numeric: tabular-nums; }

.coluna-lista { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 80px; }
.coluna-lista.recebendo { background: #fdf1dd; outline: 2px dashed var(--ouro); outline-offset: -6px; }
.coluna-vazia { font-size: .8rem; color: var(--azul-aco); text-align: center; padding: 14px 0; margin: 0; }

.cartao {
    background: #fff; border: 1px solid var(--linha); border-radius: 4px;
    padding: 11px 12px; cursor: grab;
    box-shadow: 0 1px 2px rgba(10,44,66,.06);
    touch-action: none; user-select: none;
}
.cartao:active { cursor: grabbing; }
.cartao.arrastando { opacity: .3; }
.cartao-titulo { font-size: .88rem; font-weight: 600; margin: 0 0 6px; line-height: 1.35; color: var(--texto); }
.cartao-linha { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cartao-cliente { font-size: .78rem; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-valor { font-size: .8rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--texto); }
.cartao-rodape { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* O avatar do responsável abre o rodapé; dias e link vão para a direita. */
.cartao-rodape .avatar-mini { margin-right: auto; }

.dias {
    font-size: .72rem; color: var(--texto-fraco); background: var(--gelo);
    border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
/* O documento da marca define o ouro como a cor de "pontos de atenção".
   Negócio parado é exatamente isso. */
.dias-alerta { color: #8a5406; background: #fdeacd; font-weight: 600; }

/* Cópia do cartão que segue o cursor. pointer-events:none é essencial:
   sem isso o elementFromPoint devolveria o próprio fantasma. */
.cartao-fantasma {
    position: fixed; z-index: 1000; pointer-events: none;
    opacity: .92; transform: rotate(1.5deg);
    box-shadow: 0 8px 24px rgba(10,44,66,.28); margin: 0;
}

@media (max-width: 760px) {
    .app { flex-direction: column; }
    .barra {
        width: 100%; flex: none; height: auto; position: static;
        flex-direction: row; align-items: center; gap: 8px;
        padding: 8px 12px; overflow-x: auto;
    }
    .barra-marca { padding: 0 10px 0 0; }
    .barra-marca img { height: 34px; }
    .barra-menu { flex-direction: row; gap: 4px; }
    .barra-item { white-space: nowrap; padding: 8px 10px; }
    .barra-usuario { margin-top: 0; padding-top: 0; border-top: none; }
}

/* ===== Telas de conta (Identity) =====
   Tela cheia sobre o Azul Profundo, com o cartão claro no centro. O contraste
   entre o fundo institucional e o cartão é o que faz a tela parecer uma porta
   de entrada, e não uma página perdida do sistema. */
.conta-corpo {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background:
        radial-gradient(1100px 620px at 50% -12%, #14415f 0%, transparent 62%),
        var(--azul-profundo);
}

.conta-painel { width: 100%; max-width: 412px; display: flex; flex-direction: column; gap: 22px; }

.conta-marca { text-align: center; }
/* Só a altura: o logo é quadrado e fixar largura o deformaria. */
.conta-marca img { height: 84px; width: auto; border-radius: 12px; }

.conta-cartao {
    background: #fff;
    border-radius: 10px;
    padding: 30px 30px 26px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

.conta-cabecalho { margin-bottom: 22px; }
.conta-cabecalho h1 { font-size: 1.42rem; font-weight: 600; margin: 0; color: var(--azul-profundo); }
.conta-cabecalho p { margin: 6px 0 0; font-size: .9rem; color: var(--azul-petroleo); line-height: 1.45; }

.conta-form { display: flex; flex-direction: column; gap: 15px; }

.conta-campo { display: flex; flex-direction: column; gap: 6px; }
.conta-campo label { font-size: .82rem; font-weight: 600; color: var(--azul-petroleo); }
.conta-campo .form-control {
    border: 1px solid var(--azul-aco);
    border-radius: 6px;
    padding: 10px 13px;
    font-size: .94rem;
    color: var(--azul-profundo);
    background: #fff;
}
.conta-campo .form-control::placeholder { color: #9db3bd; }
.conta-campo .form-control:focus {
    border-color: var(--azul-petroleo);
    box-shadow: 0 0 0 3px rgba(47, 95, 115, .16);
    outline: none;
}

.conta-lembrar { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--azul-petroleo); cursor: pointer; }
.conta-lembrar input { width: 16px; height: 16px; accent-color: var(--azul-petroleo); }

.conta-botao {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: .96rem;
    font-weight: 600;
    /* Texto escuro sobre o ouro: branco não passa em contraste sobre #f3a125. */
    background: var(--ouro);
    color: var(--azul-profundo);
    cursor: pointer;
    transition: filter .12s ease;
}
.conta-botao:hover { filter: brightness(.94); }
.conta-botao:focus-visible { outline: 3px solid rgba(243, 161, 37, .45); outline-offset: 2px; }

.conta-botao-secundario { background: var(--gelo); color: var(--azul-profundo); margin-top: 8px; }

.conta-links { display: flex; flex-direction: column; gap: 7px; align-items: center; padding-top: 4px; }
.conta-links a { font-size: .85rem; color: var(--azul-petroleo); text-decoration: none; }
.conta-links a:hover { text-decoration: underline; }
.conta-recado { font-size: .88rem; color: var(--azul-petroleo); line-height: 1.5; margin: 0 0 18px; }
.conta-recado-aviso {
    background: #fdeacd;
    color: #8a5406;
    border-radius: 6px;
    padding: 10px 12px;
}

/* O widget do Turnstile tem largura fixa de 300px; centralizar evita que ele
   fique encostado na borda esquerda do cartão. */
.conta-captcha { display: flex; justify-content: center; }

.conta-erro {
    background: #fdecea; border: 1px solid #f5c6c2; color: #8a2018;
    border-radius: 6px; padding: 10px 13px; font-size: .87rem;
}
.conta-erro:empty { display: none; }
.conta-erro ul { margin: 0; padding-left: 18px; }
.conta-erro-campo { font-size: .8rem; color: #b3261e; }

.conta-externo { margin-top: 18px; text-align: center; }
.conta-externo span { font-size: .82rem; color: var(--azul-aco); }

.conta-rodape {
    text-align: center; margin: 0;
    font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(161, 196, 206, .62);
}

/* ===== Painel do Resumo ===== */
.painel-topo {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    align-items: baseline; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid var(--linha); margin-bottom: 20px;
}
.painel-titulo { font-size: 1.32rem; font-weight: 600; margin: 0; color: var(--texto); }
.painel-data { font-size: .86rem; color: var(--texto-fraco); text-transform: capitalize; }

.indicadores {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.indicador {
    background: #fff; border: 1px solid var(--linha); border-radius: 6px;
    border-top: 3px solid var(--azul-petroleo);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
}
.indicador-rotulo { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-fraco); }
.indicador-valor { font-size: 1.55rem; font-weight: 700; color: var(--azul-profundo); font-variant-numeric: tabular-nums; line-height: 1.2; }
.indicador-nota { font-size: .8rem; color: var(--azul-aco); }

.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }

.bloco { background: #fff; border: 1px solid var(--linha); border-radius: 6px; padding: 18px 20px; }
/* O bloco de ação ganha o ouro: é o único que pede reação de quem olha. */
.bloco-atencao { border-left: 3px solid var(--ouro); }
.bloco-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bloco-topo h2 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--texto); }
.etiqueta-alerta {
    background: var(--ouro); color: var(--azul-profundo);
    font-size: .74rem; font-weight: 700; border-radius: 10px; padding: 1px 9px;
}
.bloco-sub {
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-fraco); margin: 14px 0 6px;
}
.bloco-sub:first-of-type { margin-top: 2px; }
.bloco-vazio { font-size: .87rem; color: var(--azul-aco); margin: 4px 0 0; line-height: 1.5; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    padding: 9px 0; border-bottom: 1px solid var(--linha); align-items: baseline;
}
.lista li:last-child { border-bottom: none; }
.lista-principal { font-size: .88rem; font-weight: 500; color: var(--texto); overflow: hidden; text-overflow: ellipsis; }
.lista-apoio { grid-column: 1; font-size: .78rem; color: var(--texto-fraco); }
.lista-marca {
    grid-row: 1 / span 2; grid-column: 2; align-self: center;
    font-size: .82rem; font-weight: 600; color: var(--texto);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.marca-alerta { color: #8a5406; background: #fdeacd; border-radius: 10px; padding: 1px 8px; font-size: .76rem; }

.barras { display: flex; flex-direction: column; gap: 12px; }
.barra-rotulo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 5px; }
.barra-rotulo > span:first-child { font-size: .86rem; color: var(--texto); }
.barra-numero { font-size: .78rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-trilho { height: 8px; background: var(--gelo); border-radius: 4px; overflow: hidden; }
/* Barra com largura zero ainda mostra um traço: sem isso, etapa vazia some e o
   leitor não sabe se ela existe ou se o dado falhou. */
.barra-preenchida { height: 100%; border-radius: 4px; min-width: 3px; }

/* ===== Botões e formulários ===== */
.botao-primario, .botao-secundario, .botao-limpo, .botao-perigo {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px;
    padding: 9px 16px; font-size: .9rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
/* Texto escuro sobre o ouro: branco não passa em contraste. */
.botao-primario { background: var(--ouro); color: var(--azul-profundo); }
.botao-primario:hover { filter: brightness(.94); color: var(--azul-profundo); }
.botao-secundario { background: var(--gelo); color: var(--azul-profundo); border-color: var(--azul-aco); }
.botao-secundario:hover { background: #c8d7e8; color: var(--azul-profundo); }
.botao-limpo { background: none; color: var(--texto-fraco); }
.botao-limpo:hover { text-decoration: underline; color: var(--texto-fraco); }
.botao-perigo { background: #fff; color: #b3261e; border-color: #f0c9c5; }
.botao-perigo:hover { background: #fdecea; }
.botao-remover { background: none; border: none; color: #b3261e; font-size: .78rem; cursor: pointer; padding: 0; }
.botao-remover:hover { text-decoration: underline; }

.painel-acoes { display: flex; gap: 8px; align-items: center; }

.barra-busca { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.barra-busca .form-control { max-width: 420px; }

.form-control {
    border: 1px solid var(--azul-aco); border-radius: 6px;
    padding: 9px 12px; font-size: .92rem; color: var(--texto); background: #fff; width: 100%;
}
.form-control:focus { border-color: var(--azul-petroleo); box-shadow: 0 0 0 3px rgba(47,95,115,.15); outline: none; }

.formulario { display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.campo-grupo {
    border: 1px solid var(--linha); border-radius: 6px; padding: 16px 20px 20px; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px;
}
.campo-grupo legend {
    grid-column: 1 / -1; float: none; width: auto; margin: 0 0 2px; padding: 0;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-fraco);
}
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label { font-size: .8rem; font-weight: 600; color: var(--texto-fraco); }
.campo-largo { grid-column: span 2; }
/* Ocupa a faixa inteira, e não duas colunas: texto de parágrafo precisa de
   linha larga para quem escreve enxergar o que já escreveu. */
.campo-faixa { grid-column: 1 / -1; }
.campo-curto, .campo-mini { grid-column: span 1; }
.campo-com-botao { display: flex; gap: 6px; }
.campo-dica { font-size: .77rem; color: var(--azul-aco); line-height: 1.4; }
.campo-dica-alerta { color: #8a5406; }
.campo-erro { font-size: .78rem; color: #b3261e; }
.formulario-acoes { display: flex; gap: 10px; align-items: center; }

.aviso-erro {
    background: #fdecea; border: 1px solid #f5c6c2; color: #8a2018;
    border-radius: 6px; padding: 10px 14px; font-size: .88rem; margin-bottom: 16px;
}
.aviso-erro:empty { display: none; }

/* ===== Tabela ===== */
.tabela-caixa { border: 1px solid var(--linha); border-radius: 6px; overflow-x: auto; background: #fff; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela thead th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-fraco); background: var(--fundo-suave); border-bottom: 1px solid var(--linha-forte, var(--azul-aco));
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--fundo-suave); }
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.celula-apoio { display: block; font-size: .78rem; color: var(--texto-fraco); margin-top: 2px; }
.link-forte { color: var(--azul-profundo); font-weight: 600; text-decoration: none; }
.link-forte:hover { text-decoration: underline; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }

.pilula { font-size: .74rem; font-weight: 600; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.pilula-ok { background: #e6f4ee; color: #0e7a5f; }
.pilula-off { background: var(--gelo); color: var(--texto-fraco); }
.etiqueta-neutra { background: var(--gelo); color: var(--texto-fraco); font-size: .74rem; font-weight: 700; border-radius: 10px; padding: 1px 9px; }

/* ===== Ficha e contatos ===== */
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .9rem; }
.ficha dt { font-size: .78rem; font-weight: 600; color: var(--texto-fraco); }
.ficha dd { margin: 0; color: var(--texto); }

.contato-form { margin-top: 16px; border-top: 1px solid var(--linha); padding-top: 12px; }
.contato-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }

/* "editar" e "remover" na mesma marca do item: o <form> do remover é bloco por
   natureza e empurraria o outro para baixo sem o flex. */
.contato-acoes { display: flex; align-items: center; gap: 10px; }
.botao-editar { background: none; border: none; color: var(--azul-petroleo); font-size: .78rem; cursor: pointer; padding: 0; }
.botao-editar:hover { text-decoration: underline; }

/* Em edição o item deixa de ser a grade de duas colunas: o formulário ocupa a
   linha inteira, no lugar onde o contato estava. */
.contato-editando { display: block; }
.contato-edicao { padding: 2px 0 4px; }
.contato-edicao .contato-campos { margin-bottom: 8px; }
.contato-rotulo { display: block; font-size: .78rem; font-weight: 600; color: var(--texto-fraco); margin-bottom: 4px; }
.contato-edicao-acoes { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Lançamento de cotação: data, valor e os dois botões numa linha só, porque
   o formulário inteiro cabe nela. */
.cotacao-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cotacao-acoes { display: flex; align-items: center; gap: 8px; }

/* Fechamento do negócio: a OC numa linha e a OS embaixo, separada — uma é
   cadastro, a outra é documento que sai da casa. */
.fechamento-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fechamento-acoes { display: flex; align-items: center; }
.fechamento-os {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* Diálogo de vários campos (Avisos.campos) — rótulo em cima, campo embaixo,
   alinhados à esquerda: o SweetAlert centraliza tudo por padrão e formulário
   centralizado fica difícil de ler. */
.dialogo-texto { font-size: .92rem; color: var(--texto); margin: 0 0 4px; }
.dialogo-campos { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.dialogo-campo { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.dialogo-campo > span { font-size: .78rem; font-weight: 600; color: var(--texto-fraco); }
.swal2-input.dialogo-entrada { margin: 0; width: 100%; font-size: .92rem; height: 2.4em; }

.zona-perigo { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zona-perigo-nota { font-size: .8rem; color: var(--texto-fraco); }

/* Cartão na etapa de fechamento: o verde é o sinal de ganho, como no Ploomes.
   Não usa o ouro porque ouro aqui significa "precisa de atenção". */
.cartao-ganho { background: #e9f6ef; border-color: #b9dfcc; }
.cartao-numero { font-size: .72rem; font-weight: 400; color: var(--azul-aco); }

/* ===== Paginação ===== */
.paginacao {
    display: flex; flex-wrap: wrap; gap: 10px 18px;
    align-items: center; justify-content: space-between;
    margin-top: 14px; font-size: .86rem;
}
.paginacao-conta { color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.paginacao-botoes { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.paginacao-botoes a, .paginacao-atual {
    padding: 5px 11px; border-radius: 5px; text-decoration: none;
    font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.paginacao-botoes a { color: var(--azul-petroleo); }
.paginacao-botoes a:hover { background: var(--fundo-suave); border-color: var(--linha); }
.paginacao-atual { background: var(--ouro); color: var(--azul-profundo); font-weight: 700; }

textarea.form-control { resize: vertical; line-height: 1.5; font-family: inherit; }

/* Campo de texto longo — escopo de serviço, cláusula de modelo. O min-height
   segura a altura quando o navegador ignora o rows, e o max-height impede que
   um texto grande empurre os botões do formulário para fora da tela. */
.campo-alto { min-height: 260px; max-height: 60vh; }

/* ===== Barra recolhível ===== */
.barra { transition: width .16s ease, flex-basis .16s ease; }

.barra-alternar {
    background: none; border: none; cursor: pointer;
    color: var(--azul-aco); opacity: .7;
    padding: 6px; border-radius: 6px; margin-top: auto;
    align-self: flex-end; display: flex; align-items: center;
}
.barra-alternar:hover { background: var(--azul-petroleo); color: #fff; opacity: 1; }
.barra-alternar svg { width: 20px; height: 20px; fill: currentColor; transition: transform .16s ease; }

/* Com a barra recolhida o botão de usuário deixa de ser o último elemento,
   então o margin-top:auto passa para o botão de alternar. */
.barra-usuario { margin-top: 0; }

/* --- estado recolhido: só ícones --- */
.barra-recolhida .barra { width: 64px; flex: 0 0 64px; padding-left: 8px; padding-right: 8px; }
.barra-recolhida .barra-item { justify-content: center; padding: 10px 0; gap: 0; }
.barra-recolhida .barra-item span { display: none; }
.barra-recolhida .barra-marca img { height: 40px; }
.barra-recolhida .barra-marca { padding-bottom: 16px; }
.barra-recolhida .barra-alternar { align-self: center; }
.barra-recolhida .barra-alternar svg { transform: rotate(180deg); }
.barra-recolhida .barra-usuario { justify-content: center; }
.barra-recolhida .barra-usuario-dados { display: none; }

@media (max-width: 760px) {
    /* Em tela estreita a barra já é horizontal: recolher não faz sentido. */
    .barra-alternar { display: none; }
    .barra-recolhida .barra { width: 100%; flex: none; }
    .barra-recolhida .barra-item span { display: inline; }
    .barra-recolhida .barra-usuario-dados { display: flex; }
}

.quadro-ganho { color: #0e7a5f; }

/* ===== Editor de proposta ===== */
.painel-sub { display: block; font-size: .88rem; color: var(--texto-fraco); margin-top: 2px; }

.grupos { display: flex; flex-direction: column; gap: 14px; }
.grupo { border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo-suave); padding: 14px 16px; }
.grupo-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.grupo-nome { flex: 1 1 auto; font-weight: 600; }
.grupo-total {
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--azul-profundo);
}

.itens { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
/* Colunas fixas: catálogo, descrição, qtd, unidade, valor, prazo, total, remover.
   A descrição é a única que cresce. */
.item {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr) 64px 92px 100px 56px 96px 24px 24px;
    gap: 6px; align-items: center;
}
.item .form-control { padding: 6px 9px; font-size: .86rem; }
.item-qtd, .item-valor, .item-desconto { text-align: right; font-variant-numeric: tabular-nums; }
/* O desconto da linha fica apagado enquanto vale zero: é campo que quase sempre
   não se usa, e destacá-lo em toda linha pediria atenção sem motivo. */
.item-desconto { color: var(--texto-fraco); }
.item-desconto:focus, .item-desconto:not([value="0"]) { color: var(--texto); }

/* Ação discreta na linha e no cabeçalho do grupo — duplicar não é destrutivo
   e não pode competir com o × de remover. */
.botao-linha {
    background: none; border: none; padding: 0 2px; cursor: pointer;
    color: var(--azul-petroleo); font-size: .9rem; line-height: 1; white-space: nowrap;
}
.botao-linha:hover { color: var(--azul-profundo); }
.grupo-topo .botao-linha { font-size: .78rem; font-weight: 600; }
.item-total {
    font-size: .86rem; font-weight: 600; text-align: right;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.botao-fino { padding: 6px 12px; font-size: .84rem; }

.fechamento {
    margin-top: 4px; margin-left: auto; width: 100%; max-width: 340px;
    border: 1px solid var(--linha); border-radius: 6px; background: #fff; padding: 14px 18px;
    display: flex; flex-direction: column; gap: 7px;
}
.fechamento-linha { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; }
.fechamento-linha strong { font-variant-numeric: tabular-nums; }
.fechamento-menos strong { color: #b3261e; }
.fechamento-total {
    border-top: 2px solid var(--azul-profundo); padding-top: 9px; margin-top: 3px;
    font-size: 1.02rem;
}
.fechamento-total strong { color: var(--azul-profundo); font-size: 1.14rem; }

/* O equivalente em reais é informação de apoio, não o preço da proposta: fica
   abaixo do total e em peso menor, senão as duas linhas disputam o olho e o
   cliente não sabe qual número está sendo cobrado. */
.fechamento-convertido { font-size: .82rem; color: var(--texto-fraco); margin-top: -2px; }
.fechamento-convertido strong { font-weight: 600; color: var(--azul-petroleo); }

.pilula-info { background: #e6eef7; color: var(--azul-petroleo); }
.pilula-nao { background: #fdecea; color: #b3261e; }

@media (max-width: 1100px) {
    /* Numa tela estreita a linha vira bloco: oito colunas fixas espremeriam
       tudo a ponto de não dar para ler o valor. */
    .item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .item-total { grid-column: 1 / -1; text-align: left; }
}

/* Atalho para as propostas no rodapé do cartão do funil. Discreto: o cartão
   é para arrastar, o link é o caminho secundário. */
.cartao-link {
    font-size: .78rem;
    color: var(--azul-petroleo);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.cartao-link:hover { color: var(--azul-profundo); }

.col-acao { text-align: right; white-space: nowrap; }
/* Duas ações seguidas na mesma célula encostam uma na outra e viram uma
   palavra só ("PDF abrir"). */
.col-acao > a + a { margin-left: 12px; }

/* O prazo sai da linha do dinheiro e abre a linha de baixo, à esquerda: com
   ele lá em cima a descrição sobrava com 34px de largura. */
.item-prazo { grid-column: 1 / 4; }

/* A descrição detalhada ocupa uma linha inteira embaixo do item: é texto
   longo, não cabe na grade de colunas. */
.item-detalhe {
    grid-column: 1 / -1;
    resize: vertical;
    min-height: 54px;
    font-size: .84rem;
}
.item { row-gap: 4px; margin-bottom: 10px; }

/* Atalho para copiar o escopo do cadastro do serviço. Discreto e alinhado à
   direita, embaixo do campo: é apoio à escrita, não uma ação da proposta. */
.link-catalogo {
    grid-column: 1 / -1; justify-self: end;
    background: none; border: none; padding: 0;
    font-size: .76rem; color: var(--azul-petroleo); cursor: pointer;
    border-bottom: 1px dotted currentColor;
}
.link-catalogo:hover { color: var(--azul-profundo); }

/* Modal de PDF: fundo escuro da paleta para o documento branco destacar. */
.caixa-pdf { border: 0; border-radius: 10px; overflow: hidden; }
.caixa-pdf-topo {
    background: var(--azul-profundo);
    color: #fff;
    border-bottom: 0;
    padding: 12px 16px;
}
.caixa-pdf-topo .modal-title { font-size: 1rem; font-weight: 600; }
.caixa-pdf-topo .botao-secundario {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.45);
}
.caixa-pdf-topo .botao-secundario:hover { background: rgba(255,255,255,.12); }
.pdf-carregando { text-align: center; padding: 56px 0; color: var(--azul-petroleo); }
.pdf-carregando-texto { margin-top: 10px; font-size: .88rem; }

/* ---------- Relatórios ---------- */

.filtro-periodo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.filtro-periodo .campo { margin: 0; }

.cartoes-relatorio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.cartao-relatorio {
    display: block;
    padding: 18px;
    border: 1px solid var(--linha);
    border-left: 4px solid var(--ouro);
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.cartao-relatorio:hover { border-color: var(--azul-aco); transform: translateY(-2px); }
.cartao-relatorio h2 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--azul-profundo);
}
.cartao-relatorio p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--texto-fraco);
}

/* Número que pede atenção — mesma leitura do "dias parado" no funil. */
.num-alerta { color: var(--ouro); font-weight: 600; }

.tabela tfoot th {
    background: var(--fundo-suave);
    border-top: 2px solid var(--azul-aco);
    color: var(--azul-profundo);
}

/* ---------- Dashboards ---------- */

.grade-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.cartao-grafico {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 16px 18px 20px;
    min-width: 0;   /* sem isso o canvas estica a coluna do grid */
}
.cartao-grafico-largo { grid-column: 1 / -1; }
.cartao-grafico h2 {
    margin: 0 0 2px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--azul-profundo);
}
.grafico-nota {
    margin: 0 0 14px;
    font-size: .8rem;
    color: var(--texto-fraco);
}

/* Chart.js com maintainAspectRatio:false preenche o pai — sem altura aqui o
   gráfico cresce sem limite e toma a página inteira. */
.grafico-area { position: relative; height: 260px; }
.cartao-grafico-largo .grafico-area { height: 300px; }

.grafico-vazio {
    margin: 0;
    padding: 40px 0;
    text-align: center;
    font-size: .85rem;
    color: var(--texto-fraco);
    background: var(--fundo-suave);
    border-radius: 6px;
}

/* Ações que convivem na mesma célula: cada botão é um form próprio, porque
   POST com antiforgery não cabe em link. */
.acao-inline { display: inline-block; margin-left: 6px; }
.acao-inline:first-child { margin-left: 0; }

/* ---------- barra de filtros do funil ---------- */

/* Tudo em uma linha só: título, resumo, filtros e o botão, como na barra do
   Ploomes. A busca é o único campo elástico — ela encolhe para os demais
   caberem, em vez de empurrar o botão para baixo. */
.quadro-filtros {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.quadro-filtros .form-control { padding: 6px 10px; font-size: .86rem; }
.filtro-busca { flex: 1 1 180px; min-width: 120px; max-width: 320px; }
.filtro-select { width: 160px; }

/* Empurra o botão para a direita, como na barra do Ploomes. */
.quadro-novo { margin-left: auto; }

.quadro-ocultos { color: var(--texto-fraco); }

/* ---------- Select2 na paleta CoreBox ---------- */
/* O tema padrão do Select2 é cinza-azulado do Bootstrap 3 e destoa do resto.
   Só o necessário para ele parecer um .form-control nosso. */

.select2-container--default .select2-selection--single {
    height: auto;
    padding: 4px 2px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    color: var(--texto);
    padding-left: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--texto-fraco); }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--azul-petroleo);
    outline: 0;
}

.select2-dropdown {
    border-color: var(--azul-petroleo);
    border-radius: 6px;
    overflow: hidden;

    /* A lista nasce com a largura do gatilho. Em campo estreito, como os
       filtros do funil, nome de cliente quebra em duas linhas — a lista pode
       ser mais larga que o campo sem prejuízo. */
    min-width: 240px;
}
.select2-container--default .select2-results__option { white-space: nowrap; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--azul-petroleo);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--gelo);
    color: var(--azul-profundo);
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--linha);
    border-radius: 4px;
    padding: 6px 8px;
}

/* Dentro da linha de item da proposta os campos são baixos; o Select2 precisa
   acompanhar, senão a linha desalinha. */
.item .select2-container--default .select2-selection--single { padding: 2px 0; font-size: .86rem; }

/* Miniatura da arte do modelo de proposta na listagem. */
.miniatura-arte {
    height: 46px;
    width: auto;
    border: 1px solid var(--linha);
    border-radius: 3px;
    display: block;
}

/* Linha de assinatura no modelo de proposta. */
.assinatura-linha {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
    grid-column: 1 / -1;
}
.assinatura-linha .form-control { padding: 6px 9px; font-size: .86rem; }

.previa-arte {
    margin-top: 8px;
    max-height: 150px;
    width: auto;
    border: 1px solid var(--linha);
    border-radius: 4px;
    display: block;
}

/* ---------- anexos da proposta (GED) ---------- */

.bloco-anexos { display: block; }
.bloco-anexos-titulo {
    margin: 0 0 4px;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--azul-petroleo);
}
.anexo-envio {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}
.anexo-envio input[type=file] { flex: 1 1 300px; }
.anexo-envio input[type=text] { flex: 1 1 240px; }

.lista-anexos { list-style: none; margin: 12px 0 0; padding: 0; }
.anexo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--linha);
}
.anexo-tipo {
    flex: 0 0 auto;
    min-width: 44px;
    text-align: center;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--azul-profundo);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.anexo-nome { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.anexo-nome .celula-apoio { display: block; }
.anexo-acoes { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }

/* ---------- editor de cláusulas do contrato ---------- */

.bloco-clausulas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
}
.marcadores {
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 12px 14px;
}
.marcadores h3 {
    margin: 0 0 4px;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--azul-petroleo);
}
.marcadores p { margin: 0 0 10px; font-size: .78rem; color: var(--texto-fraco); }
.marcadores ul { list-style: none; margin: 0; padding: 0; }
.marcadores li { margin-bottom: 8px; }
.marcadores li span { display: block; font-size: .74rem; color: var(--texto-fraco); }
.marcador {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--azul-aco);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    color: var(--azul-profundo);
    cursor: pointer;
}
.marcador:hover { background: var(--gelo); }

@media (max-width: 900px) {
    .bloco-clausulas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- avatares ---------- */

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;              /* foto retangular não distorce */
    background: var(--azul-petroleo);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.avatar-inicial { letter-spacing: .02em; }
.avatar-mini { width: 24px; height: 24px; font-size: .64rem; }
.avatar-grande { width: 96px; height: 96px; font-size: 1.6rem; }

.celula-usuario { display: flex; align-items: center; gap: 10px; }
.previa-foto { display: flex; align-items: center; gap: 14px; }

/* Foto na barra lateral ocupa o mesmo lugar do círculo com a inicial. */
.barra-avatar-foto { padding: 0; object-fit: cover; }

/* ---------- edição do negócio pelo cartão ---------- */

.cartao-editar {
    float: right;
    background: none;
    border: 0;
    padding: 2px;
    margin-left: 6px;
    line-height: 0;
    cursor: pointer;
    color: var(--azul-aco);
    border-radius: 4px;
}
.cartao-editar svg { width: 15px; height: 15px; fill: currentColor; }
.cartao-editar:hover { color: var(--azul-profundo); background: var(--gelo); }

.formulario-negocio .campo { margin-bottom: 12px; }
.formulario-negocio label { display: block; margin-bottom: 4px; font-size: .8rem; color: var(--texto-fraco); }

.edicao-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--linha);
}
.edicao-rotulo {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-fraco);
}
.edicao-rodape {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--linha);
}

/* O Select2 dentro do modal precisa ficar acima dele; o modal do Bootstrap
   usa 1055, e sem isto a lista abre atrás. */
.select2-container--open { z-index: 1060; }

/* ===== Agenda do negócio: tarefas e histórico ===== */

/* Ícone no cartão. Sem tarefa nenhuma fica discreto — um sino aceso sem motivo
   ensina a ignorar o sino. */
.cartao-agenda {
    position: relative;
    background: none;
    border: none;
    padding: 2px 4px;
    margin-left: 2px;
    border-radius: 4px;
    color: var(--azul-aco);
    cursor: pointer;
    float: right;
    line-height: 1;
}
.cartao-agenda svg { width: 15px; height: 15px; fill: currentColor; }
.cartao-agenda:hover { color: var(--azul-profundo); background: var(--gelo); }
.cartao-agenda-ativa { color: var(--ouro); }
.cartao-agenda-vencida { color: #b3261e; }
.cartao-agenda-conta {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--azul-aco);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}
.cartao-agenda-ativa .cartao-agenda-conta { background: var(--ouro); color: var(--azul-profundo); }
.cartao-agenda-vencida .cartao-agenda-conta { background: #b3261e; }

/* Visões salvas: a barra de atalhos de filtro, no topo do funil e da lista de
   clientes. Lê como aba de pasta — a que está aberta é a única com fundo
   branco e sublinhado em ouro; as outras ficam apagadas esperando o clique. */
/* Abas de painel na ficha. Mesma linguagem visual das visões salvas do funil
   — sublinhado ouro na ativa —, mas classe própria: aquelas são endereços e
   estas trocam o painel sem sair da página. */
.abas {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    border-bottom: 1px solid var(--linha);
    margin: -4px 0 14px;
}
.abas .aba {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    padding: 7px 12px; font-size: .84rem; font-weight: 600;
    color: var(--azul-petroleo);
    border-radius: 6px 6px 0 0;
    /* A borda existe já transparente: acender a da ativa não pode empurrar as
       outras um pixel para cima. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.abas .aba:hover { background: var(--gelo); color: var(--azul-profundo); }
.abas .aba-ativa { color: var(--azul-profundo); border-bottom-color: var(--ouro); }
.aba-conta {
    background: var(--gelo); color: var(--texto-fraco);
    font-size: .72rem; font-weight: 700; border-radius: 10px; padding: 0 7px;
}
.abas .aba-ativa .aba-conta { background: var(--azul-profundo); color: #fff; }

/* Ação do painel alinhada à direita, acima da tabela. */
.abas-acoes { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.visoes {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Aqui o wrap é bem-vindo, ao contrário da barra de filtros: são atalhos,
       e uma segunda linha de atalhos continua legível. */
    flex-wrap: wrap;
    /* Sobe para encostar na divisória do cabeçalho, como aba de pasta. A
       margem negativa come parte do margin-bottom do .quadro-topo. */
    margin: -14px 0 16px;
}
.visao-caixa { display: inline-flex; align-items: center; border-radius: 6px 6px 0 0; }
.visoes .visao {
    display: inline-block;
    padding: 6px 12px;
    font-size: .82rem;
    color: var(--azul-petroleo);
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.visoes .visao:hover { background: var(--gelo); color: var(--azul-profundo); }
.visoes .visao-ativa, .visoes .visao-ativa .visao {
    color: var(--azul-profundo);
    font-weight: 600;
    background: #fff;
    border-bottom-color: var(--ouro);
}
.visao-caixa.visao-ativa { padding-right: 4px; }
.visao-caixa.visao-ativa .visao:hover { background: transparent; }

/* O "x" da aba aberta e o botão de salvar são irmãos: mesmo tamanho, mesmo
   cinza, e só ganham cor quando o ponteiro chega. */
.visao-remover { display: inline-flex; }
.visao-remover button, .visao-salvar button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 4px 6px;
    font-size: .78rem;
    line-height: 1;
    color: var(--azul-petroleo);
    cursor: pointer;
    border-radius: 4px;
}
.visao-remover svg, .visao-salvar svg { width: 13px; height: 13px; fill: currentColor; }
.visao-remover button:hover { color: #b3261e; background: var(--gelo); }
.visao-salvar { margin-left: auto; }
.visao-salvar button:hover { color: var(--azul-profundo); background: var(--gelo); }

/* Porta da ficha no próprio cartão, ao lado do lápis e da agenda. Mesmo peso
   visual dos dois: são três atalhos irmãos, e destacar um deles faria o olho
   procurá-lo antes de ler o título do negócio. */
.cartao-ficha {
    float: right;
    padding: 2px;
    margin-left: 2px;
    line-height: 0;
    border-radius: 4px;
    color: var(--azul-aco);
}
.cartao-ficha svg { width: 15px; height: 15px; fill: currentColor; }
.cartao-ficha:hover { color: var(--azul-profundo); background: var(--gelo); }

/* Balão ancorado no cartão. Fica abaixo do modal do Bootstrap (1055): quando os
   dois existem na tela, quem manda é o modal. */
.agenda-balao {
    position: absolute;
    z-index: 1040;
    width: 306px;
    max-height: 76vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(10, 44, 66, .18);
}
.agenda-balao[hidden] { display: none; }
.agenda-balao .agenda { padding: 12px 14px 10px; }

.agenda-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.agenda-topo h3 { font-size: .92rem; font-weight: 600; margin: 0; color: var(--texto); }
.agenda-ficha { margin-left: auto; font-size: .78rem; color: var(--texto-fraco); text-decoration: none; }
.agenda-ficha:hover { text-decoration: underline; color: var(--azul-profundo); }
.agenda-vazia { font-size: .84rem; color: var(--azul-aco); margin: 0 0 6px; }

.agenda-lista { list-style: none; margin: 0; padding: 0; }
.agenda-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--linha);
}
.agenda-item:last-child { border-bottom: none; }
.agenda-baixa { margin: 0; flex: 0 0 auto; }

/* Círculo vazio que se preenche ao passar o mouse: mostra que o clique dá baixa,
   sem precisar de rótulo. */
.agenda-bolinha {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--azul-aco);
    background: none;
    color: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agenda-bolinha svg { width: 12px; height: 12px; fill: currentColor; }
.agenda-bolinha:hover { border-color: #0e7a5f; color: #0e7a5f; }
.agenda-item-vencida .agenda-bolinha { border-color: #b3261e; }
.agenda-bolinha-feita { border-color: #0e7a5f; color: #0e7a5f; background: #e6f4ee; }
.agenda-bolinha-feita:hover { border-color: var(--azul-aco); color: var(--texto-fraco); background: none; }

.agenda-corpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agenda-titulo { font-size: .86rem; font-weight: 600; color: var(--texto); }
.agenda-quando { font-size: .76rem; color: var(--texto-fraco); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.agenda-quando svg { width: 12px; height: 12px; fill: currentColor; opacity: .8; }
.agenda-atraso { color: #8a5406; background: #fdeacd; border-radius: 9px; padding: 0 7px; font-weight: 600; }
.agenda-dono { font-size: .74rem; color: var(--azul-aco); }
.agenda-item-feita .agenda-titulo { color: var(--texto-fraco); text-decoration: line-through; }

.agenda-acoes { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--linha); padding-top: 4px; }
.agenda-acao {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 8px 4px;
    font-size: .85rem;
    color: var(--azul-petroleo);
    text-align: left;
    border-radius: 5px;
    cursor: pointer;
}
.agenda-acao svg { width: 17px; height: 17px; fill: var(--azul-petroleo); flex: 0 0 17px; }
.agenda-acao:hover { background: var(--fundo-suave); color: var(--azul-profundo); }

.agenda-form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.agenda-form[hidden] { display: none; }
.agenda-form .form-control { font-size: .86rem; padding: 6px 9px; }
.agenda-form-linha { display: flex; gap: 8px; }
.agenda-form-linha > * { flex: 1 1 0; min-width: 0; }
.agenda-form-acoes { display: flex; gap: 8px; align-items: center; }

/* Na ficha o formulário está sempre aberto: a tela existe para registrar, e
   esconder o campo atrás de um clique só atrapalharia. */
.agenda-form-ficha { margin-top: 14px; border-top: 1px solid var(--linha); }
.agenda-form-ficha .bloco-sub { margin-bottom: 0; }
.agenda-form-ficha .agenda-form-linha > button { flex: 0 0 auto; }

.agenda-feitas { margin-top: 12px; }
.agenda-feitas summary { font-size: .8rem; color: var(--texto-fraco); cursor: pointer; }
.agenda-feitas summary:hover { color: var(--azul-profundo); }

/* ===== Linha do tempo do histórico ===== */
.linha-tempo { list-style: none; margin: 16px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--gelo); }
.linha-tempo-item { position: relative; padding: 0 0 14px 12px; }
.linha-tempo-item:last-child { padding-bottom: 0; }
.linha-tempo-item::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--azul-aco);
    border: 2px solid #fff;
}
.linha-tempo-canal {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--azul-petroleo);
}
.linha-tempo-texto { margin: 2px 0 3px; font-size: .88rem; color: var(--texto); line-height: 1.45; white-space: pre-wrap; }
.linha-tempo-rodape { font-size: .76rem; color: var(--texto-fraco); }

/* O histórico cresce sem limite; o bloco rola em vez de esticar a página. */
/* O painel de abas ocupa a faixa inteira da ficha, como na do Ploomes: numa
   coluna de 330px a tabela de propostas nasce espremida e as ações saem para
   fora do campo de visão. Tarefas e dados do negócio continuam lado a lado
   acima dele. */
.bloco-historico { grid-column: 1 / -1; }
.bloco-historico .linha-tempo { max-height: 420px; overflow-y: auto; }

/* Indicador cujo valor é palavra, não número: 1.55rem de etapa ou situação
   estoura a caixa. */
.indicador-texto { font-size: 1.05rem; font-weight: 600; }

/* ---------- Metas ---------- */

/* O painel do mês: uma barra por pessoa, nome à esquerda e números à direita.
   A barra é o que se lê de relance; o número é para quem quer a conta. */
.metas-lista { list-style: none; margin: 0; padding: 0; }
.metas-item {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr minmax(180px, auto);
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gelo);
}
.metas-item:last-child { border-bottom: 0; }
.metas-pessoa { display: flex; align-items: center; gap: 8px; min-width: 0; }
.metas-nome { font-size: .9rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; }

.metas-barra {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--gelo);
    overflow: hidden;
}
.metas-preenche { display: block; height: 100%; border-radius: 5px; }
/* A cor conta a distância da meta sem ler número nenhum. Verde só quando
   bateu — pintar de verde quem está em 90% ensina a ignorar a cor. */
.faixa-ok { background: #1f8a4c; }
.faixa-perto { background: var(--ouro); }
.faixa-longe { background: var(--azul-aco); }
.faixa-sem { background: transparent; }

.metas-numeros { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.metas-numeros strong { font-size: .95rem; color: var(--azul-profundo); }
.metas-alvo { font-size: .78rem; color: var(--texto-fraco); }

/* A grade do ano tem treze colunas e não cabe em tela estreita. A rolagem
   fica NA grade, nunca no corpo da página. */
.metas-rolagem { overflow-x: auto; }
.metas-grade { min-width: 900px; }
.metas-grade th, .metas-grade td { text-align: right; white-space: nowrap; }
.metas-col-pessoa { text-align: left !important; position: sticky; left: 0; background: #fff; }
.metas-grade thead .metas-col-pessoa { background: var(--fundo-suave); }
/* O mês em foco fica marcado na grade: é o que o painel de cima está mostrando. */
.metas-col-foco { background: rgba(243, 161, 37, .08); }

.metas-celula { width: 92px; padding: 4px 6px; font-size: .82rem; text-align: right; }
.metas-so-leitura { display: block; font-size: .84rem; color: var(--azul-profundo); }
/* O realizado fica embaixo da meta, menor: é consequência, não decisão. */
.metas-realizado { display: block; font-size: .72rem; color: var(--texto-fraco); margin-top: 2px; }
.num-ok { color: #1f8a4c; }

.metas-legenda { margin: 12px 0 0; font-size: .78rem; color: var(--texto-fraco); }
.metas-grade-caixa .bloco-topo { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Contratos e GED ---------- */

/* Falta na paleta de pílulas: "vence em breve" não é recusa nem informação
   neutra, é atenção — e atenção, no documento da marca, é o ouro. */
.pilula-aviso { background: #fdeacd; color: #8a5406; }

/* Caixa de seleção na barra de filtros, alinhada com os campos ao lado. */
.filtro-marca {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .84rem; color: var(--texto-fraco); white-space: nowrap;
}
.filtro-marca input { margin: 0; }

/* As ordens de compra são o bloco principal da ficha e têm tabela dentro:
   ocupam a grade inteira em vez de metade dela. */
.bloco-largo { grid-column: 1 / -1; }

/* Barra de consumo do contrato, entre os indicadores e a grade. */
.contrato-consumo { margin: -6px 0 18px; }
.faixa-estourou { background: #b3261e; }

.contrato-contagem { font-size: .72rem; }

/* A lista de arquivos precisa caber DENTRO de uma célula de tabela sem
   esticá-la: nome, tamanho e o "x", em uma linha por arquivo. */
.ged-lista { list-style: none; margin: 0 0 6px; padding: 0; }
.ged-lista li {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 2px 0; font-size: .82rem;
}
.ged-lista-solta li { padding: 6px 0; border-bottom: 1px solid var(--gelo); }
.ged-lista-solta li:last-child { border-bottom: 0; }
.ged-tamanho { font-size: .72rem; color: var(--texto-fraco); white-space: nowrap; }

.ged-remover {
    background: none; border: 0; padding: 0 4px; line-height: 1;
    font-size: 1rem; color: var(--texto-fraco); cursor: pointer; border-radius: 3px;
}
.ged-remover:hover { color: #b3261e; background: var(--gelo); }

.ged-envio { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ged-arquivo { font-size: .74rem; max-width: 190px; }
.ged-envio-bloco { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }

/* Linha do formulário de nova OC: campos lado a lado, quebrando no aperto. */
.oc-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.oc-linha .form-control { flex: 1 1 150px; min-width: 120px; }

/* ===== Contador do sino na barra ===== */
.barra-item { position: relative; }
.barra-contador {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--ouro); color: var(--azul-profundo);
    font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.barra-item.ativo .barra-contador { background: var(--azul-profundo); color: #fff; }
.barra-recolhida .barra-contador { position: absolute; top: 4px; right: 4px; margin: 0; min-width: 16px; height: 16px; font-size: .62rem; padding: 0 4px; }