body { min-height: 100vh; }
html, body { height: 100%; }
.moldura { height: 100vh; display: flex; flex-direction: column; padding: 0 8px 8px; position: relative; isolation: isolate; overflow: hidden; }
.moldura::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 0.55px, transparent 0.9px); background-size: 20px 20px; background-position: 50% 0;
}
.constelacao { position: absolute; top: 0; left: 0; width: 100%; height: 64px; z-index: -1; pointer-events: none; }
.topo { flex: none; height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 14px 0 18px; }
.topo .marca { display: flex; align-items: center; align-self: stretch; }
.topo .marca .assinatura { --h: 16px; }
.topo .dir { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }
.topo .suporte { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-forte);
                 color: var(--texto-muted); font-size: var(--fs-sm); font-family: var(--font-display); font-weight: 500; }
.topo .suporte:hover { color: var(--texto); border-color: var(--border-hover); }
button.suporte { font: inherit; cursor: pointer; background: transparent; }
.sup-pop { position: absolute; right: 88px; top: 44px; z-index: 20; width: 250px; display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border-forte); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.sup-pop[hidden] { display: none; }
.sup-pop b { font-size: var(--fs-md); font-weight: 600; }
.sup-pop .btn { margin-top: 10px; }
.topo .suporte svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tema { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border-forte); background: none; color: var(--texto-muted); }
.tema:hover { color: var(--texto); }
.tema svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quem { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 3px; border-radius: 999px; color: var(--texto-muted); font-size: var(--fs-sm); }
.quem:hover, .quem[aria-expanded="true"] { color: var(--texto); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-forte); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--texto); }
.menu-conta { position: absolute; right: 0; top: 44px; z-index: 20; width: 270px; background: var(--surface-2); border: 1px solid var(--border-forte); border-radius: var(--radius-sm); padding: 6px; }
.menu-conta .cab { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; font-size: var(--fs-sm); }
.menu-conta .cab b { display: block; font-weight: 600; font-size: var(--fs-md); margin-bottom: 2px; }
.menu-conta a, .menu-conta button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px; color: var(--texto-muted); background: none; border: 0; font-size: var(--fs-md); }
.menu-conta a:hover, .menu-conta button:hover { background: var(--surface-3); color: var(--texto); }

.area { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; border-radius: 14px; overflow: hidden; }
.lado { background-color: var(--lado); border-right: 1px solid var(--border); padding: 16px 12px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; }
.item { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 11px;
        color: var(--texto-muted); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); }
.item svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.item:hover { color: var(--texto); background: var(--hover); }
.item .meta { margin-left: auto; font-size: var(--fs-xs); color: var(--texto-fraco); }
.item .ponto { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--laranja); }
.item .selo-n { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center;
  font: 700 11px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--lado); background: var(--vermelho); box-sizing: border-box; }
.item .selo-n.cuidado { background: var(--laranja); }
.item.ativo { background: var(--item-ativo); color: var(--texto); }
.item.ativo svg { color: var(--azul-claro); }
.item:focus-visible, .quem:focus-visible, .suporte:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.lado .grupo { margin: 18px 12px 6px; font-size: var(--fs-xs); color: var(--texto-fraco); }
.area { transition: grid-template-columns .18s ease; }
.recolher { margin-top: auto; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: 11px; background: none; border: 0;
            color: var(--texto-fraco); font-size: var(--fs-sm); text-align: left; white-space: nowrap; }
.recolher:hover { color: var(--texto); background: var(--hover); }
.recolher svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.recolhida .area { grid-template-columns: 68px 1fr; }
.recolhida .lado { padding: 16px 10px; }
.recolhida .item, .recolhida .recolher { width: 48px; padding: 0; justify-content: center; position: relative; }
.recolhida .item span, .recolhida .item .meta, .recolhida .recolher span { display: none; }
.recolhida .item .ponto { display: block; position: absolute; top: 9px; right: 10px; margin: 0; }
.recolhida .item .selo-n { position: absolute; top: 5px; right: 6px; margin: 0; min-width: 15px; height: 15px; font-size: 10px; padding: 0 4px; }
.recolhida .recolher svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .area, .recolher svg { transition: none; } }
.folha { background: var(--surface); overflow-y: auto; padding: 30px 36px 44px; min-width: 0; }
@media (max-width: 900px) {
  .moldura { height: auto; min-height: 100vh; padding: 0 6px 6px; }
  .topo .suporte span { display: none; }
  .area { grid-template-columns: 1fr; overflow: visible; }
  .lado { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px; border-radius: 14px 14px 0 0; }
  .lado .grupo, .recolher { display: none; } .item { white-space: nowrap; height: 38px; }
  .recolhida .area { grid-template-columns: 1fr; } .recolhida .item span { display: inline; } .recolhida .item { width: auto; padding: 0 12px; }
  .folha { overflow: visible; padding: 20px 16px 32px; border-radius: 0 0 14px 14px; }
}
.folha-in { max-width: 1180px; margin: 0 auto; }
.rolagem { overflow-x: auto; position: relative; }
.explica-acao { display: flex; align-items: center; gap: 16px; margin: -4px 0 14px; }
.explica-acao .explica { margin: 0; }

