/* Mandala Black: CSS dos componentes, copiado de src/tema.css, src/respiro.css e src/sino/sino.css do Sistema MD360 (só as regras de componente).
   Todo valor vem de tokens.json por var(--nome); as variáveis têm os mesmos nomes do sistema. */
:root { --fonte: var(--font-sans); }
body { margin: 0; font-family: var(--fonte); font-size: 14px; color: var(--cor-texto); background: var(--cor-superficie); }
* { box-sizing: border-box; }
a { color: var(--md-laranja-texto); }
:focus-visible { outline: 2px solid var(--md-laranja-borda); outline-offset: 2px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-laranja) 18%, transparent); }
.app { min-height: 100vh; display: flex; flex-direction: row; align-items: flex-start; }
.topo { background: var(--cor-barra); color: var(--cor-barra-texto); width: var(--largura-lateral); flex: 0 0 var(--largura-lateral); min-height: 100vh; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4) var(--e-3) var(--e-3); position: sticky; top: 0; align-self: flex-start; z-index: 30; height: 100vh; overflow: hidden; }
.topo-marca { display: block; padding: 0 var(--e-2) var(--e-2); text-decoration: none; }
.topo-marca-mini { display: none; border-radius: 8px; }
.topo-recolher { position: absolute; top: 10px; right: 8px; z-index: 2; width: 24px; height: 24px; padding: 0; line-height: 1; display: grid; place-items: center; font-size: 15px; font-weight: 700; cursor: pointer; background: transparent; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; }
.topo-recolher:hover,
.topo-recolher:focus-visible { color: #fff; border-color: #fff; }
.topo-marca-sub { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--md-laranja); font-weight: 700; }
.topo-ambiente { border: 1px solid currentColor; border-radius: 999px; padding: 1px 6px; font-size: 9px; letter-spacing: .06em; opacity: .85; }
.topo-sep { height: 1px; width: 100%; background: rgba(255,255,255,.14); margin: 2px 0 var(--e-2); }
.topo-nav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.topo-nav[data-mais="baixo"] { mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.topo-nav[data-mais="cima"] { mask-image: linear-gradient(transparent, #000 36px); }
.topo-nav[data-mais="cima baixo"] { mask-image: linear-gradient(transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.nav-grupo { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); padding: 10px var(--e-2) var(--e-1); font-weight: 700; }
.topo-nav > .nav-grupo:first-of-type { padding-top: var(--e-1); }
.topo-nav a { color: rgba(255,255,255,.80); text-decoration: none; font-size: 13px; padding: 7px var(--e-3); border-radius: var(--raio); white-space: nowrap; display: flex; align-items: center; gap: var(--e-2); }
.topo-nav a svg { width: 16px; height: 16px; flex: none; opacity: 1; }
.topo-nav a.externo svg { opacity: .75; }
.nav-contador { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--md-laranja); color: var(--md-preto); font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; }
.topo-nav a.ativo .nav-contador { background: var(--md-preto); color: #fff; }
.topo-tempo { display: flex; align-items: center; gap: 6px; padding: 2px var(--e-2) var(--e-1); font-size: 11px; color: rgba(255,255,255,.55); }
.topo-tempo svg { width: 12px; height: 12px; flex: none; opacity: .6; }
.topo-tempo .tempo-recuo { width: 12px; flex: none; }
.topo-tempo .rotulo-tempo { letter-spacing: .04em; }
.topo-tempo .valor-tempo { margin-left: auto; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.88); }
.topo-nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.topo-nav a.ativo { background: var(--md-laranja); color: var(--md-preto); font-weight: 700; }
.topo-dir { display: flex; flex-direction: column; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid rgba(255,255,255,.14); flex: 0 0 auto; /* nunca encolhe nem sai da vista: a lista e que rola */ }
.topo-linha { display: flex; align-items: center; gap: var(--e-2); }
.topo-usuario { display: flex; align-items: center; gap: var(--e-2); color: inherit; text-decoration: none; flex: 1; min-width: 0; }
.topo-usuario .quem { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.topo-usuario .nome { font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-usuario .cargo { font-size: 10px; color: rgba(255,255,255,.55); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-sair { background: transparent; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85); padding: 5px 10px; font-size: 12px; border-radius: var(--raio); cursor: pointer; width: 100%; }
.topo-sair:hover { border-color: #fff; color: #fff; }
.topo-tema { background: transparent; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85); width: 30px; height: 26px; padding: 0; font-size: 12px; line-height: 1; border-radius: var(--raio); cursor: pointer; flex: none; }
.topo-tema:hover { border-color: #fff; color: #fff; }
.conteudo { flex: 1; min-width: 0; padding: var(--e-4) var(--e-5); max-width: none; overflow-x: auto; }
.titulo-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.titulo-pagina-texto { min-width: 0; }
.olho { display: block; font-size: var(--t-mini); line-height: var(--t-mini-lh); font-weight: 800; letter-spacing: var(--t-olho-espaco); text-transform: uppercase; color: var(--md-laranja-texto); margin: 0; }
.olho.neutro { color: var(--cor-texto-fraco); font-weight: 700; }
.titulo-pagina h1 { margin: 2px 0 0; }
.titulo-pagina .subtitulo { margin: 4px 0 0; font-size: 12.5px; max-width: 72ch; }
.titulo-acoes { display: flex; align-items: center; gap: var(--e-2); flex: none; }
h1 { font-size: var(--t-titulo); line-height: var(--t-titulo-lh); font-weight: 700; margin: 0 0 var(--e-2); letter-spacing: -0.02em; }
h2 { font-size: var(--t-secao); line-height: var(--t-secao-lh); font-weight: 700; margin: var(--e-5) 0 var(--e-3); letter-spacing: -0.005em; }
h3 { font-size: var(--t-sub); line-height: var(--t-sub-lh); font-weight: 700; margin: var(--e-4) 0 var(--e-2); }
.subtitulo { color: var(--cor-texto-fraco); margin: 0 0 var(--e-5); }
table { width: 100%; border-collapse: collapse; background: var(--cor-cartao); font-size: var(--t-rotulo); }
.rolagem { overflow: auto; max-height: max(320px, calc(100vh - 240px)); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.rolagem thead th { position: sticky; top: 0; z-index: 2; background: var(--cor-cartao); }
tbody tr:hover > td { background: var(--cor-cartao-alt); }
th { text-align: left; font-size: var(--t-mini); font-weight: 700; text-transform: uppercase; letter-spacing: var(--t-olho-espaco); color: var(--cor-texto-fraco); padding: 7px var(--e-2); border-bottom: 1px solid var(--cor-borda); white-space: nowrap; }
td { padding: 6px var(--e-2); border-bottom: 1px solid var(--cor-borda); }
td.corta { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.corta > a { display: inline; }
button.compacto { padding: 4px 10px; font-size: 11px; }
.migalhas { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-3); }
.migalhas .voltar { background: var(--cor-cartao); border: 1px solid var(--cor-borda); color: var(--cor-texto); font-size: 12px; padding: 5px 12px; font-weight: 600; }
.migalhas .voltar:hover { border-color: var(--md-laranja); color: var(--md-laranja); }
.migalhas ol { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; flex-wrap: wrap; font-size: 12px; }
.migalhas li { display: flex; align-items: center; gap: 6px; color: var(--cor-texto-fraco); }
.migalhas li + li::before { content: '›'; color: var(--cor-borda-forte); }
.migalhas a { color: var(--cor-texto-fraco); text-decoration: none; }
.migalhas a:hover { color: var(--md-laranja); text-decoration: underline; }
.migalhas [aria-current='page'] { color: var(--cor-texto); font-weight: 600; }
.migalhas-reserva { height: 20px; margin-bottom: var(--e-3); }
@media (max-width: 900px) {
.migalhas-reserva { display: none; }
}
th.ordenada { color: var(--cor-texto); }
tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
button { font: inherit; border-radius: var(--raio); padding: 9px var(--e-4); border: 1px solid transparent; cursor: pointer; }
.primario { background: var(--md-laranja); color: var(--md-preto); font-weight: 700; }
.primario:hover { background: var(--md-laranja-luz); }
.secundario { background: var(--cor-cartao); border-color: var(--cor-borda-forte); color: var(--cor-texto); }
.secundario:hover { border-color: var(--md-preto); }
.perigo { background: var(--cor-cartao); border-color: var(--md-vermelho); color: var(--texto-ruim); }
button:disabled { opacity: .45; cursor: not-allowed; }
.primario:disabled { background: var(--trilho); border-color: var(--cor-borda); color: var(--cor-texto-mudo); opacity: 1; }
input,
select,
textarea { font: inherit; width: 100%; padding: 8px var(--e-3); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); background: var(--cor-cartao); color: var(--cor-texto); }
input:not(:focus) { text-overflow: ellipsis; }
input:disabled,
select:disabled,
textarea:disabled { background: var(--trilho); color: var(--cor-texto-mudo); cursor: not-allowed; }
input[type='checkbox'],
input[type='radio'] { width: 16px; height: 16px; padding: 0; flex: none; accent-color: var(--md-laranja); cursor: pointer; }
label { display: block; font-size: var(--t-rotulo); line-height: var(--t-rotulo-lh); font-weight: 650; margin-bottom: 6px; }
.campo { margin-bottom: var(--e-4); }
.erro-campo { color: var(--cor-erro); font-size: 12px; margin-top: var(--e-1); }
.contador { display: block; margin-top: var(--e-1); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--cor-texto-mudo); text-align: right; }
.contador.no-limite { color: var(--cor-erro); font-weight: 650; }
.badge,
.chip,
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 5px; line-height: 1.5; font-size: var(--t-mini); font-weight: 650; white-space: nowrap; border: 0; text-transform: none; letter-spacing: 0; vertical-align: middle; background: var(--tag-neutra-fundo); color: var(--tag-neutra-texto); }
.badge.em_orcamento { background: var(--tag-espera-fundo); color: var(--tag-espera-texto); }
.badge.orcamento_finalizado { background: var(--tag-andamento-fundo); color: var(--tag-andamento-texto); }
.badge.aprovado,
.badge.aprovada,
.badge.finalizada { background: var(--tag-boa-fundo); color: var(--tag-boa-texto); }
.badge.concluido { background: var(--tag-fim-fundo); color: var(--tag-fim-texto); }
.badge.nao_aprovado,
.badge.cancelado,
.badge.reprovada,
.badge.devolvida,
.badge.cancelada { background: var(--tag-ruim-fundo); color: var(--tag-ruim-texto); }
.badge.versao_nao_aprovada,
.badge.pendente { background: var(--tag-neutra-fundo); color: var(--tag-neutra-texto); }
.badge.em_andamento,
.badge.aguardando_aprovacao { background: var(--tag-andamento-fundo); color: var(--tag-andamento-texto); }
.aviso { border-left: 3px solid var(--md-laranja-borda); background: var(--cor-realce); padding: var(--e-3) var(--e-4); border-radius: var(--raio); margin-bottom: var(--e-4); }
.aviso.critico { border-left-color: var(--md-vermelho); background: var(--st-critico-fundo); color: var(--st-critico-texto); }
.aviso > strong:first-child { display: block; margin-bottom: 2px; }
.linha-acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.vazio { padding: var(--e-7) var(--e-4); text-align: center; color: var(--cor-texto-fraco); background: var(--cor-cartao); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); }
.modal-fundo { position: fixed; inset: 0; background: rgba(10,8,8,.55); display: flex; align-items: center; justify-content: center; padding: var(--e-4); z-index: 50; }
.modal { background: var(--cor-cartao); border-radius: var(--raio); padding: var(--e-5); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; }
.modal h2 { margin-top: 0; }
@media (max-width: 860px) {
.conteudo { padding: var(--e-4); }
}
.cartao { background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: 10px; padding: var(--e-5); box-shadow: 0 1px 3px #0000000c; }
.cartao + .cartao { margin-top: var(--e-4); }
.cartao-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--cor-texto-fraco); margin-bottom: var(--e-4); padding-bottom: var(--e-2); border-bottom: 1px solid var(--cor-borda); }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--md-preto); color: #FFFFFF; display: grid; place-items: center; font-weight: 750; font-size: 19px; flex: none; overflow: hidden; letter-spacing: -.02em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.g { width: 84px; height: 84px; font-size: 28px; }
.avatar.p { width: 32px; height: 32px; font-size: 12px; }
.chip.bom { background: var(--tag-boa-fundo); color: var(--tag-boa-texto); }
.chip.critico { background: var(--tag-ruim-fundo); color: var(--tag-ruim-texto); }
.filtros-acoes { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); margin-left: auto; max-width: 100%; }
.filtros-acoes .contagem { font-size: 12px; color: var(--cor-texto-fraco); white-space: nowrap; }
.discreto { background: transparent; border: 1px solid transparent; color: var(--md-laranja-texto); padding: 5px var(--e-2); font-size: 12px; }
.discreto:hover { border-color: var(--cor-borda-forte); }
.metrica,
.cartao,
.filtros,
.modal { box-shadow: var(--sombra-1); }
.modal { box-shadow: var(--sombra-2); }
.filtros input[type="checkbox"],
.filtros input[type="radio"] { width: 16px; flex: 0 0 auto; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); min-width: 0; }
.filtro-pilula,
.filtros .campo { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0 4px 0 12px; height: 36px; max-width: 100%; border-radius: 10px; border: 1px solid var(--cor-borda); background: var(--cor-cartao-alt); font-size: 13px; }
.filtro-pilula > span,
.filtros .campo > label { margin: 0; padding: 0; font-size: var(--t-rotulo); font-weight: 500; line-height: 1; color: var(--cor-texto-mudo); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.filtro-pilula select,
.filtro-pilula input,
.filtros .campo select,
.filtros .campo input { border: none; background: transparent; height: 32px; padding: 0 8px; width: auto; min-width: 90px; max-width: 200px; font-weight: 600; color: var(--cor-texto); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.filtro-pilula select,
.filtros .campo select { cursor: pointer; }
.filtros .campo input[type='checkbox'],
.filtros .campo input[type='radio'] { width: 16px; min-width: 0; height: 16px; }
.filtro-pilula:focus-within,
.filtros .campo:focus-within { border-color: var(--md-laranja-borda); box-shadow: 0 0 0 1px var(--md-laranja-borda); }
.filtro-pilula :is(input, select):focus-visible,
.filtros .campo :is(input, select):focus-visible { outline: none; box-shadow: none; }
.filtro-pilula input[type='date'] { min-width: 0; width: 128px; padding: 0 4px; }
.filtros > input,
.filtros > .filtros-busca { flex: 1 1 220px; min-width: 200px; max-width: 300px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--cor-borda); background: var(--cor-cartao-alt); color: var(--cor-texto); }
.filtros > input:focus-visible,
.filtros > .filtros-busca:focus-visible { border-color: var(--md-laranja-borda); outline: none; box-shadow: 0 0 0 1px var(--md-laranja-borda); }
.filtros .dica,
.filtros .contador { display: none; }
.filtros .segmentado { margin-left: auto; }
.filtros .discreto { height: 36px; }
.filtros-acoes { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); margin-left: auto; padding-left: var(--e-2); flex: 0 1 auto; max-width: 100%; }
.filtros-acoes button { padding: 0 var(--e-3); height: 36px; font-size: 12px; }
.filtros-acoes .contagem { font-size: 12px; color: var(--cor-texto-fraco); white-space: nowrap; background: var(--cor-cartao-alt); border: 1px solid var(--cor-borda); border-radius: 999px; padding: 4px 12px; }
.mini { padding: 3px 9px; font-size: 11px; }
.dica { font-size: 12px; color: var(--cor-texto-fraco); margin-top: 6px; }
.campo.invalido input:not([type='checkbox']):not([type='radio']),
.campo.invalido select,
.campo.invalido textarea { border-color: var(--md-vermelho); box-shadow: 0 0 0 1px var(--md-vermelho); }
.campo.invalido > label { color: var(--texto-ruim); }
.erro-campo { font-size: 12px; color: var(--texto-ruim); margin-top: 6px; font-weight: 550; }
@media (max-width: 900px) {
.app { flex-direction: column; align-items: stretch; }
}
@media (max-width: 900px) {
.app > main { min-width: 0; }
}
@media (max-width: 900px) {
.topo { width: 100%; flex: none; min-height: 0; max-height: none; height: auto; flex-direction: row; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); overflow-x: auto; overflow-y: hidden; }
}
@media (max-width: 900px) {
.topo-sep { display: none; }
}
@media (max-width: 900px) {
.topo-nav { flex-direction: row; flex: 1; gap: 2px; }
}
@media (max-width: 900px) {
.nav-grupo { display: none; }
}
@media (max-width: 900px) {
.topo-dir { flex-direction: row; border-top: none; padding-top: 0; }
}
@media (max-width: 900px) {
.topo-sair { width: auto; }
}
.abas { display: flex; flex-wrap: nowrap; gap: 2px; border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--e-4); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; min-width: 0; }
.abas::-webkit-scrollbar { display: none; }
.abas[data-mais="dir"] { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.abas[data-mais="esq"] { mask-image: linear-gradient(90deg, transparent, #000 40px); }
.abas[data-mais="esq dir"] { mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.abas .aba { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--cor-texto-fraco); padding: 8px var(--e-4); font-size: 13px; font-weight: 650; cursor: pointer; border-radius: 0; }
.abas .aba:hover { color: var(--cor-texto); background: rgba(10, 8, 8, .03); }
.abas .aba.ativa { color: var(--cor-texto); font-weight: 700; border-bottom-color: var(--md-laranja); }
.abas .aba:focus-visible { outline-offset: -2px; }
.avatar-foto { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.kpis { /* No máximo --kpi-largo colunas e nunca um cartão mais estreito que 168px: quem decide é a largura da faixa, não a da janela (com o menu lateral aberto a janela de 1280px dá só ~900px para o conteúdo). O 1px de folga evita que a conta bata exatamente na largura e arredonde uma coluna a menos. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(max(168px, calc((100% - (var(--kpi-largo, 4) - 1) * var(--e-2) - 1px) / var(--kpi-largo, 4))), 1fr)); gap: var(--e-2); margin-bottom: var(--e-3); }
.kpi,
.pe-card,
.metrica { background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-1); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; position: relative; min-height: 0; color: var(--cor-texto); }
.kpi.destaque,
.metrica.destaque,
.pe-card.hero { border-top: 2px solid var(--md-laranja); }
.kpi.destaque .valor,
.metrica.destaque .valor,
.pe-card.hero .pe-valor { color: var(--md-laranja-texto); }
.kpi .rotulo,
.metrica .rotulo,
.pe-rotulo { font-size: var(--t-mini); line-height: var(--t-mini-lh); font-weight: 700; text-transform: uppercase; letter-spacing: var(--t-olho-espaco); color: var(--cor-texto-mudo); }
.kpi .valor,
.metrica .valor,
.pe-valor { font-size: var(--t-titulo); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; margin: 0; }
.pe-card.hero .pe-valor { font-size: 32px; }
.kpi .valor small { font-size: var(--t-rotulo); font-weight: 600; color: var(--cor-texto-fraco); margin-left: 3px; }
.kpi .nota,
.metrica .nota,
.pe-nota { font-size: var(--t-mini); line-height: var(--t-mini-lh); color: var(--cor-texto-mudo); margin-top: 1px; }
.kpi.bom .valor,
.metrica.bom .valor { color: var(--texto-bom); }
.kpi.ruim .valor,
.metrica.ruim .valor,
.metrica.negativa .valor,
.pe-card.ruim .pe-valor { color: var(--texto-ruim); }
.kpi.ruim,
.metrica.ruim,
.metrica.negativa,
.pe-card.ruim { border-top: 2px solid var(--md-vermelho); }
.kpi.bom,
.metrica.bom { border-top: 2px solid var(--st-bom); }
.quadro-lista { background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-1); overflow: hidden; }
.quadro-lista > .rolagem { border: 0; border-radius: 0; }
.quadro-lista > .rolagem thead th { background: var(--cor-cartao-alt); }
.rolagem { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.rolagem:hover { scrollbar-color: var(--cor-borda-forte) transparent; }
.rolagem::-webkit-scrollbar { height: 8px; width: 8px; }
.rolagem::-webkit-scrollbar-track { background: transparent; }
.rolagem::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.rolagem:hover::-webkit-scrollbar-thumb { background: var(--cor-borda-forte); }
.rolagem::-webkit-scrollbar-thumb:hover { background: var(--cor-texto-mudo); }
.topo-nav { scrollbar-color: transparent transparent; }
.topo-nav:hover { scrollbar-color: rgba(255,255,255,.22) transparent; }
.topo-nav::-webkit-scrollbar { width: 6px; }
.topo-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.topo-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--cor-cartao-alt); }
.lt-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.lt-texto strong { font-weight: 650; }
.modal { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.modal h2 { margin: 0; padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--cor-borda); flex: 0 0 auto; }
.modal-corpo { padding: var(--e-4) var(--e-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--cor-borda-forte) transparent; }
.modal-rodape { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--cor-borda); background: var(--cor-cartao-alt); }
.modal-corpo > .linha-acoes:last-child,
.modal-corpo > form > .linha-acoes:last-child { position: sticky; bottom: 0; z-index: 3; justify-content: flex-end; margin: var(--e-4) calc(-1 * var(--e-5)) 0; padding: var(--e-3) var(--e-5); border-top: 1px solid var(--cor-borda); background: var(--cor-cartao-alt); }
.modal-corpo:has(> .linha-acoes:last-child),
.modal-corpo:has(> form > .linha-acoes:last-child) { padding-bottom: 0; }
.modal-rodape > .secundario,
.modal-rodape > .discreto,
.modal-corpo .linha-acoes:last-child > .secundario,
.modal-corpo .linha-acoes:last-child > .discreto { order: 1; }
.modal-rodape > .primario,
.modal-rodape > .perigo,
.modal-corpo .linha-acoes:last-child > .primario,
.modal-corpo .linha-acoes:last-child > .perigo { order: 2; }
@media (max-width: 860px) {
.modal h2,
.modal-corpo,
.modal-rodape { padding-left: var(--e-4); padding-right: var(--e-4); }
}
.etiqueta { flex: 0 0 auto; }
.etiqueta.neutra { background: var(--tag-neutra-fundo); color: var(--tag-neutra-texto); }
.etiqueta.espera { background: var(--tag-espera-fundo); color: var(--tag-espera-texto); }
.etiqueta.boa { background: var(--tag-boa-fundo); color: var(--tag-boa-texto); }
.etiqueta.ruim { background: var(--tag-ruim-fundo); color: var(--tag-ruim-texto); }
.etiqueta.destaque { background: var(--tag-andamento-fundo); color: var(--tag-andamento-texto); }
.pe-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e-3); }
button.pe-card { font: inherit; text-align: left; cursor: pointer; }
.pe-card.clicavel { cursor: pointer; transition: border-color .12s, transform .12s; }
.pe-card.clicavel:hover { border-color: var(--md-laranja); transform: translateY(-1px); }
.pe-card.clicavel:focus-visible { outline: 2px solid var(--md-laranja); outline-offset: 2px; }
.pe-rotulo { display: flex; align-items: center; gap: 6px; }
.pe-valor { white-space: nowrap; }
.pe-valor.vazio { white-space: normal; font-size: var(--t-secao); color: var(--cor-texto-mudo); font-weight: 700; letter-spacing: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.pe-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.pe-abrir { margin-top: auto; font-size: 11px; font-weight: 700; color: var(--md-laranja-texto); }
.pe-card.com-bolha { flex-direction: row; align-items: flex-start; gap: var(--e-3); }
.pe-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cor-cartao-alt); border: 1px solid var(--cor-borda); }
.segmentado button { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--cor-texto-fraco); display: inline-flex; align-items: center; gap: 8px; transition: background .12s, color .12s; }
.segmentado button:hover { color: var(--cor-texto); }
.segmentado button.ativo { background: var(--md-laranja); color: #0A0808; box-shadow: 0 0 0 1px rgba(255, 85, 0, .5), 0 6px 18px rgba(255, 85, 0, .25); }
.segmentado button:focus-visible { outline: 2px solid var(--md-laranja); outline-offset: 2px; }
.seg-contagem { min-width: 20px; padding: 0 6px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--md-preto); color: var(--md-branco); }
.segmentado button:not(.ativo) .seg-contagem { background: var(--tag-neutra-fundo); color: var(--tag-neutra-texto); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); cursor: pointer; margin: 0; padding: var(--e-3) 0; }
.interruptor.desabilitado { opacity: .55; cursor: not-allowed; }
.int-texto { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.int-texto span { font-size: 12px; color: var(--cor-texto-mudo); }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.int-trilho { flex: 0 0 44px; width: 44px; height: 26px; border-radius: 999px; background: var(--cor-borda-forte); position: relative; transition: background .15s; }
.int-bola { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.interruptor input:checked + .int-trilho { background: var(--md-laranja); }
.interruptor input:checked + .int-trilho .int-bola { transform: translateX(18px); background: var(--md-preto); }
.interruptor input:focus-visible + .int-trilho { outline: 2px solid var(--md-laranja); outline-offset: 2px; }
.link { background: none; border: 0; padding: 0; color: var(--md-laranja-texto); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.link:hover { filter: brightness(1.15); }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--cor-realce); }
@media (max-width: 640px) {
.filtros .segmentado { margin-left: 0; }
}
dd { overflow-wrap: anywhere; }
dd { min-width: 0; }
.modal:focus { outline: none; }
button.mini,
button.compacto,
button.link { min-height: 24px; }
button.link { display: inline-flex; align-items: center; }
@media (pointer: coarse) {
button.mini,
button.compacto,
button.link { min-height: 36px; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo { width: 68px; flex-basis: 68px; padding-left: 8px; padding-right: 8px; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-recolher { position: static; width: 100%; height: 22px; margin-bottom: -4px; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-marca { display: grid; place-items: center; padding: 0; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-marca > :not(.topo-marca-mini) { display: none; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-marca-mini { display: block; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-nav a { justify-content: center; padding: 9px 0; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-nav a > span { display: none; }
}
@media (min-width: 901px) {
.app.menu-recolhido .nav-grupo { font-size: 0; padding: 0; margin: 7px 8px 5px; height: 1px; background: rgba(255,255,255,.14); }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-nav > .nav-grupo:first-of-type { display: none; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-tempo { display: none; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-usuario .quem { display: none; }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-linha { flex-direction: column; gap: var(--e-2); }
}
@media (min-width: 901px) {
.app.menu-recolhido .topo-sair { font-size: 11px; padding: 6px 0; }
}
.topo-modulos { display: flex; align-items: center; gap: var(--e-2); width: 100%; margin: 0 0 var(--e-2); padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); border: 0; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.topo-modulos:hover,
.topo-modulos:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.topo-modulos svg { width: 16px; height: 16px; flex: none; }
.topo-modulos span { white-space: nowrap; }
.topo-modulos .atalho { margin-left: auto; padding: 0 6px; font-size: 10px; line-height: 18px; opacity: .65; letter-spacing: .02em; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; }
.app.menu-recolhido .topo-modulos { justify-content: center; padding: 7px 0; }
.app.menu-recolhido .topo-modulos span { display: none; }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 0 0 var(--e-2) 18px; padding-left: var(--e-3); border-left: 1px solid rgba(255,255,255,.14); }
.topo-nav .nav-sub a { padding-top: 5px; padding-bottom: 5px; font-size: 13px; font-weight: 500; }
.app.menu-recolhido .nav-sub { display: none; }
.vazio-acao { margin-top: var(--e-3); }
.filtro-pilula.ativo { box-shadow: inset 0 0 0 1px var(--md-laranja-borda); background: var(--cor-realce); }
.filtro-pilula.ativo > span { color: var(--md-laranja-texto); }
.conteudo { padding: var(--e-5) var(--e-6); }
.titulo-pagina { margin-bottom: var(--e-5); }
.filtros { margin-bottom: var(--e-5); gap: var(--e-2); }
.cartao { padding: 20px; }
.titulo-pagina { align-items: flex-start; }
.olho { font-weight: 700; }
.titulo-pagina .subtitulo { font-size: 13px; line-height: 1.45; color: var(--cor-texto-mudo); max-width: 60ch; margin-top: 6px; }
.titulo-acoes { align-self: flex-start; margin-top: 12px; }
.segmentado { gap: 2px; padding: 3px; border-radius: 10px; border: 0; background: var(--r-trilho); height: 34px; box-sizing: border-box; align-items: stretch; }
.segmentado button { padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; gap: 6px; color: var(--cor-texto-fraco); transition: background .15s, color .15s, box-shadow .15s; }
.segmentado button:hover { color: var(--cor-texto); }
.segmentado button.ativo { background: var(--r-polegar); color: var(--cor-texto); font-weight: 600; box-shadow: 0 1px 2px rgba(10, 8, 8, .12), 0 0 0 .5px var(--r-borda); }
.segmentado button:focus-visible { outline-offset: -2px; }
.seg-contagem,
.segmentado button:not(.ativo) .seg-contagem { min-width: 0; height: auto; padding: 0; background: transparent; font-size: var(--t-mini); font-weight: 500; color: var(--cor-texto-mudo); font-variant-numeric: tabular-nums; }
.segmentado button.ativo .seg-contagem { color: var(--md-laranja-texto); font-weight: 600; }
.filtro-pilula,
.filtros .campo { height: 34px; padding: 0 4px 0 12px; gap: 6px; border: 0; border-radius: var(--raio); background: var(--r-trilho); font-size: 13px; transition: background .15s, box-shadow .15s; }
.filtro-pilula:hover,
.filtros .campo:hover { background: var(--r-trilho-forte); }
.filtro-pilula > span,
.filtros .campo > label { font-size: var(--t-rotulo); font-weight: 500; color: var(--cor-texto-mudo); }
.filtro-pilula select,
.filtro-pilula input,
.filtros .campo select,
.filtros .campo input { height: 30px; padding: 0 6px; min-width: 0; max-width: 170px; font-size: 13px; font-weight: 600; color: var(--cor-texto); border: 0; background: transparent; box-shadow: none; }
.filtro-pilula input[type='date'] { width: 116px; padding: 0 2px; font-weight: 500; }
.filtro-pilula:focus-within,
.filtros .campo:focus-within { border: 0; box-shadow: 0 0 0 3px var(--r-halo); background: var(--r-trilho-forte); }
.filtros > input,
.filtros > .filtros-busca { flex: 1 1 240px; min-width: 240px; max-width: none; height: 34px; padding: 0 14px; border: 0; border-radius: var(--raio); background: var(--r-trilho); font-size: 13px; }
.filtros > input::placeholder,
.filtros > .filtros-busca::placeholder { color: var(--cor-texto-mudo); }
.filtros > input:focus-visible,
.filtros > .filtros-busca:focus-visible { border: 0; box-shadow: 0 0 0 3px var(--r-halo); background: var(--r-trilho-forte); }
.filtros .discreto { height: 34px; }
.filtros > .discreto { order: 6; }
.filtros .segmentado { margin-left: auto; }
.filtros-acoes button { height: 34px; }
.filtros-acoes .contagem { border: 0; background: var(--r-trilho); }
th { font-size: var(--t-mini); font-weight: 600; text-transform: none; letter-spacing: .01em; color: var(--cor-texto-mudo); padding: 0 var(--e-3); height: 40px; border-bottom: 1px solid var(--r-borda); }
td { padding: 6px var(--e-3); border-bottom: 1px solid var(--r-borda); vertical-align: middle; }
.rolagem tbody td { height: 44px; }
th:first-child,
td:first-child { padding-left: var(--e-4); }
th:last-child,
td:last-child { padding-right: var(--e-4); }
tbody tr:last-child > td { border-bottom-color: transparent; }
tbody tr:hover > td { background: var(--r-hover); }
.rolagem thead th,
.quadro-lista > .rolagem thead th { background: var(--cor-cartao); }
.rolagem,
.quadro-lista { border-color: var(--r-borda); }
.quadro-lista { border-radius: var(--raio-cartao); box-shadow: var(--sombra-1); }
th.ordenada,
.rolagem thead th.ordenada { color: var(--md-laranja-texto); }
tbody tr[class*='linha-'] > td:first-child { font-size: var(--t-rotulo); color: var(--cor-texto-fraco); white-space: nowrap; font-variant-numeric: tabular-nums; }
td > a:not([class]) { color: var(--cor-texto); font-weight: 600; text-decoration: none; }
td > a:not([class]):hover,
td > a:not([class]):focus-visible { color: var(--md-laranja-texto); text-decoration: underline; text-underline-offset: 3px; }
td.num,
th.num { font-variant-numeric: tabular-nums; }
.badge,
.chip,
.etiqueta { border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.cartao,
.vazio { border-radius: var(--raio-cartao); border-color: var(--r-borda); }
.cartao,
.filtros { box-shadow: none; }
.filtros { box-shadow: none; }
.primario,
.secundario,
.perigo { min-height: 36px; padding: 7px 16px; line-height: 20px; font-weight: 600; border-radius: var(--raio); transition: background .15s, box-shadow .15s, transform .12s; }
.primario { box-shadow: 0 1px 2px rgba(10, 8, 8, .15); }
.primario:active,
.secundario:active { transform: scale(.98); }
.secundario { background: var(--r-vidro); border-color: transparent; color: var(--cor-texto); }
.secundario:hover { background: var(--r-vidro-hover); border-color: transparent; }
.discreto { border-radius: var(--raio); }
.discreto:hover { border-color: transparent; background: var(--r-trilho); }
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
select,
textarea { border: 1px solid transparent; background: var(--r-trilho); border-radius: var(--raio); transition: background .15s, box-shadow .15s; }
input:not([type='checkbox']):not([type='radio']):focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; border-color: var(--md-laranja-borda); background: var(--r-trilho-forte); box-shadow: 0 0 0 3px var(--r-halo); }
input:disabled,
select:disabled,
textarea:disabled { background: var(--r-trilho); }
.modal { border-radius: var(--raio-cartao); box-shadow: var(--sombra-2); }
.modal h2 { border-bottom-color: var(--r-borda); }
.modal-rodape { border-top-color: var(--r-borda); background: var(--cor-cartao); }
.vazio { border-style: dashed; border-color: var(--cor-borda-forte); }
.mini,
.secundario.mini,
.primario.mini,
.perigo.mini,
button.compacto,
.secundario.compacto,
.primario.compacto,
.perigo.compacto { min-height: 28px; padding: 4px 10px; line-height: 18px; font-size: 12px; border-radius: 8px; }
td > .linha-acoes { flex-wrap: nowrap; }
.filtro-pilula input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
.filtros .campo input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']) { background: transparent; border-color: transparent; box-shadow: none; }
.filtro-pilula input:not([type='checkbox']):not([type='radio']):focus-visible,
.filtros .campo input:not([type='checkbox']):not([type='radio']):focus-visible { background: transparent; border-color: transparent; box-shadow: none; }
.segmentado { width: fit-content; max-width: 100%; justify-self: start; }
.kpis { margin-bottom: var(--e-5); }
.topo-nav a.ativo.pai-de-sub { background: transparent; color: #fff; font-weight: 700; }
.topo-nav a.ativo.pai-de-sub svg { color: var(--md-laranja); }
.nav-sub { gap: 1px; }
.topo-nav .nav-sub a { border-radius: 8px; position: relative; color: rgba(255,255,255,.78); }
.topo-nav .nav-sub a:hover { background: rgba(255,255,255,.08); color: #fff; }
.topo-nav .nav-sub a.ativo { background: color-mix(in srgb, var(--md-laranja) 20%, transparent); color: #fff; font-weight: 650; }
.topo-nav .nav-sub a.ativo::before { content: ''; position: absolute; left: -13px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--md-laranja); }
.topo-nav .nav-sub a:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: -2px; }
@media (max-width: 720px) {
.titulo-acoes { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; margin-top: 0; }
}
@media (max-width: 720px) {
.titulo-acoes > * { max-width: 100%; }
}
@media (max-width: 720px) {
.titulo-acoes .primario { margin-left: auto; }
}
@media (max-width: 480px) {
.filtros > input,
.filtros > .filtros-busca { min-width: 0; flex-basis: 100%; }
}
@media (max-width: 480px) {
.filtro-pilula select,
.filtros .campo select,
.filtro-pilula input,
.filtros .campo input { max-width: 100%; }
}
@media (pointer: coarse), (max-width: 900px) {
.primario,
.secundario,
.perigo { min-height: 40px; }
}
@media (pointer: coarse), (max-width: 900px) {
.conteudo select:not(td *, th *),
.conteudo input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']):not(td *, th *) { min-height: 40px; }
}
@media (pointer: coarse), (max-width: 900px) {
.segmentado { height: 46px; }
}
@media (pointer: coarse), (max-width: 900px) {
.segmentado button,
[role='tab'] { min-height: 40px; }
}
@media (pointer: coarse), (max-width: 900px) {
.filtro-pilula,
.filtros .campo,
.filtros > input,
.filtros > .filtros-busca,
.filtros .discreto,
.filtros-acoes button { height: 40px; }
}
@media (pointer: coarse), (max-width: 900px) {
.filtro-pilula select,
.filtro-pilula input,
.filtros .campo select,
.filtros .campo input { height: 36px; }
}
@media (pointer: coarse), (max-width: 900px) {
.topo-tema,
.topo-sair { min-height: 40px; }
}
@media (pointer: coarse), (max-width: 900px) {
.topo-tema { min-width: 40px; }
}
.topo-gaveta { display: contents; }
.topo-gaveta-abrir,
.gaveta-fundo { display: none; }
@media (max-width: 900px) {
.topo { height: var(--barra-movel); min-height: var(--barra-movel); gap: var(--e-2); padding: 0 var(--e-3); overflow: visible; }
}
@media (max-width: 900px) {
.topo-recolher { display: none; }
}
@media (max-width: 900px) {
.topo-gaveta-abrir { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: calc(var(--e-2) * -1); padding: 0; cursor: pointer; background: transparent; color: rgba(255,255,255,.9); border: 0; border-radius: var(--raio); }
}
@media (max-width: 900px) {
.topo-gaveta-abrir:hover,
.topo-gaveta-abrir[aria-expanded='true'] { background: rgba(255,255,255,.1); color: #fff; }
}
@media (max-width: 900px) {
.topo-gaveta-abrir:focus-visible { outline: 2px solid var(--md-laranja); outline-offset: -2px; }
}
@media (max-width: 900px) {
.topo-marca { flex: 1 1 auto; min-width: 0; padding: 0; }
}
@media (max-width: 900px) {
.topo > .sino { position: static; flex: none; }
}
@media (max-width: 900px) {
.gaveta-fundo { display: block; position: fixed; inset: var(--barra-movel) 0 0 0; z-index: 1; padding: 0; border: 0; background: rgba(10,8,8,.55); cursor: pointer; }
}
@media (max-width: 900px) {
.topo-gaveta { display: flex; flex-direction: column; gap: var(--e-2); position: fixed; z-index: 2; top: var(--barra-movel); bottom: 0; left: 0; width: min(320px, 86vw); padding: var(--e-3) var(--e-3) max(var(--e-3), env(safe-area-inset-bottom)); overflow: hidden; background: var(--cor-barra); color: var(--cor-barra-texto); border-top: 1px solid rgba(255,255,255,.14); box-shadow: var(--sombra-2); visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility 0s linear .2s; }
}
@media (max-width: 900px) {
.topo-gaveta-abrir[aria-expanded='true'] ~ .topo-gaveta { visibility: visible; transform: none; transition: transform .2s ease; }
}
@media (max-width: 900px) {
.topo-gaveta .topo-nav { flex: 1 1 auto; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; }
}
@media (max-width: 900px) {
.topo-gaveta .nav-grupo { display: block; }
}
@media (max-width: 900px) {
.topo-gaveta .topo-nav a,
.topo-gaveta .topo-modulos { min-height: 44px; }
}
@media (max-width: 900px) {
.topo-gaveta .topo-dir { flex-direction: column; padding-top: var(--e-3); border-top: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 900px) {
.topo-gaveta .topo-sair { width: 100%; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.topo-gaveta { transition: none; }
}
.titulo-pagina-texto { max-width: min(100%, 900px); }
.modal h2,
.modal .modal-corpo { text-align: left; }
.linha-acoes button[aria-disabled='true'] { opacity: .55; cursor: not-allowed; }
.filtro-pilula:focus-within,
.filtros .campo:focus-within { box-shadow: 0 0 0 2px var(--md-laranja-borda), 0 0 0 4px var(--r-halo); }
h2.cartao-titulo { margin-top: 0; font-weight: 400; line-height: inherit; }
.pe-card.com-bolha { align-items: center; padding: 12px 14px; }
.pe-card.com-bolha .pe-corpo { gap: 3px; }
.pe-card.com-bolha .pe-abrir { margin-top: 4px; }
.filtros > .filtros-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kpi { padding: 10px 14px; gap: 2px; }
.kpi .valor { font-size: 22px; line-height: 1.15; }
.kpi.destaque .valor { font-size: 24px; }
.filtros > input[placeholder^='Buscar por nome, cliente'] { flex: 0 1 300px; min-width: 220px; }
.lt-dia { display: grid; gap: var(--e-2); }
.lt-dia-titulo { margin: var(--e-3) 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-mudo); font-weight: 600; }
.linha-do-tempo { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-cartao); overflow: hidden; }
.lt-evento { display: grid; grid-template-columns: 48px 10px minmax(0, 1fr) auto; align-items: start; gap: var(--e-3); padding: var(--e-3); border-top: 1px solid var(--cor-borda); }
.lt-evento:first-child { border-top: 0; }
.lt-hora { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cor-texto-mudo); padding-top: 2px; }
.lt-ponto { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--cor-texto-mudo); }
.lt-ponto.lt-situacao { background: var(--md-laranja); }
.lt-ponto.lt-financeiro,
.lt-ponto.lt-contrato { background: var(--st-bom); }
.lt-ponto.lt-compras,
.lt-ponto.lt-orcamento { background: var(--st-info); }
.lt-corpo { min-width: 0; }
.lt-frase { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cor-texto); overflow-wrap: anywhere; }
.lt-just { margin: 2px 0 0; }
@media (max-width: 640px) {
.lt-evento { grid-template-columns: 44px 10px minmax(0, 1fr); }
}
@media (max-width: 640px) {
.lt-evento > .etiqueta { grid-column: 3; justify-self: start; }
}
.sino { position: fixed; top: 14px; right: 18px; z-index: 55; }
.sino-botao { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; background: var(--cor-cartao); border: 1px solid var(--cor-borda-forte); color: var(--cor-texto); border-radius: 999px; box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .15s; }
.sino-botao svg { width: 18px; height: 18px; }
.sino-botao:hover,
.sino-botao.aberto { border-color: var(--md-laranja); box-shadow: var(--sombra-2); }
.sino-botao[data-nivel="urgente"] { border-color: var(--st-critico); }
.sino-botao:focus-visible,
.sino-pop:focus-visible,
.sino-abrir:focus-visible,
.sino-dispensar:focus-visible,
.sino-vertudo:focus-visible,
.sino-avisar:focus-visible { outline: 2px solid var(--md-laranja); outline-offset: 2px; }
.sino-badge { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; box-sizing: border-box; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; border: 2px solid var(--cor-fundo, var(--cor-cartao)); }
.sino-badge.urgente { background: #d03b3b; color: #fff; line-height: 13px; }
.sino-badge.atencao { background: #fab219; color: #0A0808; line-height: 13px; }
.sino-vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.sino-pop { position: fixed; z-index: 60; top: 62px; right: 18px; width: 380px; max-width: calc(100vw - 24px); max-height: min(620px, calc(100vh - 80px)); overflow-y: auto; overscroll-behavior: contain; background: var(--cor-cartao); color: var(--cor-texto); border: 1px solid var(--cor-borda-forte); border-radius: 14px; box-shadow: var(--sombra-2); padding: var(--e-3); display: grid; gap: var(--e-2); align-content: start; text-align: left; }
.sino-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); padding: 0 var(--e-1); }
.sino-cab h2 { margin: 0; font-size: var(--t-secao, 16px); line-height: 1.25; color: var(--cor-texto); }
.sino-resumo { font-size: 12px; color: var(--cor-texto-fraco); }
.sino-erro { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--st-atencao-fundo); color: var(--st-atencao-texto); font-size: 12px; }
.sino-vazio { margin: 0; padding: var(--e-4) var(--e-3); color: var(--cor-texto-fraco); font-size: 13px; text-align: center; }
.sino-vazio.ok { display: flex; align-items: center; justify-content: center; gap: var(--e-2); flex-wrap: wrap; padding: var(--e-3); background: var(--st-bom-fundo); color: var(--st-bom-texto); border-radius: 10px; }
.sino-vazio.ok strong { font-size: 14px; }
.sino-vazio.ok span { font-size: 12.5px; opacity: .85; }
.sino-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sino-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-2); border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-cartao-alt); padding-right: var(--e-2); }
.sino-item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--st-info); }
.sino-item.urgente::before { background: var(--st-critico); }
.sino-item.atencao::before { background: var(--st-atencao); }
.sino-abrir { display: grid; gap: 2px; min-width: 0; min-height: 40px; padding: 8px 4px 8px calc(var(--e-3) + 3px); color: inherit; text-decoration: none; border-radius: 10px; }
.sino-abrir:hover .sino-titulo { text-decoration: underline; }
.sino-linha1 { display: flex; align-items: center; gap: 6px; }
.sino-selo,
.sino-nova { display: inline-flex; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; line-height: 1.4; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.sino-selo.urgente { background: var(--st-critico-fundo); color: var(--st-critico-texto); }
.sino-selo.atencao { background: var(--st-atencao-fundo); color: var(--st-atencao-texto); }
.sino-nova { background: var(--cor-texto); color: var(--cor-cartao); }
.sino-titulo { font-size: 13px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sino-meta { font-size: 12px; line-height: 1.35; color: var(--cor-texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sino-dispensar,
.sino-avisar { background: none; border: 0; padding: 0 6px; min-height: 40px; color: var(--cor-texto-fraco); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; }
.sino-dispensar:hover,
.sino-avisar:hover { color: var(--cor-texto); }
.sino-dispensar:disabled { opacity: .5; cursor: default; }
.sino-rodape { display: grid; gap: var(--e-2); border-top: 1px solid var(--cor-borda); padding-top: var(--e-2); }
.sino-vertudo { display: flex; align-items: center; justify-content: center; min-height: 40px; font-size: 13px; font-weight: 700; color: var(--md-laranja-texto); text-decoration: none; padding: 0 12px; border-radius: var(--raio); background: var(--cor-realce); }
.sino-vertudo:hover { background: var(--cor-realce); text-decoration: underline; }
.sino-avisar { justify-self: start; padding-left: 4px; }
@media (max-width: 900px) {
.sino { top: 8px; right: 10px; }
}
@media (max-width: 900px) {
.sino-pop { top: 58px; left: 8px; right: 8px; width: auto; max-width: none; max-height: 82vh; border-radius: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
.sino-pop { animation: sino-entra .12s ease-out; }
}
.sino-avisar:disabled { opacity: .55; cursor: default; text-decoration: none; }