/* SACEASY · base: the look comes from /kit/wireframe.css. Here only what every screen shares.
   Every value is a kit token: node public/kit/tools/lint-css.mjs public/css/*.css */
.topo-sac form { margin: 0; }
.topo-sac .wf-row { gap: var(--sp-3); }
main.wf-frame > section { min-width: 0; }
h1 { margin: 0; }
a.wf-logo { text-decoration: none; }

/* abas em dois níveis (public/js/abas.js): clientes, e embaixo os protocolos do cliente ativo */
.abas { padding: var(--sp-2) var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.abas .wf-tabs { align-items: end; }
.abas button { display: inline-flex; align-items: center; gap: var(--sp-1); text-transform: none; letter-spacing: 0; }
.abas .rotulo { align-self: center; min-width: 88px; font: 500 var(--t-micro) var(--mono); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--mute); } /* lint-ok: the two rows' labels line up */
.abas .sub { border-bottom-width: var(--s-1); }
.abas .sub button { min-height: var(--h-sm); }
.abas .conta { border: var(--s-1) solid currentColor; padding: 0 var(--sp-1); font-size: var(--t-micro); }
.abas .fechar { display: inline-grid; place-items: center; width: var(--sp-5); height: var(--sp-5); margin-inline-start: var(--sp-1); border: var(--s-1) solid transparent; color: var(--mute); }
.abas .fechar:hover { border-color: var(--ink); color: var(--ink); }
.abas .rascunho { font-weight: 700; }
@media (max-width: 640px) { .abas { padding: var(--sp-2) var(--sp-4) 0; } }