.cab-pagina { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.cab-pagina h1 { font-size: var(--fs-xl); }
.cab-pagina p { color: var(--texto-muted); margin-top: 4px; }
.cab-pagina .acoes { margin-left: auto; display: flex; gap: 8px; }

.filtros { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.filtros button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--texto-muted); padding: 8px 12px 10px; font-family: var(--font-display); font-weight: 500; display: flex; gap: 8px; align-items: center; margin-bottom: -1px; }
.filtros button:hover { color: var(--texto); }
.filtros button.ativo { color: var(--texto); border-bottom-color: var(--azul); }
.filtros .n { font-size: var(--fs-xs); background: var(--surface-3); color: var(--texto-muted); border-radius: 999px; padding: 1px 7px; font-family: var(--font-mono); }
.explica { color: var(--texto-muted); font-size: var(--fs-sm); margin: -4px 0 12px; }
.barra { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.barra .input { max-width: 300px; padding: 7px 11px; }
.barra #busca { flex: 1 1 180px; min-width: 160px; max-width: 300px; }
.busca-caixa { position: relative; display: flex; flex: 1 1 180px; min-width: 160px; max-width: 300px; }
.busca-caixa #busca, .busca-caixa .input { flex: 1; max-width: none; padding-right: 32px; }
.barra #busca, .busca-caixa .input { padding-left: 34px; background: var(--campo) no-repeat 12px center / 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808897' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.busca-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: none; color: var(--texto-muted); font-size: 17px; line-height: 1; cursor: pointer; }
.busca-x:hover { background: var(--surface-3); color: var(--texto); }

@media (min-width: 761px) {
.caixa-tabela { background: var(--surface-2); border: 1px solid var(--border-forte); border-radius: var(--radius); }
.caixa-tabela { --hover-tab: color-mix(in srgb, var(--texto) 8%, var(--surface-2)); --listra: color-mix(in srgb, var(--lado) 55%, var(--surface-2)); --cab-tab: color-mix(in srgb, var(--texto) 5%, var(--surface-2)); }
body:not(.tema-claro) .caixa-tabela { --hover-tab: color-mix(in srgb, #FFFFFF 7%, var(--surface-2)); --listra: color-mix(in srgb, #FFFFFF 2.5%, var(--surface-2)); --cab-tab: color-mix(in srgb, #FFFFFF 5%, var(--surface-2)); }
.caixa-tabela .tabela tbody tr:hover td { background: var(--hover-tab); }
.caixa-tabela .tabela tbody tr[data-linha] { cursor: pointer; }
.caixa-tabela .tabela tbody tr.selecionada:hover td { background: color-mix(in srgb, var(--azul) 16%, var(--surface-2)); }
.caixa-tabela .tabela tbody tr.selecionada td { background: var(--azul-suave); }
.caixa-tabela .tabela { border-collapse: separate; border-spacing: 0; }
.caixa-tabela :where(.tabela tbody td) { background: var(--surface-2); }
.caixa-tabela .tabela thead th { position: sticky; top: 0; z-index: 3; border-bottom: 0 !important; box-shadow: inset 0 -1px 0 var(--border-forte); }
.caixa-tabela .tabela thead th.cred-th { z-index: 5; }
body.rol-dentro .caixa-tabela { max-height: var(--alt-tab, 70vh); overflow: auto; overscroll-behavior: contain; }
body.rol-dentro .caixa-tabela { border: 0; border-radius: 0; background: none; padding-right: 6px; padding-bottom: 0; box-sizing: border-box; }
@media (min-width: 761px) { body.rol-dentro .folha:has(.caixa-tabela) { padding-bottom: 16px; } }
.tab-moldura { position: relative; }
.tab-borda { display: none; }
body.rol-dentro .caixa-tabela .tabela { border: 0; background: var(--surface-2); }
body.rol-dentro .caixa-tabela .tabela thead th { box-shadow: inset 0 -1px 0 var(--border-forte); border-radius: 0 !important; }
body.rol-dentro .caixa-tabela .tabela tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 761px) {
  body.rol-dentro .tab-borda { display: block; position: absolute; top: 0; left: 0; right: var(--borda-dir, 6px); bottom: var(--borda-baixo, 6px);
    z-index: 7; pointer-events: none; border: 1px solid var(--border-forte); border-radius: var(--radius); }
  body.rol-dentro .tab-borda i { position: absolute; width: var(--radius); height: var(--radius); }
  body.rol-dentro .tab-borda i:nth-child(1) { top: -1px; left: -1px; background: radial-gradient(circle at 100% 100%, transparent var(--radius), var(--surface) calc(var(--radius) + .6px)); }
  body.rol-dentro .tab-borda i:nth-child(2) { top: -1px; right: -1px; background: radial-gradient(circle at 0 100%, transparent var(--radius), var(--surface) calc(var(--radius) + .6px)); }
  body.rol-dentro .tab-borda i:nth-child(3) { bottom: -1px; left: -1px; background: radial-gradient(circle at 100% 0, transparent var(--radius), var(--surface) calc(var(--radius) + .6px)); }
  body.rol-dentro .tab-borda i:nth-child(4) { bottom: -1px; right: -1px; background: radial-gradient(circle at 0 0, transparent var(--radius), var(--surface) calc(var(--radius) + .6px)); }
}
:is(.folha, .lado, .modal, .rola, body.rol-dentro .caixa-tabela)::-webkit-scrollbar { width: 12px; height: 12px; }
:is(.folha, .lado, .modal, .rola, body.rol-dentro .caixa-tabela)::-webkit-scrollbar-button { display: none; }
:is(.folha, .lado, .modal, .rola)::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
body.rol-dentro .caixa-tabela::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
:is(.folha, .lado, .modal, .rola, body.rol-dentro .caixa-tabela)::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--texto) 22%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; min-height: 40px; }
:is(.folha, .lado, .modal, .rola, body.rol-dentro .caixa-tabela)::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--texto) 38%, transparent); }
:is(.folha, .lado, .modal, .rola, body.rol-dentro .caixa-tabela)::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { :is(.folha, .lado, .modal, .rola, body.rol-dentro .caixa-tabela) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--texto) 25%, transparent) transparent; } }
body.rol-pagina .caixa-tabela { overflow: visible; }
@media (min-width: 761px) {
  body.rol-pagina .fixos-tab { position: sticky; top: -16px; z-index: 8; background: var(--surface); padding-bottom: 2px; }
  body.rol-pagina .fixos-tab > :last-child { margin-bottom: 10px; }
  body.rol-pagina .fixos-preso .fixos-tab { box-shadow: 0 -16px 0 0 var(--surface); }
  body.rol-pagina .caixa-tabela .tabela thead th { top: calc(var(--fixos-alt, 0px) - 16px) !important; }
  body.rol-pagina .caixa-tabela { border: 0; background: none; }
  body.rol-pagina .caixa-tabela .tabela thead th { box-shadow: inset 0 1px 0 var(--border-forte), inset 0 -1px 0 var(--border-forte), 0 -2px 0 var(--surface); }
  body.rol-pagina .caixa-tabela .tabela thead th:first-child { box-shadow: inset 0 1px 0 var(--border-forte), inset 0 -1px 0 var(--border-forte), inset 1px 0 0 var(--border-forte), 0 -2px 0 var(--surface); }
  body.rol-pagina .caixa-tabela .tabela thead th:last-child { box-shadow: inset 0 1px 0 var(--border-forte), inset 0 -1px 0 var(--border-forte), inset -1px 0 0 var(--border-forte), 0 -2px 0 var(--surface); }
  body.rol-pagina .caixa-tabela .tabela thead th:is(:first-child, :last-child)::before { content: ""; position: absolute; top: -2px; width: var(--radius); height: calc(var(--radius) + 2px); pointer-events: none; }
  body.rol-pagina .caixa-tabela .tabela thead th:first-child::before { left: 0; background: radial-gradient(circle at 100% 100%, transparent var(--radius), var(--surface) calc(var(--radius) + .6px)); }
  body.rol-pagina .caixa-tabela .tabela thead th:last-child::before { right: 0; background: radial-gradient(circle at 0 100%, transparent var(--radius), var(--surface) calc(var(--radius) + .6px)); }
  body.rol-pagina .caixa-tabela .tabela tbody td:first-child { box-shadow: inset 1px 0 0 var(--border-forte); }
  body.rol-pagina .caixa-tabela .tabela tbody td:last-child { box-shadow: inset -1px 0 0 var(--border-forte); }
  body.rol-pagina .caixa-tabela .tabela tbody tr:last-child td { box-shadow: inset 0 -1px 0 var(--border-forte); }
  body.rol-pagina .caixa-tabela .tabela tbody tr:last-child td:first-child { box-shadow: inset 1px 0 0 var(--border-forte), inset 0 -1px 0 var(--border-forte); border-bottom-left-radius: var(--radius); }
  body.rol-pagina .caixa-tabela .tabela tbody tr:last-child td:last-child { box-shadow: inset -1px 0 0 var(--border-forte), inset 0 -1px 0 var(--border-forte); border-bottom-right-radius: var(--radius); }
}
@media (min-width: 901px) { body.rol-pagina .caixa-tabela .tabela thead th { top: -30px; } }
body.rol-pagina .caixa-tabela .tabela thead th:first-child { border-top-left-radius: var(--radius); }
body.rol-pagina .caixa-tabela .tabela thead th:last-child { border-top-right-radius: var(--radius); }
.caixa-tabela .tabela th { background: var(--cab-tab); color: var(--texto); font-size: var(--fs-md); font-weight: 600; border-bottom: 1px solid var(--border-forte); padding-top: 15px; padding-bottom: 15px; }
.caixa-tabela .tabela th:first-child { border-top-left-radius: var(--radius); }
.caixa-tabela .tabela th:last-child { border-top-right-radius: var(--radius); }
.caixa-tabela .tabela :is(th, td) + :is(th, td) { border-left: 1px solid var(--border); }
.caixa-tabela .tabela :is(th, td):first-child { padding-left: 16px; }
.caixa-tabela .tabela tbody tr:last-child td { border-bottom: 0; }
.caixa-tabela .tabela :is(th, td) { padding-left: 8px; padding-right: 8px; }
.caixa-tabela .tabela :is(th, td):first-child { padding-left: 14px; }
}

