/*
 * A linguagem visual do Flow, num lugar so.
 *
 * Existe porque estilo escrito solto dentro de cada blade faz cada tela driftar
 * para um lado e quebrar em largura diferente. Aqui as medidas, as cores e os
 * componentes sao os mesmos para todo mundo.
 *
 * Vale para as paginas proprias do Flow (Atendimento, Pulse, Remarketing,
 * Contas a receber, Agenda). O resto do painel continua com o visual do
 * Filament, e as duas coisas convivem porque as cores saem das mesmas variaveis.
 */

:root {
    --fl-raio: 14px;
    --fl-raio-s: 10px;
    --fl-gap: 16px;

    /* ---- Identidade BASOFT ----
       Tirada do proprio logo: azul de neon sobre azul quase preto, com a
       transicao de um para o outro. O sistema deixa de ser "um painel escuro
       generico" e passa a parecer da casa. */
    --fl-marca: #0EA5E9;          /* o neon do logo */
    --fl-marca-forte: #1466A6;    /* o azul cheio */
    --fl-marca-fundo: #03101F;    /* o quase preto do fundo */
    --fl-degrade: linear-gradient(135deg, #0EA5E9, #1466A6);

    --fl-azul: #0EA5E9;
    --fl-roxo: #a855f7;
    --fl-verde: #22c55e;
    --fl-rosa: #ec4899;
    --fl-ambar: #f59e0b;
    --fl-vermelho: #ef4444;
}

/* O painel roda em claro e escuro; as superficies seguem o tema. */
.fl,
.fl * { box-sizing: border-box; }

.fl {
    --fl-superficie: rgba(148, 163, 184, .06);
    --fl-superficie-2: rgba(148, 163, 184, .10);
    --fl-borda: rgba(148, 163, 184, .18);
    --fl-texto: inherit;
    --fl-fraco: color-mix(in srgb, currentColor 55%, transparent);
    --fl-fraco-2: color-mix(in srgb, currentColor 38%, transparent);
}

.dark .fl {
    --fl-superficie: #0f172a;
    --fl-superficie-2: #131f38;
    --fl-borda: rgba(148, 163, 184, .16);
}

/* ---------- estrutura ---------- */

.fl-pilha { display: flex; flex-direction: column; gap: var(--fl-gap); }
.fl-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl-espremer { min-width: 0; }
.fl-cresce { flex: 1; min-width: 0; }
.fl-direita { margin-left: auto; }

.fl-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--fl-gap);
}

/* A faixa de numeros do painel. Sete numeros em 210px cada so cabem numa
   linha em tela muito larga; a 150 eles cabem no monitor da casa, que e
   onde o painel e olhado de manha. */
.fl-grade--fina {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* ---------- tijolo (numero do painel) ---------- */

.fl-tijolo {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    padding: 12px 14px;
    background: #0f172a;
    border: 1px solid color-mix(in srgb, var(--fl-cor) 33%, transparent);
}

.fl-tijolo:hover {
    border-color: color-mix(in srgb, var(--fl-cor) 70%, transparent);
}

.fl-tijolo__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.25;
}

.fl-tijolo__valor {
    font-size: 26px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.05;
    margin-top: 4px;
}

.fl-tijolo__nota {
    font-size: 11.5px;
    color: var(--fl-cor);
    margin-top: 3px;
}

/* As duas listas do painel ficam lado a lado e rolam por dentro, para a
   altura da pagina nao depender de quantos projetos existem. */
.fl-lista-painel {
    max-height: 46vh;
    overflow-y: auto;
}

/* ---------- cartao ---------- */

.fl-cartao {
    background: var(--fl-superficie);
    border: 1px solid var(--fl-borda);
    border-radius: var(--fl-raio);
    padding: 20px 22px;
}

.fl-cartao--fino { padding: 14px 18px; }
.fl-cartao--limpo { padding: 0; overflow: hidden; }

.fl-cartao a& , a.fl-cartao { text-decoration: none; color: inherit; display: block; }

.fl-cartao--acento { border-left: 4px solid var(--fl-cor, var(--fl-azul)); }

/* ---------- numeros ---------- */

.fl-rotulo { font-size: 13px; color: var(--fl-fraco); line-height: 1.35; }
.fl-numero { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.fl-numero--g { font-size: 40px; }
.fl-nota { font-size: 12.5px; margin-top: 5px; color: var(--fl-cor, var(--fl-fraco)); }

/* ---------- lista ---------- */

.fl-lista { display: flex; flex-direction: column; }

.fl-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--fl-borda);
    text-decoration: none; color: inherit;
}
.fl-item:last-child { border-bottom: 0; }
.fl-item--acento { border-left: 4px solid var(--fl-cor, var(--fl-azul)); }
.fl-item:hover { background: var(--fl-superficie-2); }

.fl-titulo { font-size: 14.5px; font-weight: 600; }
.fl-sub { font-size: 12.5px; color: var(--fl-fraco); margin-top: 2px; }

.fl-cabecalho {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 15px 18px; border-bottom: 1px solid var(--fl-borda);
    font-size: 15px; font-weight: 700;
}

/* ---------- etiqueta ---------- */

.fl-etiqueta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 18%, transparent);
    color: var(--fl-cor, var(--fl-azul));
}
.fl-etiqueta--contorno {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 45%, transparent);
}

.fl-ponto { width: 8px; height: 8px; border-radius: 999px; background: var(--fl-cor, var(--fl-azul)); flex: none; }

/* ---------- botao ---------- */

/* ---------- botao ----------
 *
 * O pedido do Danilo: "pegada de Visual Basic misturada com a
 * modernidade da BASOFT".
 *
 * Do Visual Basic vem o VOLUME: o botao e um objeto que existe na tela,
 * com luz vindo de cima, sombra embaixo, e que AFUNDA quando apertado.
 * Aquele bisel dizia, sem escrever nada, "isto aqui se aperta"; a moda
 * de deixar tudo chapado apagou essa informacao e deixou botao com cara
 * de rotulo.
 *
 * Da BASOFT vem o resto: canto arredondado em vez dos dois pixels do VB,
 * cor da marca no lugar do cinza de sistema, e movimento rapido o
 * bastante para parecer resposta e nao animacao (80ms; acima de 120 a
 * pessoa sente atraso).
 */
.fl-botao {
    font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 7px 14px; border-radius: 9px;
    text-decoration: none; position: relative;
    color: var(--fl-cor, var(--fl-azul));
    border: 1px solid color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 42%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 17%, transparent),
            color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 7%, transparent));
    /* A luz de cima e a sombra de baixo sao o bisel, refeito com sombra
       em vez das duas bordas claras e escuras do original. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 -1px 0 rgba(0, 0, 0, .22),
        0 1px 2px rgba(0, 0, 0, .32);
    transition: background .15s, box-shadow .08s, transform .08s;
}
.fl-botao:hover {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 26%, transparent),
            color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 13%, transparent));
    border-color: color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 62%, transparent);
}
/* Apertado, ele afunda de verdade: desce um pixel e a luz vira sombra
   por dentro. E a parte do Visual Basic que ninguem precisa aprender. */
.fl-botao:active:not([disabled]) {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(0, 0, 0, .18);
}
.fl-botao:focus-visible {
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 0 0 3px color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 32%, transparent);
}
.fl-botao[disabled] {
    opacity: .45; cursor: default; transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.fl-filtro {
    font-size: 13px; cursor: pointer; padding: 7px 14px; border-radius: 999px;
    background: transparent; border: 1px solid var(--fl-borda); color: inherit;
}
.fl-filtro[aria-pressed="true"] {
    border-color: var(--fl-roxo);
    background: color-mix(in srgb, var(--fl-roxo) 15%, transparent);
}

/* ---------- vazio ---------- */

.fl-vazio { padding: 30px 20px; text-align: center; font-size: 14px; color: var(--fl-fraco); }

/* ---------- conversa ---------- */

.fl-conversa {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 250px;
    height: min(74vh, 46rem);
    border: 1px solid var(--fl-borda);
    border-radius: var(--fl-raio);
    overflow: hidden;
    background: var(--fl-superficie);
}
.fl-conversa > * { min-width: 0; }
.fl-conversa__fila { overflow-y: auto; border-right: 1px solid var(--fl-borda); }
.fl-conversa__meio { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fl-conversa__lead { overflow-y: auto; border-left: 1px solid var(--fl-borda); padding: 18px; }

/*
 * min-height:0 e obrigatorio: sem ele o item flex nao encolhe abaixo do
 * conteudo, a lista de mensagens cresce ate o tamanho de TODAS elas e empurra o
 * campo de resposta para fora da tela. Foi o que impediu de responder.
 */
.fl-fio { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }

.fl-bolha {
    /* Estreita de proposito. Com a tela em largura cheia, uma bolha de 78%
       vira uma faixa de ponta a ponta e a conversa deixa de parecer conversa:
       some a distincao entre quem falou o que. */
    max-width: min(70%, 34rem);
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;   /* mensagem com link ou palavra gigante nao estoura */
    border: 1px solid transparent;
    /* O balao do cliente precisa de contraste de verdade contra o fundo: com o
       tom anterior a mensagem quase sumia e parecia linha de tabela. */
    background: #1e293b;
    align-self: flex-start;
}
.fl-bolha--minha {
    align-self: flex-end;
    background: #14532d;
    border-color: color-mix(in srgb, var(--fl-verde) 35%, transparent);
}
.fl-bolha--midia { font-style: italic; opacity: .75; }
/*
 * O pre-wrap fica SO no texto da mensagem, e o elemento tem de ser escrito numa
 * linha unica no blade. Se ficar na bolha inteira, a indentacao do proprio
 * template vira conteudo: "Ola" ocupava 172px de altura por causa disso.
 */
.fl-bolha__texto { white-space: pre-wrap; }

.fl-bolha__pe { font-size: 10.5px; opacity: .55; text-align: right; margin-top: 3px; }

/* Coluna, e nao linha: a citacao e o aviso de anexo ficam em cima, e a linha
   de escrever fica embaixo. Como linha unica, cada elemento novo espremia o
   campo de texto, ate ele virar uma tira vertical de uma letra. */
.fl-escrever {
    flex: none;
    display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--fl-borda);
}
.fl-escrever__linha { display: flex; gap: 8px; align-items: flex-end; }
.fl-escrever__campo {
    flex: 1; min-width: 0; padding: 9px 12px; resize: vertical;
    border-radius: var(--fl-raio-s);
    border: 1px solid var(--fl-borda);
    background: transparent; color: inherit;
    font-size: 13.5px; line-height: 1.5;
}
/* O input de arquivo fica escondido: quem clica e o clipe. */
.fl-clipe input[type="file"] { display: none; }
.fl-escrever__extras { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1180px) {
    .fl-conversa { grid-template-columns: 220px minmax(0, 1fr); }
    .fl-conversa__lead { display: none; }
}
/* A SETA DE VOLTAR e do celular, e so aparece la. */
.fl-voltar { display: none; }

/* NO TELEFONE, A REGRA E A DO WHATSAPP.
 *
 * Pedido do Danilo em 08/09/2026: "tem como deixar responsiva, ou fazer algo
 * tipo WhatsApp no celular, quando clica abre a conversa".
 *
 * A versao antiga resolvia a falta de espaco escondendo a FILA, e o resultado
 * era pior do que apertado: quem abria a tela no telefone via uma conversa e
 * nao tinha como trocar de pessoa. Agora e uma coisa de cada vez, com caminho
 * de ida e de volta: sem conversa escolhida a lista ocupa a tela inteira;
 * escolhida, a conversa ocupa, e a seta devolve para a lista.
 */
@media (max-width: 820px) {
    .fl-conversa {
        grid-template-columns: minmax(0, 1fr);
        /* A altura vira a da tela: no telefone, meia tela de conversa com a
           pagina rolando por fora e o que mais irrita quem responde. */
        height: calc(100dvh - 12rem);
        min-height: 24rem;
    }

    /* Sem conversa aberta: so a fila, sem a borda que separava colunas. */
    .fl-conversa:not(.fl-conversa--aberta) .fl-conversa__fila { display: block; border-right: 0; }
    .fl-conversa:not(.fl-conversa--aberta) .fl-conversa__meio { display: none; }

    /* Com conversa aberta: so ela, e a seta de volta. */
    .fl-conversa--aberta .fl-conversa__fila { display: none; }

    /* O CABECALHO DO CELULAR, na ordem do WhatsApp.
     *
     * "A seta do voltar ta comendo em cima do arquivar" (08/09/2026, duas
     * vezes). A primeira tentativa so quebrou a linha e nao resolveu, porque a
     * seta continuava DENTRO do bloco do titulo: quando o nome do cliente era
     * truncado, ela andava junto e ia parar do lado do botao.
     *
     * Agora e a mesma linha do WhatsApp: seta na esquerda, nome no meio
     * ocupando o que sobra, arquivar encostado na direita. A tarja da janela de
     * 24h desce inteira para a segunda linha, porque e informacao de leitura e
     * nao botao, e disputar espaco com o nome do cliente so faz os dois
     * ficarem ilegiveis.
     */
    .fl-conversa--aberta .fl-cabecalho {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 10px; row-gap: 8px; padding: 10px 12px;
    }
    .fl-conversa--aberta .fl-cabecalho > .fl-linha { flex: 1 1 auto; min-width: 0; }
    .fl-conversa--aberta .fl-arquivar { flex: none; margin-left: auto; padding: 5px 12px; }

    /* A tarja da janela ocupa a linha de baixo inteira. */
    .fl-conversa--aberta .fl-cabecalho > .fl-etiqueta { flex: 1 0 100%; order: 9; text-align: center; }

    .fl-conversa--aberta .fl-voltar {
        display: inline-flex; align-items: center; justify-content: center;
        flex: none; width: 34px; height: 34px;
        font-size: 18px; line-height: 1; border-radius: 999px;
        border: 1px solid var(--fl-borda); background: transparent;
        color: var(--fl-texto); cursor: pointer;
    }
    .fl-conversa--aberta .fl-voltar:active { background: rgba(148, 163, 184, .16); }

    /* AS FERRAMENTAS DE ESCREVER ROLAM DE LADO, e nao empilham.
     * Sao onze botoes de resposta pronta: empilhados, comem meia tela de
     * conversa; numa fita que rola, ficam a um deslize do polegar. */
    .fl-conversa--aberta .fl-escrever__extras {
        flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
        scrollbar-width: none;
    }
    .fl-conversa--aberta .fl-escrever__extras::-webkit-scrollbar { display: none; }
    .fl-conversa--aberta .fl-escrever__extras > * { flex: none; }

    /* O painel do lead continua fora no telefone: e consulta, e nao conversa. */
    .fl-conversa__lead { display: none; }
}


/* ---------- barra lateral ---------- */

.fl-eu {
    display: flex; align-items: center; gap: 11px;
    margin: 2px 12px 16px; padding: 12px 13px;
    border-radius: 12px;
    background: rgba(148, 163, 184, .07);
    border: 1px solid rgba(148, 163, 184, .13);
}
.fl-eu__avatar {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.fl-eu__quem { min-width: 0; }
.fl-eu__nome {
    font-size: 13.5px; font-weight: 600; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-eu__papel {
    font-size: 11.5px; text-transform: capitalize;
    color: color-mix(in srgb, currentColor 55%, transparent);
}

.fl-relogio {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    margin: 10px 12px 14px; padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .12);
    font-variant-numeric: tabular-nums;
}
.fl-relogio__hora {
    font-size: 17px; font-weight: 600; letter-spacing: .04em;
    color: color-mix(in srgb, currentColor 78%, transparent);
}
.fl-relogio__dia {
    font-size: 11.5px;
    color: color-mix(in srgb, currentColor 45%, transparent);
}


/* ---- Anexo de conversa ----
   Foto, audio, video e documento que o cliente manda. Teto de altura para uma
   foto em pe nao empurrar a conversa inteira para fora da tela. */
.fl-anexo { display: block; }
.fl-anexo img {
  display: block; max-width: 100%; max-height: 320px;
  border-radius: 10px; object-fit: cover;
}
.fl-anexo__audio { width: 260px; max-width: 100%; height: 40px; display: block; }
.fl-anexo__video { max-width: 100%; max-height: 320px; border-radius: 10px; display: block; }
.fl-anexo__arquivo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: inherit; padding: 4px 2px;
}
.fl-anexo__icone { font-size: 26px; line-height: 1; }
.fl-anexo__arquivo strong { display: block; font-size: 13px; }
.fl-anexo__arquivo small { opacity: .7; font-size: 11px; }
.fl-anexo__falha { font-size: 12px; opacity: .75; font-style: italic; }
.fl-bolha--midia .fl-bolha__texto { margin-top: 6px; }


/* ---- Mensagem apagada ----
   Fica visivel de proposito, em vermelho: sumir com a linha apagaria tambem o
   rastro de que algo foi dito e retirado, e conversa comercial e prova. */
.fl-bolha--apagada {
  border: 1px dashed var(--fl-vermelho) !important;
  background: color-mix(in srgb, var(--fl-vermelho) 8%, transparent) !important;
}
.fl-apagada { color: var(--fl-vermelho); font-size: 13px; font-style: italic; }
.fl-apagada__marca { font-style: normal; margin-right: 4px; }
.fl-apagada small {
  display: block; font-style: normal; font-size: 11px;
  opacity: .8; margin-top: 2px;
}
.fl-apagar {
  background: none; border: 0; cursor: pointer; padding: 2px 0 0;
  font-size: 11px; opacity: 0; transition: opacity .15s;
  color: var(--fl-vermelho); text-decoration: underline;
}
.fl-bolha:hover .fl-apagar, .fl-apagar:focus-visible { opacity: .85; }


/* ---- Respostas prontas ----
   Antes eram etiquetas soltas quebrando linha de qualquer jeito, com um botao
   de outra natureza no meio. Agora e uma gaveta com cartoes de largura igual,
   e cada cartao diz se ja da para enviar ou se falta dado no sistema. */
.fl-prontas { border-top: 1px solid var(--fl-borda); }
.fl-prontas__topo {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 10px 18px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; opacity: .75;
  list-style: none; user-select: none;
}
.fl-prontas__topo::-webkit-details-marker { display: none; }
.fl-prontas__topo small {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 11.5px; opacity: .8;
}
.fl-prontas__seta { transition: transform .15s; display: inline-block; }
.fl-prontas[open] .fl-prontas__seta { transform: rotate(90deg); }

.fl-prontas__grade {
  display: grid; gap: 8px; padding: 0 18px 12px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.fl-pronta {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 9px 12px; border-radius: var(--fl-raio-s);
  border: 1px solid var(--fl-borda); background: transparent;
  color: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.fl-pronta:hover { border-color: var(--fl-verde); background: var(--fl-fundo-suave); }
.fl-pronta__titulo { font-size: 13px; font-weight: 600; line-height: 1.3; }
.fl-pronta__ok { font-size: 11px; color: var(--fl-verde); }
.fl-pronta__aviso { font-size: 11px; color: var(--fl-ambar); }
.fl-pronta--incompleta { border-style: dashed; }

.fl-depois {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 11px; opacity: .6; color: inherit; text-decoration: underline;
}
.fl-depois:hover { opacity: 1; }


/* ---- Primeiro atendimento sugerido ----
   Aparece como sugestao para ler, e nao no campo direto: a frase sai em nome
   da casa e quem assina e a pessoa, nao o sistema. */
.fl-rascunho {
  margin: 12px 18px 0; padding: 12px 14px;
  border: 1px solid var(--fl-verde); border-radius: var(--fl-raio-s);
  background: color-mix(in srgb, var(--fl-verde) 7%, transparent);
}
.fl-rascunho__topo {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; margin-bottom: 8px;
}
.fl-rascunho__topo strong { color: var(--fl-verde); }
.fl-rascunho__topo span { opacity: .7; font-size: 11px; }
.fl-rascunho__texto {
  white-space: pre-wrap; font-size: 13px; line-height: 1.55; opacity: .92;
}
.fl-rascunho__usar { margin-top: 10px; font-size: 12px; padding: 5px 12px; }


/* ---- Chave do atendimento automatico ----
   Fica a vista de proposito: robo respondendo cliente sem ninguem saber que
   esta ligado e o tipo de coisa que so se descobre depois do problema. */
.fl-chave {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid var(--fl-borda); border-radius: var(--fl-raio-s);
  background: var(--fl-fundo-suave);
}
.fl-chave__botao {
  flex: none; width: 46px; height: 26px; border-radius: 999px;
  border: 1px solid var(--fl-borda); background: transparent;
  cursor: pointer; padding: 2px; transition: background .18s, border-color .18s;
}
.fl-chave__botao--ligado { background: var(--fl-verde); border-color: var(--fl-verde); }
.fl-chave__bolinha {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: currentColor; opacity: .55; transition: transform .18s, opacity .18s;
}
.fl-chave__botao--ligado .fl-chave__bolinha {
  transform: translateX(20px); background: #fff; opacity: 1;
}
.fl-chave__texto strong { display: block; font-size: 13px; }
.fl-chave__texto small { font-size: 11.5px; opacity: .75; }

/* Conversa que o robo entregou para gente. */
.fl-assumida {
  font-size: 11.5px; color: var(--fl-ambar);
  border: 1px dashed var(--fl-ambar); border-radius: 8px;
  padding: 6px 10px; margin: 10px 18px 0;
}


/* ---- Bolinha da fila ----
   Antes ela mostrava o canal, e como quase tudo e WhatsApp ficava tudo verde,
   ou seja, nao informava nada. Agora ela responde a unica pergunta que importa
   ao abrir a tela: quem esta esperando a gente? */
.fl-ponto--espera {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-cor) 25%, transparent);
  animation: fl-pulsa 2.4s ease-in-out infinite;
}
@keyframes fl-pulsa {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-cor) 25%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--fl-cor) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-ponto--espera { animation: none; }
}

/* Legenda das cores, numa linha so. A coluna da fila tem 260px, entao os
   rotulos sao curtos e o texto inteiro fica no title, para quem passar o
   mouse. Se ainda assim nao couber, rola de lado em vez de quebrar. */
