/* =====================================================
   ferdesk-ui.css — camada de componentes reutilizável
   Assenta por cima do portal.css (shell/identidade).
   Semente do design-system do FerHelpDesk.
   ===================================================== */

/* ---- KPIs ---- */
.fd-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
.fd-kpi{ display:block; text-decoration:none; color:inherit; background:var(--fer-branco); border:1px solid var(--fer-borda);
  border-left-width:4px; border-radius:10px; padding:12px 14px; transition:transform .12s, box-shadow .12s; }
.fd-kpi:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); color:inherit; }
.fd-kpi .fd-kpi-n{ font-size:1.7rem; font-weight:700; line-height:1; }
.fd-kpi .fd-kpi-l{ font-size:.74rem; color:#6c757d; margin-top:4px; }
.fd-kpi.total{ border-left-color:var(--fer-azul); }
.fd-kpi.novos{ border-left-color:#0d6efd; }
.fd-kpi.risco{ border-left-color:var(--sla-vencido-bg); }
.fd-kpi.sematend{ border-left-color:var(--sla-emrisco-bg); }
.fd-kpi.meus{ border-left-color:var(--sla-noprazo-bg); }
@media (max-width:900px){ .fd-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ---- Chips de filtro rápido ---- */
.fd-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.fd-chip{ font-size:.78rem; padding:5px 12px; border-radius:999px; border:1px solid var(--fer-borda);
  background:var(--fer-branco); color:inherit; text-decoration:none; cursor:pointer; transition:.12s; }
.fd-chip:hover{ border-color:var(--fer-azul); color:var(--fer-azul); }
.fd-chip.on{ background:var(--fer-azul); color:#fff; border-color:var(--fer-azul); }

/* ---- Linha de tabela clicável ---- */
tr.fd-rowlink{ cursor:pointer; }
tr.fd-rowlink:hover > *{ background-color:var(--lista-hover-bg, rgba(0,87,168,.08)) !important; }

/* Botão de ação dentro da linha (ex.: fixar no topo): o Bootstrap fixa font-size no .btn,
   o que o deixa parado enquanto o resto da linha cresce no hover (CF03 Slice B, portal.css)
   — herdar o tamanho da célula mantém o ícone acompanhando o resto da linha. */
.fd-pin-btn{ font-size:inherit; line-height:1; }

/* ---- Hero (cabeçalho em destaque) ---- */
.fd-hero{ background:linear-gradient(120deg,var(--fer-navy),var(--fer-azul)); color:#fff; border-radius:16px;
  padding:22px 26px; box-shadow:0 10px 26px rgba(27,42,74,.28); }
.fd-hero .fd-hero-num{ font-size:.82rem; opacity:.8; letter-spacing:.5px; text-transform:uppercase; }
.fd-hero h1{ font-size:1.5rem; font-weight:700; margin:4px 0 12px; }
.fd-hero .fd-metastrip{ display:flex; gap:22px; flex-wrap:wrap; margin-top:12px; }
.fd-hero .fd-metastrip .k{ font-size:.72rem; text-transform:uppercase; opacity:.7; }
.fd-hero .fd-metastrip .v{ font-weight:600; }

/* ---- Abas (nav) ---- */
.fd-tabs{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--fer-borda); margin:18px 0; }
.fd-tab{ padding:11px 16px; font-size:.9rem; font-weight:600; color:#6c757d; background:none; border:none;
  border-bottom:3px solid transparent; cursor:pointer; transition:.12s; }
.fd-tab:hover{ color:var(--fer-azul); }
.fd-tab.on{ color:var(--fer-azul); border-bottom-color:var(--fer-azul); }
.fd-tabpanel{ display:none; }
.fd-tabpanel.on{ display:block; }

/* ---- Rail lateral sticky ---- */
.fd-grid{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }
.fd-rail{ position:sticky; top:16px; }
@media (max-width:992px){ .fd-grid{ grid-template-columns:1fr; } .fd-rail{ position:static; } }

/* ---- Avatares ---- */
.fd-av{ width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--fer-azul),#3b8fd6); flex-shrink:0; }
.fd-av.obs{ background:linear-gradient(135deg,#0b6b82,#38a9c2); }
.fd-av.atr{ background:linear-gradient(135deg,#1c6b3c,#49aa6e); }
.fd-av.grp{ background:linear-gradient(135deg,var(--fer-navy),#3d5170); }
.fd-avstack{ display:flex; align-items:center; }
.fd-avstack .fd-av{ border:2px solid #fff; margin-left:-8px; }
.fd-avstack .fd-av:first-child{ margin-left:0; }

/* ---- Timeline (histórico) ---- */
.fd-tl{ position:relative; padding-left:26px; }
.fd-tl::before{ content:''; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:#e6eaef; }
.fd-tl-item{ position:relative; margin-bottom:16px; }
.fd-tl-item::before{ content:''; position:absolute; left:-21px; top:3px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--fer-azul); }
.fd-tl-item.ok::before{ border-color:var(--sla-noprazo-bg); }
.fd-tl-item.task::before{ border-color:#0b6b82; }
.fd-tl-bubble{ background:#f7f9fb; border:1px solid #eceff2; border-radius:10px; padding:10px 14px; transition:.12s; }
.fd-tl-item:hover .fd-tl-bubble{ background:#eef5fd; border-color:#cfe0f3; }
.fd-tl-meta{ font-size:.76rem; color:#8a93a0; margin-bottom:3px; }

/* ---- Autores e Envolvidos (Requerente/Observadores/Atribuído + Grupo de atendimento) ----
   4 colunas em tela larga; 2 num tablet; 1 empilhada no celular — mesmo comportamento de grid
   responsivo que o resto do design-system (ex.: .fd-grid). */
.fd-actors{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:992px){ .fd-actors{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:576px){ .fd-actors{ grid-template-columns:1fr; } }
/* Sem overflow:hidden aqui — ele cortaria o dropdown .ator-lista/.grp-lista (position:absolute).
   Os cantos arredondados do topo ficam no próprio cabeçalho (.fd-actor-cap). */
.fd-actor-col{ border:1px solid var(--fer-borda); border-radius:12px; background:var(--fer-branco);
  transition:box-shadow .14s, transform .14s; }
.fd-actor-col:hover{ box-shadow:0 8px 20px rgba(27,42,74,.10); transform:translateY(-2px); }
.fd-actor-cap{ padding:9px 12px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  border-radius:11px 11px 0 0; display:flex; align-items:center; gap:6px; color:#fff; }
.fd-actor-col.req .fd-actor-cap{ background:var(--fer-azul); }
.fd-actor-col.obs .fd-actor-cap{ background:#0b6b82; }
.fd-actor-col.atr .fd-actor-cap{ background:var(--sla-noprazo-bg); }
/* Grupo de atendimento (fila) — navy da marca (--fer-navy), já usado no hero/cabeçalho; distinto
   das outras 3 cores sem precisar de token novo. */
.fd-actor-col.grp .fd-actor-cap{ background:var(--fer-navy); }
.fd-actor-cap .cnt{ margin-left:auto; background:rgba(255,255,255,.25); border-radius:999px; padding:1px 8px; }
/* APOIO — vive DENTRO da coluna da fila, separado por um filete, e não numa 5ª coluna: apoio é uma
   fila também, e colunas vizinhas de peso igual fariam parecer que o chamado tem dois donos. */
.fd-apoio{ margin-top:10px; padding-top:9px; border-top:1px dashed var(--fer-borda); }
.fd-apoio-cap{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--fer-texto-suave,#6c757d); display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.fd-apoio-cap .cnt{ margin-left:auto; background:rgba(0,0,0,.07); border-radius:999px; padding:0 7px; }
/* Tracejado para dizer "está aqui de passagem" — a fila dona é a de cima, com chip cheio. */
.fd-chip-apoio{ background:transparent; border-style:dashed; }
.fd-apoio-nota{ font-size:.72rem; line-height:1.35; color:var(--fer-texto-suave,#6c757d); margin-top:6px; }
.fd-actor-body{ padding:10px 12px; }
.fd-chip-person{ display:flex; align-items:center; gap:8px; background:#f4f7fa; border:1px solid #e7edf2;
  border-radius:999px; padding:4px 6px 4px 4px; margin-bottom:6px; transition:background .12s; }
.fd-chip-person:hover{ background:#e9f2fc; }
.fd-chip-person .nm{ font-size:.82rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-chip-person .rm{ color:#c4ccd6; border:none; background:none; padding:0 4px; transition:.12s; cursor:pointer; }
.fd-chip-person:hover .rm{ color:var(--sla-vencido-bg); }

/* ---- Painel genérico (bloco cabeçalho + corpo) — reusável app-wide ---- */
.fd-panel{ background:var(--fer-branco); border:1px solid var(--fer-borda); border-radius:12px;
  box-shadow:0 2px 10px rgba(27,42,74,.05); margin-bottom:16px; }
.fd-panel .fd-panel-hd{ padding:10px 14px; border-bottom:1px solid var(--fer-borda);
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fd-panel .fd-panel-hd .t{ font-weight:600; color:var(--fer-navy); }
.fd-panel .fd-panel-hd .sub{ font-size:.76rem; color:#8a93a0; font-weight:400; }
.fd-panel .fd-panel-bd{ padding:12px 14px; }
.fd-panel .fd-panel-bd.flush{ padding:0; }               /* tabelas/listas ocupam a borda */
.fd-panel-empty{ padding:18px 14px; text-align:center; color:#8a93a0; font-size:.85rem; }

/* ---- Variantes semânticas de fd-kpi p/ o Painel operacional ----
   SLA usa variáveis de tema; hoje/não-atrib mantêm as cores já usadas hoje no Painel. */
.fd-kpi.sla-vencido{ border-left-color:var(--sla-vencido-bg); }
.fd-kpi.sla-risco{ border-left-color:var(--sla-emrisco-bg); }
.fd-kpi.nao-atrib{ border-left-color:#0dcaf0; }
.fd-kpi.hoje{ border-left-color:#0d6efd; }
.fd-kpi.minha{ border-left-color:var(--sla-noprazo-bg); }

/* ---- Chat de atendimento ---- */
.fd-chat-pane{ height:360px; overflow-y:auto; padding:12px; background:var(--fer-cinza);
  border:1px solid var(--fer-borda); border-radius:12px; display:flex; flex-direction:column; gap:8px; }
.fd-chat-msg{ display:flex; gap:8px; max-width:82%; }
.fd-chat-msg .fd-chat-bubble{ background:var(--fer-branco); border:1px solid var(--fer-borda);
  border-radius:12px; padding:8px 12px; font-size:.9rem; box-shadow:0 1px 2px rgba(27,42,74,.05); }
.fd-chat-msg .fd-chat-nome{ font-size:.72rem; color:#8a93a0; margin-bottom:2px; }
.fd-chat-msg.out{ margin-left:auto; flex-direction:row-reverse; }
.fd-chat-msg.out .fd-chat-bubble{ background:var(--fer-azul); color:#fff; border-color:var(--fer-azul); }
.fd-chat-msg.out .fd-chat-nome{ text-align:right; }
.fd-chat-msg img{ max-width:100%; border-radius:8px; margin-top:4px; }
.fd-chat-composer{ display:flex; gap:8px; margin-top:10px; }

/* Widget flutuante (launcher + painel). Nada de overflow:hidden aqui. */
.fd-chatwidget-btn{ position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%;
  border:none; background:var(--fer-azul); color:#fff; font-size:1.3rem; cursor:pointer; z-index:1080;
  box-shadow:0 8px 20px rgba(27,42,74,.28); transition:transform .12s; }
.fd-chatwidget-btn:hover{ transform:translateY(-2px); }
.fd-chatwidget-panel{ position:fixed; bottom:90px; right:24px; width:340px; height:460px; z-index:1080;
  background:var(--fer-branco); border:1px solid var(--fer-borda); border-radius:14px;
  box-shadow:0 16px 40px rgba(27,42,74,.28); display:none; flex-direction:column; }
.fd-chatwidget-panel.on{ display:flex; }
.fd-chatwidget-cap{ background:var(--fer-azul); color:#fff; padding:10px 14px; font-weight:600;
  border-radius:13px 13px 0 0; display:flex; justify-content:space-between; align-items:center; }
.fd-chatwidget-cap .x{ background:none; border:none; color:#fff; cursor:pointer; font-size:1rem; }
.fd-chatwidget-msgs{ flex:1; overflow-y:auto; padding:10px; font-size:.85rem; display:flex; flex-direction:column; gap:6px; }
.fd-chatwidget-composer{ display:flex; gap:6px; padding:10px; border-top:1px solid var(--fer-borda); }

/* ---- Estrelas de avaliação (CSAT) — radios acessíveis, tema-aware, sem lib ---- */
.fd-stars{ display:inline-flex; flex-direction:row-reverse; gap:2px; }
.fd-stars input{ position:absolute; opacity:0; width:0; height:0; }
.fd-stars label{ font-size:1.6rem; line-height:1; color:var(--fer-borda); cursor:pointer; transition:color .1s; }
.fd-stars label::before{ content:"\2605"; }   /* ★ */
.fd-stars input:checked ~ label,
.fd-stars label:hover, .fd-stars label:hover ~ label{ color:var(--sla-emrisco-bg); }
.fd-stars input:focus-visible + label{ outline:2px solid var(--fer-azul); outline-offset:2px; }
/* Bloco de pesquisa de satisfação (aparece após encerrar) */
.fd-survey{ border-top:1px solid var(--fer-borda); padding:12px; display:flex; flex-direction:column; gap:8px;
  background:var(--fer-branco); }
.fd-survey .fd-survey-hd{ font-weight:600; color:var(--fer-navy); font-size:.9rem; }

/* ---- Corpo do chamado em caixa com rolagem ----
   Descrição longa (e-mail inteiro colado, print + histórico) empurrava a Ficha/SLA para baixo da
   dobra e obrigava a rolar a tela toda para chegar ao histórico. A caixa limita a altura e rola
   dentro de si; quem quiser o texto inteiro na tela clica em "Expandir". O botão e o degradê só
   aparecem quando o conteúdo REALMENTE transborda (medido no JS) — descrição de 3 linhas segue
   igual ao que era. */
.fd-descbox{ position:relative; }
.fd-descbox-body{ max-height:420px; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; }
.fd-descbox.aberto .fd-descbox-body{ max-height:none; overflow-y:visible; padding-right:0; }
/* Degradê de "tem mais coisa aí embaixo" — some ao expandir e quando não há transbordo. */
.fd-descbox-fade{ position:absolute; left:0; right:0; bottom:0; height:46px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--fer-branco)); display:none; }
.fd-descbox.transborda .fd-descbox-fade{ display:block; }
.fd-descbox.aberto .fd-descbox-fade{ display:none; }
.fd-descbox-acao{ display:none; margin-top:8px; }
.fd-descbox.transborda .fd-descbox-acao{ display:block; }

/* ---- Alias do titulo de painel ------------------------------------------------
   As views da Central de Ajuda usam .fd-panel-title; o resto da app usa .t.
   Sem esta regra os titulos daqueles paineis ficam sem peso/cor. */
.fd-panel .fd-panel-hd .fd-panel-title{ font-weight:600; color:var(--fer-navy); }

/* ================================================================================
   Fluxograma da Ajuda (/Ajuda/Fluxograma) — prefixo fdf-
   Dois diagramas SVG desenhados em runtime por js/ajuda-fluxograma.js.
   As cores vivem aqui (nao no JS) para respeitarem o tema do usuario.
   ============================================================================== */

.fdf-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.fdf-busca{ max-width:260px; }
.fdf-zoom{ display:flex; align-items:center; gap:4px; }
.fdf-zoom-lbl{ font-size:.75rem; color:#6b788c; min-width:42px; text-align:center; }

.fdf-scroll{ overflow:auto; max-height:70vh; border:1px solid var(--fer-borda); border-radius:10px;
  background:var(--fer-cinza); padding:4px; }
.fdf-scroll svg{ display:block; }

/* ---- faixas de perfil (swimlanes) ---- */
.fdf-lane-faixa{ fill:var(--fer-branco); }
.fdf-lane-faixa.alt{ fill:rgba(27,42,74,.035); }
.fdf-lane-rotulo{ font-size:11px; font-weight:700; letter-spacing:.02em; }
.fdf-lane-cont{ font-size:9px; fill:#8a93a0; }

/* ---- nos do mapa ---- */
.fdf-node-box{ fill:var(--fer-branco); transition:filter .12s, opacity .12s; }
.fdf-node-titulo{ font-size:11.5px; font-weight:600; fill:var(--fer-navy); pointer-events:none; }
.fdf-node-sub{ font-size:9px; fill:#6b788c; pointer-events:none; }
.fdf-node{ outline:none; }
.fdf-node.link{ cursor:pointer; }
.fdf-node.link:hover .fdf-node-box,
.fdf-node:focus-visible .fdf-node-box{ filter:drop-shadow(0 3px 8px rgba(27,42,74,.28)); }
.fdf-node:focus-visible .fdf-node-box{ stroke-width:3; }

/* realce por foco: o que nao se liga ao no apontado desbota */
.fdf-comfoco .fdf-node.dim{ opacity:.22; }
.fdf-comfoco .fdf-node.hi .fdf-node-box{ filter:drop-shadow(0 3px 10px rgba(0,87,168,.35)); }

/* ---- arestas do mapa ---- */
.fdf-edge{ fill:none; stroke:#8a94a3; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round;
  transition:opacity .12s, stroke .12s; }
.fdf-edge.cfg{ stroke:#b3868a; stroke-dasharray:4 3; }
.fdf-comfoco .fdf-edge.dim{ opacity:.12; }
.fdf-edge.hi{ stroke:var(--fer-azul); stroke-width:2.4; }

/* ---- ciclo de vida ---- */
.fdf-ciclo-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
@media (max-width:1100px){ .fdf-ciclo-grid{ grid-template-columns:1fr; } }

.fdf-cnode-box{ fill:var(--fer-branco); transition:opacity .12s, filter .12s; }
.fdf-cnode-nome{ font-size:11px; font-weight:600; fill:var(--fer-navy); pointer-events:none; }
.fdf-cnode-tag{ font-size:8.5px; pointer-events:none; }
.fdf-cnode-tag.final{ fill:#6b788c; }
.fdf-cnode-tag.alerta{ fill:var(--sla-vencido-bg); font-weight:600; }
.fdf-cnode{ cursor:pointer; outline:none; }
.fdf-cnode:hover .fdf-cnode-box,
.fdf-cnode:focus-visible .fdf-cnode-box{ filter:drop-shadow(0 3px 8px rgba(27,42,74,.25)); }
.fdf-cnode.dim{ opacity:.25; }
.fdf-cnode.sel .fdf-cnode-box{ stroke-width:3.4; filter:drop-shadow(0 3px 12px rgba(0,87,168,.35)); }
.fdf-cnode.semsaida .fdf-cnode-box{ stroke-dasharray:5 3; }

.fdf-cedge{ fill:none; stroke-width:1.8; }
.fdf-cedge.todas{ stroke:#8a94a3; stroke-width:1.1; opacity:.5; }
.fdf-cedge.entrada{ stroke:var(--sla-noprazo-bg); }
.fdf-cedge.saida{ stroke:var(--fer-azul); }

/* ---- painel lateral do status em foco ---- */
.fdf-info{ border:1px solid var(--fer-borda); border-radius:10px; padding:12px; background:var(--fer-branco);
  font-size:.82rem; }
.fdf-foco-hd{ display:flex; align-items:center; gap:7px; font-size:.92rem; color:var(--fer-navy);
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--fer-borda); }
.fdf-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.fdf-foco-col{ margin-bottom:10px; }
.fdf-foco-lbl{ display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:5px; }
.fdf-foco-lbl.entrada{ color:var(--sla-noprazo-bg); }
.fdf-foco-lbl.saida{ color:var(--fer-azul); }
.fdf-pill{ display:inline-block; font-size:.74rem; padding:3px 9px; border-radius:999px;
  border:1px solid var(--fer-borda); background:var(--fer-cinza); color:var(--fer-navy);
  margin:0 3px 4px 0; }
.fdf-pill.final{ background:var(--fer-navy); color:#fff; border-color:var(--fer-navy); }

.fdf-alerta{ border-left:3px solid var(--sla-vencido-bg); background:rgba(220,53,69,.06);
  padding:8px 10px; border-radius:0 8px 8px 0; }
.fdf-ok{ border-left:3px solid var(--sla-noprazo-bg); background:rgba(25,135,84,.06);
  padding:8px 10px; border-radius:0 8px 8px 0; color:#4a5568; }

/* ---- legenda / switch ---- */
.fdf-key{ display:inline-block; width:16px; height:0; border-top:2.5px solid #8a94a3;
  vertical-align:middle; margin-right:2px; }
.fdf-key.entrada{ border-color:var(--sla-noprazo-bg); }
.fdf-key.saida{ border-color:var(--fer-azul); }
.fdf-switch{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:#6b788c;
  font-weight:400; margin:0; cursor:pointer; }
/* chip ligado herda a cor da faixa correspondente (definida no JS via --chip-cor) */
#fluxoLanes .fd-chip.on{ background:var(--chip-cor, var(--fer-azul)); border-color:var(--chip-cor, var(--fer-azul)); }

/* ============================================================ página de erro
   Tela do UseExceptionHandler — centrada, sóbria, sem detalhe técnico. */
.fd-errpage{ display:flex; justify-content:center; align-items:flex-start;
  padding:48px 16px; }
.fd-errcard{ max-width:560px; width:100%; text-align:center; }
.fd-errcard .fd-panel-bd{ padding:32px 28px 28px; }

.fd-erricon{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,193,7,.14); color:var(--sla-emrisco-bg); font-size:1.9rem; }

.fd-errtitle{ font-size:1.5rem; font-weight:600; color:var(--fer-navy); margin:0 0 10px; }
.fd-errtext{ color:#5a6678; margin:0 0 22px; line-height:1.55; }

.fd-errid{ display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap; background:var(--fer-cinza); border:1px solid var(--fer-borda);
  border-radius:10px; padding:12px 14px; }
.fd-errid-lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:#6b788c; font-weight:600; }
.fd-errid code{ color:var(--fer-navy); font-size:.86rem; word-break:break-all; }
.fd-errhint{ font-size:.8rem; color:#6b788c; margin:8px 0 0; }

.fd-erracoes{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:24px; }

/* ── Histórico de Atualizações ──────────────────────────────────────────────────────────────────
   Linha do tempo: a marca (versão + data) à esquerda, o texto à direita. Em telas estreitas as
   duas empilham — a marca vira um cabeçalho horizontal em vez de encolher a coluna do texto. */
.fd-novidades{ display:flex; flex-direction:column; gap:14px; }
.fd-novidade{ display:grid; grid-template-columns:130px 1fr; gap:16px;
  border:1px solid var(--fer-borda); border-radius:12px; background:var(--fer-branco); padding:14px 16px; }
/* A versão no ar ganha um filete à esquerda: é o que amarra o que a pessoa está usando ao que lê. */
.fd-novidade.atual{ border-left:4px solid var(--fer-azul); }
.fd-novidade-marca{ display:flex; flex-direction:column; gap:2px; }
.fd-novidade-marca .ver{ font-weight:700; font-size:.92rem; color:var(--fer-navy); }
.fd-novidade-marca .data{ font-size:.76rem; color:var(--fer-texto-suave,#6c757d); }
.fd-novidade-corpo ul{ padding-left:1.1rem; }
.fd-novidade-corpo li{ margin-bottom:4px; line-height:1.45; }
@media (max-width:640px){
  .fd-novidade{ grid-template-columns:1fr; gap:8px; }
  .fd-novidade-marca{ flex-direction:row; align-items:baseline; gap:10px; flex-wrap:wrap; }
}

/* ⚠️ O PONTINHO de novidade NÃO mora aqui, e sim em estilo inline no _Layout — de propósito.
   Este arquivo é carregado POR PÁGINA (@section Styles), e o cabeçalho é do layout: numa tela que
   não declara a seção (Login, telas de impressão, partials), o pontinho viraria um span vazio e
   invisível. É a mesma razão pela qual a própria versão já usava estilo inline ali.
   Só o hover fica aqui: perder um sublinhado onde o CSS não carrega não esconde informação. */
.header-versao:hover{ opacity:1 !important; text-decoration:underline !important; }


/* ============================================================================================
   PROJETOS — a árvore de atividades, a barra de rollup e a lista de portfólio.
   A hierarquia aparece por RECUO numa tabela achatada: a árvore é montada em pré-ordem no
   servidor, então a view não recursa e cada linha só recebe um padding proporcional ao nível.
   ============================================================================================ */
.fd-tree-wrap { overflow-x: auto; }
.fd-tree { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fd-tree thead th {
    text-align: left; font-weight: 600; font-size: .74rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--fer-muted, #6c757d);
    border-bottom: 1px solid var(--fer-border, #dee2e6); padding: .4rem .5rem;
}
.fd-tree td { padding: .4rem .5rem; border-bottom: 1px solid var(--fer-border-soft, #f0f1f3); vertical-align: middle; }
.fd-tree-row:hover { background: var(--fer-hover, #f6f8fa); }
.fd-tree-row.fim .fd-tree-tit { text-decoration: line-through; opacity: .6; }
.fd-tree-indent { display: inline-block; }
.fd-tree-ico { color: var(--fer-muted, #9aa3ab); margin-right: .25rem; }
.fd-tree-num { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .4rem; }
.fd-tree-tit { }
.fd-tree-semacesso { color: var(--fer-muted, #6c757d); font-style: italic; }
.fd-tree-resp { color: var(--fer-muted, #6c757d); }
.fd-tree-fila, .fd-tree-status {
    display: inline-block; padding: .1rem .45rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.fd-tree-data { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .82rem; }
.fd-tree-pct-folha { font-size: .78rem; color: var(--fer-muted, #6c757d); }
.fd-tree-bar { position: relative; background: var(--fer-border-soft, #eef0f2); border-radius: 999px; height: 18px; }
.fd-tree-bar-in { background: var(--fer-navy, #0b3d62); height: 100%; border-radius: 999px; }
.fd-tree-bar span {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: var(--fer-text, #212529); mix-blend-mode: luminosity;
}
.fd-tree-acoes { white-space: nowrap; text-align: right; }
.fd-tree-btn {
    border: 0; background: transparent; color: var(--fer-muted, #6c757d);
    padding: .15rem .3rem; border-radius: .25rem; line-height: 1;
}
.fd-tree-btn:hover { background: var(--fer-border-soft, #e9ecef); color: var(--fer-navy, #0b3d62); }
.fd-tree-btn.perigo:hover { background: #f8d7da; color: #b02a37; }
.fd-tree-vazio { text-align: center; color: var(--fer-muted, #6c757d); padding: 1.5rem .5rem; }

/* A linha de digitação do "+": reaparece vazia depois de cada inclusão, e é isso que permite
   lançar várias atividades em sequência sem sair da tela. */
.fd-tree-nova td { background: #fffdf3; }
/* ⚠️ Quebra em TODAS as larguras (nao so no celular): com responsavel (230) + fila (190) + prazo
   (140) + botao, a linha unica deixava o titulo com 18px em 1024 e empurrava o "Incluir" para fora
   da tela. O titulo ocupa a 1a linha inteira; o resto desce para a 2a. */
.fd-nova-linha { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fd-nova-linha .fd-nova-tit { flex: 1 1 calc(100% - 2rem); min-width: 0; resize: none; }
/* Ancora da celula de inclusao/edicao: largura da area VISIVEL (definida em JS) e fixa a esquerda
   enquanto a tabela rola. */
.fd-ancora { position: sticky; left: 8px; box-sizing: border-box; }
.fd-edicao-linha .fd-ed-tit { resize: none; }
.fd-nova-linha .fd-nova-resp-campo { margin-left: 1.5rem; }
.fd-nova-linha .fd-nova-ok { white-space: nowrap; }
.fd-nova-linha .fd-nova-resp { width: 100%; }

.fd-hero-pai { font-size: .82rem; opacity: .85; margin-bottom: .15rem; }
.fd-hero-pai a { color: inherit; text-decoration: underline; }
.fd-hero-pct { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.fd-hero-pct small { font-size: 1.1rem; font-weight: 600; opacity: .8; }
.fd-hero-pct-lbl { font-size: .78rem; opacity: .85; text-align: center; }

.fd-panel-acoes { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.fd-nota { color: var(--fer-muted, #6c757d); font-size: .84rem; margin-bottom: .6rem; }
.fd-sub { display: flex; align-items: center; gap: .8rem; padding: .3rem 0; }
.fd-sub > a { flex: 0 0 240px; font-weight: 600; }
.fd-sub > .fd-tree-bar { flex: 1 1 auto; }
.fd-equipe { display: flex; flex-wrap: wrap; gap: .35rem; }
.fd-equipe-add { display: flex; gap: .4rem; max-width: 420px; }
.fd-chip-x { border: 0; background: transparent; color: inherit; opacity: .6; padding: 0 0 0 .3rem; }
.fd-chip-x:hover { opacity: 1; }
.fd-filtros { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.fd-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; margin: 0; }
.fd-form-linha { display: flex; gap: 1rem; flex-wrap: wrap; }
.fd-form-linha > div { flex: 1 1 200px; }
.fd-form-acoes { display: flex; gap: .6rem; align-items: center; margin: 1rem 0 2rem; }
.fd-badge-sub {
    display: inline-block; margin-left: .4rem; font-size: .72rem; font-weight: 600;
    color: var(--fer-navy, #0b3d62); background: var(--fer-border-soft, #eef0f2);
    border-radius: 999px; padding: .05rem .4rem;
}
.fd-sit { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.fd-sit.sit-1 { background: #e7f1ff; color: #0b5ed7; }
.fd-sit.sit-2 { background: #d1e7dd; color: #0f5132; }
.fd-sit.sit-3 { background: #fff3cd; color: #664d03; }
.fd-sit.sit-4 { background: #e2e3e5; color: #41464b; }
.fd-sit.sit-5 { background: #f8d7da; color: #842029; }

@media (max-width: 768px) {
    .fd-sub > a { flex: 0 0 120px; }
    .fd-nova-linha { flex-wrap: wrap; }
    .fd-nova-linha .fd-nova-resp { flex: 1 1 100%; }
}
/* Celular: responsavel, fila e prazo ocupam a linha toda, um embaixo do outro. */
@media (max-width: 576px) {
    .fd-nova-linha .fd-nova-resp-campo, .fd-nova-linha .fd-nova-fila-campo,
    .fd-nova-linha .fd-nova-prazo, .fd-edicao-linha .fd-ed-resp-campo,
    .fd-edicao-linha .fd-ed-fila-campo, .fd-edicao-linha .fd-ed-prazo {
        flex: 1 1 100%; width: 100%; margin-left: 0;
    }
    .fd-nova-dica { display: none; }
    .fd-nova-linha .fd-nova-tit, .fd-edicao-linha .fd-ed-tit { min-height: 4.9rem; }
}


/* --------------------------------------------------------------------------------------------
   SELETOR DE PESSOA — lista de selecao de verdade.
   Regra do dono do produto (27/09/2026): campo que escolhe usuario ABRE A LISTA no clique, com
   todo mundo, e filtra conforme se digita. Campo de texto livre (ou <datalist>, que so aparece
   depois de acertar a primeira letra) obriga a adivinhar o e-mail antes de ver qualquer coisa.
   -------------------------------------------------------------------------------------------- */
.fd-pessoa-campo { position: relative; display: block; flex: 1 1 auto; }
.fd-pessoas-lista {
    position: absolute; z-index: 1060; left: 0; right: 0; top: 100%;
    max-height: 260px; overflow-y: auto; min-width: 240px;
    background: var(--fer-surface, #fff);
    border: 1px solid var(--fer-border, #dee2e6); border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}
.fd-pessoas-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    width: 100%; text-align: left; border: 0; background: transparent;
    padding: .35rem .6rem; line-height: 1.25;
}
.fd-pessoas-item:hover, .fd-pessoas-item:focus { background: var(--fer-hover, #f1f3f5); }
.fd-pessoas-nome { font-size: .88rem; color: var(--fer-text, #212529); }
.fd-pessoas-item small { font-size: .74rem; color: var(--fer-muted, #6c757d); }
.fd-pessoas-vazio { padding: .5rem .6rem; font-size: .84rem; color: var(--fer-muted, #6c757d); }

.fd-nova-dica { font-size: .74rem; color: var(--fer-muted, #6c757d); white-space: nowrap; }
.fd-nova-fechar {
    border: 0; background: transparent; color: var(--fer-muted, #6c757d);
    font-size: 1.2rem; line-height: 1; padding: 0 .3rem;
}
.fd-nova-fechar:hover { color: #b02a37; }
.fd-nova-resp-campo { flex: 0 0 230px; }
.fd-nova-fila-campo, .fd-ed-fila-campo { flex: 0 0 220px; }
.fd-nova-ok2 { white-space: nowrap; }
/* A atividade que acabou de entrar pisca em verde claro: prova visual de que salvou. */
.fd-tree-novo td { animation: fd-novo-flash 2.4s ease-out; }
@keyframes fd-novo-flash { from { background-color: #cfeedb; } to { background-color: transparent; } }
.fd-nova-prazo, .fd-ed-prazo { flex: 0 0 140px; width: 140px; }
.fd-nova-aviso { font-size: .76rem; color: var(--fer-muted, #6c757d); margin: .25rem 0 0; padding-left: 1.4rem; }


/* ============================================================================================
   GANTT — desenhado a mao, sem biblioteca (ver wwwroot/js/fd-gantt.js para o porque: licenca).
   Coluna de nomes fixa a esquerda + faixa de tempo que rola. Uma barra e uma div com left/width
   em pixels; um dia vale N pixels conforme o zoom.
   ============================================================================================ */
.fd-gantt-barra-topo {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: .2rem 0 .6rem;
}
.fd-gantt-zoom { display: inline-flex; gap: .25rem; }
.fd-gantt-zoom .on { background: var(--fer-navy, #0b3d62); color: #fff; border-color: var(--fer-navy, #0b3d62); }

.fd-gantt { display: flex; border: 1px solid var(--fer-border, #dee2e6); border-radius: .375rem; overflow: hidden; }
.fd-gantt-nomes {
    flex: 0 0 240px; border-right: 1px solid var(--fer-border, #dee2e6);
    background: var(--fer-surface, #fff);
}
.fd-gantt-cap {
    height: 28px; display: flex; align-items: center; padding: 0 .5rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--fer-muted, #6c757d); border-bottom: 1px solid var(--fer-border, #dee2e6);
}
.fd-gantt-nome {
    height: 30px; display: flex; align-items: center; font-size: .82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .4rem;
}
.fd-gantt-nome.pai { font-weight: 600; }
.fd-gantt-nome.fim { opacity: .55; text-decoration: line-through; }

.fd-gantt-scroll { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; }
.fd-gantt-tela { position: relative; }
.fd-gantt-regua { position: relative; height: 28px; border-bottom: 1px solid var(--fer-border, #dee2e6); }
.fd-gantt-dia {
    position: absolute; top: 0; height: 28px; box-sizing: border-box;
    border-right: 1px solid var(--fer-border-soft, #f0f1f3);
    font-size: .66rem; color: var(--fer-muted, #6c757d);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fd-gantt-dia.fds { background: var(--fer-border-soft, #f6f7f8); }
.fd-gantt-dia.mes { border-left: 1px solid var(--fer-border, #ced4da); font-weight: 700; color: var(--fer-text, #212529); }
.fd-gantt-hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc3545; opacity: .75; z-index: 3; }

.fd-gantt-linha { position: absolute; height: 30px; }
.fd-gantt-linha.semdata { cursor: crosshair; }
.fd-gantt-linha.semdata:hover { background: rgba(11, 61, 98, .05); }

.fd-gantt-barra {
    position: absolute; top: 5px; height: 16px; border-radius: 4px;
    background: var(--fer-navy, #0b3d62); color: #fff;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.fd-gantt-barra.arrastavel { cursor: grab; }
.fd-gantt-barra.arrastando { cursor: grabbing; opacity: .8; }
.fd-gantt-barra.fim { background: #198754; }
/* Listrada = periodo CALCULADO a partir das atividades de baixo. A diferenca visual e o que avisa,
   antes de tentar, que essa barra nao se arrasta. */
.fd-gantt-barra.derivada {
    background: repeating-linear-gradient(45deg,
        var(--fer-navy, #0b3d62), var(--fer-navy, #0b3d62) 5px,
        rgba(255, 255, 255, .28) 5px, rgba(255, 255, 255, .28) 10px);
    cursor: default;
}
.fd-gantt-barra-txt { font-size: .64rem; font-weight: 700; pointer-events: none; }
.fd-gantt-punho {
    position: absolute; top: 0; width: 7px; height: 100%; cursor: ew-resize;
}
.fd-gantt-punho.esq { left: -1px; }
.fd-gantt-punho.dir { right: -1px; }
.fd-gantt-barra.arrastavel:hover .fd-gantt-punho { background: rgba(255, 255, 255, .45); }

.fd-gantt-real {
    position: absolute; top: 22px; height: 5px; border-radius: 3px;
    background: var(--fer-muted, #9aa3ab); opacity: .8; z-index: 1;
}
.fd-gantt-real.fim { background: #198754; }
.fd-gantt-vazio { padding: 1.5rem .5rem; text-align: center; color: var(--fer-muted, #6c757d); }

@media (max-width: 768px) {
    .fd-gantt-nomes { flex: 0 0 140px; }
}


/* Financeiro do projeto e tabela de valor-hora. */
.fd-fin { margin: 0; }
.fd-fin th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fer-muted, #6c757d); }
.fd-fin td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.fd-fin-total td { border-top: 2px solid var(--fer-border, #dee2e6); font-weight: 600; }
.fd-fin-ruim { color: #b02a37; font-weight: 600; }
.fd-fin-bom { color: #0f5132; font-weight: 600; }
.fd-vh-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.fd-vh-form > div { flex: 1 1 180px; }
.fd-custo { text-align: right; }


/* Edicao da atividade dentro da arvore do projeto. */
.fd-tree-tit-edit {
    border: 0; background: transparent; padding: 0; text-align: left; color: inherit;
    border-bottom: 1px dashed transparent;
}
.fd-tree-tit-edit:hover { border-bottom-color: var(--fer-navy, #0b3d62); color: var(--fer-navy, #0b3d62); }
.fd-edicao { padding: .3rem 0; }
.fd-edicao-linha { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.fd-edicao-linha .fd-ed-tit { flex: 1 1 100%; min-width: 0; }
.fd-ed-resp-campo { flex: 0 0 260px; }
.fd-ed-rotulo {
    display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--fer-muted, #6c757d); margin-bottom: .15rem;
}
.fd-ed-desc { min-height: 90px; max-height: 260px; overflow-y: auto; background: var(--fer-surface, #fff); }
.fd-ed-desc img { max-width: 100%; }
.fd-edicao-acoes { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; }

/* ── Perguntas adicionais do chamado: pergunta em cima, resposta embaixo ──────────────────────
   🐛 Antes eram duas colunas (col-sm-5 / col-sm-7) e uma resposta sem espaço nenhum — uma URL de
   545 caracteres, no chamado 2453 — esticava a coluna e distorcia a página. Empilhar devolve a
   largura toda à resposta; `overflow-wrap:anywhere` é o que de fato quebra a palavra gigante.
   As DUAS coisas são necessárias: empilhado, um token sem espaço continua estourando o container. */
.fd-qa{ margin:0; }
.fd-qa dt{ font-weight:400; font-size:.84rem; color:var(--fer-texto-suave,#6c757d);
  margin-top:.7rem; line-height:1.35; }
.fd-qa dt:first-child{ margin-top:0; }
.fd-qa dd{ margin:.15rem 0 0; font-weight:600; line-height:1.4;
  overflow-wrap:anywhere; word-break:break-word; }
.fd-qa dd a{ font-weight:500; }

/* Mesma classe de defeito, mesmo remédio: texto colado pelo usuário pode trazer palavra sem
   espaço (URL, hash, caminho de rede) em qualquer um destes lugares. */
.fd-descbox-body, .ticket-descricao{ overflow-wrap:anywhere; }

/* ── Grade de itens da solicitação de compra ─────────────────────────────────────────────────
   Uma linha por item, com o botão de incluir PRIMÁRIO e dizendo o verbo. O de remover é um ×
   discreto com title — a lição do "pronto" de Projetos, que o dono do produto leu como
   "confirmar", clicou e perdeu o texto digitado. */
.fd-itens table { margin-bottom: .5rem; }
.fd-itens thead th { font-size: .72rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em;
  color: var(--fer-texto-suave, #6c757d); font-weight: 600; border-bottom: 1px solid var(--fer-borda); }
.fd-itens td { padding: .2rem .25rem; vertical-align: middle; }
.fd-itens td:first-child { padding-left: 0; }
.fd-item-acoes { text-align: center; white-space: nowrap; }
.fd-item-remover { border: 0; background: none; color: var(--fer-texto-suave, #6c757d);
  font-size: 1.1rem; line-height: 1; padding: 0 .35rem; border-radius: 4px; cursor: pointer; }
.fd-item-remover:hover { color: #a32638; background: rgba(163, 38, 56, .08); }

/* Itens da solicitação, na leitura do Detalhe. Mesma quebra de palavra do bloco de respostas:
   especificação colada de e-mail traz URL ou código sem espaço, e isso entortava a página. */
.fd-itens-lidos thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--fer-texto-suave, #6c757d); font-weight: 600; white-space: nowrap; }
.fd-itens-lidos td { vertical-align: top; overflow-wrap: anywhere; }

/* Tira de detalhes do item: link de referência e local de entrega. Escondida por padrão — é o que
   resolve a falta de espaço na grade sem abrir mão dos campos. O ⓘ fica marcado quando há algo
   dentro, senão esconder vira esquecer. */
.fd-item-det > td { padding: 0 !important; border-top: 0; }
.fd-item-det-bd { display: grid; grid-template-columns: auto 1fr auto 200px; gap: .4rem .6rem;
  align-items: center; padding: .5rem .6rem .7rem; background: var(--fer-cinza, #f8f9fa);
  border-radius: 0 0 8px 8px; }
.fd-item-det-bd label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--fer-texto-suave, #6c757d); font-weight: 600; margin: 0; white-space: nowrap; }
.fd-item-detalhes { border: 0; background: none; color: var(--fer-texto-suave, #6c757d);
  font-size: 1rem; line-height: 1; padding: 0 .3rem; border-radius: 4px; cursor: pointer; }
.fd-item-detalhes:hover { color: var(--fer-azul, #0057A8); background: rgba(0, 87, 168, .08); }
.fd-item-detalhes.tem { color: var(--fer-azul, #0057A8); font-weight: 700; }
@media (max-width: 768px) { .fd-item-det-bd { grid-template-columns: 1fr; } }

/* Miniatura da foto do item, na leitura. Pequena de propósito: o comprador percorre a lista para
   conferir o que foi pedido, não para admirar a imagem — e a foto em tamanho cheio está a um
   clique. */
.fd-item-foto-mini { width: 34px; height: 34px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--fer-borda); margin-right: .4rem; vertical-align: middle; }

/* ── Painel de Compras (quadro por etapa) ─────────────────────────────────────
   Rolagem HORIZONTAL de propósito: as colunas são os status do cadastro, e a
   quantidade deles muda sem deploy. Quebrar em linhas faria a leitura do fluxo
   (esquerda→direita) desaparecer justamente quando há muitas etapas.            */
.fd-quadro { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.fd-quadro-col { flex:0 0 268px; background:var(--fer-cinza-claro,#f6f7f9);
  border:1px solid var(--fer-borda); border-radius:10px; padding:10px; }
.fd-quadro-col h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
  color:#6c757d; display:flex; align-items:center; gap:6px; margin:0 0 8px; }
.fd-quadro-bolinha { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.fd-quadro-cont { margin-left:auto; background:var(--fer-branco); border:1px solid var(--fer-borda);
  border-radius:999px; padding:0 7px; font-size:.72rem; color:#495057; }

.fd-compra-card { display:block; text-decoration:none; color:inherit; background:var(--fer-branco);
  border:1px solid var(--fer-borda); border-radius:8px; padding:9px 10px; margin-bottom:8px;
  transition:box-shadow .12s, border-color .12s; }
/* Hover troca SÓ a cor/sombra — nunca tamanho de fonte nem altura (mexer na
   altura encadeia o hover na linha vizinha). */
.fd-compra-card:hover { color:inherit; border-color:var(--fer-azul); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.fd-compra-card.atencao { border-left:3px solid var(--sla-vencido-bg,#dc3545); }
.fd-compra-num { font-size:.74rem; color:#6c757d; font-weight:600; }
.fd-compra-flag { color:var(--sla-vencido-bg,#dc3545); margin-left:4px; }
.fd-compra-tit { font-weight:600; font-size:.88rem; margin:2px 0 6px; overflow-wrap:anywhere; }
.fd-compra-itens { list-style:none; margin:0 0 6px; padding:0; font-size:.78rem; color:#495057; }
.fd-compra-itens li { overflow-wrap:anywhere; margin-bottom:1px; }
.fd-compra-itens li.mais { color:#6c757d; font-style:italic; }
.fd-compra-semitem { font-size:.76rem; color:#adb5bd; font-style:italic; margin-bottom:6px; }
.fd-compra-pe { display:flex; justify-content:space-between; gap:8px; font-size:.72rem;
  color:#6c757d; border-top:1px solid var(--fer-borda); padding-top:5px; }
.fd-compra-pe span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:576px){ .fd-quadro-col { flex:0 0 84vw; } }

/* Itens pedidos em mais de uma solicitação — o bloco que sugere juntar a compra. */
.fd-agrupados { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.fd-agrupado { border:1px solid var(--fer-borda); border-left:3px solid var(--fer-azul);
  border-radius:8px; padding:8px 10px; background:var(--fer-branco); }
.fd-agrupado-qtd { font-size:1.25rem; font-weight:700; line-height:1.1; }
.fd-agrupado-qtd span { font-size:.85rem; font-weight:600; color:#6c757d; }
.fd-agrupado-desc { font-size:.86rem; margin-top:2px; overflow-wrap:anywhere; }
.fd-agrupado-n { font-size:.72rem; color:#6c757d; margin-top:3px; }
.fd-quadro-idade { font-size:.68rem; color:#6c757d; margin:-4px 0 6px 15px; }