.linhas { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.linhas .l { display: grid; grid-template-columns: 220px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.linhas .l:last-child { border-bottom: 0; }
.linhas .l .r { color: var(--texto-muted); font-size: var(--fs-sm); }
.linhas .l-uso { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--texto-fraco); }
.linhas h3 { padding: 14px 18px 0; font-size: var(--fs-md); }

.veu { position: fixed; inset: 0; background: var(--veu); z-index: 40; display: grid; place-items: center; padding: 24px; }
.modal { width: min(640px, 100%); max-height: 88vh; overflow: auto; background: var(--surface-2); border: 1px solid var(--border-forte); border-radius: var(--radius); padding: 24px 26px; }
.modal :where(.cartao, .previa) { background: var(--surface); }
.tema-claro .veu { --veu: rgba(13, 18, 28, 0.82); }
.modal h2 { font-size: var(--fs-xl); margin-bottom: 6px; }
.modal .fim { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--surface-3); border: 1px solid var(--border-forte); border-radius: 999px; padding: 8px 16px; font-size: var(--fs-sm); }

.caixa-tabela .tabela tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.caixa-tabela .tabela tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }

.caixa-tabela { --sel-tab: color-mix(in srgb, var(--azul) 9%, var(--surface-2)); }
body:not(.tema-claro) .caixa-tabela { --sel-tab: color-mix(in srgb, var(--azul) 14%, var(--surface-2)); }
.caixa-tabela .tabela tbody tr.selecionada td { background: var(--sel-tab); }
.caixa-tabela .tabela tbody tr.selecionada:hover td { background: color-mix(in srgb, var(--azul) 18%, var(--surface-2)); }
.caixa-tabela .tabela tbody tr.selecionada td:first-child { box-shadow: inset 3px 0 0 var(--azul); }