.fl-legenda {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; font-size: 10px; opacity: .8;
  border-bottom: 1px solid var(--fl-borda);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.fl-legenda::-webkit-scrollbar { display: none; }
.fl-legenda span { display: inline-flex; align-items: center; gap: 4px; flex: none; cursor: help; }
.fl-legenda .fl-ponto { width: 7px; height: 7px; }

/* Os filtros da fila QUEBRAM em quantas linhas precisarem.
   Antes eram uma linha so com rolagem lateral escondida (sem barra, para
   nao roubar espaco), e o efeito foi o oposto do pretendido: os filtros
   do fim simplesmente nao existiam para quem olhava, porque nada indicava
   que havia mais coisa a direita. Eram tres quando a regra nasceu e hoje
   sao sete. */
.fl-conversa__fila .fl-linha:has(.fl-filtro--fila) {
  flex-wrap: wrap; gap: 5px;
}
/* CORPO 11 ERA TAMANHO DE SETE BOTOES espremidos numa coluna estreita.
   Sobraram dois, "+ lead" e o arquivo, e cada um pode ter tamanho de coisa
   que se le. Botao que nao da para ler nao economiza espaco: gasta o
   espaco e nao entrega a funcao. */
.fl-filtro--fila {
  font-size: 13px; padding: 7px 14px; white-space: nowrap; flex: none;
}

/* O "+ lead" mora entre os filtros, no comeco, porque anotar um lead que
   chegou por telefone e a acao mais frequente de quem esta olhando a
   fila. Cor cheia para nao se confundir com filtro: e botao, nao vista. */
.fl-filtro--acao {
  background: var(--fl-marca); border-color: var(--fl-marca); color: #fff;
  font-weight: 600;
}
.fl-filtro--acao:hover { filter: brightness(1.08); }


/* ---- Sugestao para continuar a conversa ----
   O motivo aparece ANTES do texto de proposito: sem ele isso vira caixa
   preta, e quem atende ou obedece sem pensar ou passa a ignorar sempre. */
.fl-proxima {
  border: 1px solid var(--fl-cor); border-radius: var(--fl-raio-s);
  background: color-mix(in srgb, var(--fl-cor) 7%, transparent);
  padding: 12px 14px; margin-bottom: 16px;
}
.fl-proxima--alta  { --fl-cor: var(--fl-vermelho); }
.fl-proxima--media { --fl-cor: var(--fl-ambar); }
.fl-proxima--baixa { --fl-cor: var(--fl-azul); }
.fl-proxima__topo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fl-cor); margin-bottom: 6px;
}
.fl-proxima__motivo { font-size: 12px; opacity: .85; margin-bottom: 8px; }
.fl-proxima__texto {
  font-size: 13px; line-height: 1.5; white-space: pre-wrap;
  padding: 8px 10px; border-radius: 8px; background: var(--fl-fundo-suave);
}
.fl-proxima__usar { margin-top: 10px; font-size: 12px; padding: 5px 12px; --fl-cor: var(--fl-verde); }


/* Arquivar fica discreto: e acao de arrumacao, nao de atendimento. */
.fl-arquivar {
  background: none; border: 1px solid var(--fl-borda); cursor: pointer;
  padding: 3px 10px; border-radius: 999px; font-size: 11px;
  color: inherit; opacity: .65; transition: opacity .15s, border-color .15s;
}
.fl-arquivar:hover { opacity: 1; border-color: var(--fl-azul); }


/* ---- Fila de aprovacao ---- */
.fl-aprovar__pergunta {
  font-size: 13px; line-height: 1.5; margin: 8px 0;
  padding: 8px 10px; border-radius: 8px;
  background: var(--fl-fundo-suave); white-space: pre-wrap;
}
.fl-aprovar__campo {
  width: 100%; padding: 10px 12px; border-radius: var(--fl-raio-s);
  border: 1px solid var(--fl-borda); background: transparent; color: inherit;
  font-size: 13.5px; line-height: 1.5; resize: vertical;
}


/* ---- Avatar da fila ----
   Iniciais, e nao a foto do WhatsApp: a Cloud API nao entrega foto de perfil
   de cliente. Resolve o essencial, que e reconhecer a pessoa de relance. */
.fl-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fl-cor); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}


/* ---- Transcricao do audio ----
   Fica junto da bolha e nao numa janela a parte: o que se quer e LER o que a
   pessoa disse sem parar para ouvir, e olhar para o lado quebra isso. */
.fl-transcricao {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--fl-fundo-suave); font-size: 13px; line-height: 1.5;
  border-left: 2px solid var(--fl-azul);
}
.fl-transcricao__marca {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; opacity: .6; margin-bottom: 3px;
}
.fl-transcrever {
  margin-top: 6px; background: none; border: 0; cursor: pointer;
  padding: 0; font-size: 11.5px; color: var(--fl-azul); text-decoration: underline;
}
.fl-transcrever[disabled] { opacity: .6; cursor: wait; text-decoration: none; }


/* ---- Encaminhar ---- */



/*
 * AS JANELAS DE ESCOLHER (materiais, projetar, encaminhar) TEM FUNDO SOLIDO.
 *
 * "Clico em materiais e ele fica todo transparente, nao da para ler, se perde
 * com as letrinhas de tras" (Wil, 16/09/2026). A caixa usava --fl-superficie,
 * que fora do tema escuro e cinza a 6% de opacidade: a conversa inteira
 * aparecia por baixo dos nomes dos arquivos. Janela que fica por cima de
 * tudo precisa de chao proprio, independente do tema e do que esta atras.
 */
.fl-escolher {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(2, 6, 14, .62); padding: 20px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.fl-escolher__caixa {
  width: min(420px, 100%); max-height: 70vh; display: flex; flex-direction: column;
  background: #0f172a; color: #e2e8f0; border: 1px solid rgba(148, 163, 184, .22);
  border-radius: var(--fl-raio); overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.fl-escolher__topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--fl-borda);
}
.fl-escolher__fechar {
  background: none; border: 0; cursor: pointer; font-size: 11.5px;
  color: inherit; opacity: .6; text-decoration: underline;
}
.fl-escolher__busca {
  margin: 12px 14px 8px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--fl-borda); background: transparent; color: inherit; font-size: 13px;
}
.fl-escolher__lista { overflow-y: auto; padding: 0 8px 10px; min-height: 0; }
.fl-escolher__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 9px; background: none;
  color: inherit; cursor: pointer;
}
.fl-escolher__item:hover { background: rgba(148, 163, 184, .12); }
.fl-escolher__item strong { display: block; font-size: 13px; }
.fl-escolher__item small { font-size: 11px; opacity: .65; }


/* ---- Acoes da mensagem ----
   Botoes de verdade, com borda e separados por uma linha. Como texto
   sublinhado logo abaixo do corpo, "encaminhar" era lido como continuacao da
   frase do cliente. */
.fl-acoes {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 6px;
  border-top: 1px solid var(--fl-borda);
  opacity: 0; transition: opacity .15s;
}
.fl-bolha:hover .fl-acoes,
.fl-acoes:focus-within { opacity: 1; }
@media (hover: none) { .fl-acoes { opacity: 1; } }

.fl-acao {
  font-size: 10.5px; line-height: 1; cursor: pointer;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--fl-borda); background: transparent;
  color: inherit; opacity: .75; transition: opacity .15s, border-color .15s;
}
.fl-acao:hover { opacity: 1; border-color: var(--fl-azul); }
/* Apagar tem fundo vermelho desde o repouso: e acao destrutiva, e precisa
   ser reconhecida antes do clique, nao depois. */
.fl-acao--perigo {
  background: color-mix(in srgb, var(--fl-vermelho) 18%, transparent);
  border-color: color-mix(in srgb, var(--fl-vermelho) 45%, transparent);
  color: var(--fl-vermelho);
}
.fl-acao--perigo:hover {
  background: color-mix(in srgb, var(--fl-vermelho) 30%, transparent);
  border-color: var(--fl-vermelho);
  opacity: 1;
}


/* ---- Painel de projecao ---- */
.fl-tela__palco {
  position: relative; aspect-ratio: 16/9; margin: 10px 0;
  background: #000; border-radius: var(--fl-raio-s); overflow: hidden;
  display: grid; place-items: center;
}
.fl-tela__palco img, .fl-tela__palco video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.fl-tela__vazio { font-size: 11px; letter-spacing: .1em; opacity: .35; }
.fl-tela__campo { font-size: 11.5px; width: 100%; }
.fl-tela__link {
  margin-top: 10px; font-size: 10.5px; opacity: .7; word-break: break-all;
}
.fl-tela__link code { font-size: 10px; }

.fl-acao--tv { border-color: color-mix(in srgb, var(--fl-azul) 45%, transparent); color: var(--fl-azul); }
.fl-acao--tv:hover { background: color-mix(in srgb, var(--fl-azul) 18%, transparent); border-color: var(--fl-azul); }

.fl-proxima__campo {
  width: 100%; padding: 8px 10px; border-radius: 8px; resize: vertical;
  border: 1px solid var(--fl-borda); background: var(--fl-fundo-suave);
  color: inherit; font-size: 13px; line-height: 1.5;
}


/* Selo de cliente: mesma silhueta do selo de verificado, em verde. */
.fl-selo {
  width: 13px; height: 13px; display: inline-block;
  vertical-align: -2px; margin-left: 3px; color: var(--fl-verde); flex: none;
}


/* Aviso de janela fechando. E botao, e nao so texto: clicar ja filtra a fila
   para essas conversas, em vez de avisar e deixar a pessoa procurar. */
.fl-alerta {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin-bottom: 12px; padding: 11px 16px; font-size: 13px;
  border-radius: var(--fl-raio-s);
  border: 1px solid var(--fl-ambar);
  background: color-mix(in srgb, var(--fl-ambar) 12%, transparent);
  color: inherit;
}
.fl-alerta strong { color: var(--fl-ambar); font-size: 15px; }
.fl-alerta span { display: block; font-size: 11.5px; opacity: .75; margin-top: 2px; }
.fl-alerta:hover { background: color-mix(in srgb, var(--fl-ambar) 20%, transparent); }


/* Reacao e um gesto, nao uma mensagem: ocupa menos e nao disputa atencao
   com o que foi realmente escrito. */
.fl-bolha--reacao {
  background: transparent !important;
  border: 0 !important;
  padding: 0 2px !important;
  font-size: 12px; opacity: .7;
}
.fl-bolha--reacao .fl-bolha__pe { font-size: 10px; }
.fl-bolha--reacao .fl-acoes { display: none; }


/* ---- Placar do topo ----
   Lead novo por dia e o unico numero que diz se o topo do funil esta vivo.
   A media das quatro semanas anteriores fica junto porque numero sozinho nao
   diz se e bom ou ruim. */
.fl-placar {
  display: flex; flex-wrap: wrap; gap: 22px;
  padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid var(--fl-borda); border-radius: var(--fl-raio-s);
  background: var(--fl-superficie);
}
.fl-placar__item { display: flex; align-items: baseline; gap: 7px; }
.fl-placar__item strong { font-size: 20px; font-weight: 700; line-height: 1; }
.fl-placar__item span { font-size: 11.5px; opacity: .7; }
.fl-placar__item--fim { margin-left: auto; }


/* ---- Placar, no visual da marca ----
   Cada numero num cartao proprio, com a faixa de neon a esquerda, como os
   cartoes do resto do sistema. Antes era uma tira unica com numeros soltos,
   que nao conversava com nada. */
.fl-placar {
  display: grid; gap: 10px; padding: 0; margin-bottom: 14px;
  border: 0; background: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fl-placar__item {
  display: block; padding: 12px 14px;
  border: 1px solid var(--fl-borda); border-left: 3px solid var(--fl-marca);
  border-radius: var(--fl-raio-s);
  background: var(--fl-superficie);
}
.fl-placar__item--fim { margin-left: 0; border-left-color: var(--fl-ambar); }
.fl-placar__item strong {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.1;
  background: var(--fl-degrade); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.fl-placar__item--fim strong { background: none; color: var(--fl-ambar); }
.fl-placar__item span {
  display: block; font-size: 11px; opacity: .72; margin-top: 3px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* A marca aparece nos acentos que ja existiam, sem inventar componente novo. */
.fl-botao[style*="--fl-verde"] { }
.fl-filtro[aria-pressed="true"] { border-color: var(--fl-marca); color: var(--fl-marca); }
.fl-avatar { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }




/* ---- Marca do painel ----
   Uma linha so: simbolo, nome em peso forte e "Flow" mais leve. Antes o nome
   aparecia duas vezes, no cabecalho do painel e num bloco proprio embaixo. */
.fl-marca { display: inline-flex; align-items: center; gap: 9px; }
.fl-marca img {
  width: 30px; height: 30px; border-radius: 8px; object-fit: contain;
  background: var(--fl-degrade); padding: 4px;
}
.fl-marca strong {
  font-size: 14px; font-weight: 800; letter-spacing: .1em; margin-right: 5px;
}
.fl-marca em {
  font-style: normal; font-size: 14px; font-weight: 400; opacity: .6;
}


/* Clipe de anexo, ao lado do campo de escrever. */
.fl-clipe {
  flex: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 9px 10px; border-radius: var(--fl-raio-s);
  border: 1px solid var(--fl-borda); opacity: .7; transition: opacity .15s, border-color .15s;
}
.fl-clipe:hover { opacity: 1; border-color: var(--fl-marca); }



/* ---- Responder citando ---- */
.fl-citada {
  font-size: 11.5px; opacity: .75; padding: 4px 8px; margin-bottom: 5px;
  border-left: 2px solid var(--fl-marca); border-radius: 4px;
  background: rgba(255,255,255,.04);
}
.fl-citando {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; padding: 5px 10px; margin-bottom: 6px;
  border-left: 2px solid var(--fl-marca); border-radius: 6px;
  background: var(--fl-superficie);
}
.fl-citando button { background: none; border: 0; color: inherit; cursor: pointer; opacity: .6; font-size: 14px; }
.fl-citando button:hover { opacity: 1; }

/* Reacao aparece colada na bolha, como no aplicativo. */
.fl-reagiu {
  font-size: 14px; line-height: 1; margin-top: -2px;
  align-self: flex-start;
}
.fl-acao--emoji { padding: 3px 7px; font-size: 12px; }


/* ---- Topo compacto do Atendimento ----
   Placar, aviso e chave numa linha so. Empilhados, empurravam a conversa para
   baixo da dobra e quem abria a tela tinha que rolar toda vez para ver a
   primeira mensagem. */
.fl-topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 9px 14px; margin-bottom: 10px;
  border: 1px solid var(--fl-borda); border-radius: var(--fl-raio-s);
  background: var(--fl-superficie);
}
.fl-topo__numeros { display: flex; flex-wrap: wrap; gap: 16px; }
.fl-topo__n { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; opacity: .75; }
.fl-topo__n strong {
  font-size: 19px; font-weight: 700; opacity: 1;
  background: var(--fl-degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fl-topo__n small { font-size: 10px; opacity: .6; }
.fl-topo__n--espera strong { background: none; color: var(--fl-ambar); }

.fl-topo__alerta {
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--fl-ambar); color: var(--fl-ambar);
  background: color-mix(in srgb, var(--fl-ambar) 12%, transparent);
}
.fl-topo__alerta:hover { background: color-mix(in srgb, var(--fl-ambar) 22%, transparent); }

/* A fila das janelas JA fechadas.
 *
 * Vizinha da de cima e deliberadamente mais quieta. A ambar cobra o que
 * ainda da para salvar de graca; esta e divida acumulada, e nao incendio de
 * agora. Duas cores berrando lado a lado fariam a que ainda tem conserto
 * perder a urgencia, que e justamente a que o dinheiro depende. */
.fl-topo__fechadas {
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--fl-borda); color: var(--fl-fraco); background: transparent;
}
.fl-topo__fechadas:hover { color: var(--fl-texto); border-color: var(--fl-fraco); }

.fl-topo__chave { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 11.5px; opacity: .85; cursor: pointer; }
.fl-topo__chave .fl-chave__botao { width: 38px; height: 21px; }
.fl-topo__chave .fl-chave__bolinha { width: 15px; height: 15px; }
.fl-topo__chave .fl-chave__botao--ligado .fl-chave__bolinha { transform: translateX(17px); }

/* A conversa ocupa o resto da tela e rola por dentro, nao pela pagina. */
.fl-conversa { height: calc(100vh - 15rem); min-height: 460px; }
@media (max-width: 1024px) { .fl-conversa { height: auto; } }


/* A margem da pagina fica menor no Atendimento: cada pixel de borda e um
   pixel a menos de conversa. */
.fi-page:has(.fl-conversa) .fi-main {
  max-width: 100%; padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 1280px) {
  .fl-conversa { grid-template-columns: 290px minmax(0, 1fr) 300px; gap: 12px; }
}


/* No tema claro os tons acima ficariam ilegiveis, entao cada lado tem o seu. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .fl-bolha { background: #eef2f7; color: #0f172a; }
  :root:not([data-theme="dark"]) .fl-bolha--minha { background: #d7f2e0; }
}
:root[data-theme="light"] .fl-bolha { background: #eef2f7; color: #0f172a; }
:root[data-theme="light"] .fl-bolha--minha { background: #d7f2e0; }


/* ---- Modo compacto do Atendimento ----
   A tela junta fila, conversa, sugestao e etiquetas ao mesmo tempo. Com o
   tamanho padrao do painel, tudo isso vira parede de texto.
   O TEXTO DA MENSAGEM encolhe menos que o resto de proposito: e o que
   realmente se le, e ja tinha ficado ilegivel uma vez. O que encolhe e a
   moldura em volta: titulo, rotulo, etiqueta e respiro. */
.fl-conversa {
  --fl-raio-s: 9px;
}
.fl-conversa .fl-titulo { font-size: 13px; }
.fl-conversa .fl-sub { font-size: 11px; margin-top: 1px; }
.fl-conversa .fl-cabecalho { padding: 10px 14px; gap: 10px; }
.fl-conversa .fl-cabecalho .fl-titulo { font-size: 15px; }
.fl-conversa__fila > div:first-child { padding: 9px 10px 8px !important; }
.fl-conversa__fila .fl-item { padding: 9px 10px; gap: 8px; }
.fl-conversa .fl-avatar { width: 28px; height: 28px; font-size: 10.5px; }
.fl-conversa .fl-marca { font-size: 9px; padding: 2px 6px; }
.fl-conversa .fl-etiqueta { font-size: 10px; padding: 2px 7px; }

.fl-fio { padding: 12px 14px; gap: 6px; }
.fl-bolha { font-size: 13.5px; line-height: 1.5; padding: 8px 12px; }
.fl-bolha__pe { font-size: 9.5px; margin-top: 2px; }
.fl-acoes { margin-top: 6px; padding-top: 5px; gap: 5px; }
.fl-acao { font-size: 10px; padding: 3px 8px; }

.fl-conversa__lead { font-size: 12px; }
.fl-proxima { padding: 10px 12px; margin-bottom: 12px; }
.fl-proxima__campo { font-size: 12.5px; }
.fl-proxima__motivo { font-size: 11px; }
.fl-prontas__topo { padding: 8px 14px; font-size: 11px; }
.fl-pronta__titulo { font-size: 12px; }
.fl-escrever { padding: 10px 14px; gap: 6px; }
.fl-escrever__campo { font-size: 13px; padding: 8px 11px; }
.fl-depois { font-size: 10.5px; }
.fl-topo { padding: 7px 12px; gap: 8px 14px; }
.fl-topo__n strong { font-size: 17px; }


/* Conversa curta fica encostada embaixo, e nao boiando no topo com um vazio
   embaixo, que era o que fazia a ultima mensagem parecer perdida no meio. */
.fl-fio { justify-content: flex-end; overflow-anchor: auto; }
.fl-fio > * { flex: none; }

/* ============================================================
   Reforma visual do Atendimento (16/08/2026)
   ============================================================
   O que muda e por que:

   1. As tres colunas viram PAINEIS SOLTOS, com respiro entre eles,
      em vez de uma caixa unica dividida por linhas. E a cara dos
      CRMs atuais, e o olho separa fila, conversa e copiloto sem
      precisar de borda grossa.
   2. O fio da conversa ganha um fundo proprio, mais escuro que os
      paineis: as bolhas saltam e a leitura guia sozinha.
   3. Esta camada vive no FIM do arquivo de proposito: sobrescreve a
      base sem reescreve-la, e as telas antigas continuam de pe.       */

/* ---- os tres paineis ---- */
.fl-conversa {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    gap: 12px;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    height: calc(100vh - 12rem);
    min-height: 500px;
}
.fl-conversa__fila,
.fl-conversa__meio,
.fl-conversa__lead {
    background: linear-gradient(180deg, rgba(148, 163, 184, .045), rgba(148, 163, 184, .02)), #0a1424;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(2, 8, 20, .35);
    overflow: hidden;
}
.fl-conversa__fila { overflow-y: auto; border-right-width: 1px; }
.fl-conversa__lead { overflow-y: auto; border-left-width: 1px; padding: 13px; }

/* A base declara as quebras ANTES desta camada, e regra posterior fora de
   media vence a de dentro. Entao as quebras sao redeclaradas aqui. */
@media (max-width: 1280px) {
    .fl-conversa { grid-template-columns: 260px minmax(0, 1fr); }
    .fl-conversa__lead { display: none; }
}
@media (max-width: 820px) {
    .fl-conversa { grid-template-columns: minmax(0, 1fr); height: auto; }
    .fl-conversa__fila { display: none; }
}

/* Barra de rolagem fina, de aplicativo, nas tres colunas. */
.fl-conversa *::-webkit-scrollbar { width: 8px; height: 8px; }
.fl-conversa *::-webkit-scrollbar-track { background: transparent; }
.fl-conversa *::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .18);
    border-radius: 99px;
}
.fl-conversa *::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .3); }

