/* Identidade Master Cargas Brasil
   verde institucional #318B4D · verde escuro #284C34 · grafite #23282C
   ouro da marca #FFD200 · fundo #F4F6F5 — lidos do site do cliente. */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EDF1EE; }
::-webkit-scrollbar-thumb { background: #C7D0CA; border-radius: 6px; border: 2px solid #EDF1EE; }
::-webkit-scrollbar-thumb:hover { background: #A8B5AD; }

.cartao {
    background: #fff;
    border: 1px solid #E2E7E4;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(35, 40, 44, .04);
}

.cartao-hover { transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; }
.cartao-hover:hover {
    border-color: #318B4D;
    box-shadow: 0 6px 20px rgba(40, 76, 52, .10);
    transform: translateY(-2px);
}

.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.tag-ok { background: #E6F3EB; color: #26713F; }
.tag-atencao { background: #FFF6DB; color: #8A6B00; }
.tag-critico { background: #FEEDE0; color: #9A4E12; }
.tag-vencido { background: #FDE8E8; color: #A32424; }
.tag-neutro { background: #EEF1EF; color: #4F575C; }

.barra { height: 6px; border-radius: 999px; background: #E8EDE9; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 999px; }

/* trilho lateral: a marca mora no escuro, o trabalho acontece no claro */
.trilho { background: #23282C; }
.trilho-item { color: #AFB8BC; }
.trilho-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.trilho-ativo { background: rgba(49, 139, 77, .22); color: #fff; box-shadow: inset 3px 0 0 #FFD200; }

@keyframes pulso-anel {
    0% { box-shadow: 0 0 0 0 rgba(49, 139, 77, .45); }
    70% { box-shadow: 0 0 0 14px rgba(49, 139, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(49, 139, 77, 0); }
}
.ouvindo { animation: pulso-anel 1.4s infinite; }

@keyframes onda { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.onda span { display: inline-block; width: 3px; height: 16px; border-radius: 2px; background: #318B4D; animation: onda .9s infinite ease-in-out; }
.onda span:nth-child(2) { animation-delay: .12s; }
.onda span:nth-child(3) { animation-delay: .24s; }
.onda span:nth-child(4) { animation-delay: .36s; }
.onda span:nth-child(5) { animation-delay: .48s; }

#cena3d { overflow: hidden; }
#cena3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* ---------------------------------------------------------------- assistente
   Um desenho so (partials/_assistente-avatar.blade.php), cortado por viewBox.
   O movimento e CSS puro sobre as classes das partes: nada de sprite nem video,
   e a figura continua nitida em qualquer tamanho.

   O estado vem do data-estado que o assistente.js escreve em cada [data-avatar]. */

.av { overflow: visible; }
.av .av-corpo,
.av .av-cabeca,
.av .av-palpebra,
.av .av-boca-aberta,
.av .av-mecha { transform-box: fill-box; }

/* respiracao: o tronco sobe e desce, com o eixo na cintura */
@keyframes av-respira {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50%      { transform: translateY(-1.4px) scaleY(1.014); }
}
.av .av-corpo { transform-origin: 50% 100%; animation: av-respira 4.2s ease-in-out infinite; }

/* a cabeca acompanha, com um balanco mais lento e fora de fase */
@keyframes av-balanco {
    0%, 100% { transform: rotate(-1.6deg) translateY(0); }
    50%      { transform: rotate(1.6deg) translateY(-2px); }
}
.av .av-cabeca { transform-origin: 50% 100%; animation: av-balanco 6.4s ease-in-out infinite; }

/* piscar: duas piscadas seguidas e uma pausa longa — uma so fica mecanica */
@keyframes av-pisca {
    0%, 86%, 100% { transform: scaleY(0); }
    88%, 90.5%    { transform: scaleY(1); }
    89.2%         { transform: scaleY(0); }
    93%           { transform: scaleY(0); }
}
.av .av-palpebra { transform-origin: 50% 0; transform: scaleY(0); animation: av-pisca 6.8s linear infinite; }

/* a mecha solta balanca um pouco depois do resto */
@keyframes av-mecha {
    0%, 100% { transform: rotate(-1.2deg); }
    50%      { transform: rotate(2.2deg); }
}
.av .av-mecha { transform-origin: 90% 0; animation: av-mecha 5.2s ease-in-out infinite .7s; }

/* boca fechada e o padrao; a aberta so existe quando ela fala */
.av .av-boca-aberta { transform-origin: 50% 50%; transform: scaleY(0); }

@keyframes av-fala {
    0%, 100% { transform: scaleY(.3) scaleX(.92); }
    35%      { transform: scaleY(1) scaleX(1); }
    65%      { transform: scaleY(.55) scaleX(.96); }
}
@keyframes av-fala-cabeca {
    0%, 100% { transform: rotate(-1.2deg) translateY(0); }
    50%      { transform: rotate(1.2deg) translateY(-1.4px); }
}

.av[data-estado="falando"] .av-boca-fechada { opacity: 0; }
.av[data-estado="falando"] .av-boca-aberta  { animation: av-fala .36s ease-in-out infinite; }
.av[data-estado="falando"] .av-cabeca       { animation: av-fala-cabeca 2.2s ease-in-out infinite; }

/* ouvindo: ela inclina a cabeca e segura — e o gesto de quem esta atento */
@keyframes av-escuta {
    0%, 100% { transform: rotate(4.5deg) translateY(-1px); }
    50%      { transform: rotate(6.5deg) translateY(-2.4px); }
}
.av[data-estado="ouvindo"] .av-cabeca { animation: av-escuta 3.4s ease-in-out infinite; }
.av[data-estado="ouvindo"] .av-mic    { animation: av-mic-vivo 1.1s ease-in-out infinite; }

@keyframes av-mic-vivo {
    0%, 100% { opacity: 1; r: 4.4; }
    50%      { opacity: .55; r: 5.6; }
}

/* pensando: olha para cima e para o lado, sem piscar depressa */
@keyframes av-pensa {
    0%, 100% { transform: rotate(-3deg) translateY(-1px); }
    50%      { transform: rotate(-1deg) translateY(-2.5px); }
}
.av[data-estado="pensando"] .av-cabeca { animation: av-pensa 2.6s ease-in-out infinite; }

/* desligada: para tudo, menos a respiracao */
.av[data-estado="desligada"] .av-mecha,
.av[data-estado="desligada"] .av-palpebra { animation-duration: 11s; }

/* quem pediu menos movimento no sistema recebe a figura parada */
@media (prefers-reduced-motion: reduce) {
    .av * { animation: none !important; }
    .av .av-palpebra { transform: scaleY(0); }
}

/* o standee do canto: a figura sai da moldura pelo topo */
.av-standee { filter: drop-shadow(0 6px 14px rgba(35, 40, 44, .22)); }