.folha { --base: var(--surface); }
.modal { --base: var(--surface-2); }
.painel-card, .linhas, .caixa-tabela, .menu-conta, .caixa { --base: var(--surface-2); }
.caixa-tabela .tabela td { --base: var(--surface-2); }
.caixa-tabela .tabela tbody tr:hover td { --base: var(--hover-tab); }
.caixa-tabela .tabela tbody tr.selecionada td { --base: var(--sel-tab); }
.caixa-tabela .tabela tbody tr.selecionada:hover td { --base: color-mix(in srgb, var(--azul) 18%, var(--surface-2)); }

svg { overflow: visible; }

.proto { position: fixed; right: 16px; bottom: 16px; z-index: 50; background: #1a1205; border: 1px dashed var(--laranja); border-radius: 10px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: var(--fs-xs); color: #f3c77a; }
.proto select, .proto button { background: #2a1d08; color: #f3c77a; border: 1px solid rgba(245,158,11,.4); border-radius: 6px; padding: 4px 8px; font: inherit; }
.proto b { letter-spacing: .08em; text-transform: uppercase; }
.proto .proto-x { padding: 4px 7px; line-height: 1; }
.proto.oculta { padding: 0; border-style: solid; }
.proto.oculta > :not(.proto-x) { display: none !important; }
.proto.oculta .proto-x { border: 0; border-radius: 9px; padding: 6px 10px; }
.proto.oculta .proto-x::after { content: " Protótipo"; letter-spacing: .06em; font-size: 11px; text-transform: uppercase; }

.titulo-data { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.folhinha { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); line-height: 1; overflow: hidden; white-space: nowrap; }
.folhinha > span { padding: 6px 10px; }
.folhinha > span + span { border-left: 1px solid var(--border); }
.folhinha .fl-sem { font-size: var(--fs-sm); font-weight: 600; color: var(--texto); }
.folhinha .fl-dia { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--azul-claro); padding: 4px 10px; }
.relogio { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; }
.relogio .num-alto { display: inline-block; align-self: flex-start; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 112px; line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--texto); padding-bottom: 2px; }
.relogio .na-dp { color: var(--azul-claro); }
.folhinha .fl-mes { font-size: var(--fs-sm); font-weight: 600; color: var(--texto); }

