/* sistema.css · só a mecânica do protótipo navegável. A aparência vem de base.css (cópia dos previews).
   Regra do Cauê: função pedida não autoriza visual novo. Nada aqui cria cor, fonte ou componente novo:
   - .dialog* copiado de previews/01-cadastros.html:356-363 (igual em 02, 03, 04, 05, 08);
   - .drawer copiado de previews/03-projetos.html:457-458;
   - o fundo das camadas é a mesma cor da .sheet-scrim de base.css, escrita a partir do token --text com color-mix
     (--text a 28%), como em estilos/03b-projetos-cronograma.css; o mesmo vale para as sombras abaixo. */

[hidden]{display:none!important}

/* diálogo e painel lateral (cópia dos previews de módulo) */
.dialog{width:560px;max-width:calc(100% - 32px);padding:0;overflow:hidden;background:var(--glass-strong)}
.dialog.wide{width:720px}
.dialog-head{display:flex;align-items:flex-start;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:17px;font-weight:600}
.dialog-head p{font-size:13px;color:var(--text-3);margin-top:4px}
.dialog-head .btn-icon{margin-left:auto}
.dialog-body{padding:24px;display:flex;flex-direction:column;gap:20px}
.dialog-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:16px 24px;border-top:1px solid var(--line);flex-wrap:wrap}
.drawer{width:520px;max-width:100%;padding:0;overflow:hidden;background:var(--glass-strong);border-radius:var(--r-card) 0 0 var(--r-card);display:flex;flex-direction:column}
.drawer .dialog-body{gap:24px}

/* camadas abertas por data-abre */
[data-modal]{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;background:color-mix(in srgb,var(--text) 28%,transparent);overflow:auto}
[data-painel]{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;background:color-mix(in srgb,var(--text) 28%,transparent)}
[data-painel] > *{height:100%;overflow:auto}
/* a rolagem que chega ao fim da camada não passa para a página de trás (o resto está em app.js) */
[data-modal],[data-painel] > *,.sheet{overscroll-behavior:contain}
.sheet-scrim{z-index:45}
.sheet{z-index:46}

/* avisos do protótipo (pilha no canto) */
#ss-avisos{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;width:380px;max-width:calc(100% - 32px)}
#ss-avisos .alert{margin:0;box-shadow:0 8px 24px color-mix(in srgb,var(--text) 12%,transparent)}
/* X de fechar no canto de cima à direita (p135, 15/10/2026); o texto deixa a faixa dele livre */
#ss-avisos .alert{position:relative;padding-right:44px}
#ss-avisos .ss-aviso-x{position:absolute;top:6px;right:6px;width:28px;height:28px}
#ss-avisos .ss-aviso-x .ico{margin-top:0}
/* Suporte (p134, 15/10/2026): o diálogo mora fora das telas, então copia o desenho de .textarea e .field.full do
   painel da tarefa (:where(.ss-tf), mais abaixo) em vez de desenhar campo novo */
#ss-suporte .field.full{grid-column:1/-1}
#ss-suporte .textarea{display:block;width:100%;min-height:96px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-input);background:var(--glass-hi);font:400 14px var(--font);line-height:1.5;color:var(--text);resize:vertical}

/* faixa "protótipo" e estados da tela */
.ss-faixa{margin-bottom:16px;align-items:center}
.ss-faixa .btn{margin-left:auto;flex:none}
.ss-estados{margin-top:24px;padding:4px 0}
.ss-estados summary{cursor:pointer;padding:12px 20px;font-size:13px;font-weight:600;color:var(--text-2)}
.ss-estados .states{padding:0 20px 20px}

/* topo: avatar leva ao perfil */
.ss-avatar{text-decoration:none}
.ss-avatar:hover{border-color:var(--border-strong)}

/* clicável parece clicável */
[data-vai],tbody tr:has(a[href^="#/"]),.search[data-pendente]{cursor:pointer}
/* (menu sem "em breve" desde 2026-10-01: CRM e Obras são itens normais) */

html.ss-sem-barra .bottombar{display:none}

@media (max-width:767px){
  #ss-avisos{bottom:84px;right:16px}
  [data-modal]{padding:16px 0}
}

/* faixa "protótipo" também nas telas de acesso (login, senha, convite) */
.ss-acesso{max-width:720px;margin:0 auto;padding:16px 16px 0}
.ss-acesso .ss-faixa{margin-bottom:0}

/* logo da empresa no topo do menu lateral (pedido do Cauê, 2026-10-01): ocupa a mesma largura do
   .nav-item (padding lateral de 12px, igual ao .nav), altura proporcional. Arquivos em marca/ cortados da
   borda transparente, com 412px de largura (2x os 206px exibidos). */
.ss-marca{padding:16px 12px 12px}
.ss-logo{display:block;width:100%;height:auto}
/* logo branco só com o tema escuro EXPLÍCITO. Não usar prefers-color-scheme: a página é clara mesmo
   com o Windows escuro, e o logo branco sumiria no fundo branco. */
.ss-logo-escuro{display:none}
:root[data-tema="escuro"] .ss-logo-claro{display:none}
:root[data-tema="escuro"] .ss-logo-escuro{display:block}

/* menu em acordeom: o grupo é <button> (abre e fecha) com a mesma cara do .nav-item; item da tela atual aceso
   com os mesmos tokens do .nav-item.active */