/* ---- a fila ---- */
.fl-item--fila {
    cursor: pointer;
    margin: 3px 7px;
    border-radius: 12px;
    border-bottom: 0;
    transition: background .12s;
}
.fl-item--fila:hover { background: rgba(148, 163, 184, .07); }
.fl-item--ativa {
    background: linear-gradient(90deg, rgba(14, 165, 233, .14), rgba(14, 165, 233, .04));
    box-shadow: inset 3px 0 0 var(--fl-marca);
}
.fl-item--ativa:hover { background: linear-gradient(90deg, rgba(14, 165, 233, .18), rgba(14, 165, 233, .06)); }

/* ---- o fio, com fundo proprio ---- */
.fl-conversa__meio { position: relative; }
.fl-fio {
    background:
        radial-gradient(900px 300px at 80% -60px, rgba(14, 165, 233, .07), transparent),
        #060e1c;
}
.fl-bolha {
    border: 0;
    border-radius: 16px 16px 16px 5px;
    box-shadow: 0 2px 10px rgba(2, 8, 20, .3);
    background: #1b2942;
}
.fl-bolha--minha {
    border-radius: 16px 16px 5px 16px;
    background: linear-gradient(160deg, #0e4f38, #14532d);
}
.fl-bolha--reacao { background: transparent; box-shadow: none; }
.fl-bolha--apagada { background: transparent !important; box-shadow: none; }

/* ---- cabecalho e caixa de escrever colados nas pontas ---- */
.fl-cabecalho { background: rgba(148, 163, 184, .04); }
.fl-escrever { background: rgba(148, 163, 184, .04); border-top: 1px solid rgba(148, 163, 184, .1); }
.fl-escrever__campo { background: #0d1930; border-color: rgba(148, 163, 184, .16); border-radius: 12px; }
.fl-escrever__campo:focus { outline: none; border-color: var(--fl-marca); box-shadow: 0 0 0 3px rgba(14, 165, 233, .15); }

/* Botao cheio: a acao principal da tela merece cor solida, nao contorno. */
.fl-botao--cheio,
.fl-escrever .fl-botao {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border: 0;
    color: #fff;
}
.fl-botao--cheio:hover,
.fl-escrever .fl-botao:hover { filter: brightness(1.12); }

/* ---- o copiloto ---- */
.fl-proxima {
    background: linear-gradient(180deg, rgba(14, 165, 233, .07), transparent), #0b1526;
    border: 1px solid color-mix(in srgb, var(--fl-cor) 45%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--fl-cor) 10%, transparent);
}
.fl-proxima__campo { background: #0d1930; border-radius: 10px; }
.fl-painel {
    margin-top: 11px;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, .1);
    border-radius: 13px;
    background: rgba(148, 163, 184, .035);
}
.fl-painel__titulo {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    opacity: .65;
}
.fl-painel__nota {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-left: 2px solid var(--fl-ambar);
    border-radius: 8px;
    background: rgba(148, 163, 184, .05);
}

/* ---- a faixa do topo, de vidro ---- */
.fl-topo {
    background: linear-gradient(180deg, rgba(148, 163, 184, .05), rgba(148, 163, 184, .02)), #0a1424;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(2, 8, 20, .3);
}

/* ---- Chips de etiqueta, com escopo proprio ----
   A verificacao adversarial do redesign pegou um defeito que estava no ar
   havia dois dias: o estilo dos chips nunca foi instalado, porque o guard da
   epoca viu ".fl-marca" no arquivo e entendeu que ja existia. Aquele .fl-marca
   da linha 714 e do CARTAO DA BARRA LATERAL (flow/marca.blade.php), outro
   componente com o mesmo nome. Por isso o escopo: dentro de .fl-marcas, chip;
   fora, o cartao segue intocado. */
.fl-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fl-marcas .fl-marca {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; line-height: 1; padding: 3px 7px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 50%, transparent);
    background: color-mix(in srgb, var(--fl-cor, var(--fl-azul)) 14%, transparent);
    color: var(--fl-cor, var(--fl-azul)); white-space: nowrap;
}
.fl-marcas .fl-marca button {
    background: none; border: 0; color: inherit; cursor: pointer;
    padding: 0; font-size: 11px; opacity: .7;
}
.fl-marcas .fl-marca button:hover { opacity: 1; }
.fl-marcas .fl-marca--por { cursor: pointer; opacity: .55; }
.fl-marcas .fl-marca--por:hover { opacity: 1; }
.fl-etiquetas__nova {
    margin-top: 8px; width: 100%; padding: 5px 9px; border-radius: 8px;
    border: 1px solid var(--fl-borda); background: transparent;
    color: inherit; font-size: 11.5px;
}

/* ---- Consertos apontados pela revisao adversarial do redesign ----

   1. justify-content:flex-end num flex column com overflow QUEBRA a rolagem:
      o que transborda pelo topo fica fora da regiao rolavel, a barra some e
      o historico acima da primeira dobra vira inalcancavel. O jeito certo de
      encostar conversa curta embaixo e margin-top:auto no primeiro filho.   */
.fl-fio { justify-content: flex-start; }
.fl-fio > :first-child { margin-top: auto; }

/* 2. Os paineis do redesign tem fundo escuro fixo, entao o texto tambem tem
      de ser fixo: com color:inherit, o tema claro do painel poria texto
      escuro sobre fundo quase preto e a tela inteira sumiria.               */
