/* ═══════════════════════════════════════════════════════════
   KIT SeteD · seted-ui.css · prévia v1.1 (22/08/2026) · saturação +10
   Um sistema para site, painel e portal. Prefixo: sd-
   Responsivo por container query: o componente se adapta
   ao espaço onde está, não à janela — serve dentro de
   qualquer ferramenta, no painel ou no portal.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Identidade (aprovada) */
  --sd-marca:#69A5C4;        /* Azul SeteD · faixas, ícones, fundos leves */
  --sd-amarelo:#F5D170;      /* Amarelo SeteD · destaque, "aguardando você" */
  --sd-marinho:#101936;      /* Marinho · cabeçalhos escuros (portal, site) */
  --sd-marinho-2:#3B2A66;    /* fim do degradê aprovado do portal */
  --sd-tinta:#1A1A2E;        /* texto principal */
  /* Ação (derivada do Azul SeteD, mesma família, contraste válido) */
  --sd-acao:#216D8F; --sd-acao-h:#1C6585; --sd-acao-a:#185D7B; --sd-acao-suave:#E2F0F9;
  /* Neutros (um só conjunto para as três frentes) */
  --sd-fundo:#F4F5F8; --sd-superficie:#FFFFFF; --sd-superficie-2:#F8F9FC;
  --sd-borda:#E3E4EC; --sd-borda-forte:#CDD0DC;
  --sd-texto:#1A1A2E; --sd-texto-2:#3A3A52; --sd-apoio:#646A80; --sd-fraco:#8A90A6;
  /* Estados · fundo pastel sólido + texto da mesma família (regra do painel) */
  --sd-ok-bg:#E1F7EC; --sd-ok:#087146;
  --sd-aviso-bg:#FFF1CC; --sd-aviso:#7A5200;
  --sd-erro-bg:#FEE7E7; --sd-erro:#A41313; --sd-erro-solido:#BE1A0E;
  --sd-info-bg:#E2F0F9; --sd-info:#185D7B;
  --sd-neutro-bg:#EEF0F5; --sd-neutro:#3A3A52;
  /* Ferramentas · cada ferramenta tem uma cor, igual no painel e no portal */
  --sd-f-azul:#216D8F; --sd-f-azul-bg:#E2F0F9; --sd-f-azul-tx:#185D7B;
  --sd-f-ouro:#C38C05; --sd-f-ouro-bg:#FDF2D2; --sd-f-ouro-tx:#7A5200;
  --sd-f-roxo:#483DC4; --sd-f-roxo-bg:#EBE9FC; --sd-f-roxo-tx:#362CAB;
  --sd-f-teal:#087D74; --sd-f-teal-bg:#DBF5F2; --sd-f-teal-tx:#06645E;
  --sd-f-rosa:#C42F7F; --sd-f-rosa-bg:#FCE6F1; --sd-f-rosa-tx:#972262;
  /* Tipografia · Poppins, 8 passos, piso 12 px */
  --sd-font:'Poppins',system-ui,sans-serif;
  --sd-t-display:2.25rem; --sd-t-titulo:1.75rem; --sd-t-secao:1.375rem; --sd-t-bloco:1.125rem;
  --sd-t-corpo:.9375rem; --sd-t-apoio:.875rem; --sd-t-meta:.8125rem; --sd-t-etiqueta:.75rem;
  /* Espaço · forma · sombra · toque */
  --sd-1:4px; --sd-2:8px; --sd-3:12px; --sd-4:16px; --sd-5:20px; --sd-6:24px; --sd-8:32px; --sd-10:40px; --sd-12:48px;
  --sd-r-s:8px; --sd-r:12px; --sd-r-l:16px; --sd-r-pill:999px;
  --sd-sombra:0 1px 2px rgba(26,26,46,.06),0 4px 12px -6px rgba(26,26,46,.12);
  --sd-sombra-2:0 12px 32px -16px rgba(26,26,46,.28);
  --sd-toque:44px;
  --sd-foco:0 0 0 3px rgba(33,109,143,.35);
  --sd-transicao:.16s ease;
  --sd-wrap-painel:1360px; --sd-wrap-portal:1240px; --sd-wrap-site:1120px;
}
@media (prefers-reduced-motion:reduce){:root{--sd-transicao:0s}}