.ss-grupo{width:100%;border:0;background:none;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.ss-grupo.active{background:var(--accent-soft)}
.nav-sub a[aria-current="page"]{color:var(--accent-text);background:var(--accent-soft);font-weight:500}
/* folha Mais (celular): Cadastros e Configurações abrem a mesma lista do menu */
.ss-folha-grupo{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 12px;border:0;border-radius:var(--r-btn);background:none;font:inherit;font-size:15px;color:var(--text);text-align:left;cursor:pointer}
.ss-folha-grupo:hover{background:var(--sunk)}
.sheet .ss-folha-sub a{min-height:44px;padding-left:48px;font-size:14px;color:var(--text-2)}
.sheet{max-height:85vh;overflow:auto}

/* conteúdo na largura completa, alinhado à barra superior (pedido do Cauê, 2026-10-01). base.css:77 prende
   .content em 1180px com 12px de recuo; aqui as bordas do conteúdo passam a ser as bordas da .topbar.
   Só no computador: no celular vale o .content da base (16px de recuo). */
@media (min-width:768px){
  .content{max-width:none;padding-left:0;padding-right:0}
}

/* busca do topo: o painel usa o molde do sino (.drop); só alinha à esquerda da caixa de busca */
.ss-busca{right:96px;max-height:70vh;overflow:auto}
.ss-busca .drop-head .input{height:36px}
.search[id="ss-busca"]{cursor:pointer}

/* menu de ações (três pontinhos): molde do painel do sino */
.ss-menu{width:auto;min-width:220px;z-index:55;padding:6px 0}
.ss-menu .ntf{padding:10px 16px}
/* lista de seleção (despacho 22): o mesmo menu ancorado, com opções */
.ss-nativo{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden}
button.ss-combo{font:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;white-space:nowrap;overflow:hidden}
button.ss-combo::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);flex:none;margin-top:-3px}
button.ss-combo:disabled{cursor:not-allowed;color:var(--text-3)}
.ss-lista [role="option"]{cursor:pointer;white-space:normal}
.ss-lista [role="option"]:focus{background:var(--sunk);outline:2px solid var(--focus);outline-offset:-2px}
.ss-lista [aria-selected="true"]{font-weight:600;color:var(--accent-text)}
.ss-lista [aria-disabled="true"]{color:var(--text-3);cursor:not-allowed}

/* rodada 3: painéis do topo (sino, busca, menu de ações) com fundo sólido. Dentro da .topbar, que já tem
   desfoque, o .glass.strong (80% branco) deixava o texto da página aparecer atrás. */
.drop.glass,.drop.glass.strong{background:var(--bg)}
/* lupa: só no celular, onde a caixa de busca do topo some */
.ss-lupa{display:none}
.ss-lupa+.iconbtn{margin-left:0}
@media (max-width:767px){
  .topbar .ss-lupa{display:grid;margin-left:auto}
  .ss-busca{right:0}
}

/* rodada 3: alerta com botão no celular empilha (texto em cima, botão embaixo), em todo módulo */
@media (max-width:767px){
  .alert{flex-wrap:wrap}
  .alert > div{flex:1 1 calc(100% - 40px);min-width:0}
  .alert .act{margin-left:30px}
}

/* logo da empresa no topo do celular (pedido do Cauê, 2026-10-02): só o logo, 36px de altura dentro da
   barra de 56px, que não muda. Mesmo arquivo da lateral (412px de largura, nítido a 67px). */
.ss-logo-m{display:block;height:36px;width:auto}

/* avatar do topo virou botão (menu da conta: perfil, "Ver o sistema como…", sair) e a lista de cargos */
.ss-avatar{font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0}
.ss-cargo{width:100%;border:1px solid var(--line);border-radius:var(--r-btn);background:none;font:inherit;text-align:left;cursor:pointer;align-items:center}
.ss-cargo .txt small{display:block}

/* menus que os módulos montaram como data-modal: abertos por um botão de três pontinhos, viram menu
   ancorado embaixo do botão (app.js, ancora). Fundo sem véu; a caixa encolhe para o conteúdo. */