.obs-caixa { display: flex; align-items: stretch; height: 30px; border: 1px solid var(--border-forte); border-radius: 7px; background: var(--surface-2); overflow: hidden; min-width: 104px; }
.obs-caixa:hover { border-color: color-mix(in srgb, var(--texto) 30%, transparent); }
.obs-caixa:focus-within { border-color: var(--azul); box-shadow: none; }
.obs-in { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; padding: 0 9px; color: var(--texto); font: inherit; font-size: var(--fs-sm); }
.obs-salvar, .obs-bt { display: block; flex: none; align-self: stretch; margin: 3px 3px 3px 0; border: 1px solid var(--border-forte); border-radius: 4px; background: transparent; color: var(--texto-fraco); cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.obs-salvar { width: auto; height: auto; aspect-ratio: 1; }
.obs-bt { padding: 0 8px; font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.obs-salvar:hover, .obs-bt:hover { color: var(--texto); border-color: color-mix(in srgb, var(--texto) 35%, transparent); }
.obs-salvar svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; display: block; margin: auto; }
.obs-caixa.sujo :is(.obs-salvar, .obs-bt) { background: var(--azul); color: #fff; border-color: var(--azul); }
.obs-caixa.salvou :is(.obs-salvar, .obs-bt) { background: var(--azul); color: transparent; border-color: var(--azul); position: relative; }
.obs-caixa.salvou :is(.obs-salvar, .obs-bt)::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
  border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: obs-gira .6s linear infinite; }
.obs-caixa.salvou :is(.obs-salvar, .obs-bt) svg { visibility: hidden; }
@keyframes obs-gira { to { transform: rotate(360deg); } }
.obs-in::placeholder { color: var(--texto-fraco); }
.obs-in:focus { outline: none; }

body:not(.tema-claro) { --fundo-fundo: var(--surface); }
body:not(.tema-claro) .btn-secundario, body:not(.tema-claro) .opcao:not(.ativo),
body:not(.tema-claro) .obs-caixa, body:not(.tema-claro) .escolha label,
body:not(.tema-claro) .input { background-color: var(--fundo-fundo); }
body:not(.tema-claro) { --abaixo-folha: #0B101A; }
body:not(.tema-claro) .busca-caixa .input, body:not(.tema-claro) #busca, body:not(.tema-claro) .btn-filtros,
body:not(.tema-claro) .cab-pagina .btn-secundario, body:not(.tema-claro) .barra > select.input { background-color: var(--abaixo-folha); }