/*
 * CSS do sistema. Nenhuma view tem <style> (docs/01-convencoes.md).
 * O tema fica em mazer/; aqui só o que é nosso.
 *
 * As cores e as medidas vêm do projeto de referência: barra lateral escura de
 * 220px no azul-petróleo da marca, menu compacto e fundo cinza claro.
 */

:root {
    --cor-marca: #1f2e40;
    --cor-marca-escura: #162331;
    --cor-marca-hover: #08042f;
    --largura-menu: 192px;
    --largura-menu-recolhido: 64px;
}

/*
 * O tema Mazer pede `font-family: Nunito` sem alternativa, e a Nunito nao esta
 * no projeto — nao ha arquivo dela em mazer/ nem Google Fonts no cabecalho.
 * Sem isto o navegador cai na fonte padrao dele, que e serifada.
 */
body {
    background-color: #e9ecef;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

/* ==========================================================================
   Barra lateral
   ========================================================================== */

#sidebar,
.sidebar-wrapper {
    background-color: var(--cor-marca);
    color: #fff;
    width: var(--largura-menu);
}

#main {
    margin-left: var(--largura-menu);
}

/*
 * O Mazer reserva muito espaço em cima: `padding: 2rem` no cabeçalho da
 * barra e `margin-top: 2rem` no menu. Somados, empurravam o primeiro item
 * quase 100px para baixo, com a logo perdida no meio.
 */
/*
 * O tema põe `.sidebar-wrapper .sidebar-header { padding: 2rem 2rem 1rem;
 * font-size: 2rem }`: com duas classes, ganhava do `.sidebar-header` daqui e
 * sobrava espaço vazio em volta da logo. A logo fica `block` para a linha de
 * 2rem do texto não somar altura embaixo dela.
 */
.sidebar-wrapper .sidebar-header {
    padding: 0.6rem 0.75rem 0.4rem;
    font-size: 1rem;
}

.sidebar-wrapper .sidebar-header .sidebar-marca img {
    display: block;
    margin: 0 auto;
}

/* O tema separa cada item por 0.5rem e dá 0.7rem de folga ao link. */
.sidebar-wrapper .menu .sidebar-item {
    margin-top: 0.1rem;
}

.sidebar-wrapper .menu .sidebar-link {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* A seta do grupo encostada na borda direita e no meio da linha (o tema a
   deixava a 15px da borda e presa a 12px do topo). A referência é o próprio
   link, e não o item — o item cresce quando o grupo abre. */
.sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link {
    position: relative;
}

.sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after {
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
}

/* O menu rola com a roda do mouse e o toque, mas sem a barra de rolagem
   aparecendo ao lado. */
.sidebar-wrapper {
    scrollbar-width: none;
}

.sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

/*
 * O tema fixa `.sidebar-wrapper .sidebar-header img { height: 1.2rem }`. São
 * duas classes mais o elemento, então `.sidebar-marca img` **perde no
 * desempate** e a altura ficava travada em ~19px — com a largura nova, a logo
 * saía esticada de lado. O seletor daqui precisa alcançar a mesma altura.
 */
.sidebar-wrapper .sidebar-header .sidebar-marca img {
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 150px;
}

.sidebar-wrapper .menu {
    margin-top: 0.25rem;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-menu {
    padding-top: 0;
}

/*
 * A barra é estreita de propósito: o espaço é do conteúdo. Os nomes mais longos
 * do menu — "Personalização do sistema", "Cidades por usuário" — ainda cabem em
 * uma linha nesta medida.
 */
.sidebar-wrapper .menu .sidebar-link {
    font-size: 0.85rem;
    padding-left: 0.7rem;
    padding-right: 0.4rem;
}

.sidebar-wrapper .menu .sidebar-link span {
    color: #e1e1e1;
}

.sidebar-wrapper .menu .sidebar-link i {
    color: #9fb4cc;
    font-size: 1rem;
}

.sidebar-wrapper .menu .sidebar-link:hover {
    background-color: var(--cor-marca-hover);
}

.sidebar-wrapper .menu .sidebar-link:hover span,
.sidebar-wrapper .menu .sidebar-link:hover i {
    color: #fff;
}

.sidebar-item.active > .sidebar-link {
    background-color: rgba(255, 255, 255, 0.12);
}

.sidebar-item.active > .sidebar-link span,
.sidebar-item.active > .sidebar-link i {
    color: #fff;
}

.sidebar-wrapper .menu .submenu {
    background-color: transparent;
    padding-left: 0;
}

.sidebar-wrapper .menu .submenu .submenu-item a {
    color: #bfcbd9 !important;
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem 0.35rem 1.35rem;
}

.sidebar-wrapper .menu .submenu .submenu-item a:hover {
    background-color: var(--cor-marca-hover);
    color: #fff !important;
    margin-left: 0.3rem;
}

/* Recolhido: sobra só o ícone. */
#sidebar:not(.active) {
    width: var(--largura-menu-recolhido);
}

#sidebar:not(.active) .sidebar-menu span,
#sidebar:not(.active) .submenu {
    display: none;
}