[data-modal].ss-ancorado{background:transparent;padding:0;display:block;overflow:visible}
[data-modal].ss-ancorado > *{width:auto;min-width:260px;max-width:min(380px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;box-shadow:0 12px 32px color-mix(in srgb,var(--text) 16%,transparent)}

/* ===== recursos comuns (2026-10-02): campo de data em camada, cronômetro, @ e /, painel ajustável =====
   Ligados por atributo; ver CONVENCOES.md, "Recursos comuns". Cor só por token. */
/* (1) campo de data */
.ss-campo-cx{padding:8px;min-width:280px}
.ss-cal-tit{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:6px 6px 8px}
.ss-datas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.ss-datas button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--r-input);background:var(--glass-strong);font:inherit;cursor:pointer;text-align:left;color:var(--text)}
.ss-datas button small{font-size:11px;color:var(--text-3)}
.ss-datas button b{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.ss-datas button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ss-atalhos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ss-atalhos button{height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;font:inherit;font-size:12px;color:var(--text-2);cursor:pointer}
.ss-atalhos button:hover{border-color:var(--border-strong)}
.ss-cal{width:264px}
.ss-cal-h{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
.ss-cal-h b{font-size:14px;font-weight:600}
.ss-cal-s,.ss-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ss-cal-s span{font-size:11px;color:var(--text-3);padding:4px 0}
.ss-dia{height:32px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums}
.ss-dia:hover{background:var(--sunk)}
.ss-dia.hoje{box-shadow:inset 0 0 0 1px var(--accent)}
.ss-dia.faixa{background:var(--accent-soft);border-radius:0}
.ss-dia.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.ss-cal-erro{font-size:12px;color:var(--danger);margin:6px 4px 0}
.ss-cal-pe{display:flex;gap:8px;justify-content:flex-end;padding-top:8px;margin-top:8px;border-top:1px solid var(--line-soft)}
/* (2) cronômetro */
[data-cronometro]{display:inline-flex;align-items:center;gap:6px}
.ss-crono-btn{width:28px;height:28px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--glass-strong);cursor:pointer;color:var(--text-2);font-size:11px;padding:0}
.ss-crono-btn:hover{border-color:var(--border-strong);color:var(--text)}
.ss-crono-btn.on{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.ss-crono-tempo{font-variant-numeric:tabular-nums;font-size:12px;color:var(--accent-text);font-weight:600}
/* (3) @ e / */
[data-mencoes][contenteditable]{display:block!important;min-height:88px;cursor:text;outline:0;white-space:pre-wrap;overflow-wrap:anywhere}
[data-mencoes] b,[data-mencoes] strong,[data-mencoes] i,[data-mencoes] em{display:inline;font-size:inherit}
[data-mencoes] ul{padding-left:20px;margin:4px 0}
[data-mencoes][contenteditable]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
[data-mencoes][contenteditable]:empty::before{content:attr(data-placeholder);color:var(--text-3)}
[data-mencoes] blockquote{border-left:3px solid var(--line);padding-left:10px;color:var(--text-2);margin:4px 0}
.ss-chip{display:inline-flex;padding:0 6px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-text);font-weight:500;text-decoration:none}
.ss-check{display:inline-flex;vertical-align:-3px;margin-right:4px}
.ss-mencao{position:fixed;z-index:90;min-width:240px;max-width:min(360px,calc(100vw - 16px));max-height:280px;overflow:auto;padding:6px}
.ss-mencao-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:6px 10px 4px}
.ss-mencao-op{padding:8px 10px;border-radius:8px;font-size:14px;color:var(--text);cursor:pointer}
.ss-mencao-op:hover,.ss-mencao-op.on{background:var(--accent-soft);color:var(--accent-text)}
/* menu "/" (barra de comandos): seções, duas colunas, ícone em quadradinho */
.ss-barra{position:fixed;z-index:90;width:min(560px,calc(100vw - 16px));max-height:min(420px,calc(100vh - 16px));display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:14px}
.ss-barra-q{flex:none;display:flex;align-items:baseline;gap:1px;padding:10px 16px;font-size:14px;border-bottom:1px solid var(--line-soft);color:var(--text)}
.ss-barra-q .v{color:var(--text-3)}
.ss-barra-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 8px 8px}
.ss-barra-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:12px 8px 6px}
.ss-barra-grade{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.ss-barra-op{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 8px;border-radius:8px;font-size:14px;color:var(--text);cursor:pointer}
.ss-barra-op.on{background:var(--sunk)}
.ss-barra-ic{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:600;color:var(--text-2)}
.ss-barra-rot{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-barra-vazio{margin:0;padding:14px 8px;font-size:13px;color:var(--text-2)}
@media (max-width:520px){.ss-barra-grade{grid-template-columns:1fr}}
/* (4) painel ajustável: a borda esquerda inteira é a alça */
.ss-alca{flex:none;align-self:stretch;width:12px;margin-right:-6px;position:relative;z-index:2;cursor:col-resize;display:flex;align-items:center;justify-content:center;touch-action:none}
.ss-alca::before{content:"";width:4px;height:48px;border-radius:var(--r-pill);background:var(--border-strong);opacity:.7}
.ss-alca:hover::before,.ss-alca:focus-visible::before,.ss-alca.ativa::before{background:var(--accent);opacity:1}
.ss-alca:focus-visible{outline:0}
html.ss-arrastando,html.ss-arrastando *{cursor:col-resize!important;user-select:none}
[data-painel] > .drawer[data-redimensiona]{max-width:calc(100vw - 280px)}
@media (max-width:767px){.ss-alca{display:none}[data-painel] > .drawer[data-redimensiona]{width:100%!important;max-width:100%}}
/* (5) editor de texto: tabela, foto e arquivo (editor-tabela.js, despacho dfui-01). Cor só por token com significado. */
.ed-tab-caixa{max-width:100%;overflow-x:auto;margin:0 0 12px;-webkit-overflow-scrolling:touch}
.ed-tab-caixa > table.ed-tab{margin-bottom:0}
table.ed-tab{border-collapse:collapse;min-width:100%;font-size:14px}
table.ed-tab.ed-tab-fixa{table-layout:fixed;min-width:0}
table.ed-tab th,table.ed-tab td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;min-width:48px;overflow-wrap:anywhere}
table.ed-tab > thead th,table.ed-tab th[scope="row"]{background:var(--sunk);font-weight:600;color:var(--text-2)}
table.ed-tab.ed-tab td[data-alinha="centro"],table.ed-tab.ed-tab th[data-alinha="centro"]{text-align:center}
table.ed-tab.ed-tab td[data-alinha="direita"],table.ed-tab.ed-tab th[data-alinha="direita"]{text-align:right}
table.ed-tab.ed-tab td[data-quebra="nao"],table.ed-tab.ed-tab th[data-quebra="nao"]{white-space:nowrap;overflow-wrap:normal}
table.ed-tab.ed-tab td[data-quebra="sim"],table.ed-tab.ed-tab th[data-quebra="sim"]{white-space:normal}
table.ed-tab td[data-tipo="numero"],table.ed-tab td[data-tipo="dinheiro"],table.ed-tab td[data-tipo="data"],table.ed-tab tfoot td{font-variant-numeric:tabular-nums}
table.ed-tab td[data-fundo="destaque"],table.ed-tab th[data-fundo="destaque"]{background:var(--accent-soft)}
table.ed-tab td[data-fundo="ok"],table.ed-tab th[data-fundo="ok"]{background:var(--ok-soft)}
table.ed-tab td[data-fundo="atencao"],table.ed-tab th[data-fundo="atencao"]{background:var(--warn-soft)}
table.ed-tab td[data-fundo="problema"],table.ed-tab th[data-fundo="problema"]{background:var(--danger-soft)}
table.ed-tab.ed-tab td[data-erro]{box-shadow:inset 0 0 0 2px var(--danger)}
table.ed-tab > tfoot td,table.ed-tab > tfoot th{background:var(--sunk);font-weight:600;color:var(--text);border-top:2px solid var(--border-strong)}
table.ed-tab > thead th[aria-sort="ascending"]::after{content:" ↑";color:var(--text-3)}
table.ed-tab > thead th[aria-sort="descending"]::after{content:" ↓";color:var(--text-3)}
table.ed-tab td[data-tipo="pessoa"],table.ed-tab td[data-tipo="status"]{cursor:pointer}
table.ed-tab td .check{margin-right:6px;vertical-align:-3px}
html.ed-cursor-col table.ed-tab{cursor:col-resize}
.ed-tab-aviso{margin:8px 0 0;padding:8px 12px;border-radius:var(--r-input);background:var(--danger-soft);color:var(--danger);font-size:13px;line-height:1.45}
.ed-tab-aviso ul{margin:4px 0 0;padding-left:18px}
.ed-cel-btn{position:fixed;z-index:80;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text-2);cursor:pointer;padding:0;box-shadow:var(--shadow-glass)}
.ed-cel-btn:hover,.ed-cel-btn[aria-expanded="true"]{color:var(--accent-text);border-color:var(--accent)}
.ed-mais{position:fixed;z-index:80;width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--accent);border-radius:50%;background:var(--bg);color:var(--accent-text);cursor:pointer;padding:0}
.ed-mais .ico{width:12px;height:12px}
.ed-mais:hover{background:var(--accent);color:var(--on-accent)}
.ed-mais[aria-disabled]{border-color:var(--border-strong);color:var(--text-3)}
.ed-mais[aria-disabled]:hover{background:var(--bg);color:var(--text-3)}
.ed-cel-btn:focus-visible,.ed-mais:focus-visible,.ed-menu button:focus-visible,.ed-mini:focus-visible,.ed-foto-ver:focus-visible,.ed-foto-alca:focus-visible,.ed-gal-th:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ed-menu{position:fixed;z-index:91;width:min(300px,calc(100vw - 16px));max-height:min(480px,calc(100vh - 16px));overflow:auto;padding:6px;display:flex;flex-direction:column;right:auto;top:auto}
.ed-menu-abas{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--sunk);margin-bottom:6px;flex:none}
.ed-menu-aba{flex:1;border:0;background:none;border-radius:6px;padding:6px 4px;font:inherit;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer}
.ed-menu-aba.on{background:var(--bg);color:var(--text);box-shadow:var(--shadow-glass)}
.ed-menu-corpo{display:flex;flex-direction:column}
.ed-menu-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:10px 10px 4px}
.ed-menu-op{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:7px 10px;font:inherit;font-size:14px;color:var(--text);cursor:pointer}
.ed-menu-op:hover{background:var(--accent-soft);color:var(--accent-text)}
.ed-menu-op.perigo{color:var(--danger)}
.ed-menu-op.perigo:hover{background:var(--danger-soft);color:var(--danger)}
.ed-menu-op[aria-disabled="true"]{color:var(--text-3);cursor:not-allowed}
.ed-menu-op[aria-disabled="true"]:hover{background:none;color:var(--text-3)}
.ed-menu-marca{width:16px;height:16px;display:grid;place-items:center;flex:none;color:var(--accent-text)}
.ed-menu-rot{flex:1}
.ed-menu-motivo{flex-basis:100%;font-size:12px;line-height:1.4;color:var(--text-3)}
.ed-menu-op[role="menuitemradio"] .ed-menu-motivo,.ed-menu-op[role="menuitemcheckbox"] .ed-menu-motivo{padding-left:24px}
.ed-amostra{width:16px;height:16px;border-radius:4px;border:1px solid var(--line);background:var(--bg);flex:none}
.ed-amostra[data-fundo="destaque"]{background:var(--accent-soft)}.ed-amostra[data-fundo="ok"]{background:var(--ok-soft)}
.ed-amostra[data-fundo="atencao"]{background:var(--warn-soft)}.ed-amostra[data-fundo="problema"]{background:var(--danger-soft)}
.ed-menu-dica{margin:6px 0 0;padding:8px 10px 4px;border-top:1px solid var(--line-soft);font-size:12px;line-height:1.45;color:var(--text-3)}
.ed-lista{z-index:91}
.ed-lista .ss-mencao-op .pill{pointer-events:none}
/* foto no texto: entra no ponto do cursor, com legenda, tamanho e galeria */
.ed-foto{margin:12px 0;display:flex;flex-direction:column;gap:6px}
/* campo rico dentro de formulário (.textarea com o editor, ex. Especificação do Memorial): bloco, não flex, senão parágrafo,
   tabela e foto viram itens lado a lado e as linhas da tabela esticam */