.sd{font-family:var(--sd-font);color:var(--sd-texto);font-size:var(--sd-t-corpo);line-height:1.5;-webkit-font-smoothing:antialiased}
.sd *,.sd *::before,.sd *::after{box-sizing:border-box}
.sd :focus-visible{outline:none;box-shadow:var(--sd-foco);border-radius:var(--sd-r-s)}
.sd i[class^="ri-"]{line-height:1}

/* ── Tipografia ── */
.sd-display{font-size:var(--sd-t-display);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.sd-h1{font-size:var(--sd-t-titulo);font-weight:700;line-height:1.2;letter-spacing:-.015em;margin:0}
.sd-h2{font-size:var(--sd-t-secao);font-weight:600;line-height:1.25;margin:0}
.sd-h3{font-size:var(--sd-t-bloco);font-weight:600;line-height:1.3;margin:0}
.sd-corpo{font-size:var(--sd-t-corpo)} .sd-apoio{font-size:var(--sd-t-apoio);color:var(--sd-apoio)}
.sd-meta{font-size:var(--sd-t-meta);color:var(--sd-apoio)}
.sd-etiqueta{font-size:var(--sd-t-etiqueta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sd-apoio)}
.sd-link{color:var(--sd-acao);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.sd-link:hover{color:var(--sd-acao-h)}
.sd-num{font-variant-numeric:tabular-nums}

/* ── Botões · 44 px no celular, 40 no desktop ── */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:var(--sd-r);border:1.5px solid transparent;font:600 var(--sd-t-apoio)/1 var(--sd-font);cursor:pointer;white-space:nowrap;transition:background var(--sd-transicao),color var(--sd-transicao),border-color var(--sd-transicao),transform .08s;text-decoration:none;color:inherit;background:transparent}
.sd-btn:active{transform:translateY(1px)}
.sd-btn i{font-size:1.15em}
.sd-btn-primario{background:var(--sd-acao);color:#fff}
.sd-btn-primario:hover{background:var(--sd-acao-h)} .sd-btn-primario:active{background:var(--sd-acao-a)}
.sd-btn-secundario{background:var(--sd-superficie);color:var(--sd-acao);border-color:var(--sd-borda-forte)}
.sd-btn-secundario:hover{border-color:var(--sd-acao);background:var(--sd-acao-suave)}
.sd-btn-suave{background:var(--sd-acao-suave);color:var(--sd-acao-a)}
.sd-btn-suave:hover{background:#D2E6F3}
.sd-btn-leve{color:var(--sd-texto-2)} .sd-btn-leve:hover{background:var(--sd-neutro-bg)}
.sd-btn-perigo{background:var(--sd-erro-solido);color:#fff} .sd-btn-perigo:hover{background:#A41313}
.sd-btn-perigo-suave{background:var(--sd-erro-bg);color:var(--sd-erro)}
.sd-btn-ok{background:var(--sd-ok);color:#fff} .sd-btn-ok:hover{background:#0B5A3A}
.sd-btn-destaque{background:var(--sd-amarelo);color:var(--sd-tinta)} .sd-btn-destaque:hover{background:#EFC65A}
.sd-btn-p{min-height:34px;padding:0 12px;font-size:var(--sd-t-meta);border-radius:var(--sd-r-s)}
.sd-btn-g{min-height:48px;padding:0 24px;font-size:var(--sd-t-corpo)}
.sd-btn-icone{width:40px;min-width:40px;padding:0;border-radius:var(--sd-r-s)}
.sd-btn[disabled],.sd-btn.is-off{opacity:.5;pointer-events:none}
.sd-btn.is-carregando{position:relative;color:transparent!important}
.sd-btn.is-carregando::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sd-gira .7s linear infinite}
.sd-btn-secundario.is-carregando::after,.sd-btn-suave.is-carregando::after{border-color:rgba(33,109,143,.3);border-top-color:var(--sd-acao)}
@keyframes sd-gira{to{transform:rotate(360deg)}}
.sd-btn-cheio{width:100%}
.sd-acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@container sd (max-width:640px){
  .sd-btn{min-height:var(--sd-toque);font-size:var(--sd-t-corpo)}
  .sd-btn-p{min-height:40px} .sd-btn-icone{width:var(--sd-toque);min-width:var(--sd-toque);height:var(--sd-toque)}
  .sd-acoes.sd-acoes-empilha{flex-direction:column;align-items:stretch} .sd-acoes.sd-acoes-empilha .sd-btn{width:100%}
}

/* ── Campos · rótulo sempre visível, 16 px no celular (sem zoom do iPhone) ── */
.sd-campo{display:flex;flex-direction:column;gap:6px;margin:0}
.sd-campo>label,.sd-rotulo{font-size:var(--sd-t-apoio);font-weight:600;color:var(--sd-texto-2)}
.sd-campo .sd-opc{font-weight:400;color:var(--sd-fraco)}
.sd-input,.sd-select,.sd-textarea{width:100%;min-height:40px;padding:8px 12px;border:1.5px solid var(--sd-borda-forte);border-radius:var(--sd-r-s);background:var(--sd-superficie);font:400 var(--sd-t-corpo)/1.4 var(--sd-font);color:var(--sd-texto);transition:border-color var(--sd-transicao),box-shadow var(--sd-transicao)}
.sd-input::placeholder,.sd-textarea::placeholder{color:var(--sd-fraco)}
.sd-input:hover,.sd-select:hover,.sd-textarea:hover{border-color:#AEB3C4}
.sd-input:focus,.sd-select:focus,.sd-textarea:focus{outline:none;border-color:var(--sd-acao);box-shadow:var(--sd-foco)}
.sd-textarea{min-height:96px;resize:vertical}
.sd-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23646A80' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.sd-ajuda{font-size:var(--sd-t-meta);color:var(--sd-apoio)}
.sd-campo.is-erro .sd-input,.sd-campo.is-erro .sd-textarea,.sd-campo.is-erro .sd-select{border-color:var(--sd-erro-solido)}
.sd-campo.is-erro .sd-ajuda{color:var(--sd-erro);font-weight:500}
.sd-busca{position:relative} .sd-busca i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--sd-apoio)} .sd-busca .sd-input{padding-left:38px}
.sd-check{display:flex;align-items:center;gap:10px;min-height:var(--sd-toque);font-size:var(--sd-t-apoio);cursor:pointer}
.sd-check input{width:20px;height:20px;accent-color:var(--sd-acao);margin:0}
.sd-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--sd-t-apoio);min-height:var(--sd-toque)}
.sd-switch input{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--sd-borda-forte);position:relative;transition:background var(--sd-transicao);margin:0;flex:none}
.sd-switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--sd-transicao)}
.sd-switch input:checked{background:var(--sd-ok)} .sd-switch input:checked::after{transform:translateX(18px)}
.sd-form-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@container sd (max-width:640px){
  .sd-input,.sd-select,.sd-textarea{font-size:1rem;min-height:var(--sd-toque)}
  .sd-form-grid{grid-template-columns:1fr}
}