.fl-conversa__fila, .fl-conversa__meio, .fl-conversa__lead, .fl-topo {
    color: #dce5f1;
}
.fl-escrever__campo, .fl-proxima__campo { color: #dce5f1; }

/* 3. O copiloto sumia ate 1280px, exatamente a largura de um notebook
      comum, e a sugestao nao tem mais copia no meio: ficava inacessivel.
      O corte desce para 1100px, com colunas mais magras no caminho.         */
@media (max-width: 1366px) {
    .fl-conversa { grid-template-columns: 260px minmax(0, 1fr) 290px; }
}
@media (max-width: 1280px) {
    .fl-conversa { grid-template-columns: 240px minmax(0, 1fr) 280px; }
    .fl-conversa__lead { display: block; }
}
@media (max-width: 1100px) {
    .fl-conversa { grid-template-columns: 240px minmax(0, 1fr); }
    .fl-conversa__lead { display: none; }
}
/* 4. A base desligava a altura de viewport ja em 1024px e a reforma so
      devolvia em 820px: na faixa entre os dois a grade era espremida.       */
@media (max-width: 1024px) {
    .fl-conversa { height: auto; }
}

/* 5. A variavel usada sete vezes e nunca definida: caia para transparente e
      levava junto o hover da lista de encaminhar e os fundos de destaque.   */
:root { --fl-fundo-suave: rgba(148, 163, 184, .08); }

/* ---- Revisor de portugues, acima da caixa de escrever ----
   Faixa discreta: ela avisa, nao manda. Quem atende continua enviando com
   Enter sem passar por aqui, porque velocidade de atendimento vale mais do
   que acento, e um corretor que atrapalha e desligado no primeiro dia. */
.fl-revisor {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 7px 11px; margin-bottom: 7px;
    border: 1px solid rgba(255, 197, 61, .3); border-radius: 10px;
    background: rgba(255, 197, 61, .07); font-size: 11.5px;
}
.fl-revisor__marca {
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #ffc53d; opacity: .85;
}
.fl-revisor__item {
    padding: 2px 7px; border-radius: 999px; background: rgba(148, 163, 184, .12);
    color: var(--fl-texto); white-space: nowrap;
}
.fl-revisor__item b { color: #ffc53d; font-weight: 600; }
/* Contexto ambiguo entra pontilhado: e sugestao, nao correcao. */
.fl-revisor__item--duvida { border: 1px dashed rgba(148, 163, 184, .4); background: transparent; }
.fl-revisor__botao {
    margin-left: auto; padding: 3px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 197, 61, .5); background: transparent;
    color: #ffc53d; font-size: 11px; font-weight: 600;
}
.fl-revisor__botao:hover { background: rgba(255, 197, 61, .14); }

/* O aviso do que JA foi corrigido some sozinho; o de sugestao fica. */
.fl-revisor--feito { border-color: rgba(34, 197, 94, .3); background: rgba(34, 197, 94, .07); }
.fl-revisor--feito .fl-revisor__marca { color: #4ade80; }
.fl-revisor--feito .fl-revisor__botao { border-color: rgba(148, 163, 184, .45); color: var(--fl-fraco); }
.fl-revisor--feito .fl-revisor__botao:hover { background: rgba(148, 163, 184, .12); }

/* Localizacao e contato: chegaram inteiros, entao nao levam o tom de falha
   do anexo perdido. Fundo neutro, e o detalhe em segunda linha. */
.fl-recado {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 11px; border-radius: 10px;
    background: rgba(148, 163, 184, .1); font-size: 12.5px; line-height: 1.45;
}
.fl-recado__icone { font-size: 15px; line-height: 1.2; }
.fl-recado strong { display: block; font-weight: 600; }
.fl-recado small { display: block; opacity: .75; margin-top: 2px; }

/* O botao das mensagens antigas, no topo do fio. */
.fl-fio__antigas {
    align-self: center; margin: 4px 0 10px; padding: 5px 14px;
    border: 1px solid var(--fl-borda); border-radius: 999px; cursor: pointer;
    background: rgba(148, 163, 184, .08); color: var(--fl-fraco); font-size: 11.5px;
}
.fl-fio__antigas:hover { background: rgba(148, 163, 184, .15); }

/* ==========================================================================
   A BARRA LATERAL NO AZUL DA CASA

   O painel inteiro e quase preto, e a barra se confundia com o conteudo.
   Pedido do Danilo em 24/08/2026: azul mais claro, o da BASOFT, para a
   barra destacar do resto da tela.

   O tom nao e o neon do logo (#0EA5E9) espalhado: um bloco grande naquela
   saturacao cansa a vista e rouba o destaque de quem realmente precisa
   dele, que sao o item ativo e os avisos. Entao a barra usa o azul cheio
   da marca escurecido, e o neon fica onde sempre esteve: no logo, no item
   ativo e na borda que separa a barra do conteudo.
   ========================================================================== */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-footer,
.fi-sidebar > nav,
.fi-sidebar-group {
    background: linear-gradient(180deg, #0d3b66 0%, #0a2b4d 55%, #082340 100%) !important;
}

/* A divisa: um fio do neon do logo, que e o que faz a barra parecer
   propria da marca em vez de so uma faixa colorida. */
.fi-sidebar {
    border-right: 1px solid rgba(14, 165, 233, .45) !important;
}

/* Sobre o azul, os separadores e os hovers precisam de mais contraste do
   que tinham sobre o quase preto. */
.fi-sidebar-header { border-bottom: 1px solid rgba(255, 255, 255, .10) !important; }
.fi-sidebar-group-label { color: rgba(226, 240, 255, .72) !important; }
.fi-sidebar-item-label { color: #eaf4ff !important; }
.fi-sidebar-item-icon { color: rgba(226, 240, 255, .82) !important; }

.fi-sidebar-item:not(.fi-active):hover > .fi-sidebar-item-btn {
    background: rgba(255, 255, 255, .09) !important;
}

/* O item aberto: agora sim o neon do logo, que so aparece aqui. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: rgba(14, 165, 233, .26) !important;
    box-shadow: inset 2px 0 0 #0EA5E9;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #ffffff !important; }

/* Os dois blocos proprios da casa (o cartao do usuario e o relogio) moram
   dentro da barra: sem isto ficariam com o fundo escuro antigo, boiando. */
.fl-usuario-lateral,
.fl-relogio-lateral {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

/* O TRILHO RECOLHIDO FICA COMPACTO, E O RELOGIO CABE.
   "Deixa isso aqui mais encolhidinho e sobe a parte de baixo" (Danilo,
   20/09/2026), com o print da coluna recolhida: seis icones ocupando meia
   tela e o relogio cortado pela barra de estado embaixo.

   Sao duas contas que se resolvem juntas. Os botoes do trilho herdavam a
   altura de quando tinham rotulo ao lado, e no trilho sobrou so o icone, que
   precisa de menos. E o que se ganha de altura la em cima e exatamente o que
   faltava embaixo para o relogio nao encostar na barra de estado.

   A FOLGA DE 6px NAO E CAPRICHO: a barra de estado e fixa e tem a altura da
   area segura do aparelho somada, que em notebook com barra de rolagem larga
   nao bate no pixel com o calculo da coluna. Seis pixels e o que separa
   "encostou" de "cortou", e cortar relogio e pior do que sobrar espaco. */
@media (min-width: 1024px) {
    /* A coluna recolhida e a unica que aperta: aberta, os rotulos precisam do
       espaco que esta sendo tirado aqui. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        padding-block: 3px !important;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups { row-gap: 4px !important; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn { padding: 4px 8px 2px !important; }

    .fi-sidebar,
    body.fl-com-abas .fi-sidebar {
        padding-bottom: 6px;
    }
}

/* O RELOGIO NA BARRA DE CIMA, ao lado do sino (20/09/2026).
   "Coloque isso do lado disso." Ele morou no pe da coluna desde o sistema
   antigo e de la deu trabalho a tarde inteira: era cortado pela barra de
   estado e sumia quando o menu crescia. Aqui nada disso existe, e ainda
   aproveita o vao entre o titulo da tela e o sino.

   DEITADO, E NAO EMPILHADO: na coluna ele era uma pilha de tres linhas, que
   na barra de 4rem nao cabe. A hora manda, a data e a temperatura seguem ao
   lado, e o ponto separa uma da outra como na propria frase. */
.fl-relogio {
    position: relative;
    flex-direction: row; align-items: center; gap: 12px;
    margin: 0 14px 0 0; padding: 0; border: 0;
    white-space: nowrap;
}
/* A pilha: hora em cima, data embaixo. As duas linhas somam 30px, que cabe
   folgado nos 4rem da barra. line-height apertado de proposito: com o padrao,
   as duas linhas se afastariam e a pilha pareceria dois itens soltos em vez
   de um bloco so. */
.fl-relogio__pilha { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.fl-relogio__hora { font-size: 14px; font-weight: 600; letter-spacing: .03em; }
.fl-relogio__dia { font-size: 10.5px; }

/* Abaixo de 1280px a data sai e fica so a hora e a temperatura: o titulo da
   tela e o menu do usuario tem preferencia na barra, e "domingo · 20/09/2026"
   e o pedaco mais longo e o menos urgente. */
@media (max-width: 1280px) { .fl-relogio__dia { display: none; } }
/* No celular a barra ja esta cheia com o logo e a gaveta. */
@media (max-width: 1024px) { .fl-relogio { display: none; } }

/* O campo de trocar a cidade vira um balaozinho: na coluna ele empurrava o
   que estava embaixo, e na barra nao ha "embaixo" para empurrar. */
.fl-relogio__cidade {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    background: var(--fl-fundo-1, #0b1424);
    border: 1px solid var(--fl-borda, rgba(148, 163, 184, .18));
    border-radius: 10px; padding: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

/* O RODAPE DA COLUNA FICA PRESO, E QUEM ROLA E O MENU.
   "Da pra subir mais essa secao pra nao ter que rolar e aparecer" (Danilo,
   20/09/2026), com o print do relogio. Ele nao precisa subir: precisa parar
   de descer. O que acontecia e que a coluna INTEIRA rolava, entao o relogio
   ia junto com o menu e so aparecia no fim do curso. Com a coluna virando
   uma pilha de tres andares (cabecalho, menu que rola, rodape preso), o
   relogio fica sempre na mesma altura, e quem anda e a lista de telas.
   O min-height:0 nao e enfeite: sem ele um filho flex se recusa a encolher
   abaixo do proprio conteudo, e o menu empurraria o rodape para fora de
   novo, que e o defeito que se esta consertando. */
@media (min-width: 1024px) {
    .fi-sidebar { display: flex !important; flex-direction: column !important; }
    .fi-sidebar > nav,
    .fi-sidebar-nav { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
    .fi-sidebar-footer {
        flex: 0 0 auto !important;
        position: sticky; bottom: 0; z-index: 2;
    }
}

/* ---------- os botoes do Filament ganham o mesmo volume ----------
 *
 * O Danilo pediu "todos os meus botoes", e metade da tela e botao do
 * Filament: salvar, criar, as acoes de tabela. Sem isto o painel teria
 * dois idiomas, os botoes da casa com relevo e os de fabrica chapados.
 *
 * O gradiente entra por cima da cor que o Filament ja escolheu para cada
 * variante, entao primario continua azul e perigo continua vermelho: o
 * que muda e so a luz e a sombra.
 */
.fi-btn {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 -1px 0 rgba(0, 0, 0, .20),
        0 1px 2px rgba(0, 0, 0, .30) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .07));
    transition: box-shadow .08s, transform .08s, filter .15s;
}
.fi-btn:hover { filter: brightness(1.08); }
.fi-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35) !important;
}
.fi-btn:disabled { box-shadow: none !important; background-image: none; }

/* Botao redondo de icone: o mesmo relevo, sem o gradiente, que numa
   area tao pequena vira sujeira. */
.fi-icon-btn:active:not(:disabled) { transform: translateY(1px); }

/* ---------- a barra do cliente respira ----------
 *
 * fl-cartao--limpo nasce com padding zero, porque quase sempre ele
 * embrulha uma lista que ja tem o proprio espaco. A barra do cabecalho
 * nao e lista: sem padding, nome e estado ficavam colados na borda e um
 * no outro.
 */
.mk-barra { padding: 14px 16px; gap: 14px; }
.mk-barra__estado { margin-top: 5px; row-gap: 6px; }
.mk-cara__nome { margin-bottom: 1px; }

/* ---------- o fio do Senna ----------
 *
 * Amarelo, verde e azul na ordem do capacete, o mesmo fio que o CarZone
 * tem acima do rodape. Sem legenda de proposito: quem reconhece,
 * reconhece.
 *
 * Aqui ele faz um trabalho a mais que la. No CarZone e enfeite no pe da
 * pagina; no Flow ele fecha a barra de cima, no lugar do risco cinza que
 * ja existia, entao nao acrescenta peso nenhum e ainda separa a area de
 * navegacao do conteudo.
 */
:root {
    --senna-amarelo: #ffd400;
    --senna-verde: #00a94f;
    --senna-azul: #1b4fd8;
}

.fi-topbar > * { position: relative; }

/* AS CORES SE ENCONTRAM EM DIAGONAL, como no capacete (20/09/2026).
 *
 * "Consegue transformar a faixa na faixa do Senna mesmo" (Danilo). Ate aqui
 * eram tres blocos retos encostados, e bloco reto e o que o capacete
 * justamente nao tem: nele o verde e o azul entram em cunha por cima do
 * amarelo.
 *
 * A cunha tem LARGURA FIXA, e nao percentual, e esse e o truque. Numa faixa
 * de 4 pixels de altura esticada por dois mil de largura, qualquer diagonal
 * definida em porcentagem vira uma linha reta: a inclinacao desaparece junto
 * com a proporcao. Com 34px fixos, a passagem de uma cor para a outra e um
 * rasgo visivel em qualquer largura de tela.
 *
 * Sao tres camadas: as duas cunhas, desenhadas por cima, e o fundo das tres
 * cores. A cunha repete a cor dos dois lados, entao ela encaixa sem emenda.
 */
.fi-topbar::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background-image:
        linear-gradient(to bottom right, var(--senna-amarelo) 50%, var(--senna-verde) 50%),
        linear-gradient(to bottom right, var(--senna-verde) 50%, var(--senna-azul) 50%),
        linear-gradient(90deg,
            var(--senna-amarelo) 0%, var(--senna-amarelo) 46%,
            var(--senna-verde) 46%, var(--senna-verde) 73%,
            var(--senna-azul) 73%, var(--senna-azul) 100%);
    background-size: 34px 100%, 34px 100%, 100% 100%;
    background-position: 46% 0, 73% 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
    opacity: .9;
    pointer-events: none;
}

/* ---------- em que area a pessoa esta ----------
 *
 * Fica na barra de cima, colada a esquerda, antes de tudo. Ler "Social
 * media > Marketing do cliente" custa menos que voltar ao menu para se
 * achar, que era o que acontecia.
 */
/* Onde a pessoa esta, DENTRO da barra de cima, encostada no fio.
 *
 * Ja morou embaixo do fio e sobrava uma faixa vazia entre a linha e o
 * conteudo, espaco gasto para nao dizer nada. Em cima ela ocupa a parte
 * da barra que estava vazia, e o fio passa a servir de base para ela. */
.fl-area {
    display: flex; align-items: center; gap: 7px;
    min-width: 0; font-size: 13px; line-height: 1;
    padding: 0;
    /* Comeca no ponto em que o amarelo do fio vira verde (46%), que e
       onde o Danilo quis. O calculo desconta a largura do bloco do logo,
       que vem antes dela; o max segura telas estreitas, onde 46% da
       barra e menor que o logo e a margem viraria negativa. */
    margin: 0 auto 0 max(0px, calc(46% - var(--sidebar-width, 20rem)));
}
.fl-area__grupo {
    color: var(--fl-marca);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 11px;
    white-space: nowrap;
}
.fl-area__seta { color: #475569; flex: none; }
.fl-area__tela {
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 640px) {
    /* Na tela estreita o grupo sai e fica so a tela: o nome da tela e o
       que responde "onde eu estou" quando so cabe um. */
    .fl-area__grupo, .fl-area__seta { display: none; }
}

/* O titulo grande da pagina sai: a faixa de area logo acima ja diz a
   mesma coisa, e ler "Atendimento WhatsApp" duas vezes em dez
   centimetros de tela nao ajuda ninguem. O subtitulo e os botoes de
   acao ficam, porque dizem coisas que a faixa nao diz. */
.fi-header-heading { display: none; }
.fi-header { padding-bottom: 0; }
.fi-main > .fi-page { padding-top: 0; }

/* O rastro de fabrica do Filament sai: a faixa de area diz a mesma
   coisa e diz melhor, com o grupo destacado e sem "Listar" no fim. Ele
   so aparecia nos recursos, entao metade do painel tinha um desenho e a
   outra metade tinha outro. */
.fi-breadcrumbs { display: none; }

/* Sem sobra entre o fio e o conteudo.
 *
 * O Filament reserva espaco de cabecalho mesmo quando o titulo esta
 * escondido, e o resultado era um vao de dedo entre a linha colorida e a
 * primeira coisa util da tela. */
.fi-header { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.fi-page > .fi-header:empty { display: none; }

/* ---------- a coluna azul ----------
 *
 * O logo passa a ficar centralizado na largura da coluna, em vez de
 * encostado na esquerda: a marca e o unico elemento daquela faixa, e
 * encostada num canto ela parecia sobra de espaco.
 */

/* O menu sobe: sem o bloco de usuario, o espaco reservado para ele
   virava um buraco antes do primeiro grupo. */
.fi-sidebar-nav { padding-top: 6px; }
.fi-sidebar-nav > *:first-child { margin-top: 0; }

/* ---------- a ordem das pecas na barra de cima ----------
 *
 * O gancho do Filament so deixa escolher entre o inicio e o FIM da
 * barra, e a faixa de area precisa ficar no meio: depois do logo e antes
 * do sino. Entrando pelo fim, ela levava o sino e a bola do usuario
 * junto para a esquerda, porque o "auto" dela quebrava o alinhamento a
 * direita do grupo inteiro.
 *
 * Com ordem explicita, cada peca vai para o lugar certo sem depender de
 * onde o HTML a colocou. O padrao e 5, entao qualquer coisa que o
 * Filament acrescente amanha nasce na direita, junto do sino.
 */
.fi-topbar > * { order: 5; }
.fi-topbar > *:has(.fi-topbar-open-sidebar-btn),
.fi-topbar > *:has(.fi-topbar-close-sidebar-btn),
.fi-topbar > .fi-topbar-open-sidebar-btn,
.fi-topbar > .fi-topbar-close-sidebar-btn { order: 1; }
.fi-topbar > *:has(.fi-logo),
.fi-topbar > .fi-logo { order: 2; }
.fi-topbar > .fl-area,
.fi-topbar > *:has(> .fl-area) { order: 3; }

/* Uma divisoria entre a marca e a navegacao: sao dois assuntos na mesma
   faixa, e sem nada entre eles o nome da tela parecia continuacao do
   nome do sistema. */
.fl-area::before {
    content: "";
    width: 1px; height: 20px; flex: none;
    margin-right: 14px;
    background: var(--fl-borda);
}

/* ---------- o logo alinhado com a coluna do menu ----------
 *
 * O logo vive em .fi-topbar-start, que se ajusta ao tamanho do proprio
 * conteudo: encostava na esquerda e ficava desalinhado da coluna azul
 * logo abaixo, como se fossem duas telas diferentes coladas.
 *
 * Dando ao bloco a largura EXATA da coluna (--sidebar-width, que o
 * Filament ja publica) e centralizando o que ha dentro, a marca fica no
 * meio da coluna e tudo que vem depois comeca onde a coluna termina. A
 * faixa de navegacao acompanha sozinha, sem numero repetido em lugar
 * nenhum: se a coluna mudar de largura um dia, os dois se movem juntos.
 *
 * So a partir de 1024px, que e onde a coluna existe. Abaixo disso a
 * lateral vira gaveta e o bloco volta a se ajustar ao conteudo, senao o
 * logo empurraria o resto da barra para fora da tela.
 */
@media (min-width: 1024px) {
    .fi-topbar-start {
        width: var(--sidebar-width, 20rem);
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}


/* ============================================================
   Atendimento: faixa de cima grudada e campo de sugestao maior
   (26/08/2026)
   Acima do placar sobrava um vazio de quase cem pixels: o cabecalho da
   pagina ja estava com o titulo escondido, mas seguia ocupando o lugar,
   e empurrava a conversa para fora da tela. Com ele fora e a faixa presa
   no topo, o que interessa aparece sem rolar.
   ============================================================ */
.fi-page:has(.fl-conversa) .fi-header { display: none; }
.fi-page:has(.fl-conversa) .fi-main { padding-top: 10px; }

.fi-page:has(.fl-conversa) .fl-topo {
  position: sticky; top: 0; z-index: 20; margin-bottom: 8px;
}

/* O que o cabecalho devolveu vira altura de conversa. */
.fl-conversa { height: calc(100vh - 10.5rem); }
@media (max-width: 1024px) { .fl-conversa { height: auto; } }

/* A sugestao e para ser lida inteira antes de sair em nome da casa, nao
   espiada por uma fresta de sete linhas. */
.fl-proxima__campo {
  min-height: 300px; max-height: 58vh;
}
@media (max-height: 780px) { .fl-proxima__campo { min-height: 230px; } }

/* O rodape da conversa estava ocupando quase cem pixels so de folga: a barra
   de respostas prontas, a caixa de escrever e a fileira de atalhos, cada uma
   com o seu respiro. Apertadas, sobem juntas e devolvem a altura para as
   mensagens, que e o que a pessoa precisa ler. */
.fl-conversa .fl-prontas__topo { padding: 6px 16px; }
.fl-conversa .fl-escrever { padding: 8px 16px 10px; gap: 6px; }
.fl-conversa .fl-escrever__extras { margin-top: 1px; }
.fl-conversa .fl-escrever__campo { min-height: 44px; }

/* ============================================================
   A fila do Atendimento vira a fila do WhatsApp (26/08/2026)
   Ordenar por temperatura antes da hora parecia melhor no papel e era
   impossivel de trabalhar: a conversa quente subia por cima de quem
   tinha acabado de escrever, e ninguem achava nada. Agora e a ordem em
   que as coisas chegaram, com a previa da ultima mensagem e a hora do
   lado, que e como todo mundo ja sabe ler.
   ============================================================ */
.fl-fila__topo {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.fl-fila__nome {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.fl-fila__nome .fl-ponto { vertical-align: middle; margin-right: 5px; }

.fl-fila__hora {
  flex: none; font-size: 10.5px; opacity: .55; font-variant-numeric: tabular-nums;
}
.fl-fila__hora--nova { opacity: 1; color: var(--fl-verde); font-weight: 600; }

.fl-fila__baixo {
  display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0;
}
.fl-fila__previa {
  flex: 1; min-width: 0; font-size: 12px; opacity: .6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-fila__contador { flex: none; }

/* As abas em UMA fileira que rola de lado. Sete botoes quebrando em
   quatro linhas comiam metade da coluna antes da primeira conversa. */
.fl-fila__abas {
  display: flex; gap: 6px; margin-top: 9px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.fl-fila__abas::-webkit-scrollbar { display: none; }
.fl-fila__abas > * { flex: none; }

/* Com a previa ocupando a linha de baixo, o item fica mais alto: as
   marcas viram um detalhe, e nao um terceiro andar. */
.fl-conversa__fila .fl-item .fl-marcas { margin-top: 3px; }

/* A linha que separa quem espera de quem ja foi respondido. Fina e
   discreta: e uma marca de posicao, nao um titulo. O que sobra ACIMA
   dela e a lista do que falta fazer hoje. */
.fl-fila__linha {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  opacity: .4; user-select: none;
}
.fl-fila__linha::before,
.fl-fila__linha::after {
  content: ""; flex: 1; height: 1px; background: var(--fl-borda);
}

/* ============================================================
   A coluna da fila vira DUAS listas com rolagem propria
   Antes era uma lista so com uma linha no meio, e para ver o que ja foi
   respondido era preciso rolar por baixo de 60 conversas esperando. As
   duas metades dividem a altura da coluna e aparecem juntas.
   ============================================================ */
.fl-conversa__fila {
  display: flex; flex-direction: column;
  overflow: hidden;   /* quem rola agora sao as metades, nao a coluna */
}

.fl-fila__metades {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

/*
 * min-height:0 de novo, pelo mesmo motivo de sempre: sem ele o item flex
 * nao encolhe abaixo do conteudo, as duas listas crescem ate o tamanho
 * de todas as conversas e a divisao deixa de existir.
 */
.fl-fila__metade {
  flex: 1 1 0; min-height: 0; overflow-y: auto;
}

/* A de baixo fica um pouco menor: o que espera resposta e o trabalho do
   dia, o que ja foi respondido e consulta. */
.fl-fila__metade--fim { flex: 0 1 38%; }

/* A linha agora separa duas caixas de verdade, entao ganha fundo proprio
   para nao parecer que faz parte de nenhuma das duas. */
.fl-fila__linha {
  flex: none;
  background: var(--fl-superficie);
  border-top: 1px solid var(--fl-borda);
  border-bottom: 1px solid var(--fl-borda);
}
.fl-fila__linha::before,
.fl-fila__linha::after { display: none; }
.fl-fila__linha { justify-content: center; }

/* Arquivos que o cliente mandou, prontos para entrar na tela. */
.fl-recebido__previa {
  width: 84px; height: 84px; flex: none; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--fl-borda); background: var(--fl-fundo-suave);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.fl-recebido__previa img { width: 100%; height: 100%; object-fit: cover; }

.fl-recebido__recado {
  margin-top: 8px; padding: 8px 11px; border-radius: 9px;
  border-left: 2px solid var(--fl-azul); background: var(--fl-fundo-suave);
  font-size: 13px; font-style: italic; opacity: .85;
}

.fl-recebido__telas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px;
}
.fl-recebido__rotulo { font-size: 11px; opacity: .55; margin-right: 2px; }
.fl-botao--fino { padding: 5px 11px; font-size: 12px; }

/* Os modelos aprovados, dentro do aviso da janela fechada. */
.fl-modelos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px;
}
.fl-modelos__rotulo { font-size: 11px; opacity: .6; margin-right: 2px; }
.fl-modelos__falta { margin-top: 10px; font-size: 12px; opacity: .6; line-height: 1.5; }

/* O menu "mais" da fileira de acoes do Atendimento. Oito botoes viravam
   duas linhas de texto sublinhado e o olho nao achava nenhum. */
[x-cloak] { display: none !important; }

.fl-mais { position: relative; display: inline-block; }

.fl-mais__menu {
  position: absolute; bottom: calc(100% + 7px); left: 0; z-index: 30;
  min-width: 216px; padding: 5px;
  border: 1px solid var(--fl-borda); border-radius: 11px;
  background: var(--fl-superficie);
  box-shadow: 0 10px 30px rgba(2, 8, 20, .45);
  display: flex; flex-direction: column; gap: 1px;
}
.fl-mais__menu button {
  text-align: left; padding: 8px 11px; border-radius: 8px;
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 12.5px; text-decoration: none; opacity: .8;
}
.fl-mais__menu button:hover { background: var(--fl-fundo-suave); opacity: 1; }

/* ============================================================
   A fileira de acoes do Atendimento vira botao de verdade
   (26/08/2026)
   Eram links sublinhados, e link sublinhado em fileira fica sujo com
   qualquer quantidade: com quatro ou com oito, o olho le uma tira de
   texto riscado e nao acha nada. Viraram pilulas com borda, altura
   igual e icone alinhado, que e o que o resto do painel ja usa.
   ============================================================ */
.fl-escrever__extras {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

.fl-escrever__extras .fl-depois,
.fl-escrever__extras .fl-mais > .fl-depois {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 9px;
  border: 1px solid var(--fl-borda);
  background: var(--fl-fundo-suave);
  font-size: 11.5px; line-height: 1;
  text-decoration: none; opacity: .78;
  transition: border-color .12s, opacity .12s, background .12s;
}

.fl-escrever__extras .fl-depois:hover {
  opacity: 1; border-color: var(--fl-azul);
  background: color-mix(in srgb, var(--fl-azul) 10%, transparent);
}

/* O "mais" nao concorre com os outros: e o mesmo tamanho, mas sem
   borda, para nao parecer uma quinta acao de envio. */
.fl-escrever__extras .fl-mais > .fl-depois {
  border-color: transparent; background: none; opacity: .55;
}
.fl-escrever__extras .fl-mais > .fl-depois:hover {
  opacity: 1; border-color: var(--fl-borda); background: var(--fl-fundo-suave);
}

/* Ha quanto tempo o cliente nao volta, na metade de baixo da fila.
   Fica discreto: e contexto, e nao chamado de acao. */
.fl-fila__silencio {
  flex: none; font-size: 10px; opacity: .45;
  padding: 2px 7px; border-radius: 99px; border: 1px solid var(--fl-borda);
}

/* ============================================================
   O Atendimento comeca no alto da tela (27/08/2026)
   Sobrava uma faixa vazia entre o fio colorido do topo e o placar. Ela
   vinha de tres somas: o respiro do fi-main, a margem do fi-header que
   ficou depois do titulo escondido, e a margem de baixo do proprio
   placar. Cada uma parecia pequena sozinha.
   ============================================================ */
.fi-page:has(.fl-conversa) .fi-main {
  padding-top: 2px;
}
.fi-page:has(.fl-conversa) .fi-header {
  display: none;
  margin: 0;
  padding: 0;
}
.fi-page:has(.fl-conversa) .fl-topo {
  margin-bottom: 6px;
  padding-top: 8px; padding-bottom: 8px;
}

/* A pilha da pagina tambem tinha respiro proprio no topo. */
.fi-page:has(.fl-conversa) .fl-pilha > :first-child { margin-top: 0; }

/* ============================================================
   As abas da fila cabem na largura da coluna (27/08/2026)
   Eram uma fileira que rolava de lado, e com quatro itens o ultimo
   ficava sempre meio cortado na beirada. Rolagem lateral em coluna
   estreita esconde o que ninguem procura porque nao sabe que existe.

   Grade de quatro colunas iguais: cabem sempre, alinham sempre, e a
   largura de cada uma acompanha a coluna em vez de brigar com ela.
   ============================================================ */
.fl-fila__abas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  overflow: visible;          /* nao rola mais de lado */
}

.fl-fila__abas > * {
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 4px; font-size: 10.5px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}

/* O contador vira sobrescrito: informa sem disputar espaco com o nome. */
.fl-fila__abas > * > span { font-size: 9px; opacity: .55; }

@media (max-width: 1180px) {
  /* Coluna mais estreita: o nome sozinho ja diz o que e. */
  .fl-fila__abas > * > span { display: none; }
}


/* ==========================================================================
   RETOMAR CONTATO: quadro com coluna por prazo e cartao que se arrasta.

   Tres decisoes de desenho, e as tres sao sobre TIRAR coisa:

   1. COR SO ONDE ELA SIGNIFICA. Eram cinco colunas com cinco cores, e a cor
      acabava codificando "em que coluna estou", que o titulo ja diz. Quando
      tudo e colorido nada salta, e o olho passa reto justamente pelo
      vermelho. Ficam marcadas as duas que cobram acao hoje.

   2. O DINHEIRO ANCORA. Numa tela sobre quem ligar, o valor e o criterio de
      ordem. Digito de largura fixa, senao uma coluna de valores nao alinha e
      comparar dois cartoes vira leitura, e nao olhada.

   3. UM BOTAO POR CARTAO. Cinco controles em quarenta cartoes sao duzentos
      elementos disputando o olho. O verbo da tela e "falei hoje"; o resto e
      apoio, fica quieto, e continua alcancavel pelo teclado.
   ========================================================================== */

/* O CABECALHO VAZIO SAI, E O VAO QUE ELE DEIXA TAMBEM.
 *
 * Com o titulo escondido pela regra da casa, este bloco nao tem nada dentro:
 * era um vao de dedo entre o fio colorido e a primeira coluna.
 *
 * Dois seletores estavam errados aqui antes, e os dois pelo mesmo motivo, ter
 * sido escritos de cabeca em vez de conferidos no HTML do Filament:
 *   - o cabecalho NAO e filho direto de .fi-page, mora dentro de
 *     .fi-page-header-main-ctn, entao o ">" nunca casava;
 *   - .fi-main e ANCESTRAL de .fi-page, e nao descendente, entao
 *     ".fi-page ... .fi-main" tambem nunca casava. Com :has() a direcao se
 *     inverte e o alvo passa a ser .fi-main:has().
 *
 * Sumir o cabecalho nao basta: .fi-page e .fi-page-header-main-ctn sao
 * empilhamentos COM ESPACO ENTRE OS FILHOS, e o espaco continua reservado
 * mesmo quando o filho de cima deixa de existir.
 */
.fi-page:has(.fl-quadro) .fi-header { display: none; }
.fi-page:has(.fl-quadro),
.fi-page:has(.fl-quadro) .fi-page-header-main-ctn { gap: 0; }
.fi-main:has(.fl-quadro) { padding-top: 6px; }

.fl-quadro {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 10px;
}

/* AS COLUNAS CEDEM, e nao empurram a tela para o lado.
 *
 * Eram 300px fixos. Cinco colunas davam 1548px com os vaos, e a area util ao
 * lado da barra do painel nao tem isso: o quadro nascia com rolagem lateral,
 * e o Danilo apontou -- "nao deveria ter necessidade de rolar para o lado".
 *
 * Rolagem lateral em quadro e pior do que em lista: a coluna que importa e a
 * "Passou da hora", que fica na ponta esquerda, e a ultima so aparece depois
 * de arrastar a barra. Pior ainda quando se ARRASTA CARTAO: soltar em coluna
 * que nao esta na tela exige rolar com o cartao preso no dedo.
 *
 * Agora elas dividem a largura que houver, com um piso de 190px. Abaixo
 * disso o cartao deixa de caber e a rolagem volta -- de proposito, porque
 * espremer mais transformaria o nome do lead em duas letras por linha.
 */
.fl-coluna {
  flex: 1 1 0; min-width: 190px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 190px);
  background: var(--fl-cartao);
  border: 1px solid var(--fl-borda);
  border-radius: 12px;
}

/* Fio de neon no topo so das que cobram acao hoje. As outras vivem com a
   borda de sempre: nao ha nada a decidir nelas agora. */
.fl-coluna--urgente { border-top: 2px solid var(--fl-cor); }
.fl-coluna--urgente .fl-coluna__titulo { color: var(--fl-cor); }

.fl-coluna--recebendo {
  border-color: var(--fl-marca);
  box-shadow: 0 0 0 1px var(--fl-marca), 0 0 22px -6px var(--fl-marca);
}

.fl-coluna__topo {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--fl-borda);
}
.fl-coluna__titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fl-fraco);
}
.fl-coluna__n {
  margin-left: auto; font-size: 11px; color: var(--fl-fraco);
  font-variant-numeric: tabular-nums;
  padding: 1px 7px; border: 1px solid var(--fl-borda); border-radius: 999px;
}

/* Cada coluna rola por dentro: a de atrasados cresce muito mais que as
   outras, e sem isso ela empurrava o quadro inteiro para baixo. */
.fl-coluna__pilha {
  flex: 1; min-height: 84px; overflow-y: auto;
  padding: 9px; display: flex; flex-direction: column; gap: 8px;
}

.fl-coluna__vazia {
  font-size: 12px; color: var(--fl-fraco); text-align: center;
  padding: 16px 10px; border: 1px dashed var(--fl-borda); border-radius: 9px;
}

.fl-cartao-lead {
  background: var(--fl-fundo); border: 1px solid var(--fl-borda);
  border-radius: 10px; padding: 10px 11px; cursor: grab;
  transition: border-color .12s, box-shadow .12s;
}
.fl-cartao-lead:hover { border-color: color-mix(in srgb, var(--fl-marca) 45%, var(--fl-borda)); }
.fl-cartao-lead:active { cursor: grabbing; }
.fl-cartao-lead--voando { opacity: .35; }

.fl-cartao-lead__topo { display: flex; align-items: baseline; gap: 8px; }
.fl-cartao-lead__nome {
  font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-cartao-lead__quando {
  font-size: 11px; color: var(--fl-fraco); font-variant-numeric: tabular-nums;
}

.fl-cartao-lead__valor {
  color: var(--fl-verde); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  margin-top: 3px;
}

/* O roteiro da ligacao. Sai do cinza de rodape e ganha o fio da marca:
   e a unica frase do cartao que diz o que FAZER. */
.fl-cartao-lead__passo {
  font-size: 12.5px; line-height: 1.45; margin-top: 8px;
  padding-left: 9px; color: var(--fl-texto);
  border-left: 2px solid color-mix(in srgb, var(--fl-marca) 55%, transparent);
}

.fl-cartao-lead__sub {
  font-size: 11px; color: var(--fl-fraco); margin-top: 7px;
}

.fl-cartao-lead__acoes {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--fl-borda);
}

/* Apoio: texto sublinhado no foco, sem caixa, sem peso. Continua chegavel
   pelo teclado, so nao disputa espaco com o botao. */
.fl-quieto {
  font-size: 11.5px; color: var(--fl-fraco); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.fl-quieto:hover, .fl-quieto:focus-visible {
  color: var(--fl-marca); text-decoration: underline;
}

.fl-cartao-lead__cadencia {
  font-size: 11px; padding: 2px 6px; border-radius: 7px;
  background: var(--fl-cartao); color: var(--fl-fraco);
  border: 1px solid var(--fl-borda); max-width: 100%;
}
.fl-cartao-lead__marca {
  font-size: 10px; color: var(--fl-fraco); letter-spacing: .04em;
  padding: 2px 7px; border: 1px solid var(--fl-borda); border-radius: 999px;
}

/* No telefone nao se arrasta entre colunas que nao cabem na tela: as colunas
   viram uma pilha, e o "adiar 7 dias" e a cadencia fazem o trabalho do
   arrasto. */
@media (max-width: 820px) {
  .fl-quadro { flex-direction: column; overflow-x: visible; }
  .fl-coluna { flex: none; width: 100%; max-height: none; }
}

/* ---- A sugestao do dia, nas tres caixas de Trafego ----
 *
 * O pedido: "uma sugestao em cada coisa ali embaixo, e ir aplicando a mudanca
 * atraves de um botao, pra que qualquer socio olhe e execute o ajuste".
 *
 * O bloco tem sempre a mesma forma nas tres caixas, e e essa repeticao que
 * faz o socio aprender a tela uma vez so: titulo do que fazer, uma linha de
 * porque, e o botao. A cor e o PESO da sugestao, e nao o canal de onde ela
 * veio, senao vira o mesmo arco-iris do quadro de retomada.
 */
.trf-sugestao {
  margin-top: 10px; padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--fl-cor) 35%, transparent);
  border-left: 3px solid var(--fl-cor);
  border-radius: 10px;
  background: color-mix(in srgb, var(--fl-cor) 7%, transparent);
}

.trf-sugestao__titulo {
  font-weight: 650; font-size: 13.5px; color: var(--fl-cor);
}

/* O porque fica junto de proposito: socio que aplica sem entender aplica uma
   vez e depois para de confiar na tela. */
.trf-sugestao__porque {
  font-size: 12px; line-height: 1.5; color: var(--fl-fraco); margin-top: 4px;
}

.trf-sugestao__botao { margin-top: 9px; width: 100%; text-align: center; }

/* O que era botao e virou apoio: abrir o Gerenciador nao e o ajuste do dia,
   e competia de igual para igual com a sugestao. */
.trf-secundario {
  display: inline-block; margin-top: 9px;
  font-size: 11.5px; color: var(--fl-fraco); text-decoration: none;
}
.trf-secundario:hover { color: var(--fl-marca); text-decoration: underline; }

/* O baixar e apoio, nao acao do dia: link quieto no meio dos dados do
   arquivo, do mesmo peso que a data e o tamanho. */
.fl-recebido__baixar { color: var(--fl-fraco); text-decoration: underline; }
.fl-recebido__baixar:hover { color: var(--fl-marca); }

/* ---------- dashboard numa tela so ----------
 *
 * Quatro paineis em duas colunas, na ordem natural dos widgets: o dia e
 * os numeros em cima, o travado e as TVs embaixo. O Danilo experimentou
 * a versao com o Acontece hoje em faixa de largura inteira e preferiu o
 * quadrado da largura dos outros; o posicionamento explicito por
 * grid-row/grid-column saiu junto, entao quem rege a tela e so a ordem
 * dos sort (e no celular a mesma ordem em uma coluna).
 *
 * CUIDADO com o conteiner: no Filament 5 o dashboard monta por SCHEMA e
 * o grid e um div .fi-grid (com --cols-lg), e nao o .fi-wi do
 * componente antigo, que segue no vendor como deprecated e ja nos
 * enganou uma vez. */

/* Sem evento, a faixa do dia nao precisa de palco: o vazio encosta no
   conteudo e a linha de cima fica baixa. */
.fl-wi-acontece .fl-vazio { padding: 18px 20px; }

/* A folga entre o fio colorido e o conteudo cai de vez: o cabecalho ja
 * nao tem titulo, entao o respiro que o Filament reserva acima dele era
 * so vao. Vale para todas as telas, que ganham o espaco embaixo. */
.fi-header { padding-top: 0 !important; }
.fi-main { padding-top: 8px; }

/* ---------- as TVs em miniatura no dashboard ----------
 *
 * Moldura com a forma da televisao, pelo mesmo motivo da Projecao: arte
 * vertical em quadro deitado engana o olho. Altura unica de 96px para a
 * fileira ficar reta; a largura sai da proporcao. */
/* Revisto em 20/09/2026: fileira unica em grade, cada TV na proporcao real
 * (16:9 deitada, 9:16 em pe) e todas apoiadas na linha de baixo. As colunas
 * vem do blade (16fr para deitada, 9fr para em pe), entao a TV em pe tem a
 * mesma diagonal da deitada, so girada. */
.fl-tvzinhas {
    display: grid; align-items: end; gap: 14px 16px;
    padding: 16px 20px 16px;
}
.fl-tvzinha { text-decoration: none; text-align: center; min-width: 0; display: flex; flex-direction: column; }
.fl-tvzinha__palco {
    width: 100% !important; height: auto !important;
    border-radius: 7px; overflow: hidden;
    background: #0b1220; border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, transform .15s;
}
.fl-tvzinha__palco--horizontal { aspect-ratio: 16 / 9; }
.fl-tvzinha__palco--vertical { aspect-ratio: 9 / 16; }
.fl-tvzinha__palco img, .fl-tvzinha__palco video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.fl-tvzinha__vazio { font-size: 11px; color: #475569; }
.fl-tvzinha__nome {
    font-size: 12px; font-weight: 600; color: #cbd5e1; margin-top: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-tvzinha__formato { font-size: 10.5px; color: #64748b; }
.fl-tvzinha:hover .fl-tvzinha__palco { transform: translateY(-2px); }
/* Tela estreita: seis numa linha viram selos. Tres por linha, cada uma na
 * sua proporcao, ainda apoiadas embaixo. */
@media (max-width: 700px) {
    .fl-tvzinhas { grid-template-columns: repeat(3, 1fr) !important; }
}
.fl-tvzinha:hover .fl-tvzinha__palco { border-color: var(--fl-azul); }

/* Os tijolos de numero encolhem para o que vem embaixo subir: mesmo
 * conteudo, menos ar. O pedido foi literalmente "diminuir esse para
 * subir mais o de baixo". */
.fl-tijolo { padding: 9px 12px; }
.fl-tijolo__valor { font-size: 22px; }

/* O atalho de criar projeto morava no cabecalho e o cabecalho morreu:
 * vira o ultimo cartao da grade de numeros, com o bisel da casa, no vao
 * que sobrava depois do Sem primeiro contato. So aparece para quem tem
 * projetos.criar, a mesma regra do botao antigo. */
.fl-tijolo--novo {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--fl-azul);
    border: 1px solid color-mix(in srgb, var(--fl-azul) 42%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--fl-azul) 17%, transparent),
            color-mix(in srgb, var(--fl-azul) 7%, transparent));
}
.fl-tijolo--novo:hover {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--fl-azul) 26%, transparent),
            color-mix(in srgb, var(--fl-azul) 13%, transparent));
    border-color: color-mix(in srgb, var(--fl-azul) 62%, transparent);
}
.fl-tijolo--novo__mais { font-size: 20px; font-weight: 800; line-height: 1; }

/* O cabecalho fantasma sai do fluxo. No dashboard ele so carrega o
 * titulo e o rastro ja escondidos, mas o elemento continuava vivo e o
 * gap do conteiner (fi-page-header-main-ctn) cobrava um dedo de vao
 * entre o fio colorido e o conteudo. Some quando nao ha nada visivel
 * dentro: nem subtitulo nem botoes. Cobranca e Remarketing (subtitulo)
 * e as listas com acao de criar continuam com o cabecalho delas. */
.fi-header:not(:has(.fi-header-subheading)):not(:has(.fi-header-actions-ctn)) { display: none; }

/* A parte de baixo comia: a fileira do travado com as TVs passava da
 * janela e cortava os rotulos. As listas dos paineis do dashboard
 * ganham teto proprio, bem menor que os 46vh gerais, e rolam por
 * dentro; o resto esta a um clique no "ver todas" e na agenda. As
 * miniaturas de TV encolheram junto para a fileira virar uma so. */
.fl-wi-acontece .fl-lista-painel,
.fl-wi-travado .fl-lista-painel { max-height: 26vh; }

/* O ultimo respiro de fabrica, agora para o painel todo: o
 * fi-page-header-main-ctn traz 32px de padding em cima e embaixo em
 * toda pagina (a versao pontual disso ja existia para o quadro do
 * Retomar). Em cima vira zero, porque os 8px do fi-main ja separam do
 * fio colorido; embaixo ficam 16px para a pagina nao terminar colada. */
.fi-page-header-main-ctn { padding-block: 0 16px; row-gap: 12px; }
/* row-gap so pesa onde o cabecalho continua visivel (Cobranca, Remarketing,
   listas com acao de criar): onde ele some por display:none nao ha item
   flex, e o vao nunca existiu. Aqui ele cai de 32px para 12px. */

/* O SELETOR DE ARQUIVO, PARA QUALQUER TELA.
 *
 * Este desenho nascia dentro do <style> da Projecao, com nome proprio
 * dela (proj-arquivo). Quando o Trafego reusou a classe para o CSV do
 * Google, o seletor apareceu CRU na tela: "Escolher arquivo, nenhum
 * arquivo escolhido", com o rotulo solto embaixo. Estilo que mora numa
 * pagina so nao atravessa a porta; por isso ele passa a morar aqui.
 *
 * O input nativo nao usa display:none de proposito: escondido assim ele
 * sai da ordem do teclado, e quem navega sem mouse perde o botao. */
.fl-arquivo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 8px; cursor: pointer; flex: none;
    font-size: 12px; color: var(--fl-fraco);
    border: 1px dashed color-mix(in srgb, var(--fl-borda) 100%, transparent);
}
.fl-arquivo:hover { border-color: var(--fl-verde); color: var(--fl-texto); }
.fl-arquivo:focus-within { border-color: var(--fl-marca); color: var(--fl-texto); }
.fl-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   O ACABAMENTO
   ==========================================================================

   Pedido do Danilo: "um tapa completo no visual, cara de sistema moderno e
   bem caro, hitech, mantenha o logo e a linha da cor do Brasil, e NAO
   ALTERE A POSICAO DOS ELEMENTOS".

   Por isso esta secao inteira e de ACABAMENTO, e nao de layout. Nao ha aqui
   um unico display, grid-template, position, width, height, margin ou
   padding que mova alguma coisa. So cor, profundidade, luz, tipografia e
   tempo de transicao. Se voce precisar mexer em posicao, o lugar e outro.

   A ideia por tras: o que faz um painel parecer caro nao e mais cor, e
   MENOS. Um fundo com profundidade em vez de cinza chapado, uma borda de
   fio de cabelo em vez de traco, um brilho de um pixel no topo da
   superficie imitando luz batendo na quina, e sombra que espalha longe e
   fraca em vez de escura e curta. Tudo isso e o que os aparelhos de
   verdade fazem: a luz vem de cima.
   ========================================================================== */

:root {
    /* A escala de profundidade. Tres degraus, e nao dez: mais que isso
       ninguem distingue, e o painel vira sopa. */
    --fl-fundo-0: #060c17;   /* o chao, atras de tudo */
    --fl-fundo-1: #0b1424;   /* superficie de cartao */
    --fl-fundo-2: #101b30;   /* o que se destaca sobre o cartao */

    /* Luz e sombra. A luz e sempre de cima, a sombra sempre longe e fraca. */
    --fl-luz-topo: inset 0 1px 0 rgba(255, 255, 255, .055);
    --fl-sombra: 0 1px 2px rgba(2, 6, 16, .35), 0 12px 32px -12px rgba(2, 6, 16, .55);
    --fl-sombra-alta: 0 2px 4px rgba(2, 6, 16, .4), 0 24px 56px -16px rgba(2, 6, 16, .7);

    /* Fio de cabelo: borda que existe sem cortar. */
    --fl-fio: rgba(148, 163, 184, .14);
    --fl-fio-forte: rgba(148, 163, 184, .24);

    --fl-tempo: 140ms;
    --fl-curva: cubic-bezier(.2, .7, .3, 1);
}

/* ---- O CHAO, COM ATMOSFERA ----
   Um brilho frio no alto da tela, na cor da marca, muito fraco. E o que
   tira o cinza morto do fundo sem que ninguem consiga apontar de onde vem
   a diferenca. Fixo e sem pegar clique: nao entra no fluxo de nada. */
html.dark { background-color: var(--fl-fundo-0); }

/* O body fica transparente para a atmosfera aparecer atras dele. Ela mora
   em z-index negativo, atras de todo o conteudo, para nenhuma regra de
   empilhamento precisar encostar nos filhos do body: e la que o Filament
   pendura modal, gaveta e menu suspenso. */
html.dark body.fi-body {
    background-color: transparent;
}

html.dark body.fi-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(1200px 520px at 68% -10%, rgba(14, 165, 233, .10), transparent 60%),
        radial-gradient(900px 420px at 8% 0%, rgba(20, 102, 166, .10), transparent 55%);
}