.textarea.ed-rico[contenteditable]{display:block;height:auto;min-height:96px;overflow-wrap:anywhere}
.textarea.ed-rico[contenteditable] > p{margin:0 0 8px}
.ed-foto-quadro{position:relative;width:60%;max-width:100%}
.ed-foto[data-tam="pequena"] .ed-foto-quadro{width:33%}.ed-foto[data-tam="grande"] .ed-foto-quadro{width:80%}.ed-foto[data-tam="inteira"] .ed-foto-quadro{width:100%}
.ed-foto-quadro img{display:block;width:100%;height:auto;border-radius:var(--r-input);border:1px solid var(--line);background:var(--sunk)}
.ed-foto-ver{position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:var(--glass-strong);color:var(--text);cursor:pointer}
.ed-foto-alca{position:absolute;top:50%;right:-7px;width:14px;height:44px;margin-top:-22px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--border-strong);cursor:ew-resize;touch-action:none}
.ed-foto-alca:hover{border-color:var(--accent)}
.ed-foto-barra{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ed-foto-barra .grow{flex:1}
.ed-mini{min-width:32px;height:32px;padding:0 8px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--bg);font:inherit;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer}
.ed-mini[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.ed-foto figcaption{font-size:13px;color:var(--text-2);outline:0;min-height:20px;padding:2px 0}
.ed-foto figcaption:empty::before{content:attr(data-placeholder);color:var(--text-3)}
.ed-foto figcaption:focus-visible{box-shadow:0 2px 0 var(--focus)}
.ed-envio{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;line-height:1.4;color:var(--text-3)}
.ed-envio:empty{display:none}
.ed-barra{display:block;width:120px;height:6px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden;flex:none}
.ed-barra i{display:block;height:100%;background:var(--accent);transition:width .15s}
.ed-envio-erro{color:var(--danger)}
[data-envio="erro"] .ed-foto-quadro img,[data-envio="erro"].ed-arq{border-color:var(--danger)}
/* arquivo no texto: cartão com nome, tipo e tamanho */
.ed-arq{display:flex;align-items:flex-start;gap:12px;margin:12px 0;padding:12px;max-width:520px;border:1px solid var(--line);border-radius:var(--r-input);background:var(--bg)}
.ed-arq-ico{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:var(--sunk);color:var(--text-2);flex:none}
.ed-arq-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ed-arq-txt b{font-size:14px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.ed-arq-meta{font-size:12px;color:var(--text-3)}
.ed-soltando{box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r-input)}
/* janela de inserir: limite de tamanho e tipos escritos, área para soltar */
.ed-solta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;border:1.5px dashed var(--border-strong);border-radius:var(--r-card);text-align:center;font-size:14px;color:var(--text-2)}
.ed-solta.on{border-color:var(--accent);background:var(--accent-soft)}
.ed-midia-lim{margin:12px 0 0}
.ed-midia-erros:empty{display:none}
.ed-midia-erros{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.ed-midia-erros .err{margin:0;font-size:13px;color:var(--danger)}
/* galeria das fotos do documento */
.ed-gal-palco{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.ed-gal-palco img{max-width:100%;max-height:min(56vh,520px);border-radius:var(--r-input);background:var(--sunk)}
.ed-gal-palco figcaption{font-size:14px;color:var(--text-2);text-align:center}
.ed-gal-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0;font-size:13px;color:var(--text-2)}
.ed-gal-mini{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.ed-gal-th{flex:none;width:64px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;background:var(--sunk);overflow:hidden;cursor:pointer}
.ed-gal-th.on{border-color:var(--accent)}
.ed-gal-th img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){
  .ed-foto-quadro,.ed-foto[data-tam="pequena"] .ed-foto-quadro{width:100%}
  .ed-cel-btn{width:32px;height:32px}
  .ed-mini,.ed-foto-ver{min-width:40px;height:40px}
  .ed-menu-op{padding:10px}
}

/* menu lateral recolhível (pedido do Cauê/Dani, 2026-10-09): recolhido = só os ícones, nome no tooltip.
   Tudo sob .ss-recolhido, só no computador; no celular o .rail nem aparece. Cores só por token existente. */
.ss-recolhe{width:calc(100% - 24px);margin:0 12px;border:0;background:none;font:inherit;font-size:14px;text-align:left;cursor:pointer;flex:none}
.ss-recolhe-ico{transform:rotate(90deg)}
@media (min-width:768px){
  .app.ss-recolhido .rail{width:72px}
  .app.ss-recolhido .ss-marca,.app.ss-recolhido .nav-title,.app.ss-recolhido .nav-item .grow,.app.ss-recolhido .nav-item .count,
  .app.ss-recolhido .nav-sub,.app.ss-recolhido .who{display:none}
  .app.ss-recolhido .nav{padding-top:12px}
  .app.ss-recolhido .nav-item{justify-content:center;gap:0}
  .app.ss-recolhido .ss-recolhe-ico{transform:rotate(-90deg)}
  .app.ss-recolhido .rail-foot{justify-content:center;padding:12px 0}
}

/* Quebrar linha (pedido do Cauê, 09/10/2026: "em todos os lugares que tem tarefas, a possibilidade com um toque de
   quebra de linha. Assim é possível ver sem ficar os três pontinhos"). Recurso comum: quebra-linha.js põe a chave na
   barra de toda lista com data-quebra="<chave>" e liga .ss-quebra-on nela. Ligada, título e textos longos das células
   aparecem inteiros, quebrando a linha; desligada, a lista fica como era. As regras levam !important de propósito: têm
   de vencer o "white-space:nowrap" + "text-overflow:ellipsis" que cada módulo escreve no título (td.prj-arr-td>a.name,
   .lt-n-txt, -webkit-line-clamp). [data-quebra-t] marca o título de lista que não trunca sozinha: desligada, ele fica
   numa linha só com reticências. */
.ss-quebra-ctl{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;border:0;border-radius:var(--r-btn);background:none;font:500 13px var(--font);color:var(--text-2);cursor:pointer;white-space:nowrap;flex:none}
.ss-quebra-ctl:hover{background:var(--sunk);color:var(--text)}
.ss-quebra-ctl:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ss-quebra-ctl.ss-quebra-fim{margin-left:auto}
.ss-quebra-ctl .switch{width:36px;height:20px;border-radius:var(--r-pill);background:var(--border-strong);position:relative;flex:none;display:inline-block}
.ss-quebra-ctl .switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--bg);transition:left .15s}
.ss-quebra-ctl[aria-checked="true"] .switch{background:var(--accent)}
.ss-quebra-ctl[aria-checked="true"] .switch::after{left:18px}
@media (prefers-reduced-motion:reduce){.ss-quebra-ctl .switch::after{transition:none}}
@media (max-width:767px){.ss-quebra-ctl{min-height:40px}.table-head:has(>.ss-quebra-ctl),.toolbar:has(>.ss-quebra-ctl){flex-wrap:wrap}}
[data-quebra]:not(.ss-quebra-on) [data-quebra-t]{display:block;max-width:var(--ss-quebra-max,360px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-quebra].ss-quebra-on td,
[data-quebra].ss-quebra-on :is(td .name,td.name,.kcard .t,.m-item b,.m-item small,.row .t,.lt-n-txt,.prj-pg-nome,[data-quebra-t]){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;-webkit-line-clamp:unset!important;max-width:none!important;overflow-wrap:anywhere}
[data-quebra].ss-quebra-on :is(td .name,.kcard .t,.row .t,[data-quebra-t]){display:block!important}

/* Motor de tarefas (SS_TAREFA, app.js): o painel de detalhe da tarefa e a barra da lista, padrão de toda a plataforma
   (decisão do Cauê, 2026-10-09). O desenho é o do painel de Projetos (estilos/03-projetos.css), a referência; aqui ele
   vale para qualquer módulo, sob .ss-tf (o .rv-larga-in do painel). Cor só por token. */
.ss-tf{display:flex;flex-direction:column;min-height:100%}
.ss-tf .rv-2col{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);flex:1;min-height:0}
.ss-tf .rv-2col > div{overflow:auto;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.ss-tf .rv-2col > .rv-lado{border-left:1px solid var(--line);background:var(--sunk)}
.ss-tf .check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.ss-tf .check[role="switch"]{cursor:pointer}
.ss-tf .rv-coment{display:flex;gap:10px}
.ss-tf .rv-coment .txt{font-size:13px;line-height:1.5;min-width:0}
.ss-tf .rv-coment .txt b.quem{display:block;font-size:13px}
.ss-tf .rv-coment small{font-size:11px;color:var(--text-3)}
.ss-tf .rv-compor{position:relative;display:flex;flex-direction:column;gap:8px}
.ss-tf .rv-dica{font-size:12px;color:var(--text-3)}
.ss-tf .rv-lado-t{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.ss-tf .ss-tf-sec h3 .count{font-size:12px;font-weight:600;background:var(--sunk);color:var(--text-2);border-radius:var(--r-pill);padding:1px 8px}
.ss-tf details.rv-bloco{border-top:1px solid var(--line);padding-top:12px}
.ss-tf details.rv-bloco > summary{cursor:pointer;font-size:14px;font-weight:600;padding:4px 0}
.ss-tf details.rv-bloco[open] > summary{margin-bottom:12px}
.ss-tf .ss-tf-sec > summary h3{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600}
.ss-tf .stack.ss-tf-corpo{gap:12px}
.ss-tf .ss-tf-corpo > .btn,.ss-tf .ss-tf-corpo > div > .btn{align-self:flex-start}
.ss-tf .row.ss-tf-linha{display:flex;align-items:center;gap:10px;padding:8px 0;border:0}
.ss-tf .ss-tf-linha .grow{flex:1;min-width:0}
.ss-tf .ss-tf-linha .t{font-size:13px;font-weight:500}
.ss-tf .ss-tf-linha .s{font-size:12px;color:var(--text-3);margin-top:2px}
.ss-tf .ss-tf-linha a,.ss-tf a.ss-tf-nome{color:var(--text)}
.ss-tf .ss-tf-linha .ico{color:var(--text-3);flex:none}
.ss-tf .ss-tf-lado{margin-top:4px}
.ss-tf .ss-tf-rm{flex-wrap:nowrap;align-items:center;gap:6px}
.ss-tf .ss-tf-link-form{gap:12px}
.ss-tf .ss-tf-acoes{flex-wrap:nowrap;gap:4px;margin-left:auto}
.ss-tf .dialog-head .ss-tf-acoes .btn-icon{margin-left:0}
.ss-tf .ss-tf-conf{margin:0 24px;padding:12px 16px;border-radius:var(--r-input);background:var(--danger-soft);display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px}
.ss-tf .ss-tf-conf[hidden]{display:none}
.ss-tf .ss-tf-conf p{flex:1 1 260px;margin:0;line-height:1.45}
.ss-tf .ss-tf-perigo{background:var(--danger);border-color:var(--danger)}
.ss-tf .ss-tf-gag{display:flex;flex-direction:column;gap:8px}
.ss-tf .ss-tf-chave{display:inline-flex;align-items:center;gap:10px;min-height:32px;padding:0;border:0;background:none;font:500 14px var(--font);color:var(--text);border-radius:8px;align-self:flex-start}
.ss-tf .ss-tf-chave[disabled]{cursor:not-allowed;opacity:.6}
.ss-tf .ss-tf-chave .toggle{display:inline-flex;align-items:center;width:40px;height:24px;border-radius:var(--r-pill);background:var(--border-strong);padding:3px;flex:none}
.ss-tf .ss-tf-chave .toggle::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--on-accent)}
.ss-tf-excluida,.ss-tf-fora{display:none!important}
/* Diagramação de 13/10/2026 (p21/p22, Cauê: duas colunas estilo ClickUp, "porem com recolhe expande"): todo bloco nasce
   aberto e recolhe pelo título (seta à esquerda, como as seções do ClickUp); à direita, "Atividade e comentários".
   Seletores com .rv-bloco.ss-tf-sec para valer sobre as cópias antigas de estilos/03-projetos.css (carregado depois). */