/* ── Etiquetas de estado · o mesmo vocabulário no painel e no portal ── */
.sd-estado{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px 0 8px;border-radius:var(--sd-r-pill);font-size:var(--sd-t-etiqueta);font-weight:600;letter-spacing:.02em;white-space:nowrap;background:var(--sd-neutro-bg);color:var(--sd-neutro)}
.sd-estado::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.sd-estado-rascunho{background:var(--sd-neutro-bg);color:var(--sd-neutro)}
.sd-estado-criacao{background:var(--sd-f-roxo-bg);color:var(--sd-f-roxo-tx)}
.sd-estado-voce{background:var(--sd-amarelo);color:var(--sd-tinta)}
.sd-estado-ajuste{background:var(--sd-aviso-bg);color:var(--sd-aviso)}
.sd-estado-aprovado{background:var(--sd-ok-bg);color:var(--sd-ok)}
.sd-estado-agendado{background:var(--sd-f-azul-bg);color:var(--sd-f-azul-tx)}
.sd-estado-publicado{background:var(--sd-f-teal-bg);color:var(--sd-f-teal-tx)}
.sd-estado-concluido{background:var(--sd-ok);color:#fff}
.sd-estado-atrasado{background:var(--sd-erro-bg);color:var(--sd-erro)}
.sd-contador{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--sd-r-pill);background:var(--sd-amarelo);color:var(--sd-tinta);font-size:var(--sd-t-etiqueta);font-weight:700}