@media (max-width: 1199px) {
    #sidebar {
        left: calc(var(--largura-menu) * -1);
    }

    #sidebar.active {
        left: 0;
    }

    #main {
        margin-left: 0;
    }
}

/* ==========================================================================
   Título de página, cartão e botão da marca
   ========================================================================== */

.page-title h3 {
    color: var(--cor-marca);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.card-header {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
}

.btn-marca {
    background-color: var(--cor-marca);
    border-color: var(--cor-marca);
    color: #fff;
}

.btn-marca:hover,
.btn-marca:focus {
    background-color: var(--cor-marca-escura);
    border-color: var(--cor-marca-escura);
    color: #fff;
}

::placeholder {
    color: #bbb !important;
    opacity: 1;
}
/* Nome e empresa empilhados no canto da barra de cima. */
.barra-usuario {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.barra-usuario-link {
    font-size: 0.82rem;
}

.barra-usuario-nome {
    font-weight: 600;
    color: #fff;
}

.barra-usuario-empresa {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

/* O #main já tem a folga lateral: repeti-la aqui deslocava o aviso. */
.aviso-personificacao {
    margin: 0 0 1rem;
}

.btn[disabled] {
    cursor: wait;
}

/* Imagem do produto na listagem e no formulário. */
.miniatura-produto {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.miniatura-produto-grande {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 4px;
}

/* Nome fantasia embaixo do nome, na listagem de cliente. */
.linha-secundaria {
    font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   Telas de fora do sistema: login e repasse. Cartão centrado sobre fundo
   escuro, no mesmo desenho do projeto de referência.
   --------------------------------------------------------------------------- */
.tela-publica {
    background-color: #1f2e40;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tela-publica-cartao-area {
    width: 100%;
    max-width: 420px;
    padding: 15px;
}

.tela-publica-logo {
    display: block;
    margin: 0 auto 0.75rem;
    max-height: 64px;
    max-width: 220px;
}

.tela-publica-marca {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tela-publica-cartao {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
}

.tela-publica-titulo {
    color: #1f2e40;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* Quando há subtítulo, o espaço embaixo do título é dele. */
.tela-publica-titulo:has(+ .tela-publica-subtitulo) {
    margin-bottom: 0.25rem;
}

.tela-publica-subtitulo {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.tela-publica-rodape {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
}

/*
 * O link do Bootstrap é azul-escuro, e sobre este fundo escuro ele sumia: era
 * o "Criar conta grátis" que ninguém achava.
 */
.tela-publica-rodape a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
}

.tela-publica-rodape a:hover,
.tela-publica-rodape a:focus {
    color: #ffffff;
    text-decoration: none;
}

.tela-publica-rodape-separador {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0.4rem;
}

/*
 * Campo de senha com o olho de conferir dentro dele. O botão fica sobreposto à
 * direita, para não roubar largura do campo.
 */
.campo-com-olho {
    position: relative;
}

.campo-com-olho .form-control {
    padding-right: 2.75rem;
}

.campo-olho {
    background: none;
    border: 0;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
}

.campo-olho:hover,
.campo-olho:focus {
    color: var(--cor-marca);
}

/*
 * Funil de vendas. O quadro rola na horizontal porque a empresa pode ter ate
 * dez etapas, e nao cabem na largura da tela.
 */
.funil-quadro {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.funil-coluna {
    background-color: #f5f6fa;
    border-radius: 6px;
    flex: 0 0 260px;
    padding: 0.75rem;
}

.funil-coluna-titulo {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.funil-cartao {
    background-color: #fff;
    border-left: 4px solid #adb5bd;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    /* Texto menor para o cartão ficar enxuto (pedido do dono). */
    font-size: 0.78rem;
    line-height: 1.3;
}

/* As linhas usam .small; dentro do cartão já pequeno, não encolhem de novo. */
.funil-cartao .small {
    font-size: inherit;
}

.funil-cartao-cliente {
    font-size: 0.85rem;
    font-weight: 600;
}

.funil-cartao-observacao {
    margin-top: 0.15rem;
}

.funil-cartao-acao {
    display: flex;
    gap: 0.2rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Os ícones do cartão no tamanho do btn-xs do CI3 (~22px), menores que o btn-sm. */
.funil-cartao-acao .btn {
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
}

/* As mesmas quatro cores da legenda do sistema antigo. */
.funil-cartao-futuro { border-left-color: #3498db; }
.funil-cartao-hoje { border-left-color: #2ecc71; }
.funil-cartao-hoje_passou_da_hora { border-left-color: #f1c40f; }
.funil-cartao-atrasado { border-left-color: #c0392b; }
.funil-cartao-sem_agenda { border-left-color: #adb5bd; }

/* Na legenda os mesmos nomes viram fundo, para o usuario ligar cor e sentido. */
.badge.funil-cartao-futuro { background-color: #3498db; color: #fff; }
.badge.funil-cartao-hoje { background-color: #2ecc71; color: #fff; }
.badge.funil-cartao-hoje_passou_da_hora { background-color: #f1c40f; color: #212529; }
.badge.funil-cartao-atrasado { background-color: #c0392b; color: #fff; }

/*
 * Calendario da agenda. Sete colunas de largura igual, para o mes nao ficar
 * torto quando um dia tem texto longo e o outro nao tem nada.
 */
.agenda-calendario {
    table-layout: fixed;
}

.agenda-dia {
    height: 130px;
    vertical-align: top;
}

.agenda-dia-vazio {
    background-color: #f5f6fa;
}

.agenda-dia-hoje {
    background-color: #fff8e1;
}

.agenda-dia-numero {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.agenda-texto {
    font-size: 0.85rem;
    resize: vertical;
}

/* Conversa de mensagens: balao a esquerda para o outro, a direita para mim. */
.conversa-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 480px;
    overflow-y: auto;
}

.conversa-balao {
    background-color: #f5f6fa;
    border-radius: 8px;
    max-width: 70%;
    padding: 0.5rem 0.75rem;
}

.conversa-balao-minha {
    align-self: flex-end;
    background-color: #d9edf7;
}

.conversa-hora {
    color: #6c757d;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* O sino da barra abre uma lista curta; sem limite ela cobriria a tela. */
.barra-lembrete {
    max-height: 320px;
    min-width: 320px;
    overflow-y: auto;
}

/* O gráfico precisa de altura própria: a div nasce sem nenhuma. */
.grafico {
    height: 280px;
}

/* A coluna do numero da linha ocupa o minimo; o resto da tabela fica com o
   espaco. Era `style="width: 1%"` repetido em quatro telas. */
.coluna-numero {
    width: 1%;
}

/* Campo curto dentro de tabela: quantidade, data e quilometragem. Sem limite
   o input estica a coluna inteira. */
.campo-curto {
    max-width: 8rem;
}

/* Prévia do logotipo na tela de configuração. */
.logo-previa {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
}

/*
 * Espaçamento do corpo. O Mazer usa `padding: 2rem` no `#main` e 2rem de
 * margem embaixo do bloco de título; numa tela de trabalho isso é altura
 * perdida antes de aparecer o primeiro dado.
 */
#main {
    padding: 1.25rem 1.5rem;
}

#main > header {
    margin-bottom: 0.5rem !important;
}

#main > header .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.page-heading {
    margin-bottom: 1rem;
}

.page-title {
    margin-bottom: 0.75rem;
}

/*
 * Rodapé numa linha só, à esquerda, como no sistema antigo. Frase longa é
 * cortada com reticências em vez de empurrar a página: o versículo é enfeite,
 * e não pode roubar altura do conteúdo.
 */
.rodape {
    border-top: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 1rem;
    padding: 0.6rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rodape-separador {
    color: #ced4da;
    margin: 0 0.35rem;
}

.rodape-versiculo {
    color: #9aa3ad;
}

/* O × e o livro do versículo: discretos, mas com cara de clicável (mão e cor de link). */
.rodape-acao {
    background: none;
    border: 0;
    padding: 0 0.3rem;
    color: #6c8ebf;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

.rodape-acao:hover,
.rodape-acao:focus {
    color: #1f4e8c;
}

/*
 * Cartão de indicador do painel: tarja colorida com o rótulo e o número
 * embaixo. O CI3 tinha as mesmas tarjas (`small-box bg-*` do AdminLTE) —
 * seis retângulos brancos iguais não se distinguem de relance.
 */
.cartao-indicador {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    color: inherit;
    display: block;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}

a.cartao-indicador:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: inherit;
    transform: translateY(-1px);
}

.cartao-indicador-cabecalho {
    color: #fff;
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    padding: 6px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartao-indicador-corpo {
    display: block;
    padding: 10px;
    text-align: center;
}

.cartao-indicador-valor {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.cartao-indicador-contexto {
    color: #444;
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
    margin-top: 4px;
}

/* A paleta. Uma cor por indicador, fixa — ver InicioController. */
.cartao-azul     .cartao-indicador-cabecalho { background: #4787c7; }
.cartao-vermelho .cartao-indicador-cabecalho { background: #d9534f; }
.cartao-verde    .cartao-indicador-cabecalho { background: #5cb85c; }
.cartao-laranja  .cartao-indicador-cabecalho { background: #f0ad4e; }
.cartao-ciano    .cartao-indicador-cabecalho { background: #5bc0de; }
.cartao-roxo     .cartao-indicador-cabecalho { background: #7b3fc2; }
.cartao-rosa     .cartao-indicador-cabecalho { background: #e83e8c; }
.cartao-marca    .cartao-indicador-cabecalho { background: var(--cor-marca); }

/* Um gráfico por tela: pode ocupar a altura que a leitura pede. */
.grafico-cheio {
    height: 440px;
}

/* ==========================================================================
   Barra de cima
   ========================================================================== */

/*
 * A barra é uma faixa só, colada no topo, como no sistema antigo. O tema dá
 * `padding: 2rem` ao conteúdo, e somado à folga da navbar sobravam quase 90px
 * de nada antes do título da página.
 */
#main {
    padding: 0 1.5rem 1.5rem;
}

/*
 * O Mazer fixa `.navbar { height: 90px }`. Altura fixa ganha de `min-height`,
 * então sem o `height: auto` a barra nunca encolhe — igual ao fiia.
 */
.barra-superior {
    background-color: var(--cor-marca);
    margin: 0 -1.5rem 1rem;
    padding: 0.25rem 1.5rem;
    height: auto;
    min-height: 44px;
}

.barra-superior .nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.15rem 0.5rem;
    font-size: 1rem;
    position: relative;
}

.barra-superior .nav-link:hover,
.barra-superior .nav-link:focus {
    color: #fff;
}

.barra-superior .badge {
    position: absolute;
    top: -0.15rem;
    right: 0;
    font-size: 0.6rem;
    padding: 0.2em 0.4em;
}

/* A seta do dropdown ao lado do ícone só faz o ícone parecer torto. */
.barra-superior .sem-seta::after {
    display: none;
}

.barra-menu {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
}

.page-heading {
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   Painel da chefia
   ========================================================================== */

/* O filtro de mês e vendedor mora no canto da ação, ao lado do título. */
.painel-filtro {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.painel-filtro .form-select {
    width: auto;
    min-width: 9rem;
}

/*
 * A fatia colorida embaixo do número: mostra de relance a proporção que o total
 * sozinho esconde — quanto virou venda, quanto ficou em orçamento.
 */
.barra-fatia {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    margin: 0.45rem 0 0.3rem;
    background-color: #e9ecef;
}

.barra-fatia-parte {
    display: block;
    height: 100%;
}

.barra-fatia-verde { background-color: #2ea86f; }
.barra-fatia-azul { background-color: #3b82f6; }
.barra-fatia-cinza { background-color: #c8ccd2; }

/* Linha de progresso da meta: rótulo, número e barra. */
.barra-meta {
    margin-bottom: 0.85rem;
}

.barra-meta:last-child {
    margin-bottom: 0;
}

.barra-meta-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.barra-meta-rotulo {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-marca);
}

.barra-meta-valor {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
}

.barra-meta-trilho {
    background-color: #e9ecef;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.barra-meta-preenchida {
    height: 100%;
    border-radius: 4px;
}

.barra-meta-verde { background-color: #2ea86f; }
.barra-meta-verde-claro { background-color: #7fd0a6; }
.barra-meta-laranja { background-color: #f0932b; }
.barra-meta-cinza { background-color: #c8ccd2; }

.painel-meta-realizado {
    color: var(--cor-marca);
    font-size: 1.15rem;
}

.painel-meta-aviso {
    color: #b5730f;
    font-size: 0.85rem;
    margin-top: 0.9rem;
}

/* A faixa do que está pendente agora. Borda vermelha porque é o que cobra ação. */
.painel-atencao {
    border-left: 3px solid #dc3545;
}

.painel-atencao-item {
    display: block;
    border-left: 2px solid #dc3545;
    padding-left: 0.75rem;
    text-decoration: none;
}

.painel-atencao-valor {
    color: var(--cor-marca);
    display: block;
    font-size: 1.4rem;
    line-height: 1.1;
}

.painel-atencao-rotulo {
    color: #6c757d;
    font-size: 0.8rem;
}

.painel-atencao-item:hover .painel-atencao-valor {
    color: var(--cor-marca-hover);
}

/* Com o JavaScript ligado, escolher já busca e o botão vira ruído. */
.painel-filtro.envia-ao-mudar-ligado .painel-filtro-botao {
    display: none;
}

/* Quadradinho da legenda de cor, ao lado do que a cor significa. */
.legenda-cor {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin: 0 0.15rem 0 0.35rem;
}

.legenda-cor-verde { background-color: #2ea86f; }
.legenda-cor-laranja { background-color: #f0932b; }

.barra-meta-marca { background-color: var(--cor-marca); }

/* Nome e valor lado a lado, com o nome cedendo espaço quando é longo. */
.painel-lista-nome {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-lista-valor {
    color: var(--cor-marca);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Nos três painéis estreitos, rótulo longo cede em vez de empurrar o número. */
.barra-meta-rotulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Situação da visita: a primeira coluna pintada com a cor (o nome vem no title)
 * e a legenda com as mesmas cores embaixo da tabela. O ícone escuro é só
 * complemento — o fundo é o que o usuário bate o olho.
 */
.coluna-situacao {
    width: 1%;
    text-align: center;
    color: #212529;
    cursor: default;
}

.table > tbody > tr > td.coluna-situacao {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.legenda-situacao {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
}

.legenda-situacao span {
    border-radius: 3px;
    color: #212529;
    padding: 0.15rem 0.5rem;
}

.detalhe-situacao {
    border-radius: 4px;
    color: #212529;
    display: inline-block;
    font-size: 1rem;
    padding: 0.35rem 0.75rem;
}

/* Nome do cliente e valor da visita levam a outra tela: precisam parecer link. */
.link-cliente,
.link-visita {
    color: #0d6efd;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-cliente:hover,
.link-visita:hover {
    color: #0a58ca;
}

/* Histórico do cliente. */
.historico-dados dt {
    font-weight: 600;
    color: #6c757d;
}

.historico-observacao {
    white-space: pre-line;
}

/*
 * Assistente de IA (ia/_conversa e layouts/ia_painel). A conversa é uma coluna:
 * só a lista de mensagens rola, o campo fica sempre embaixo.
 */
.ia-conversa {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ia-tela-cheia .ia-conversa {
    height: calc(100vh - 260px);
    min-height: 360px;
}

/*
 * O painel lateral, por cima da tela, como no CI3: um terço da largura, e no
 * celular a tela inteira. Fechado, fica fora da tela à direita. Acima do menu
 * do tema e abaixo dos modais do Bootstrap (1050).
 */
.ia-painel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1040;
    width: 33vw;
    min-width: 380px;
    max-width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
}

.ia-painel.aberto {
    transform: translateX(0);
    visibility: visible;
}

@media (max-width: 767px) {
    .ia-painel {
        width: 100vw;
        min-width: 0;
    }
}

.ia-painel-cabecalho {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f5f5f5;
}

.ia-painel-corpo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
}

.ia-sem-animacao {
    transition: none !important;
}

/* O botão redondo do canto, com a cor e o lugar do CI3. */
.ia-botao-flutuante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1035;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background-color: #10a37f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ia-botao-flutuante[hidden] {
    display: none;
}


.ia-mensagem-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 1rem;
}

.ia-mensagem {
    margin-bottom: 0.9rem;
}

.ia-mensagem-usuario {
    text-align: right;
}

.ia-autor {
    color: #999;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
}

.ia-balao {
    display: inline-block;
    max-width: 92%;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    text-align: left;
    word-break: break-word;
}

.ia-mensagem-usuario .ia-balao {
    background-color: #435ebe;
    color: #fff;
    white-space: pre-wrap;
}

.ia-mensagem-ia .ia-balao {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    max-width: 100%;
    overflow-x: auto;
}

/* Link que a IA manda na resposta leva a outra tela: precisa parecer link. */
.ia-balao a[href] {
    color: #0d6efd;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ia-balao a[href]:hover {
    color: #0a58ca;
}

.ia-balao-erro {
    color: #c0392b;
}

.ia-digitando {
    color: #888;
    font-style: italic;
    margin-top: 0.5rem;
}

.ia-formulario {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ia-formulario textarea {
    resize: none;
    overflow-y: auto;
    max-height: 120px;
}

.ia-aviso {
    font-size: 0.75rem;
    margin-top: 0.4rem;
}

.ia-exemplo-titulo {
    color: #555;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.ia-exemplo-titulo:first-child {
    margin-top: 0;
}

.ia-exemplo {
    margin: 0 0 0.25rem 0.75rem;
}

.ia-exemplo-lateral {
    font-size: 0.85rem;
}

/* Na tela cheia larga os exemplos já estão na coluna do lado. */
@media (min-width: 992px) {
    .ia-tela-cheia .ia-boas-vindas {
        display: none;
    }
}

/* Tabela que a IA monta na resposta. */
.ia-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin: 0.25rem 0;
}

.ia-table thead tr {
    background-color: #f0f3f7;
}

.ia-table th {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 2px solid #d0d8e4;
    white-space: nowrap;
    color: #555;
}

.ia-table td {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #eee;
}

.ia-table tbody tr:last-child td {
    border-bottom: none;
}

/* Prévia de gravação do assistente: a tabela e o botão Salvar embaixo. */
.ia-previa .ia-previa-aviso {
    color: #b7791f;
    font-size: 0.7rem;
}

.ia-previa-acao {
    margin-top: 0.5rem;
}

/* Foto enviada no chat e o campo enquanto grava áudio. */
.ia-miniatura {
    display: block;
    width: 80px;
    height: 80px;
    margin-top: 0.3rem;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* Gravando: o campo fica só leitura, com o "● Gravando 0:07" em vermelho no meio. */
.ia-formulario textarea.ia-gravando {
    overflow: hidden;
    text-align: center;
    background-color: #fff5f5;
    cursor: default;
}

.ia-formulario textarea.ia-gravando::placeholder {
    color: #d9534f;
    font-weight: 600;
    opacity: 1;
}

/* "Enviar" com texto não pode quebrar em duas linhas no celular. */
.ia-formulario [data-ia-gravar] {
    white-space: nowrap;
}