.ss-tf details.rv-bloco.ss-tf-sec > summary{list-style:none;display:flex;align-items:center;gap:8px;margin:0 -8px;padding:6px 8px;border-radius:8px}
.ss-tf details.rv-bloco.ss-tf-sec > summary::-webkit-details-marker{display:none}
.ss-tf details.rv-bloco.ss-tf-sec > summary:hover{background:var(--sunk)}
.ss-tf .rv-lado details.rv-bloco.ss-tf-sec > summary:hover{background:var(--glass-hi)}
.ss-tf details.rv-bloco.ss-tf-sec > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-tf details.rv-bloco.ss-tf-sec[open] > summary{margin-bottom:8px}
.ss-tf .ss-tf-seta{width:8px;height:8px;flex:none;margin:0 2px 3px 2px;border-right:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);transform:rotate(45deg);transition:transform .15s}
.ss-tf details.ss-tf-sec:not([open]) > summary .ss-tf-seta{transform:rotate(-45deg);margin-bottom:0}
.ss-tf .rv-lado-t + details.rv-bloco.ss-tf-sec{border-top:0;padding-top:0}
@media (prefers-reduced-motion:reduce){.ss-tf .ss-tf-seta,.ss-tf-exp-s{transition:none}}
@media (max-width:767px){
  .ss-tf .rv-2col{grid-template-columns:1fr;overflow:auto}
  .ss-tf .rv-2col > div{overflow:visible;padding:16px}
  .ss-tf .rv-2col > .rv-lado{border-left:0;border-top:1px solid var(--line)}
  .ss-tf .ss-tf-conf{margin:0 16px}
  .ss-tf .ss-tf-link-form{grid-template-columns:1fr}
}
/* a barra da lista (SS_TAREFA.barra): Lista | Kanban em cima; busca, filtros, Agrupar por e Limpar filtros embaixo */
.ss-tf-filtros{margin-top:0}
.ss-tf-filtros .ss-tf-filtro,.ss-tf-filtros .ss-tf-agrupa{flex-direction:row;align-items:center;gap:10px}
.ss-tf-filtros .ss-tf-filtro .select{min-width:160px;text-align:left}
.ss-tf-filtros .ss-tf-agrupa select{min-width:160px}
.ss-tf-filtros .ss-tf-agrupa .lbl,.ss-tf-filtros .ss-tf-filtro .lbl{white-space:nowrap}
.ss-tf-filtros .ss-tf-busca{min-width:260px;height:40px;cursor:text}
.ss-tf-filtros .ss-tf-busca input{border:0;background:none;font:inherit;color:var(--text);flex:1;min-width:0;height:100%;outline:0}
.ss-tf-filtros .ss-tf-busca:focus-within{border-color:var(--accent)}
@media (max-width:767px){
  .ss-tf-filtros .ss-tf-busca{min-width:0;width:100%;flex:1 1 100%}
  .ss-tf-filtros .ss-tf-filtro,.ss-tf-filtros .ss-tf-agrupa{flex:1 1 100%;justify-content:space-between}
  .ss-tf-filtros .ss-tf-filtro .select,.ss-tf-filtros .ss-tf-agrupa select{min-width:0;flex:1}
}