/* O granulado. Dois por cento de ruido, que o olho nao ve e a pele sente:
   e o que separa uma superficie impressa de uma superficie digital chapada.
   Vem como SVG embutido para nao custar uma requisicao. */
html.dark body.fi-body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ---- SUPERFICIES ----
   Cartao deixa de ser um retangulo de cor unica e passa a ter quina: um
   degrade curto de cima para baixo, o fio de cabelo em volta, a luz de um
   pixel no topo e a sombra espalhada embaixo. */
.dark .fl-cartao,
.dark .fi-section,
.dark .fi-ta-ctn,
.dark .fi-fo-component-ctn {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 42%);
    border-color: var(--fl-fio);
    box-shadow: var(--fl-luz-topo), var(--fl-sombra);
}

.dark .fl { --fl-borda: var(--fl-fio); }

/* O acento lateral vira luz, e nao tinta: a barra colorida ganha um halo
   curto para dentro do cartao. */
.dark .fl-cartao--acento {
    box-shadow:
        var(--fl-luz-topo),
        var(--fl-sombra),
        inset 6px 0 18px -12px var(--fl-cor, var(--fl-azul));
}

/* ---- A COLUNA E A BARRA DE CIMA ----
   Vidro: fundo translucido com desfoque atras. So funciona onde o
   navegador suporta; onde nao suporta, fica a cor cheia, que ja era o
   que existia. */
@supports (backdrop-filter: blur(1px)) {
    .dark .fi-topbar,
    .dark .fi-sidebar {
        backdrop-filter: saturate(140%) blur(14px);
    }
}

.dark .fi-topbar {
    background-color: rgba(8, 15, 28, .72);
    border-bottom-color: transparent;
}

.dark .fi-sidebar {
    background-image: linear-gradient(180deg, rgba(14, 165, 233, .05), transparent 220px);
    border-right: 1px solid var(--fl-fio);
}

/* ---- O FIO NAS CORES DO BRASIL ----
   A faixa fica exatamente como esta, na mesma altura e nas mesmas
   proporcoes. O que entra e a luz por baixo dela: em vez de uma tira
   impressa, uma tira que ACENDE. */
.fi-topbar::after {
    opacity: 1;
    box-shadow:
        0 0 10px rgba(0, 169, 79, .35),
        0 0 22px rgba(27, 79, 216, .28);
}

/* ---- FOCO ----
   Um anel so para o painel inteiro, na cor da marca. Antes cada componente
   desenhava o seu, e quem navega por teclado via tres desenhos diferentes
   na mesma tela. */
.dark :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--fl-marca) 70%, transparent);
    outline-offset: 2px;
}

/* ---- SELECAO E CURSOR DE TEXTO ---- */
.dark ::selection { background: color-mix(in srgb, var(--fl-marca) 32%, transparent); }
.dark { caret-color: var(--fl-marca); }

/* ---- BARRA DE ROLAGEM ----
   Fina, sem seta, e so aparece de verdade quando o ponteiro chega perto.
   Barra grossa de sistema operacional e o detalhe que mais entrega
   software barato. */
.dark * {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .22) transparent;
}
.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
.dark ::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .2);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.dark ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fl-marca) 55%, transparent); background-clip: content-box; }

/* ---- TEMPO ----
   Nada muda de estado com corte seco. O tempo e curto de proposito: acima
   de 200ms a interface parece lenta, abaixo de 100ms parece dura. */
.dark .fl-cartao,
.dark .fl-tijolo,
.dark .fi-btn,
.dark .fi-icon-btn,
.dark .fi-input,
.dark .fi-select,
.dark .fi-ta-row {
    transition: background-color var(--fl-tempo) var(--fl-curva),
                border-color var(--fl-tempo) var(--fl-curva),
                box-shadow var(--fl-tempo) var(--fl-curva),
                color var(--fl-tempo) var(--fl-curva);
}

/* Cartao que e link levanta ao passar o ponteiro. E sombra, e nao
   deslocamento: nada sai do lugar. */
.dark a.fl-cartao:hover,
.dark .fl-tijolo:hover {
    border-color: var(--fl-fio-forte);
    box-shadow: var(--fl-luz-topo), var(--fl-sombra-alta);
}

/* ---- NUMEROS ----
   Numero de painel se le em coluna, entao todo digito ocupa a mesma
   largura e o zero anda com corte. Sem isso a mesma quantia danca de
   posicao a cada atualizacao. */
.fl-numero,
.fl-tijolo__valor,
.fl-cartao-lead__valor {
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: "tnum" 1, "zero" 1;
}

/* ---- TIPOGRAFIA ----
   Antisserrilhado e o ajuste que faz texto claro sobre fundo escuro parar
   de parecer engordado. */
.dark body.fi-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- ETIQUETAS E SELOS ----
   Fundo tirado da propria cor, com borda da mesma familia. Antes o selo
   tinha fundo cinza fixo e a cor so aparecia no texto, o que fazia grave e
   leve terem o mesmo peso visual de longe. */
.dark .fl-etiqueta,
.dark .fl-marca-item,
.dark .fl-cartao-lead__marca {
    background: color-mix(in srgb, var(--fl-cor, var(--fl-fraco)) 12%, transparent);
    border-color: color-mix(in srgb, var(--fl-cor, var(--fl-fraco)) 30%, transparent);
}

/* ---- TABELAS ----
   Linha do cabecalho sem peso de caixa, e a linha do corpo acendendo de
   leve na passagem. */
.dark .fi-ta-header-cell {
    background: transparent;
    letter-spacing: .02em;
}
.dark .fi-ta-row:hover {
    background: color-mix(in srgb, var(--fl-marca) 6%, transparent);
}

/* ---- CAMPOS ----
   O campo deixa de ser uma caixa clara sobre fundo escuro, que e o padrao
   de formulario antigo, e passa a ser um rebaixo: mais escuro que a
   superficie, com o fio em volta. */
.dark .fi-input,
.dark .fi-select-input,
.dark .fi-fo-textarea textarea {
    background-color: rgba(2, 8, 20, .55);
    border-color: var(--fl-fio);
}
.dark .fi-input:focus,
.dark .fi-select-input:focus,
.dark .fi-fo-textarea textarea:focus {
    border-color: color-mix(in srgb, var(--fl-marca) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-marca) 16%, transparent);
}

/* ---- QUEM PREFERE MENOS MOVIMENTO ----
   Nao ha animacao aqui, mas as transicoes somem para quem pediu ao
   sistema operacional para reduzir movimento. */