/* ── Cards ── */
.sd-card{background:var(--sd-superficie);border:1px solid var(--sd-borda);border-radius:var(--sd-r-l);box-shadow:var(--sd-sombra)}
.sd-card-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--sd-borda)}
.sd-card-corpo{padding:20px}
.sd-card-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--sd-borda);background:var(--sd-superficie-2);border-radius:0 0 var(--sd-r-l) var(--sd-r-l)}
@container sd (max-width:640px){.sd-card-cab,.sd-card-corpo,.sd-card-pe{padding-left:16px;padding-right:16px}}

/* Card de ferramenta · o menu do portal e do painel */
.sd-ferramentas{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.sd-ferr{position:relative;display:flex;flex-direction:column;gap:10px;min-height:132px;padding:16px;border-radius:var(--sd-r-l);background:var(--sd-superficie);border:1px solid var(--sd-borda);box-shadow:var(--sd-sombra);cursor:pointer;text-align:left;font-family:inherit;color:var(--sd-texto);transition:transform var(--sd-transicao),box-shadow var(--sd-transicao),border-color var(--sd-transicao);scroll-snap-align:start}
.sd-ferr:hover{transform:translateY(-2px);box-shadow:var(--sd-sombra-2);border-color:var(--sd-borda-forte)}
.sd-ferr .ico{width:40px;height:40px;border-radius:var(--sd-r);display:grid;place-items:center;font-size:1.3rem;background:var(--sd-f-azul-bg);color:var(--sd-f-azul-tx)}
.sd-ferr b{font-size:var(--sd-t-corpo);font-weight:600;line-height:1.25}
.sd-ferr small{font-size:var(--sd-t-meta);color:var(--sd-apoio);line-height:1.35}
.sd-ferr .sd-contador{position:absolute;top:12px;right:12px}
.sd-ferr.is-ativo{border-color:var(--sd-acao);box-shadow:0 0 0 1px var(--sd-acao),var(--sd-sombra)}
.sd-ferr-azul .ico{background:var(--sd-f-azul-bg);color:var(--sd-f-azul-tx)} .sd-ferr-ouro .ico{background:var(--sd-f-ouro-bg);color:var(--sd-f-ouro-tx)}
.sd-ferr-roxo .ico{background:var(--sd-f-roxo-bg);color:var(--sd-f-roxo-tx)} .sd-ferr-teal .ico{background:var(--sd-f-teal-bg);color:var(--sd-f-teal-tx)} .sd-ferr-rosa .ico{background:var(--sd-f-rosa-bg);color:var(--sd-f-rosa-tx)}
@container sd (max-width:640px){
  .sd-ferramentas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 16px 12px;margin:0 -16px;scrollbar-width:none}
  .sd-ferramentas::-webkit-scrollbar{display:none}
  .sd-ferr{flex:0 0 78%;max-width:300px;min-height:120px}
}