/* campo de data digitável (app.js, "digitar a data"): o campo de texto no topo do popup do calendário */
.ss-cal-dig{display:flex;flex-direction:column;gap:4px;padding:0 6px 10px}
.ss-cal-dig label{font-size:12px;font-weight:600;color:var(--text-2)}
.ss-cal-dig .input{height:36px;font-variant-numeric:tabular-nums}
.ss-cal-dig .input[aria-invalid="true"]{border-color:var(--danger)}
.ss-cal-ajuda{font-size:12px;color:var(--text-3);margin:0}
.ss-cal-dig .ss-cal-erro{margin:0}
/* Ordenar por (SS_TAREFA.barra) e subtarefas recuadas debaixo da tarefa-mãe na lista (DT3) */
.ss-tf-filtros .ss-tf-ordena{flex-direction:row;align-items:center;gap:10px}
.ss-tf-filtros .ss-tf-ordena .lbl{white-space:nowrap}
/* p132 (15/10/2026): mudar várias tarefas de uma vez (SS_TAREFA, cfg.massa). Caixa e barra copiadas da seleção do Gantt
   (estilos/03b-projetos-cronograma.css, .prj-pg-ck e .prj-pg-lote), sem desenho novo. */
.ss-tf-ck{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer;vertical-align:middle;flex:none}
.ss-tf-ck:focus-visible{outline:2px solid var(--focus);outline-offset:0}
:is(.ss-tf-ck,.ss-tf-todas) .ck{width:16px;height:16px;border:1.5px solid var(--border-strong);border-radius:4px;display:grid;place-items:center;background:var(--bg);flex:none}
:is(.ss-tf-ck,.ss-tf-todas):is([aria-checked="true"],[aria-checked="mixed"]) .ck{background:var(--accent);border-color:var(--accent)}
:is(.ss-tf-ck,.ss-tf-todas)[aria-checked="true"] .ck::after{content:"";width:7px;height:4px;border-left:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(-45deg) translate(1px,-1px)}
:is(.ss-tf-ck,.ss-tf-todas)[aria-checked="mixed"] .ck::after{content:"";width:8px;height:2px;background:var(--on-accent)}
tr.ss-tf-marcada>td,.m-item.ss-tf-marcada{background:var(--accent-soft)}
.ss-tf-lote{flex-wrap:wrap;gap:8px}
.ss-tf-lote[hidden]{display:none}
.ss-tf-nsel{font-size:13px;font-weight:600;color:var(--text-2)}
.ss-tf-subs{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding-left:16px;font-size:12px;font-weight:400;color:var(--text-2);white-space:normal}
.ss-tf-sub-i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-tf-sub-i.feita{color:var(--text-3);text-decoration:line-through}
.ss-tf-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Kanban (10/10/2026, padrão ClickUp): "N subtarefas" no cartão abre a lista ali mesmo (SS_TAREFA.pintaSubs, cfg.cartaoAlvos) */
.ss-tf-ksubs{margin-top:8px}
.ss-tf-ksub-bt{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;font:500 12px var(--font);color:var(--text-2);cursor:pointer}
.ss-tf-ksub-bt:hover{background:var(--sunk);color:var(--text)}
.ss-tf-ksub-bt[aria-expanded="true"]{background:var(--sunk)}
.ss-tf-ksubs .ss-tf-subs{margin-top:6px;padding-left:4px}
.ss-tf-ksubs .ss-tf-subs[hidden]{display:none}
/* p06 (13/10/2026): a subtarefa como LINHA da lista, recuada debaixo da tarefa, e a seta que recolhe as subtarefas
   daquela tarefa (SS_TAREFA.pintaSubs com cfg.subLinha). O recuo e o encaixe na célula do nome ficam na tela. */