@media (prefers-reduced-motion: reduce) {
    .dark *,
    .dark *::before,
    .dark *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* Os tres numeros de lead ocupam a faixa inteira e a dividem em tres, para
   caírem sempre na mesma linha. Sem isto a grade auto-fit os partia conforme
   a largura, e "Leads hoje" ficava numa fileira e o mes na seguinte. */
.fl-wi-numeros__faixa {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 560px) {
    .fl-wi-numeros__faixa { grid-template-columns: 1fr; }
}

/* A faixa da publicidade da casa, no topo da Projeção. Fica acima dos
   setores porque age sobre TODOS eles: botão que muda seis telas não pode
   morar dentro do bloco de uma. */
.proj-casa {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin-bottom: 14px; padding: 12px 15px;
    background: var(--fl-painel, #0f172a); border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
}
.proj-casa__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proj-casa__botoes { display: flex; gap: 8px; flex: none; }

/* A ESCOLHA DA PUBLICIDADE DA CASA.
   Abre por cima da faixa, na propria tela de projecao: quem escolhe a arte
   quer ver as seis televisoes ao lado enquanto escolhe. Duas colunas, "o
   que" e "onde", que e exatamente a pergunta que o painel faz. */
.proj-escolha {
    margin: -6px 0 14px; padding: 14px 15px;
    background: var(--fl-painel, #0f172a); border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
}
.proj-escolha__colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.proj-escolha__titulo { font-weight: 600; margin-bottom: 6px; }
.proj-escolha__setor { font-size: .78rem; opacity: .6; margin: 8px 0 2px; }
.proj-escolha__item { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.proj-escolha__intervalo { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .85rem; opacity: .85; }
.proj-escolha__intervalo input {
    width: 68px; padding: 3px 6px; border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, .3); background: transparent; color: inherit;
}
.proj-escolha__acoes { display: flex; gap: 8px; margin-top: 14px; }
.proj-escolha__titulo { display: flex; align-items: baseline; gap: 10px; }
.proj-escolha__atalhos { display: flex; gap: 8px; font-weight: 400; }
.proj-escolha__atalhos button {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: .78rem; color: var(--fl-acento, #38bdf8); text-decoration: underline;
}
.proj-escolha__noar {
    font-style: normal; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
    color: #22c55e; border: 1px solid rgba(34, 197, 94, .35); border-radius: 999px; padding: 0 6px;
}

/* UM ENDERECO PARA MANDAR AO CLIENTE, com botao de copiar.
 *
 * O link do briefing tem 48 caracteres de token. Ninguem le isso, so copia, e
 * selecionar a mao um endereco que quebra em duas linhas dentro de um modal e
 * onde se perde metade dele. Mesmo motivo do endereco das TVs na Projecao.
 *
 * O endereco fica visivel, e nao escondido atras do botao: quem manda por
 * WhatsApp confere o que esta mandando, e link que nao da para ver e link em
 * que nao se confia. */
.fl-copiar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-copiar__endereco {
    flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere;
    font-size: 12px; line-height: 1.5; color: var(--fl-fraco, #94a3b8);
}
.fl-copiar__botao {
    flex: none; cursor: pointer; font-size: 12px; font-weight: 600;
    padding: 5px 13px; border-radius: 999px; background: transparent;
    border: 1px solid var(--fl-marca, #38bdf8); color: var(--fl-marca, #38bdf8);
}
.fl-copiar__botao:hover { background: color-mix(in srgb, var(--fl-marca, #38bdf8) 15%, transparent); }

/* AS PECAS COM A ARTE A VISTA.
 *
 * A lista era de nomes, e nome nao diz que arte e: quem escolhe publicidade
 * escolhe olhando. As duas orientacoes aparecem juntas porque e isso que
 * decide quais paredes a peca cobre. */
.proj-pecas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin-top: 8px; }
.proj-peca {
    display: block; cursor: pointer; padding: 8px; border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .18); background: rgba(148, 163, 184, .04);
}
.proj-peca--marcada { border-color: var(--fl-marca, #38bdf8); background: color-mix(in srgb, var(--fl-marca, #38bdf8) 10%, transparent); }
.proj-peca input { float: right; }
.proj-peca__artes { display: flex; align-items: flex-start; gap: 6px; height: 74px; overflow: hidden; }
.proj-peca__arte { border-radius: 6px; background: #000; object-fit: cover; }
.proj-peca__arte--horizontal { width: 86px; height: 48px; }
.proj-peca__arte--vertical { width: 42px; height: 74px; }
.proj-peca__nome { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; }
.proj-peca__nome em { display: block; font-style: normal; font-size: 10.5px; opacity: .55; }

/* O envio de arte nova. */
.proj-envio__arquivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.proj-envio__campo { display: block; margin-top: 10px; font-size: 13px; }
.proj-envio__campo > span { display: block; margin-bottom: 5px; }
.proj-envio__campo > span em { font-style: normal; opacity: .55; font-size: 11.5px; }
.proj-envio__campo input[type=text] {
    width: 100%; max-width: 340px; padding: 6px 10px; border-radius: 8px; color: inherit;
    border: 1px solid rgba(148, 163, 184, .3); background: transparent;
}
.proj-envio__campo input[type=file] { font-size: 12px; }
.proj-envio__erro { color: #f87171; font-size: 12px; margin-top: 4px; }

/* ---------- a apresentação por e-mail ----------
   Janela estreita de propósito: são dois campos, e caixa larga com dois
   campos parece formulário pela metade. */
.at-apresentacao { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
    background: rgba(2, 6, 18, .72); padding: 22px; }
.at-apresentacao__caixa { width: min(560px, 100%); background: var(--fl-superficie-2);
    border: 1px solid var(--fl-borda); border-radius: 16px; padding: 22px; }
.at-apresentacao__campo { display: block; margin-top: 14px; }
.at-apresentacao__campo input,
.at-apresentacao__campo textarea { display: block; width: 100%; margin-top: 6px; font: inherit;
    font-size: 14px; color: inherit; background: rgba(2, 6, 18, .5);
    border: 1px solid var(--fl-borda); border-radius: 10px; padding: 11px 13px; }
.at-apresentacao__campo textarea { resize: vertical; line-height: 1.5; }
.at-apresentacao__campo input:focus,
.at-apresentacao__campo textarea:focus { outline: none; border-color: var(--fl-marca); }

/* ---------- a faixa do SOS ----------
   Classe própria e não uma terceira .proj-casa: as duas faixas de rotina são
   gêmeas, e uma terceira igual seria lida como "mais uma opção" -- sob pânico
   a pessoa clica na do meio. Ela também precisa ser achada sem rolagem, e por
   isso é o primeiro elemento da página. */
.proj-sos { border: 1px solid color-mix(in srgb, var(--fl-vermelho) 42%, transparent);
    background: color-mix(in srgb, var(--fl-vermelho) 9%, var(--fl-superficie));
    border-radius: var(--fl-raio); padding: 16px 18px; margin-bottom: var(--fl-gap); }
.proj-sos__linha { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.proj-sos__titulo { font-size: 16px; font-weight: 700; color: var(--fl-vermelho); letter-spacing: .01em; }
.proj-sos__nota { font-size: 12.5px; color: var(--fl-fraco); margin-top: 4px; max-width: 62ch; line-height: 1.5; }

/* O botão de segurar. A barra enche por dentro dele, para o olho entender que
   o gesto está em curso sem precisar de texto explicando. */
.proj-sos__disparar { position: relative; overflow: hidden; cursor: pointer;
    border: 0; border-radius: 999px; padding: 15px 30px; min-width: 250px;
    background: var(--fl-vermelho); color: #fff; font: inherit; font-size: 14px; font-weight: 700;
    letter-spacing: .06em;
    /* No celular, o toque longo abre menu de contexto e seleção, e o próprio
       navegador interromperia o gesto no meio. */
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.proj-sos__disparar:hover { filter: brightness(1.08); }
.proj-sos__enche { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.3); transition: width .06s linear; }
.proj-sos__rotulo { position: relative; }

.proj-sos--no-ar { border-color: var(--fl-vermelho); background: color-mix(in srgb, var(--fl-vermelho) 16%, var(--fl-superficie)); }
.proj-sos__desligar { background: var(--fl-vermelho); border-color: var(--fl-vermelho); color: #fff; font-weight: 700; }
.proj-sos__paredes { margin-top: 12px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.proj-sos__mudas { color: var(--fl-ambar); }
.proj-sos__aviso { margin-top: 8px; font-size: 11.5px; color: var(--fl-fraco); line-height: 1.5; max-width: 78ch; }

/* ---------- BASOFT Call: a tela de salas ----------
   "Melhora isso aqui, ta horrivel" (Danilo, 19/09/2026), e ele tinha razao.
   A primeira versao desenhava os campos com estilo em linha apontando para
   variaveis que NAO EXISTEM neste arquivo (--fl-linha, --fl-fundo): o
   navegador descarta a declaracao invalida e os campos ficaram sem borda e
   sem fundo, parecendo texto solto no meio do cartao.

   Aqui os campos usam as variaveis de verdade da casa, e o formulario vira
   uma grade que se comporta no celular. */
.call-form { display: grid; gap: 14px; max-width: 680px; }
.call-campo { display: block; }
.call-campo > span { display: block; font-size: 13px; color: var(--fl-fraco); margin-bottom: 6px; }
.call-campo input[type=text],
.call-campo input[type=number] {
    display: block; width: 100%; font: inherit; font-size: 14px; color: inherit;
    background: rgba(2, 6, 18, .45); border: 1px solid var(--fl-borda);
    border-radius: var(--fl-raio-s); padding: 11px 13px;
}
.call-campo input:focus { outline: none; border-color: var(--fl-marca); }
.call-campo--curto input { max-width: 120px; }
.call-erro { color: #f87171; font-size: 12.5px; margin-top: 5px; }

/* A linha de baixo: horas, a chave de gravar e o botao, alinhados pelo pe.
   No celular ela quebra e cada um ocupa a largura toda. */
.call-linha { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.call-chave { display: flex; gap: 9px; align-items: center; cursor: pointer; font-size: 14px;
    padding-bottom: 11px; user-select: none; }
.call-chave input { width: 17px; height: 17px; accent-color: var(--fl-marca); cursor: pointer; }

/* Cada sala aberta. A borda esquerda colorida e o mesmo recurso dos cartoes
   com acento do painel: de relance se ve onde uma sala comeca e outra
   termina, sem contar linhas. */
.call-sala { border: 1px solid var(--fl-borda); border-left: 3px solid var(--fl-marca);
    border-radius: var(--fl-raio); padding: 15px 16px; background: var(--fl-superficie); }
.call-sala + .call-sala { margin-top: 12px; }
.call-sala--grava { border-left-color: var(--fl-ambar); }
.call-sala__alto { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.call-sala__nome { font-weight: 700; font-size: 15px; }
.call-sala__meta { font-size: 12.5px; color: var(--fl-fraco); margin-top: 3px; line-height: 1.5; }
.call-sala__selo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--fl-ambar); border: 1px solid color-mix(in srgb, var(--fl-ambar) 45%, transparent);
    border-radius: 99px; padding: 2px 9px; margin-left: 8px; }
.call-sala__encerrar { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: 12.5px; color: var(--fl-fraco); }
.call-sala__encerrar:hover { color: var(--fl-vermelho); }
.call-sala__link { margin-top: 11px; }

/* Quem esta dentro vira ficha, e nao uma frase com virgulas: numa reuniao
   comecando, saber de relance quem ja chegou e o que importa. */
.call-gente { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.call-gente__vazio { font-size: 12.5px; color: var(--fl-fraco); }
.call-pessoa { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
    background: color-mix(in srgb, var(--fl-verde) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--fl-verde) 35%, transparent);
    border-radius: 99px; padding: 3px 11px 3px 8px; }
.call-pessoa__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--fl-verde); flex: none; }
.call-pessoa--casa { background: color-mix(in srgb, var(--fl-marca) 12%, transparent);
    border-color: color-mix(in srgb, var(--fl-marca) 32%, transparent); }
.call-pessoa--casa .call-pessoa__ponto { background: var(--fl-marca); }

/* As encerradas: lista seca, porque ela existe para consulta e nao para uso. */
.call-antigas { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.call-antigas td { padding: 9px 0; border-top: 1px solid var(--fl-borda); }
.call-antigas td + td { text-align: right; color: var(--fl-fraco); font-size: 12.5px; white-space: nowrap; }


/* A ata aberta: o texto de um lado, a transcricao do outro. No primeiro mes a
   transcricao fica A VISTA e nao escondida atras de um clique: quem le a ata
   precisa poder conferir de onde saiu cada combinado antes de confiar nela. */
.call-ata { margin-top:14px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr) minmax(0,340px); }
.call-transcricao { border-left:1px solid var(--fl-borda); padding-left:14px; max-height:420px; overflow-y:auto; }
.call-combinado { background:color-mix(in srgb, var(--fl-verde) 9%, transparent);
    border:1px solid color-mix(in srgb, var(--fl-verde) 28%, transparent);
    border-radius:10px; padding:10px 12px; font-size:13.5px; line-height:1.55; }
@media (max-width: 900px) {
    .call-ata { grid-template-columns:minmax(0,1fr); }
    .call-transcricao { border-left:0; padding-left:0; border-top:1px solid var(--fl-borda); padding-top:12px; }
}

/* ============================================================
 * CARA DE SISTEMA: A DENSIDADE (20/09/2026)
 *
 * "Quero mais cara de sistema" (Danilo). O que faz o Flow parecer
 * aplicativo em vez de sistema nao e o menu, e a densidade: item de menu
 * com 40px de cabecalho de grupo do MESMO tamanho de um item (por isso o
 * menu nao tinha hierarquia), 28px de vao entre grupos, 32px de vao entre
 * blocos de pagina. Aperta-se a moldura, nunca o texto que se le: o
 * Atendimento ja teve a mensagem encolhida demais uma vez e precisou
 * voltar.
 *
 * Os valores de fabrica citados vem do CSS publicado do Filament 5.7.6
 * (public/css/filament/filament/app.css), e nao de chute.
 * ============================================================ */

/* O cabecalho de grupo vira rotulo de secao, menor que o item, e nao um
   item a mais: 11px caixa alta com espacamento de letra. */
.fi-sidebar-group-btn { padding: 10px 8px 4px !important; }
.fi-sidebar-group-label {
    font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .08em;
}
/* 28px entre grupos vira 10px; 4px entre itens vira 1px. A hierarquia
   passa a vir do rotulo do grupo, nao do vao. */
.fi-sidebar-nav-groups { row-gap: 10px !important; }
.fi-sidebar-group-items { row-gap: 1px !important; }
.fi-sidebar-nav { padding-inline: 10px !important; padding-bottom: 10px !important; }
/* O item: 40px de fabrica para 32px, e o canto de 8px para 6px. */
.fi-sidebar-item-btn { padding-block: 5px !important; border-radius: 6px !important; }
.fi-sidebar-item-label { font-size: 13px !important; }

/* As paginas: menos ar entre os blocos e nas laterais. 32px viram 20px,
   o que devolve 24px de largura util de cada lado a partir de 1024px. */
.fi-page-content { row-gap: 20px !important; }
@media (min-width: 64rem) { .fi-main { padding-inline: 20px !important; } }
.fi-section-header { padding-block: 10px !important; }

/* ============================================================
 * O MENU NO TOPO (20/09/2026), quando a pessoa escolheu assim.
 *
 * O Filament poe a classe fi-body-has-top-navigation no corpo, e e so sob
 * ela que estas regras valem: quem ficou na lateral nao ve diferenca.
 *
 * Duas regras la de cima brigavam com o topo. O bloco do logo tinha a
 * largura da coluna (para alinhar com ela), e sem coluna isso comia 15rem
 * da barra antes do primeiro grupo. E a ordem das pecas mandava tudo que
 * nao fosse logo ou faixa de area para a direita, junto do sino; o menu,
 * que e filho direto da barra, ia junto. Aqui: logo 2, menu 3, faixa de
 * area 4, e o "auto" da faixa continua empurrando o sino para o fim.
 * ============================================================ */
@media (min-width: 1024px) {
    .fi-body-has-top-navigation .fi-topbar-start { width: auto; padding-left: 14px; padding-right: 8px; }
}
.fi-body-has-top-navigation .fi-topbar > .fi-topbar-nav-groups,
.fi-body-has-top-navigation .fi-topbar > *:has(> .fi-topbar-nav-groups) { order: 3; }
.fi-body-has-top-navigation .fi-topbar > .fl-area,
.fi-body-has-top-navigation .fi-topbar > *:has(> .fl-area) { order: 4; }
/* Sem coluna para descontar, a faixa de area encosta no menu com um respiro
   fixo, em vez da margem calculada sobre a largura da coluna. */
.fi-body-has-top-navigation .fl-area { margin-left: 18px; }
/* Os grupos do topo no mesmo tom da coluna: rotulo claro sobre o azul. */
.fi-body-has-top-navigation .fi-topbar-nav-groups .fi-dropdown-trigger,
.fi-body-has-top-navigation .fi-topbar-item-label { color: #eaf4ff !important; }

/* ============================================================
 * AS ABAS DAS TELAS ABERTAS (20/09/2026)
 *
 * A faixa fica colada logo abaixo da barra de cima (que e sticky em 0):
 * sticky em 4rem, para descer junto com a pagina em vez de rolar embora.
 * O Filament chumba 4rem de topo na coluna e no corpo; com a faixa
 * visivel, os dois descem a altura dela. So aparece com duas telas ou
 * mais (a partial poe a classe no body).
 * ============================================================ */
:root { --fl-abas-h: 38px; }
/* "Deixa uma separacao um pouco melhor" (Danilo, 20/09/2026): a primeira
   versao era texto colado em texto, e colado no fio tricolor de cima. Agora
   cada aba e uma LINGUETA, com fundo e borda proprios, apoiada na linha de
   baixo: a separacao vem da forma, e nao so do espaco. A faixa e mais escura
   do que as abas, para elas se destacarem, e as abas nascem alinhadas embaixo
   (flex-end) com 8px de respiro acima, que e o que as afasta do fio. A ativa
   e mais clara, sobe 2px e leva o fio da marca em cima. */
.fl-abas {
    display: none; position: sticky; top: 4rem; z-index: 25; height: var(--fl-abas-h);
    align-items: flex-end; gap: 6px; padding: 0 14px;
    /* SEM ROLAGEM: AS ABAS ENCOLHEM ATE CABER.
       "Nao quero que suma quando rola pra baixo, sera que da pra adaptar
       sempre ao tamanho da tela sem precisar rolar" (Danilo, 20/09/2026).
       Antes a faixa rolava na horizontal, e rolagem escondida e a pior das
       duas: a aba existe, ocupa lugar e nao esta na tela, entao quem abriu
       oito telas perdia as primeiras sem receber aviso nenhum de que elas
       ainda estavam la. Agora quem cede e a LARGURA de cada aba, que e o que
       sobra de graca: o nome corta com reticencias e o botao de fechar nunca
       corta, porque fechar e o que se procura numa aba apertada. */
    overflow: hidden;
    /* "Deixe uma linha fininha azul aqui" (Danilo, 20/09/2026): a linha em que
       as abas se apoiam passa a ser da cor da marca, e nao o cinza da borda.
       Um pixel so: e o chao das abas, nao uma faixa. */
    background: var(--fl-fundo-0);
    border-bottom: 1px solid color-mix(in srgb, var(--fl-marca) 70%, transparent);
}
body.fl-com-abas .fl-abas { display: flex; }
.fl-aba {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 14px;
    /* flex-shrink com base zero: todas cedem na mesma proporcao, em vez de a
       ultima aberta levar o aperto inteiro. O minimo de 76px e o ponto em que
       ainda se le uma palavra antes das reticencias. */
    flex: 0 1 auto; min-width: 76px; max-width: 220px;
    font-size: 12px; color: var(--fl-fraco); text-decoration: none; white-space: nowrap;
    background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0;
    border-radius: 8px 8px 0 0; border-top: 2px solid transparent;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.fl-aba:hover { color: #eaf4ff; background: rgba(255, 255, 255, .07); }
/* A ABA ATIVA NAO CRESCE, ELA ENCOSTA.
   "Da pra dar um efeito melhor da aba pulando" (Danilo, 20/09/2026). O pulo
   era literal: a ativa tinha 32px de altura contra 30px das outras, entao
   trocar de aba empurrava a faixa inteira dois pixels e o olho lia aquilo
   como tremor. Altura igual para todas, e o que marca a ativa passa a ser o
   que marca aba de verdade: ela e mais clara, leva o fio da marca em cima, e
   DESCE UM PIXEL para cobrir a linha azul da faixa, virando uma coisa so com
   o conteudo embaixo. E o gesto que diz "esta janela e a que esta aberta",
   sem mover nada de lugar. */
.fl-aba--ativa {
    color: #fff; font-weight: 600;
    background: var(--fl-fundo-2);
    border-color: rgba(255, 255, 255, .14); border-top-color: var(--fl-marca);
    margin-bottom: -1px; padding-bottom: 1px;
}
.fl-aba--ativa:hover { background: var(--fl-fundo-2); }
.fl-aba__nome { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fl-aba__fechar { flex: none; }
.fl-aba__fechar {
    border: 0; background: transparent; color: inherit; opacity: .55; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 2px 5px; margin-left: 2px; border-radius: 4px;
}
.fl-aba__fechar:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
@media (min-width: 1024px) {
    body.fl-com-abas .fi-sidebar {
        top: calc(4rem + var(--fl-abas-h)) !important;
        height: calc(100dvh - 4rem - var(--fl-abas-h)) !important;
    }
}
body.fl-com-abas .fi-main-ctn { min-height: calc(100dvh - 4rem - var(--fl-abas-h)); }

/* ============================================================
 * A TEMPERATURA NO RELOGIO DA LATERAL (20/09/2026)
 *
 * Terceira linha do relogio, e so quando ha resposta: sem ela o relogio fica
 * como sempre foi. E um botao porque clicar troca a cidade; o numero leva a
 * cor da marca, a cidade fica discreta e encurta com reticencias, porque
 * "Sao Jose dos Campos, Sao Paulo" nao cabe numa coluna de 15rem.
 * ============================================================ */
.fl-relogio__clima {
    margin-top: 6px; padding: 2px 8px; max-width: 100%;
    border: 0; border-radius: 6px; background: none; cursor: pointer;
    font: inherit; font-size: 12px;
    display: inline-flex; gap: 6px; align-items: baseline;
    color: color-mix(in srgb, currentColor 62%, transparent);
}
.fl-relogio__clima:hover { background: rgba(255, 255, 255, .07); }
.fl-relogio__clima b { font-size: 14px; font-weight: 600; color: var(--fl-marca); }
.fl-relogio__clima span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-relogio__cidade { margin-top: 6px; width: 100%; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.fl-relogio__cidade input {
    flex: 1; min-width: 0; padding: 4px 8px; font: inherit; font-size: 12px; color: inherit;
    background: rgba(0, 0, 0, .25); border: 1px solid rgba(148, 163, 184, .25); border-radius: 6px;
}
.fl-relogio__cidade button {
    padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; color: #02131f;
    background: var(--fl-marca); border: 0; border-radius: 6px;
}
.fl-relogio__cidade small { width: 100%; text-align: center; font-size: 11px; color: var(--fl-vermelho); }

/* ============================================================
 * O SELETOR DE PELE SAIU DA TELA (20/09/2026)
 *
 * Nasceu e morreu no mesmo dia: "deixe o vidro como padrao, e remova a
 * selecao de estilo". As medidas dele (.fl-peles) sairam junto, porque
 * estilo de elemento que nao se desenha mais e peso morto que o proximo
 * leitor gasta tempo entendendo. As sete peles continuam vivas em
 * public/css/peles/; quem explica como devolver a escolha e
 * App\Support\Painel\Pele.
 * ============================================================ */

/* ============================================================
 * AS TRES BARRAS DO PAINEL: menu, ferramentas e estado.
 *
 * O ESQUELETO MORA AQUI, E NAO NA PELE. Elas nasceram dentro do Tio Bill, em
 * 20/09/2026, e no mesmo dia o Danilo disse: "e legal ter no sistema do Tony
 * Stark tambem, essa funcionalidade e legal". Elas sao FUNCIONALIDADE, nao
 * enfeite: o contador somado por setor, que o menu do Filament nao consegue
 * mostrar, os atalhos de teclado e a barra de estado com o que esta pendente.
 * Entao a geometria e universal e cada pele so repinta.
 *
 * O QUE A PELE REPINTA sao estas medidas, e so elas. Uma pele que nao
 * redefina nenhuma continua legivel, porque todas tem padrao aqui:
 *
 *   --fl-b-face     o fundo das barras
 *   --fl-b-tinta    a letra
 *   --fl-b-fraca    a letra de apoio, na barra de estado
 *   --fl-b-linha    o fio que separa uma barra da outra
 *   --fl-b-luz      a aresta iluminada do relevo (transparente = sem relevo)
 *   --fl-b-sombra   a aresta escura do relevo
 *   --fl-b-realce   a cor do que esta ativo ou selecionado
 *   --fl-b-fundo    o fundo do que esta selecionado
 *   --fl-b-mal      o vermelho do que precisa de atencao
 *   --fl-b-canto    o raio do canto: 0 no Tio Bill, 6px no Tony Stark
 *
 * A ALTURA DAS BARRAS E UMA MEDIDA, nao um numero repetido: a faixa de abas
 * se apoia nela, e um numero solto em dois lugares sai de sincronia no
 * primeiro ajuste.
 * ============================================================ */
:root {
    /* 30px e a altura de UMA fileira: 25 do botao, 2 da borda dele, 2 do
       respiro da barra e 1 da linha de baixo. Eram 62 enquanto as acoes do
       dia tinham fileira propria; elas foram para a ponta direita desta
       mesma fileira em 20/09/2026 e a segunda altura deixou de existir.
       Este numero e o chao da faixa de abas: errado para mais, sobra um vao;
       errado para menos, a aba entra por baixo da barra. */
    --fl-barras-h: 30px;
    --fl-estado-h: 27px;

    --fl-b-face: #171d27;
    --fl-b-tinta: #e2e8f0;
    --fl-b-fraca: #94a3b8;
    --fl-b-linha: rgba(148, 163, 184, .18);
    --fl-b-luz: transparent;
    --fl-b-sombra: rgba(148, 163, 184, .22);
    --fl-b-realce: var(--fl-marca);
    --fl-b-fundo: rgba(14, 165, 233, .22);
    --fl-b-mal: #f87171;
    --fl-b-canto: 6px;
}

/* A BARRA DE CIMA E AS BARRAS SAO UMA SUPERFICIE SO.
   "Acho que nao precisa ter essa divisao aqui" (Danilo, 20/09/2026), com o
   print da linha entre uma e outra. Ele esta certo, e o motivo e estrutural:
   enquanto as barras eram de uma pele so, a barra de cima era o fim da pilha
   e a borda dela fazia sentido. Agora elas vem SEMPRE logo abaixo, entao
   aquela borda virou emenda no meio de uma peca, com o agravante de os dois
   fundos serem quase iguais, o que e a receita de costura aparecendo. */
.fi-topbar,
.fi-topbar > nav { border-bottom: 0 !important; box-shadow: none !important; }

/* SEM LINHA EMBAIXO. "Tire o danado dessa linha" (Danilo, 20/09/2026), e e a
   segunda vez no mesmo dia que ele pede para apagar uma costura aqui: antes
   foi a borda da barra de cima, agora a desta. O motivo e o mesmo, e eu e que
   demorei a entender: com o fio tricolor do Senna assinando o topo, toda
   linha horizontal a mais compete com ele. O que separa a barra do conteudo
   passa a ser so a diferenca de fundo, que ja basta. */
.fl-barras {
    position: sticky; top: 4rem;
    /* O MENU SUSPENSO PRECISA GANHAR DE TODA A PAGINA.
       "O menu tambem fica embolado e nao da pra ler" (Danilo, 20/09/2026),
       com o print do Financeiro aberto e os avatares da lista de conversas
       atravessados por cima dos itens.

       Nao era transparencia, era ORDEM. O suspenso mora dentro desta barra,
       entao o z-index dele so vale DENTRO daqui: com a barra em 26, nenhum
       filho dela consegue passar por cima de algo da pagina que esteja
       acima de 26, por mais alto que o numero do filho seja. Subindo a
       barra, o menu sobe junto. 40 fica acima da faixa de abas (25) e do
       conteudo, e abaixo dos 50 que o Filament usa em modal e notificacao,
       que e onde ele deve mesmo ficar por baixo. */
    z-index: 40;
    background: var(--fl-b-face);
    font-size: 12.5px;
}

/* ---------- barra de menu ---------- */
/* Sem flex-wrap: com as acoes do dia na mesma fileira, quebrar linha mudaria
   a altura da barra e a faixa de abas, que se apoia nela por uma medida fixa,
   ficaria flutuando. Em tela estreita as barras somem por inteiro, e a gaveta
   do Filament assume: ver o media query no fim deste bloco. */
.fl-menu { display: flex; align-items: center; padding: 1px 4px; }
.fl-menu__item { position: relative; }
.fl-menu__item > button {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font: inherit; color: var(--fl-b-tinta);
    background: none; border: 1px solid transparent; border-radius: var(--fl-b-canto);
    cursor: pointer;
}
.fl-menu__item > button:hover {
    border-color: var(--fl-b-luz) var(--fl-b-sombra) var(--fl-b-sombra) var(--fl-b-luz);
    background: rgba(255, 255, 255, .05);
}
.fl-menu__item > button.fl-menu__on {
    background: var(--fl-b-fundo); color: #fff;
    border-color: var(--fl-b-sombra) var(--fl-b-luz) var(--fl-b-luz) var(--fl-b-sombra);
}
/* O setor da tela em que a pessoa esta: sublinhado na cor da marca, que e o
   unico jeito de marcar sem brigar com o realce do menu aberto. */
.fl-menu__ativo { box-shadow: inset 0 -2px 0 var(--fl-b-realce); }
.fl-menu__item u { text-decoration: underline; text-underline-offset: 2px; }

.fl-conta {
    font-family: Consolas, 'Cascadia Mono', monospace;
    font-size: 10.5px; line-height: 1.5;
    padding: 0 5px; border-radius: var(--fl-b-canto);
    background: var(--fl-b-fundo); color: #dcf2ff;
}
.fl-conta--mal { background: #7f1d24; color: #ffdde0; }

.fl-suspenso {
    position: absolute; top: 100%; left: 0; z-index: 30;
    min-width: 248px;
    padding: 2px;
    background: var(--fl-b-face);
    border: 1px solid;
    border-color: var(--fl-b-luz) var(--fl-b-sombra) var(--fl-b-sombra) var(--fl-b-luz);
    border-radius: var(--fl-b-canto);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}
.fl-suspenso a {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 10px 5px 6px;
    color: var(--fl-b-tinta); text-decoration: none; white-space: nowrap;
    border-radius: calc(var(--fl-b-canto) - 2px);
}
.fl-suspenso a:hover { background: var(--fl-b-fundo); color: #fff; }
.fl-suspenso__on { box-shadow: inset 2px 0 0 var(--fl-b-realce); }
.fl-suspenso__icone { width: 16px; height: 16px; flex: none; opacity: .8; }
.fl-suspenso__icone svg { width: 16px; height: 16px; }
.fl-suspenso__nome { flex: 1; }

/* ---------- as acoes do dia, dentro da barra de menu ----------
   Elas tinham fileira propria ate 20/09/2026, com sete botoes e uma borda
   em cima. A fileira saiu inteira e elas passaram a viver na sobra da barra
   de menu, que estava vazia: a casa ganhou 32px de altura em toda tela.

   TRES ZONAS NA MESMA FILEIRA: setores a esquerda, o que se faz o dia todo
   no meio, a ferramenta de quem opera o sistema na ponta direita.

   O MEIO E CENTRALIZADO NA TELA, e nao no espaco que sobrou. Sao coisas
   diferentes: centralizar no espaco que sobra faz o bloco ANDAR toda vez
   que um setor aparece ou some do menu (e eles aparecem e somem conforme a
   permissao de quem entrou). Preso no meio da tela, ele fica sempre no
   mesmo lugar, para a mao saber onde procurar sem ler. Por isso e absoluto,
   e por isso a barra e position:relative. */
.fl-menu { position: relative; }
.fl-ferramentas { display: flex; align-items: center; gap: 1px; }
.fl-ferramentas--meio {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 0; bottom: 0;
}
.fl-ferramentas--fim { margin-left: auto; padding-right: 2px; }
.fl-ferramentas__botao {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    font-size: 12px; color: var(--fl-b-tinta); text-decoration: none;
    border: 1px solid transparent; border-radius: var(--fl-b-canto);
}
.fl-ferramentas__botao:hover {
    border-color: var(--fl-b-luz) var(--fl-b-sombra) var(--fl-b-sombra) var(--fl-b-luz);
    background: rgba(255, 255, 255, .05);
}
.fl-ferramentas__botao:active {
    border-color: var(--fl-b-sombra) var(--fl-b-luz) var(--fl-b-luz) var(--fl-b-sombra);
}
.fl-ferramentas__botao svg { width: 16px; height: 16px; opacity: .85; }
.fl-ferramentas__fio {
    width: 0; margin: 3px 5px;
    border-left: 1px solid var(--fl-b-sombra);
    border-right: 1px solid var(--fl-b-luz);
}

/* ---------- barra de estado ----------
   Ela e fixa no pe, entao TUDO o que chega ao fundo da tela precisa parar
   antes: o conteudo, e principalmente a coluna lateral, que termina no
   relogio. Sem isso a barra deitava por cima da temperatura (Danilo,
   20/09/2026: "suba mais essa parte de baixo"). */
.fl-estado {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 27;
    display: flex; gap: 3px;
    height: calc(var(--fl-estado-h) + env(safe-area-inset-bottom, 0px));
    align-items: center;
    padding: 0 5px env(safe-area-inset-bottom, 0px);
    background: var(--fl-b-face);
    border-top: 1px solid var(--fl-b-linha);
    font-size: 11.5px; color: var(--fl-b-fraca);
}
.fl-estado__painel {
    padding: 2px 9px;
    border: 1px solid;
    border-color: var(--fl-b-sombra) var(--fl-b-luz) var(--fl-b-luz) var(--fl-b-sombra);
    border-radius: var(--fl-b-canto);
    white-space: nowrap;
}
.fl-estado__largo { flex: 1; }
.fl-estado__mal { color: var(--fl-b-mal); }

.fi-main { padding-bottom: calc(var(--fl-estado-h) + 14px) !important; }
@media (min-width: 1024px) {
    .fi-sidebar {
        height: calc(100dvh - 4rem - var(--fl-estado-h)) !important;
        max-height: calc(100dvh - 4rem - var(--fl-estado-h)) !important;
    }
    /* Com as abas abertas a coluna ja comeca mais embaixo: desconta as duas. */
    body.fl-com-abas .fi-sidebar {
        height: calc(100dvh - 4rem - var(--fl-abas-h) - var(--fl-estado-h)) !important;
        max-height: calc(100dvh - 4rem - var(--fl-abas-h) - var(--fl-estado-h)) !important;
    }
}

/* A faixa de abas se apoia embaixo das barras, e nao embaixo da barra de
   cima: elas sao irmas no mesmo empilhamento grudado. */
.fl-abas { top: calc(4rem + var(--fl-barras-h)); }

@media (max-width: 1024px) {
    /* No celular o menu ja e a gaveta do Filament, e a barra de estado comeria
       a tela. As barras somem e o pe volta ao normal. */
    .fl-barras, .fl-estado { display: none; }
    .fi-main { padding-bottom: 0 !important; }
    .fl-abas { top: 4rem; }
}

/* ============================================================
 * O PAINEL CABE NUMA TELA SO (20/09/2026)
 *
 * "Eu queria que ajustasse sempre ao tamanho da tela, que nao precisasse
 * existir rolagem pra baixo, so em caso de extrema baixa resolucao."
 *
 * A REGRA E SIMPLES E A CONSEQUENCIA NAO: se a pagina nao rola, alguem tem
 * de rolar. Aqui quem rola sao as LISTAS dentro de cada cartao, e nao a
 * pagina. E a diferenca entre "nao cabe" e "cabe, e ha mais la dentro": o
 * cartao continua na tela, com o titulo, o total e o link de ver todas
 * sempre a vista, e o que anda e o miolo dele.
 *
 * SO NA DASHBOARD, pelo escopo do gancho que poe a marca .fl-encaixa. Tela
 * de tabela continua rolando, porque 500 linhas nao cabem em tela nenhuma
 * e fingir que cabem so esconde as ultimas.
 *
 * SO ACIMA DE 820px DE ALTURA, que e a "extrema baixa resolucao" que ele
 * abriu como excecao. Abaixo disso, espremer sete cartoes numa tela de
 * notebook velho transformaria cada um numa janelinha de tres linhas, e ai
 * rolar a pagina e honestamente melhor.
 *
 * A CONTA DA ALTURA soma o que ja e fixo na tela: a barra de cima (4rem), a
 * barra de menu, a faixa de abas quando ha abas, a barra de estado no pe, e
 * o respiro do proprio conteudo. Todos sao variaveis com dono unico, entao
 * mexer em qualquer barra reajusta isto sozinho.
 * ============================================================ */
@media (min-width: 1024px) and (min-height: 820px) {
    body:has(.fl-encaixa) {
        --fl-encaixa-tirar: calc(4rem + var(--fl-barras-h) + var(--fl-estado-h) + 26px);
    }
    body:has(.fl-encaixa).fl-com-abas {
        --fl-encaixa-tirar: calc(4rem + var(--fl-barras-h) + var(--fl-abas-h) + var(--fl-estado-h) + 26px);
    }

    body:has(.fl-encaixa) .fi-main {
        height: calc(100dvh - var(--fl-encaixa-tirar));
        max-height: calc(100dvh - var(--fl-encaixa-tirar));
        overflow: hidden;
        padding-bottom: 0 !important;
    }

    /* A pagina e a grade de widgets viram uma pilha que ocupa a altura toda.
       O min-height:0 se repete em cada degrau de proposito: basta um filho
       flex ou grid sem ele para a pilha inteira voltar a crescer com o
       conteudo, e o defeito reaparece sem aviso. */
    body:has(.fl-encaixa) .fi-page,
    body:has(.fl-encaixa) .fi-page > .fi-wi {
        display: flex; flex-direction: column;
        min-height: 0; height: 100%;
    }
    body:has(.fl-encaixa) .fi-wi-grid,
    body:has(.fl-encaixa) .fi-page > .fi-wi > .fi-grid {
        flex: 1 1 auto; min-height: 0; align-content: stretch;
    }
    body:has(.fl-encaixa) .fi-wi-grid > *,
    body:has(.fl-encaixa) .fi-page > .fi-wi > .fi-grid > * { min-height: 0; }

    /* Cada cartao guarda o cabecalho e solta o miolo: o titulo e o rodape
       ficam parados, e a lista de dentro e que rola. */
    body:has(.fl-encaixa) .fi-section {
        display: flex; flex-direction: column;
        min-height: 0; max-height: 100%;
    }
    body:has(.fl-encaixa) .fi-section-content-ctn,
    body:has(.fl-encaixa) .fi-section-content {
        min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    }
    /* A barra de rolagem de dentro fica fina e discreta: ela aparece em
       varios cartoes ao mesmo tempo, e no peso padrao viraria listra. */
    body:has(.fl-encaixa) .fi-section-content-ctn { scrollbar-width: thin; }

    /* A grade de numeros no alto da coluna da direita nao rola: ela e curta e
       de altura conhecida, e deixar sete numeros pularem seria o contrario do
       que este bloco existe para fazer. */
    body:has(.fl-encaixa) .fi-wi-stats-overview { flex: none; }
}

/* ============================================================
 * A SETA DE ABRIR A COLUNA, NA BORDA DO TRILHO (20/09/2026)
 *
 * "Bote a seta aqui do lado", com o print da seta solta no alto e o print do
 * trilho de icones logo em seguida.
 *
 * Ela nascia no cabecalho da coluna, acima dos icones, e de la dizia a coisa
 * errada: parecia um botao do cabecalho, e nao a aba que abre o trilho. Na
 * BORDA, no meio da altura, ela vira o gesto que ja e conhecido de qualquer
 * gaveta: puxar pela lateral. E deixa de comer uma linha inteira de altura no
 * alto, que era espaco gasto para nao dizer nada.
 *
 * SO COM A COLUNA RECOLHIDA: aberta, o Filament ja tem a seta de fechar no
 * cabecalho, e ela esta no lugar certo la.
 *
 * O `position: static` no cabecalho nao e enfeite: sem ele o absoluto abaixo
 * se ancora no cabecalho, que tem a altura do logo, e a seta ficaria no meio
 * DELE em vez de no meio da coluna.
 * ============================================================ */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header { position: static; }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-open-collapse-sidebar-btn {
        position: absolute;
        right: -13px; top: 50%; transform: translateY(-50%);
        z-index: 30;
        width: 26px; height: 26px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 999px;
        background: var(--fl-fundo-2, #101b30);
        border: 1px solid var(--fl-borda, rgba(148, 163, 184, .18));
        box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
        transition: background .15s, border-color .15s;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-open-collapse-sidebar-btn:hover {
        background: var(--fl-marca);
        border-color: var(--fl-marca);
        color: #02131f;
    }
    /* O icone dentro do botao encolhe junto: o tamanho "lg" que o Filament
       pede era para um botao de cabecalho, e estoura a bolinha. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-open-collapse-sidebar-btn svg { width: 15px; height: 15px; }
}

/* O RELOGIO ANTES DO SINO, E O SINO COLADO NA BOLA.
   "O sino e do lado do DG" (Danilo, 20/09/2026). A primeira tentativa foi por
   ordem de flex aqui, e ela nunca pegou: a regra mirava filho DIRETO da barra
   de cima, e o relogio esta um nivel mais fundo, dentro do bloco da ponta.
   Quem resolveu foi trocar o gancho no FlowPanelProvider, que e onde a ordem
   de verdade se decide. Fica o registro para ninguem tentar de novo por CSS. */

/* A BARRA DE CIMA FICA PRESA, COMO AS OUTRAS DUAS.
   "Quando rola pra baixo esse sobe, queria que ja ficasse fixo ali" (Danilo,
   20/09/2026).

   A faixa de abas e a barra de menu ja sao grudadas em 4rem, ou seja, as duas
   assumem que a barra de cima ocupa os primeiros 4rem da tela e fica la. So
   que a barra de cima nao era grudada: ela subia com a pagina, e as outras
   duas ficavam paradas no ar, com o conteudo passando por tras do vao que ela
   deixou. Quem estava certo eram as duas de baixo; faltava a de cima cumprir
   o que elas ja esperavam dela.

   41 e um a mais do que as barras: a de cima nunca fica por baixo da de
   menu, e os suspensos, que abrem para baixo, continuam passando por cima do
   conteudo. */
.fi-topbar {
    position: sticky; top: 0; z-index: 41;
}

/* O QUADRO DO BASOFT CUT.
   A altura desconta o que ja e fixo na tela, pelas mesmas variaveis que o
   resto do painel usa: barra de cima, barra de menu, faixa de abas quando ha
   abas, barra de estado e o respiro do conteudo. Sem isso o quadro ou sobra
   para fora da tela, e ai sao duas rolagens brigando, ou fica baixo demais
   para caber a fila do cortador. */
.fl-cut {
    height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-estado-h) - 96px);
    min-height: 460px;
    border: 1px solid var(--fl-borda);
    border-radius: 12px;
    overflow: hidden;
    background: var(--fl-fundo-1);
}
body.fl-com-abas .fl-cut {
    height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-abas-h) - var(--fl-estado-h) - 96px);
}
.fl-cut iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
 * O TOPO INTEIRO FICA PARADO (20/09/2026)
 *
 * "Quero que isso aqui ja fique como padrao e nao suma na rolagem, de um
 * talento na usabilidade."
 *
 * Sao tres faixas grudadas uma sob a outra: a barra de cima em 0, a barra de
 * menu em 4rem, a faixa de abas logo abaixo dela. Elas ja eram sticky, e o
 * que faltava era o acabamento, que e o que separa "funciona" de "nao
 * incomoda". Quatro coisas:
 *
 * 1. FUNDO OPACO NAS TRES. Sticky nao e opaco por natureza: onde a faixa era
 *    translucida, o conteudo passava por tras e as letras da barra ficavam
 *    sobre o texto da pagina por um instante a cada rolagem. Numa pele de
 *    vidro isso e ainda mais visivel, porque a pele ja pede transparencia.
 *
 * 2. ROLAGEM QUE PARA ANTES DO TOPO. Quem clica num link interno, ou aperta
 *    Home, ia parar com o comeco do conteudo ESCONDIDO atras das tres
 *    faixas. O scroll-padding-top reserva a altura delas, e o navegador
 *    passa a encostar o alvo logo abaixo do topo, e nao debaixo dele.
 *
 * 3. A ABA ATIVA SEMPRE A VISTA. Com oito telas abertas, a atual podia estar
 *    encolhida ate o minimo e no fim da fila. Ela ganha um pouco mais de
 *    largura que as outras: e a unica que a pessoa precisa ler inteira.
 *
 * 4. NADA DE SALTO. A faixa de abas passou a existir com uma aba so (ver a
 *    partial): a altura do topo e a mesma o dia inteiro.
 * ============================================================ */
.fi-topbar,
.fl-barras,
.fl-abas {
    /* color-mix com 100% do proprio fundo: opaco, mas continua herdando a cor
       que a pele escolheu, em vez de eu chumbar uma aqui. */
    backdrop-filter: none;
}
.fi-topbar { background-color: var(--fl-fundo-1) !important; }
.fl-abas { background-color: var(--fl-fundo-0) !important; }

html {
    scroll-padding-top: calc(4rem + var(--fl-barras-h) + 12px);
}
body.fl-com-abas {
    scroll-padding-top: calc(4rem + var(--fl-barras-h) + var(--fl-abas-h) + 12px);
}

.fl-aba--ativa { min-width: 120px; }

/* ============================================================
 * A COLUNA LATERAL COMECA ABAIXO DAS TRES FAIXAS (20/09/2026)
 *
 * "Isso aqui rola junto pra cima e nao precisa, ele pode ficar fixo", com o
 * print do trilho de icones com o primeiro deles sumindo atras da barra de
 * menu.
 *
 * ERRO DE CONTA MEU, e vale escrever para nao voltar. Quando as barras
 * nasceram dentro de uma pele, eu portei a geometria da coluna como estava:
 * ela comecava em 4rem, logo abaixo da barra de cima, e as barras ficavam por
 * cima dela, escondendo o comeco. Enquanto elas tinham 62px e apareciam so
 * para quem escolhia a pele, ninguem notou. Agora elas valem sempre, e a
 * faixa de abas tambem, entao o topo real da tela e:
 *
 *     4rem (barra de cima) + 30px (barra de menu) + 38px (faixa de abas)
 *
 * e a coluna precisa comecar exatamente ali. Como as tres sao variaveis com
 * dono unico, mexer em qualquer uma reajusta a coluna sozinha.
 *
 * ESTAS REGRAS VEM DEPOIS das outras de proposito: elas corrigem contas
 * escritas antes neste mesmo arquivo, e em CSS quem vem depois manda.
 * ============================================================ */
@media (min-width: 1024px) {
    .fi-sidebar,
    body.fl-com-abas .fi-sidebar {
        top: calc(4rem + var(--fl-barras-h) + var(--fl-abas-h)) !important;
        height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-abas-h) - var(--fl-estado-h)) !important;
        max-height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-abas-h) - var(--fl-estado-h)) !important;
    }

    /* Sem abas abertas a faixa nao existe, e a coluna sobe os 38px dela.
       Hoje isto quase nao acontece, porque a faixa aparece com uma aba so;
       vale para a tela inicial, onde nao ha aba nenhuma. */
    body:not(.fl-com-abas) .fi-sidebar {
        top: calc(4rem + var(--fl-barras-h)) !important;
        height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-estado-h)) !important;
        max-height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-estado-h)) !important;
    }
}

/* ============================================================
 * OS QUATRO NUMEROS DA CASA, NA BARRA DE CIMA (20/09/2026)
 *
 * Cada um e um par: rotulo pequeno em cima da linha de base e numero em
 * negrito. Deitados, e nao empilhados como o relogio, porque sao quatro: em
 * duas linhas eles virariam um bloco e competiriam com o titulo da tela.
 *
 * O ZERO FICA APAGADO, e nao escondido. "Acontece hoje: 0" e informacao boa,
 * e some significa outra coisa: que o numero nao foi calculado ou que a
 * pessoa nao pode ve-lo. Apagado ele continua dizendo "conferi, e nao tem",
 * sem puxar o olho.
 *
 * O FIO separa o que e da agenda do que e de venda: sao quatro numeros
 * seguidos e sem ele "7 dias 4" e "7 dias 20" pareceriam a mesma medida.
 * ============================================================ */
.fl-numeros { display: flex; align-items: center; gap: 12px; margin-right: 16px; }
.fl-numero {
    display: flex; align-items: baseline; gap: 5px;
    text-decoration: none; white-space: nowrap;
    color: var(--fl-fraco);
    transition: color .15s;
}
.fl-numero:hover { color: #eaf4ff; }
.fl-numero__rotulo { font-size: 10.5px; letter-spacing: .02em; }
.fl-numero b { font-size: 14px; font-weight: 700; color: var(--fl-marca); font-variant-numeric: tabular-nums; }
/* Lead e dinheiro entrando: verde, a mesma cor que o painel ja usa para o
   que e bom. Agenda e ocupacao, e fica no azul da marca. */
.fl-numero--lead b { color: var(--fl-verde); }
.fl-numero--zero b { color: var(--fl-fraco); opacity: .7; }
.fl-numeros__fio {
    width: 1px; height: 16px; flex: none;
    background: var(--fl-borda);
}

/* Barra apertada: primeiro saem os rotulos, e os numeros continuam, porque o
   title do link ainda explica cada um. Depois some o bloco inteiro, que e a
   informacao mais dispensavel da barra. */
@media (max-width: 1500px) { .fl-numero__rotulo { display: none; } }
@media (max-width: 1180px) { .fl-numeros { display: none; } }

/* ============================================================
 * A SETA NA COLUNA, AS ABAS NA MESMA FAIXA, E O TRILHO (20/09/2026)
 * ============================================================ */

/* ---------- a seta da barra de cima sai ----------
   A coluna ganhou a propria seta (partial alternar-coluna). A do Filament,
   ao lado do logo, fica escondida so no computador: no celular o botao da
   gaveta continua sendo o dele, e e outro botao. */
@media (min-width: 1024px) {
    .fi-topbar-collapse-sidebar-btn-ctn { display: none !important; }
}

/* ---------- a seta do lado de fora da coluna ----------
   "Essa seta quero do lado de fora e o menu comecando la em cima" (Danilo,
   20/09/2026). Ela morava no alto da coluna e empurrava o menu uma linha
   para baixo. Agora e uma lingueta presa na borda de FORA da coluna: nao
   ocupa altura nenhuma, e o primeiro item do menu sobe para o topo.

   Por que absolute funciona aqui sem ser cortada pela rolagem do menu: o
   bloco que posiciona a lingueta e a propria .fi-sidebar (grudada, entao
   posicionada), e nao a .fi-sidebar-nav que rola. O overflow da nav so
   corta quem tem nela o bloco de posicionamento. */
@media (min-width: 1024px) {
    .fi-sidebar { position: sticky; }
    .fi-sidebar-nav { position: static !important; }
}
.fl-alternar { position: static; height: 0; padding: 0; margin: 0; }
.fl-alternar__botao {
    position: absolute; z-index: 40;
    top: 14px; left: 100%;
    width: 20px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0 10px 10px 0; cursor: pointer;
    color: var(--fl-fraco);
    background: var(--fl-painel, #13233f);
    border: 1px solid rgba(14, 165, 233, .45);
    border-left: none;
    box-shadow: 4px 2px 10px rgba(0, 0, 0, .25);
    transition: background .15s, color .15s, width .15s;
}
.fl-alternar__botao:hover {
    color: #eaf4ff;
    width: 24px;
}
.fl-alternar__botao svg { width: 14px; height: 14px; transition: transform .2s; }
.fi-sidebar-nav { padding-top: 12px !important; }
@media (max-width: 1023px) { .fl-alternar { display: none; } }

/* ---------- as abas dentro da faixa da barra de menu ----------
   Elas deixaram de ser uma faixa grudada propria: vivem dentro de .fl-barras,
   que e a peca grudada. Por isso nao tem mais position nem top proprios. */
.fl-barras .fl-abas { position: static !important; top: auto !important; }

/* No celular a barra de menu some (a gaveta do Filament faz esse papel), mas
   as abas continuam: esconder a faixa inteira levaria as abas junto. */
@media (max-width: 1024px) {
    .fl-barras { display: block !important; position: sticky; top: 4rem; }
    .fl-barras .fl-menu { display: none !important; }
}

/* ---------- a barra de cima por cima das barras ----------
   O Filament grava a barra de cima em z-index 30, e a barra de menu esta em
   40. Isso punha o balao de trocar a cidade do relogio e o painel do sino,
   que abrem para baixo, POR TRAS da barra de menu. A barra de cima sobe para
   45: continua abaixo dos modais do Filament (50). */
.fi-topbar-ctn { z-index: 45 !important; }

/* ---------- o trilho de icones ----------
   "Os icones da pra melhorar" (Danilo, 20/09/2026). Cada setor era uma caixa
   cinza do tamanho da coluna, e seis caixas iguais empilhadas liam como uma
   tabela, e nao como seis botoes. Agora:
   - sem caixa de fundo no grupo: quem tem forma e o BOTAO, 42px, canto 12px;
   - icone um pouco maior e mais claro, porque ele e a unica informacao ali;
   - o setor da tela atual ganha a cor da marca e um risco na borda esquerda,
     que e onde o olho procura "onde estou" numa coluna;
   - o nome aparece no balao ao parar o mouse, como o Filament ja faz. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups { row-gap: 6px !important; align-items: center; }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn {
        position: relative;
        width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto;
        border-radius: 12px;
        color: #aab6cc;
        background: transparent;
        transition: background .15s, color .15s;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, .08);
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn svg {
        width: 22px; height: 22px; stroke-width: 1.6;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn {
        color: var(--fl-marca);
        background: color-mix(in srgb, var(--fl-marca) 14%, transparent);
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn::before {
        content: "";
        position: absolute; left: -9px; top: 10px; bottom: 10px;
        width: 3px; border-radius: 0 3px 3px 0;
        background: var(--fl-marca);
    }
}

/* ============================================================
 * SEM BARRA DE ROLAR QUANDO NAO HA O QUE ROLAR (20/09/2026)
 *
 * "Quando nao tiver necessidade nao quero que apareca barra pra rolar a
 * tela." Ela aparecia na Agenda com meia tela vazia embaixo, o que e o
 * sintoma classico de uma conta de altura errada, e a conta era minha.
 *
 * O miolo do Filament pede 100dvh menos a barra de cima. Isso valia quando a
 * barra de cima era a unica coisa acima dele. Depois empilhei a barra de menu
 * (30px) e a faixa de abas (38px) em cima, e prendi a barra de estado (27px)
 * no pe: a pagina passou a pedir 95px a mais do que a janela tem, e o
 * navegador ofereceu a rolagem para 95px de nada.
 *
 * Agora a conta desconta tudo o que e fixo. As tres sao variaveis com dono
 * unico, entao mexer em qualquer barra reajusta isto sozinho, e e por isso
 * que elas sao variaveis e nao numeros soltos.
 * ============================================================ */
.fi-main-ctn {
    min-height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-estado-h)) !important;
}
body.fl-com-abas .fi-main-ctn {
    min-height: calc(100dvh - 4rem - var(--fl-barras-h) - var(--fl-abas-h) - var(--fl-estado-h)) !important;
}

/* ============================================================
 * A LISTA DE TAREFAS DO EVENTO, MAGRA (20/09/2026)
 *
 * "Melhore isso", com o print de tres tarefas ocupando meia tela.
 *
 * Duas causas. A primeira era codigo e ja foi: o repetidor dizia
 * reorderable(false) e religava o arrastar tres linhas abaixo, entao cada
 * tarefa carregava uma alca que ninguem usa. A segunda e esta: o Filament
 * desenha um cabecalho de altura cheia por item, para caber as acoes, e com
 * uma acao so (apagar) aquela faixa e quase toda ar.
 *
 * Aqui ela encolhe. Nao some: o botao de apagar precisa continuar alcancavel,
 * e esconder o que apaga e pior do que uma faixa gorda. Encolhe o respiro, e
 * o item passa de tres alturas de linha para pouco mais de uma.
 *
 * Vale para todo repetidor do painel, e nao so para as tarefas: o mesmo
 * desperdicio acontece nos itens de orcamento e nos blocos da vitrine.
 * ============================================================ */
.fi-fo-repeater-item-header {
    padding-block: 4px !important;
    min-height: 0 !important;
}
.fi-fo-repeater-item-header .fi-icon-btn { --size: 28px; }
.fi-fo-repeater-item > .fi-fo-repeater-item-content { padding-top: 6px !important; }
/* Uma tarefa embaixo da outra respira menos: sao linhas de uma lista, e nao
   cartoes independentes. */
.fi-fo-repeater-items { gap: 6px !important; }

/* ============================================================
 * A PILULA LH: LEADS DE HOJE, COM A COR DO DIA (20/09/2026)
 *
 * "Coloque como LH num formato assim", com o desenho de uma pilula SOS:
 * fundo escuro translucido, borda na cor, ponto aceso a esquerda e rotulo
 * em negrito. A cor sai de uma variavel so por faixa, e o ponto, a borda e o
 * brilho leem dela: trocar a cor de uma faixa e uma linha.
 *
 * Faixas (decididas em NumerosDaBarra::faixa): ate 5 vermelho, 6 a 10
 * amarelo, 11 a 15 verde, 16 ou mais azul.
 * ============================================================ */
.fl-lh {
    --lh: #f43f5e;
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 12px 0 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--lh) 55%, transparent);
    background: color-mix(in srgb, var(--lh) 12%, rgba(0, 0, 0, .35));
    text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.fl-lh:hover {
    background: color-mix(in srgb, var(--lh) 22%, rgba(0, 0, 0, .35));
    border-color: var(--lh);
}
.fl-lh--vermelho { --lh: #f43f5e; }
.fl-lh--amarelo  { --lh: #facc15; }
.fl-lh--verde    { --lh: #22c55e; }
.fl-lh--azul     { --lh: #38bdf8; }

/* O ponto aceso: a cor cheia no meio e um halo em volta, que e o que da a
   sensacao de luz de painel em vez de bolinha pintada. */
.fl-lh__ponto {
    width: 9px; height: 9px; flex: none; border-radius: 50%;
    background: var(--lh);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lh) 28%, transparent),
                0 0 8px color-mix(in srgb, var(--lh) 70%, transparent);
}
.fl-lh__rotulo {
    font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #fff;
}
.fl-lh__numero {
    font-size: 13px; font-weight: 800; color: #fff;
    font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
    /* O vermelho pulsa devagar: e a unica faixa que pede acao, e o pulso e o
       que faz ela ser notada no canto da tela sem precisar de alarme. */
    .fl-lh--vermelho .fl-lh__ponto { animation: fl-lh-pulso 2.4s ease-in-out infinite; }
}
@keyframes fl-lh-pulso {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lh) 28%, transparent), 0 0 6px color-mix(in srgb, var(--lh) 60%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--lh) 18%, transparent), 0 0 12px color-mix(in srgb, var(--lh) 85%, transparent); }
}

/* ---------- a marca no vao do painel inicial (20/09/2026) ----------
   "Coloque o logo da BASOFT aqui." Assinatura discreta, centrada no espaco
   ao lado das TVs: simbolo grande, brilho azul atras, nome espacado. */
.fl-marca-da-casa {
    height: 100%; min-height: 260px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; position: relative; user-select: none;
}
.fl-marca-da-casa::before {
    content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, .18), transparent 65%);
    pointer-events: none;
}
.fl-marca-da-casa img {
    position: relative; width: 120px; height: 120px; object-fit: contain;
    filter: drop-shadow(0 0 24px rgba(14, 165, 233, .45));
}
.fl-marca-da-casa__nome {
    position: relative; font-weight: 800; font-size: 20px;
    letter-spacing: .55em; margin-right: -.55em; color: #eaf4ff; opacity: .85;
}

/* ---------- as TVs na largura toda (21/09/2026) ----------
   "Que tal ocupar todo esse espaco e deixar maior e mais legivel." A grade
   ocupa o cartao inteiro, mas a largura tem teto pela altura da janela: a
   TV em pe tem altura = largura x 16 / soma das partes, entao limitar a
   largura a (altura disponivel x partes / 16) segura a TV em pe dentro da
   tela, sem rolagem. */
.fl-wi-telas .fl-tvzinhas {
    gap: 18px 24px; padding: 20px 28px 22px;
    max-width: min(100%, calc((100dvh - 430px) * var(--partes, 75) / 16 + 56px));
    min-width: min(100%, 720px);
    margin: 0 auto;
}
.fl-wi-telas .fl-tvzinha__nome { font-size: 14.5px; margin-top: 10px; }
.fl-wi-telas .fl-tvzinha__formato { font-size: 12px; }
.fl-wi-telas .fl-tvzinha__palco { border-radius: 9px; }

/* A marca no rodape, grande e branca (21/09/2026). Passou uma hora como
   marca d'agua pequena e apagada, e voltou: "o logo branco tava melhor, o
   que tava maior". So a altura minima baixou, para caber sem rolar. */
.fl-marca-da-casa { min-height: 200px; padding: 12px 0 4px; }

/* ---------- frases do Senna no vao da barra (21/09/2026) ----------
   Ocupa o espaco que sobra entre o nome da tela e os numeros, centrada,
   numa linha so. Amarelo do capacete nas aspas, o resto discreto: e
   inspiracao de fundo, nao aviso. Some em tela estreita, onde nao ha vao. */
.fl-senna {
    flex: 1 1 auto; min-width: 0;
    display: flex; justify-content: center; align-items: center;
    padding: 0 18px; overflow: hidden;
}
.fl-senna__frase {
    display: block; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px; font-style: italic; color: rgba(226, 240, 255, .78);
    transition: opacity .7s ease, transform .7s ease;
}
.fl-senna__frase--some { opacity: 0; transform: translateY(4px); }
.fl-senna__aspas { color: #facc15; font-weight: 700; font-style: normal; font-size: 15px; padding: 0 2px; }
.fl-senna__autor {
    font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    color: rgba(250, 204, 21, .75); margin-left: 8px;
}
@media (max-width: 1100px) { .fl-senna { display: none; } }
/* Grande, e apagada em cinza, acendendo em branco sob o mouse: "ele
   daquele jeito cinza acendendo em branco quando passa o mouse ficou legal"
   (21/09/2026). */
.fl-marca-da-casa { opacity: .4; filter: grayscale(1); transition: opacity .35s, filter .35s; }
.fl-marca-da-casa:hover { opacity: 1; filter: none; }

/* ---------- o "onde estou" na faixa preta (21/09/2026) ----------
   A faixa das abas passa a ser a peca de fora: fundo, fio azul e altura sao
   dela, e dentro ficam o nome da tela a esquerda e as abas no resto. */
.fl-faixa {
    display: none; align-items: stretch; height: var(--fl-abas-h);
    background: var(--fl-fundo-0);
    border-bottom: 1px solid color-mix(in srgb, var(--fl-marca) 70%, transparent);
}
body.fl-com-abas .fl-faixa { display: flex; }
.fl-faixa .fl-area {
    flex: none; align-self: center; margin: 0 !important;
    padding: 0 16px 0 18px; max-width: 34%;
    border-right: 1px solid rgba(255, 255, 255, .08);
    height: 22px;
}
.fl-faixa .fl-abas {
    flex: 1 1 auto; min-width: 0; height: 100%;
    background: transparent !important; border-bottom: none !important;
}

/* ---------- Atender e Agenda mais a direita, com cor (21/09/2026) ----------
   "Agenda e Atender pode chegar mais para o lado direito pra que possa
   expandir o menu, e no icone deixe o do chat de verdinho e o calendario da
   agenda em azul" (Danilo). Saem do meio fixo e encostam na ponta direita,
   logo antes de Call/Suporte/WhatsApp: o menu dos setores ganha a largura
   toda que sobra. A cor fica so no icone, para destacar sem gritar. */
.fl-ferramentas--meio {
    position: static !important; transform: none !important;
    margin-left: auto; padding-right: 10px;
}
.fl-ferramentas--meio + .fl-ferramentas--fim {
    margin-left: 0; padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .10);
}
.fl-ferramentas__botao--atender svg { color: #22c55e; opacity: 1; }
.fl-ferramentas__botao--agenda svg { color: #38bdf8; opacity: 1; }

/* ---------- os botoes dos cortadores no BASOFT Cut (21/09/2026) ---------- */
.fl-cortadores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fl-cortadores__botao {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: #cbd5e1; background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .22);
    transition: background .15s, border-color .15s, color .15s;
}
.fl-cortadores__botao:hover { color: #fff; border-color: var(--fl-marca); }
.fl-cortadores__botao--ativo {
    color: #fff; background: color-mix(in srgb, var(--fl-marca) 22%, transparent);
    border-color: var(--fl-marca);
}

/* ---------- a frase no meio, os elementos no canto (21/09/2026) ----------
   "Deixe os elementos no canto e a frase no meio." Com o "onde estou" indo
   para a faixa das abas, nada mais empurrava o LH, o relogio, o sino e o DG
   para a direita. Eles voltam ao canto, e a frase fica centrada na barra
   inteira, fora do fluxo, com teto de largura para nunca passar por baixo
   deles. Um pouco mais acesa: na primeira versao ela quase sumia no fundo. */
.fi-topbar { position: relative; }
.fi-topbar-end { margin-left: auto !important; position: relative; z-index: 1; }
.fl-senna {
    position: absolute; left: 50%; top: 0; bottom: 0;
    transform: translateX(-50%);
    width: min(46vw, 760px); padding: 0; pointer-events: none;
}
.fl-senna__frase { font-size: 14px; color: rgba(234, 244, 255, .92); }
.fl-senna__autor { color: #facc15; }

/* O "onde estou" com largura FIXA (21/09/2026): "deixe o espacamento que
   caiba onde a pessoa esta pra nao ficar movendo o menu para um lado ou para
   o outro". Cada tela tinha um nome de tamanho diferente e as abas pulavam
   junto. Agora o bloco tem sempre a mesma largura, pensada para o nome mais
   comprido que existe hoje; se aparecer um maior, ele corta com reticencias
   em vez de empurrar as abas. */
.fl-faixa .fl-area { flex: 0 0 360px; width: 360px; max-width: none; min-width: 0; overflow: hidden; }
.fl-faixa .fl-area__tela { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-faixa .fl-area__grupo, .fl-faixa .fl-area__seta { flex: none; }
@media (max-width: 900px) { .fl-faixa .fl-area { flex-basis: 220px; width: 220px; } }

/* ---------- a frase em duas linhas, com a volta embaixo (21/09/2026) ----------
   Em cima a frase; embaixo, pequena, a melhor volta que marca o tempo dela;
   e um fio amarelo que anda como a volta. */
.fl-senna__frase { display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: normal; }
.fl-senna__linha { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-senna__volta {
    font-style: normal; font-size: 10.5px; letter-spacing: .02em;
    color: rgba(203, 213, 225, .72); white-space: nowrap;
}
.fl-senna__volta b { color: #facc15; font-weight: 700; }
.fl-senna__tempo { font-variant-numeric: tabular-nums; }
.fl-senna__fio {
    display: block; width: 140px; height: 2px; border-radius: 2px;
    background: rgba(250, 204, 21, .15); overflow: hidden;
}
.fl-senna__fio > span { display: block; height: 100%; background: #facc15; transition: width .5s linear; }

/* ---------- o setor em uso aceso em azul (21/09/2026) ----------
   "Deixe o menu que esta em uso iluminado em azul, com um destaque maior
   sobre os demais." Antes era so um risco embaixo, que se perdia entre os
   outros. Agora o setor da tela atual e uma pilula azul acesa, com brilho,
   na barra de cima; e na coluna o cabecalho do grupo dele acende junto. */
.fl-menu__ativo {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(56, 189, 248, .38), rgba(14, 165, 233, .22)) !important;
    border: 1px solid rgba(56, 189, 248, .75) !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, .45), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    border-radius: 9px;
}
.fl-menu__ativo u { text-decoration-color: #fff; }
.fi-sidebar-group.fi-active > .fi-sidebar-group-btn,
.fi-sidebar-group:has(.fi-sidebar-item.fi-active) > .fi-sidebar-group-btn {
    background: linear-gradient(90deg, rgba(56, 189, 248, .28), rgba(56, 189, 248, .06)) !important;
    border-radius: 10px;
    box-shadow: inset 3px 0 0 #38bdf8;
}
.fi-sidebar-group:has(.fi-sidebar-item.fi-active) > .fi-sidebar-group-btn .fi-sidebar-group-label,
.fi-sidebar-group:has(.fi-sidebar-item.fi-active) > .fi-sidebar-group-btn .fi-sidebar-group-icon {
    color: #e0f2fe !important;
}

/* ---------- o LH ao lado do Atender (21/09/2026) ----------
   "Proporcional a ele": mesma altura e mesma letra dos botoes da barra. */
.fl-ferramentas .fl-numeros { margin: 0 6px 0 0; gap: 0; display: flex; }
.fl-ferramentas .fl-lh { height: 24px; padding: 0 9px 0 7px; gap: 5px; font-size: 12px; }
.fl-ferramentas .fl-lh__ponto { width: 7px; height: 7px; }
.fl-ferramentas .fl-lh__rotulo, .fl-ferramentas .fl-lh__numero { font-size: 12px; }
@media (max-width: 1180px) { .fl-ferramentas .fl-numeros { display: flex; } }