/* KPI · fundo pastel sólido, texto da família da cor (regra aprovada do painel) */
.sd-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.sd-kpi{padding:14px 16px;border-radius:var(--sd-r);display:flex;flex-direction:column;gap:4px;background:var(--sd-info-bg);color:var(--sd-info)}
.sd-kpi b{font-size:1.75rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.sd-kpi span{font-size:var(--sd-t-meta);font-weight:600}
.sd-kpi-voce{background:var(--sd-amarelo);color:var(--sd-tinta)} .sd-kpi-roxo{background:var(--sd-f-roxo-bg);color:var(--sd-f-roxo-tx)} .sd-kpi-ok{background:var(--sd-ok-bg);color:var(--sd-ok)} .sd-kpi-teal{background:var(--sd-f-teal-bg);color:var(--sd-f-teal-tx)} .sd-kpi-erro{background:var(--sd-erro-bg);color:var(--sd-erro)}
@container sd (max-width:640px){.sd-kpis{grid-template-columns:1fr 1fr}}

/* Card de item · post, tarefa, pedido, job */
.sd-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:start;padding:16px;background:var(--sd-superficie);border:1px solid var(--sd-borda);border-radius:var(--sd-r-l);box-shadow:var(--sd-sombra)}
.sd-item .sd-miniatura{width:88px;aspect-ratio:4/5;border-radius:var(--sd-r-s);background:var(--sd-neutro-bg);object-fit:cover;display:grid;place-items:center;color:var(--sd-fraco);font-size:1.4rem}
.sd-item .titulo{font-weight:600;font-size:var(--sd-t-corpo);line-height:1.3}
.sd-item .meta{font-size:var(--sd-t-meta);color:var(--sd-apoio);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sd-item .meta i{font-size:.9em}
.sd-item .sd-acoes{grid-column:3;align-self:end}
@container sd (max-width:640px){
  .sd-item{grid-template-columns:72px 1fr;gap:12px}
  .sd-item .sd-miniatura{width:72px}
  .sd-item .sd-acoes{grid-column:1/-1;flex-direction:column;align-items:stretch} .sd-item .sd-acoes .sd-btn{width:100%}
}

/* ── Tabela no desktop · lista no celular (mesmo HTML) ── */
.sd-tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--sd-t-apoio)}
.sd-tabela th{text-align:left;font-size:var(--sd-t-etiqueta);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sd-apoio);padding:10px 14px;border-bottom:1px solid var(--sd-borda);background:var(--sd-superficie-2)}
.sd-tabela td{padding:12px 14px;border-bottom:1px solid var(--sd-borda);vertical-align:middle}
.sd-tabela tr:hover td{background:var(--sd-superficie-2)}
.sd-tabela .dir{text-align:right}
.sd-tabela-wrap{overflow-x:auto;border:1px solid var(--sd-borda);border-radius:var(--sd-r-l);background:var(--sd-superficie)}
@container sd (max-width:640px){
  .sd-tabela thead{display:none}
  .sd-tabela,.sd-tabela tbody,.sd-tabela tr,.sd-tabela td{display:block;width:100%}
  .sd-tabela tr{padding:12px 16px;border-bottom:1px solid var(--sd-borda);display:grid;grid-template-columns:1fr auto;gap:4px 12px}
  .sd-tabela td{padding:0;border:0}
  .sd-tabela td[data-rotulo]::before{content:attr(data-rotulo);display:block;font-size:var(--sd-t-etiqueta);text-transform:uppercase;letter-spacing:.05em;color:var(--sd-fraco);font-weight:600}
  .sd-tabela td.principal{grid-column:1;font-weight:600;font-size:var(--sd-t-corpo)}
  .sd-tabela td.estado{grid-column:2;grid-row:1;justify-self:end}
  .sd-tabela td.dir{text-align:left}
}