.ss-tf-subl[hidden]{display:none!important}
.ss-tf-subl{color:var(--text-2);cursor:pointer}
.ss-tf-subl .ss-tf-sub-seta{color:var(--text-3);margin-right:6px}
.ss-tf-exp{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:24px;min-width:24px;padding:0 6px 0 4px;border:0;border-radius:6px;background:none;font:600 11px var(--font);color:var(--text-3);cursor:pointer;vertical-align:middle;flex:none}
.ss-tf-exp:hover{background:var(--sunk);color:var(--text)}
.ss-tf-exp:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ss-tf-exp-s{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.ss-tf-exp[aria-expanded="false"] .ss-tf-exp-s{transform:rotate(-45deg)}
/* Campos do painel (pendência de 10/10/2026): o desenho é o do Administrativo e de Projetos, uma vez só, sob .ss-tf. Com
   :where, especificidade baixa de propósito: o módulo que já desenha os campos dele (03, 09, 10, 11, para a tela inteira)
   continua mandando no painel também; quem não desenha (o Planejador) usa estes. */
:where(.ss-tf) .select,:where(.ss-tf) .textarea{height:40px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r-input);background:var(--glass-hi);font:400 14px var(--font);color:var(--text);display:flex;align-items:center;gap:8px;min-width:0;width:100%;text-align:left}
:where(.ss-tf) .select{justify-content:space-between;cursor:pointer}
.ss-tf .select::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);transform:rotate(45deg) translate(-2px,-2px);flex:none}
:where(.ss-tf) .select:disabled{background:var(--sunk);color:var(--text-3);border-color:var(--line);cursor:not-allowed}
:where(.ss-tf) .select.late{color:var(--danger)}
:where(.ss-tf) .textarea{height:auto;min-height:96px;padding:10px 12px;align-items:flex-start;line-height:1.5;cursor:text}
:where(.ss-tf) .textarea:empty::before{content:attr(data-placeholder);color:var(--text-3)}
:where(.ss-tf) .rv-compor .textarea{min-height:72px}
:where(.ss-tf) .help.err{color:var(--danger);font-weight:500}
:where(.ss-tf) .stack{display:flex;flex-direction:column;gap:12px}
:where(.ss-tf) .field.full{grid-column:1/-1}
@media (max-width:767px){.ss-tf-filtros .ss-tf-ordena{flex:1 1 100%;justify-content:space-between}.ss-tf-filtros .ss-tf-ordena select{min-width:0!important;flex:1}}
/* Esc no campo de digitar: o primeiro esconde o calendário e deixa só o título e o campo; o segundo desfaz e fecha */
.ss-cal-so-dig > :not(.ss-cal-tit):not(.ss-cal-dig){display:none!important}
/* Largura das colunas (colunas-largura.js): pegador na borda direita de cada th; aparece ao passar o mouse e com foco */
.ss-cr{position:absolute;top:0;right:-5px;bottom:0;width:10px;cursor:col-resize;touch-action:none;z-index:2;user-select:none}
.ss-cr::after{content:"";position:absolute;top:22%;bottom:22%;left:4px;width:2px;border-radius:1px;background:transparent;transition:background .12s}
th:hover>.ss-cr::after,.ss-cr:hover::after{background:var(--border-strong)}
.ss-cr:focus-visible{outline:none}
.ss-cr:focus-visible::after,.ss-cr.ss-cr-ativo::after{background:var(--accent);box-shadow:0 0 0 2px var(--focus)}
.ss-cr.ss-cr-ativo::after{box-shadow:none}
body.ss-cr-arrasta,body.ss-cr-arrasta *{cursor:col-resize!important;user-select:none!important}
@media (prefers-reduced-motion:reduce){.ss-cr::after{transition:none}}
@media (max-width:767px){.ss-cr{display:none}}
th:last-child>.ss-cr{right:0}