/* ── Avisos ── */
.sd-alerta{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--sd-r);font-size:var(--sd-t-apoio);line-height:1.45;background:var(--sd-info-bg);color:var(--sd-info)}
.sd-alerta i{font-size:1.2rem;flex:none;margin-top:1px} .sd-alerta b{font-weight:600}
.sd-alerta-ok{background:var(--sd-ok-bg);color:var(--sd-ok)} .sd-alerta-aviso{background:var(--sd-aviso-bg);color:var(--sd-aviso)} .sd-alerta-erro{background:var(--sd-erro-bg);color:var(--sd-erro)}
.sd-toast{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--sd-r);background:var(--sd-tinta);color:#fff;font-size:var(--sd-t-apoio);font-weight:500;box-shadow:var(--sd-sombra-2)}
.sd-toast i{color:var(--sd-amarelo);font-size:1.2rem} .sd-toast.ok i{color:#6EE7B7} .sd-toast.erro i{color:#FCA5A5}
.sd-vazio{text-align:center;padding:32px 20px;border:1.5px dashed var(--sd-borda-forte);border-radius:var(--sd-r-l);color:var(--sd-apoio)}
.sd-vazio i{font-size:2rem;color:var(--sd-marca);display:block;margin-bottom:8px}
.sd-vazio b{display:block;color:var(--sd-texto);font-size:var(--sd-t-corpo);margin-bottom:4px}
.sd-vazio .sd-btn{margin-top:14px}
.sd-skel{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--sd-neutro-bg) 25%,#F7F8FB 50%,var(--sd-neutro-bg) 75%);background-size:200% 100%;animation:sd-skel 1.2s linear infinite}
@keyframes sd-skel{to{background-position:-200% 0}}

/* ── Navegação ── */
.sd-topo{display:flex;align-items:center;gap:16px;padding:0 20px;min-height:64px;background:linear-gradient(105deg,var(--sd-marinho) 52%,var(--sd-marinho-2));color:#fff}
.sd-topo .marcas{display:flex;align-items:center;gap:14px;font-weight:700;font-size:var(--sd-t-corpo)}
.sd-topo .marcas .sep{width:1px;height:24px;background:rgba(255,255,255,.28)}
.sd-topo .espaco{flex:1}
.sd-topo .sd-btn-icone{color:#fff;background:rgba(255,255,255,.12)}
.sd-avatar{width:36px;height:36px;border-radius:50%;background:var(--sd-marca);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--sd-t-meta);flex:none}
.sd-voltar{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 8px;border-radius:var(--sd-r-pill);background:var(--sd-superficie);border:1px solid var(--sd-borda);color:var(--sd-texto-2);font-size:var(--sd-t-apoio);font-weight:600;text-decoration:none}
.sd-voltar:hover{border-color:var(--sd-acao);color:var(--sd-acao)}
.sd-abas{display:flex;gap:4px;border-bottom:1px solid var(--sd-borda);overflow-x:auto;scrollbar-width:none}
.sd-abas::-webkit-scrollbar{display:none}
.sd-aba{min-height:44px;padding:0 14px;border:0;background:none;font:500 var(--sd-t-apoio)/1 var(--sd-font);color:var(--sd-apoio);border-bottom:2.5px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.sd-aba.is-ativa{color:var(--sd-acao);border-bottom-color:var(--sd-acao);font-weight:600}
.sd-filtros{display:flex;gap:8px;flex-wrap:wrap}
.sd-filtro{min-height:36px;padding:0 14px;border-radius:var(--sd-r-pill);border:1.5px solid var(--sd-borda-forte);background:var(--sd-superficie);font:500 var(--sd-t-meta)/1 var(--sd-font);color:var(--sd-texto-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sd-filtro.is-ativo{background:var(--sd-tinta);border-color:var(--sd-tinta);color:#fff}
.sd-filtro .n{font-variant-numeric:tabular-nums;opacity:.75}
@container sd (max-width:640px){.sd-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin:0 -16px;padding-left:16px;padding-right:16px} .sd-filtros::-webkit-scrollbar{display:none} .sd-filtro{min-height:40px}}
/* Painel · lateral no desktop, barra inferior no celular */
.sd-lateral{width:232px;background:var(--sd-superficie);border-right:1px solid var(--sd-borda);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.sd-lateral .grupo{font-size:var(--sd-t-etiqueta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sd-fraco);padding:14px 12px 6px}
.sd-lateral a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:var(--sd-r-s);color:var(--sd-texto-2);font-size:var(--sd-t-apoio);font-weight:500;text-decoration:none}
.sd-lateral a i{font-size:1.15rem;color:var(--sd-apoio)}
.sd-lateral a:hover{background:var(--sd-neutro-bg)} .sd-lateral a.is-ativo{background:var(--sd-acao-suave);color:var(--sd-acao-a);font-weight:600} .sd-lateral a.is-ativo i{color:var(--sd-acao)}
.sd-barra-inferior{display:none}
@container sd (max-width:640px){
  .sd-lateral{display:none}
  .sd-barra-inferior{display:grid;grid-template-columns:repeat(5,1fr);background:var(--sd-superficie);border-top:1px solid var(--sd-borda);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .sd-barra-inferior a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;border-radius:var(--sd-r-s);color:var(--sd-apoio);font-size:.6875rem;font-weight:600;text-decoration:none}
  .sd-barra-inferior a i{font-size:1.35rem} .sd-barra-inferior a.is-ativo{color:var(--sd-acao)}
}

/* ── Histórico de ida e volta ── */
.sd-historico{display:flex;flex-direction:column;gap:0;position:relative;padding-left:28px}
.sd-historico::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--sd-borda)}
.sd-passo{position:relative;padding:0 0 18px}
.sd-passo::before{content:"";position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--sd-superficie);border:2.5px solid var(--sd-marca)}
.sd-passo.voce::before{border-color:var(--sd-amarelo);background:var(--sd-amarelo)} .sd-passo.ok::before{border-color:var(--sd-ok);background:var(--sd-ok)} .sd-passo.ajuste::before{border-color:#E0A100;background:#E0A100}
.sd-passo .quem{font-size:var(--sd-t-meta);color:var(--sd-apoio);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sd-passo .quem b{color:var(--sd-texto);font-weight:600}
.sd-passo .fala{margin-top:4px;padding:10px 14px;border-radius:0 var(--sd-r) var(--sd-r) var(--sd-r);background:var(--sd-superficie-2);border:1px solid var(--sd-borda);font-size:var(--sd-t-apoio)}
.sd-passo .anexo{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border-radius:var(--sd-r-s);border:1px solid var(--sd-borda);background:var(--sd-superficie);font-size:var(--sd-t-meta);color:var(--sd-texto-2)}
.sd-comentar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
@container sd (max-width:640px){.sd-comentar{grid-template-columns:1fr} .sd-comentar .sd-btn{width:100%}}

/* ── Arquivos ── */
.sd-arquivos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.sd-arquivo{display:flex;flex-direction:column;background:var(--sd-superficie);border:1px solid var(--sd-borda);border-radius:var(--sd-r-l);overflow:hidden}
.sd-arquivo .previa{aspect-ratio:16/10;background:var(--sd-neutro-bg);display:grid;place-items:center;color:var(--sd-fraco);font-size:1.8rem;position:relative}
.sd-arquivo .previa .formato{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.94);color:var(--sd-texto-2);font-size:var(--sd-t-etiqueta);font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.04em}
.sd-arquivo .dados{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.sd-arquivo .dados b{font-size:var(--sd-t-apoio);font-weight:600;line-height:1.3}
.sd-arquivo .dados small{font-size:var(--sd-t-meta);color:var(--sd-apoio)}
.sd-arquivo .sd-btn{margin:0 14px 14px}
.sd-enviar{border:1.5px dashed var(--sd-borda-forte);border-radius:var(--sd-r-l);padding:24px;text-align:center;color:var(--sd-apoio);font-size:var(--sd-t-apoio);background:var(--sd-superficie-2)}
.sd-enviar i{font-size:1.8rem;color:var(--sd-acao);display:block;margin-bottom:6px}
.sd-enviar b{color:var(--sd-texto)}
@container sd (max-width:640px){.sd-arquivos{grid-template-columns:1fr 1fr}}

/* ── Diálogo no desktop · folha inferior no celular ── */
.sd-dialogo{width:min(560px,100%);background:var(--sd-superficie);border-radius:var(--sd-r-l);box-shadow:var(--sd-sombra-2);border:1px solid var(--sd-borda);display:flex;flex-direction:column;max-height:82vh;overflow:hidden}
.sd-dialogo .cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--sd-borda)}
.sd-dialogo .corpo{padding:20px;overflow:auto}
.sd-dialogo .pe{padding:14px 20px;border-top:1px solid var(--sd-borda);background:var(--sd-superficie-2);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.sd-dialogo .pega{display:none}
@container sd (max-width:640px){
  .sd-dialogo{width:100%;border-radius:var(--sd-r-l) var(--sd-r-l) 0 0;max-height:none}
  .sd-dialogo .pega{display:block;width:40px;height:4px;border-radius:2px;background:var(--sd-borda-forte);margin:10px auto 0}
  .sd-dialogo .cab{padding:12px 16px} .sd-dialogo .corpo{padding:16px}
  .sd-dialogo .pe{flex-direction:column;padding:12px 16px calc(12px + env(safe-area-inset-bottom));position:sticky;bottom:0} .sd-dialogo .pe .sd-btn{width:100%}
}

/* ── Utilidades ── */
.sd-pilha{display:flex;flex-direction:column;gap:12px} .sd-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sd-sep{height:1px;background:var(--sd-borda);margin:16px 0}
.sd-oculto-celular{display:initial} .sd-so-celular{display:none}
@container sd (max-width:640px){.sd-oculto-celular{display:none} .sd-so-celular{display:initial}}