@charset "UTF-8";
/* ===========================================================================
InfectoAtlas — folha de estilo
---------------------------------------------------------------------------
TESE DE DESIGN
Isto não é um site institucional: é um instrumento de consulta usado à
beira do leito, muitas vezes de madrugada, muitas vezes no celular. O
modelo não é a página de marketing, é a FICHA CLÍNICA — densa, com
hierarquia por filete e peso em vez de sombra e gradiente, e cor usada
apenas para codificar significado.
Três decisões atravessam o arquivo:
1. TIPOGRAFIA COM DUAS FUNÇÕES. IBM Plex Sans para interface e prosa;
IBM Plex Mono, com numerais tabulares, para TODO dado clínico — dose,
intervalo, CID-10, contagem. Não é enfeite: "15.000" lido como quinze
mil já foi bug real deste projeto. Dígito alinhado se confere; dígito
em fonte proporcional se adivinha.
2. VERDE CIRÚRGICO COMO ACENTO. O verde do centro cirúrgico foi adotado
por ser complementar ao vermelho do sangue, reduzindo pós-imagem e
fadiga visual. É a cor do ofício, não o azul genérico de software.
3. COR SÓ ONDE SIGNIFICA. Linha de tratamento, coloração de Gram,
sensibilidade e estado de revisão têm cor. O resto é tinta e filete.
Os crachás de Gram usam os corantes de verdade: violeta de genciana
para positivo, safranina para negativo.
ACESSIBILIDADE — a versão anterior repetia centenas de regras `!important`,
uma por componente, para os controles de fonte e espaçamento. Efeito
colateral: componente novo nascia surdo a esses controles. Aqui tudo
deriva de dois multiplicadores, --escala-fonte e --escala-espaco, então
qualquer componente responde sem precisar de regra extra.
=========================================================================== */
/* As fontes são carregadas por + no do
index.html. @import aqui serializaria o download: o navegador teria de
baixar este CSS inteiro antes de descobrir que precisa das fontes. */
/* ===========================================================================
1. TOKENS
=========================================================================== */
:root {
--papel: #eef1f0;
--superficie: #ffffff;
--superficie-2: #f6f8f7;
--superficie-afundada: #e4e9e7;
--tinta: #0f1a17;
--tinta-2: #33453f;
--tinta-3: #667a73;
--tinta-4: #8d9d97;
--filete: #d7dedb;
--filete-forte: #b3c0bb;
--acento: #0e5c4f;
--acento-escuro: #0a4339;
--acento-claro: #178773;
--acento-lavagem: #e2edea;
--linha1: #0e5c4f;
--linha1-bg: #e2edea;
--linha2: #8a5a00;
--linha2-bg: #fbf1de;
--linha3: #9b4423;
--linha3-bg: #fbeae2;
--linha4: #435a7d;
--linha4-bg: #e8edf4;
--gram-pos: #5b3a97;
--gram-pos-bg: #ece7f6;
--gram-neg: #b03a5b;
--gram-neg-bg: #fae8ed;
--gram-neutro: #55676f;
--gram-neutro-bg: #e8eef0;
--sens-s: #1a6b47;
--sens-s-bg: #e4f1ea;
--sens-i: #8a5a00;
--sens-i-bg: #fbf1de;
--sens-r: #9b2c2c;
--sens-r-bg: #fbe9e9;
--sens-v: #55676f;
--sens-v-bg: #e8eef0;
--alerta: #8a5a00;
--alerta-bg: #fbf1de;
--perigo: #9b2c2c;
--perigo-bg: #fbe9e9;
--ok: #1a6b47;
--ok-bg: #e4f1ea;
--t-micro: 0.625rem;
--t-mini: 0.6875rem;
--t-menor: 0.75rem;
--t-base: 0.8125rem;
--t-maior: 0.9375rem;
--t-titulo: 1.0625rem;
--t-destaque: 1.25rem;
--e-1: 2px;
--e-2: 4px;
--e-3: 6px;
--e-4: 10px;
--e-5: 14px;
--e-6: 20px;
--e-7: 28px;
--altura-header: 48px;
--raio: 4px;
--raio-g: 8px;
--sombra: 0 1px 2px rgba(15, 26, 23, 0.06);
--sombra-alta: 0 12px 34px rgba(15, 26, 23, 0.18);
--fonte-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--fonte-dado: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas,
"Liberation Mono", Menlo, monospace;
--escala-fonte: 1;
--escala-espaco: 1;
}
/* tema escuro: só redefine tokens */
body.dark-theme {
--papel: #0d1614;
--superficie: #141f1c;
--superficie-2: #1a2624;
--superficie-afundada: #0a110f;
--tinta: #e6efeb;
--tinta-2: #c2d1cb;
--tinta-3: #8ba099;
--tinta-4: #6b807a;
--filete: #26332f;
--filete-forte: #3b4a45;
--acento: #4fbfa5;
--acento-escuro: #7ad3bd;
--acento-claro: #6bcdb4;
--acento-lavagem: #14312b;
--linha1: #4fbfa5;
--linha1-bg: #14312b;
--linha2: #d9a648;
--linha2-bg: #33280f;
--linha3: #dd8a63;
--linha3-bg: #35211a;
--linha4: #8fa8cd;
--linha4-bg: #1c2634;
--gram-pos: #b498e8;
--gram-pos-bg: #241c38;
--gram-neg: #e88ba6;
--gram-neg-bg: #351a24;
--gram-neutro: #9db2bb;
--gram-neutro-bg: #1b262a;
--sens-s: #6fcfa0;
--sens-s-bg: #122c20;
--sens-i: #d9a648;
--sens-i-bg: #33280f;
--sens-r: #e88a8a;
--sens-r-bg: #331818;
--sens-v: #9db2bb;
--sens-v-bg: #1b262a;
--alerta: #d9a648;
--alerta-bg: #33280f;
--perigo: #e88a8a;
--perigo-bg: #331818;
--ok: #6fcfa0;
--ok-bg: #122c20;
--sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
--sombra-alta: 0 12px 34px rgba(0, 0, 0, 0.6);
}
/* controles de acessibilidade */
body.font-size-small {
--escala-fonte: 0.88;
}
body.font-size-medium {
--escala-fonte: 1;
}
body.font-size-large {
--escala-fonte: 1.15;
}
body.font-size-xlarge {
--escala-fonte: 1.32;
}
/* Nota: folgas internas de crachá (padding 1px 5px, gap 4px) ficam fixas de
propósito. Multiplicar 2px por 0.65 dá 1,3px — sem efeito visual — e por 1,5
distorce a forma do crachá. Escalam as folgas que definem densidade de
leitura: linhas de lista, campos, itens do esquema. */
body.spacing-compact {
--escala-espaco: 0.65;
}
body.spacing-default {
--escala-espaco: 1;
}
body.spacing-spacious {
--escala-espaco: 1.5;
}
/* ===========================================================================
2. BASE
=========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: var(--papel);
color: var(--tinta);
font-family: var(--fonte-ui);
font-size: calc(var(--t-base) * var(--escala-fonte));
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
overflow: hidden;
}
h1, h2, h3, h4 {
margin: 0;
font-weight: 600;
letter-spacing: -0.011em;
line-height: 1.3;
}
p {
margin: 0;
}
a {
color: var(--acento);
}
button, input, select, textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
padding: 0;
}
img {
max-width: 100%;
}
:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 2px;
border-radius: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
::selection {
background: var(--acento-lavagem);
color: var(--acento-escuro);
}
* {
scrollbar-width: thin;
scrollbar-color: var(--filete-forte) transparent;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--filete-forte);
border-radius: 5px;
border: 2px solid var(--superficie);
}
::-webkit-scrollbar-thumb:hover {
background: var(--tinta-4);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
.hidden {
display: none !important;
}
.full-width {
width: 100%;
}
.text {
font-family: var(--fonte-ui);
}
/* ===========================================================================
3. CABEÇALHO
=========================================================================== */
.app-header {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: calc(var(--e-5) * var(--escala-espaco));
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-5) * var(--escala-espaco));
background: var(--superficie);
border-bottom: 1px solid var(--filete);
flex-shrink: 0;
}
.app-header h1 {
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
font-size: calc(var(--t-titulo) * var(--escala-fonte));
font-weight: 700;
letter-spacing: -0.02em;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
order: 1;
flex: 0 0 auto;
}
.app-header h1:hover {
color: var(--acento);
}
.imagem-20x20 {
width: calc(22px * var(--escala-fonte));
height: calc(22px * var(--escala-fonte));
border-radius: 3px;
flex-shrink: 0;
}
.header-icon-hint {
color: var(--tinta-4);
font-size: calc(var(--t-mini) * var(--escala-fonte));
}
.badge-db {
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 500;
color: var(--tinta-3);
background: var(--superficie-2);
border: 1px solid var(--filete);
border-radius: 99px;
padding: 2px calc(var(--e-3) * var(--escala-espaco));
white-space: nowrap;
order: 3;
flex: 0 0 auto;
}
.search-wrapper {
position: relative;
order: 2;
flex: 1 1 auto;
min-width: 0;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.search-box {
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
background: var(--superficie-2);
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
padding: 0 calc(var(--e-4) * var(--escala-espaco));
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.search-box:focus-within {
border-color: var(--acento);
background: var(--superficie);
box-shadow: 0 0 0 3px var(--acento-lavagem);
}
.search-box i {
color: var(--tinta-4);
font-size: calc(var(--t-menor) * var(--escala-fonte));
}
.search-box input {
flex: 1;
min-width: 0;
border: 0;
background: none;
outline: none;
padding: calc(var(--e-3) * var(--escala-espaco)) 0;
font-size: calc(var(--t-base) * var(--escala-fonte));
}
.search-box input::placeholder {
color: var(--tinta-4);
}
.reset-btn {
color: var(--tinta-4);
font-size: calc(var(--t-menor) * var(--escala-fonte));
padding: calc(var(--e-1) * var(--escala-espaco));
line-height: 1;
border-radius: 2px;
}
.reset-btn:hover {
color: var(--perigo);
}
.autocomplete-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--superficie);
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
box-shadow: var(--sombra-alta);
max-height: 340px;
overflow-y: auto;
z-index: 900;
display: none;
}
.autocomplete-dropdown.show {
display: block;
}
.autocomplete-item {
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
cursor: pointer;
border-bottom: 1px solid var(--superficie-2);
display: flex;
flex-direction: column;
gap: calc(var(--e-1) * var(--escala-espaco));
}
.autocomplete-item:last-child {
border-bottom: 0;
}
.autocomplete-item:hover,
.autocomplete-item.active {
background: var(--acento-lavagem);
}
.autocomplete-name {
font-size: calc(var(--t-menor) * var(--escala-fonte));
font-weight: 600;
color: var(--tinta);
}
.autocomplete-item.active .autocomplete-name {
color: var(--acento-escuro);
}
.autocomplete-tags {
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-3);
}
/* ===========================================================================
4. NAVEGAÇÃO
=========================================================================== */
.nav-bar {
background: var(--superficie);
border-bottom: 1px solid var(--filete);
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-5) * var(--escala-espaco));
flex-shrink: 0;
}
.nav-top {
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
}
.nav-divider {
width: 1px;
align-self: stretch;
background: var(--filete);
flex-shrink: 0;
order: 3;
}
.mode-selector {
display: flex;
background: var(--superficie-afundada);
border-radius: var(--raio);
padding: 2px;
gap: 2px;
flex-shrink: 0;
order: 2;
flex: 0 0 auto;
}
.mode-selector button {
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
border-radius: 3px;
font-size: calc(var(--t-menor) * var(--escala-fonte));
font-weight: 500;
color: var(--tinta-2);
white-space: nowrap;
transition: background 0.14s, color 0.14s;
}
.mode-selector button:hover {
color: var(--tinta);
}
.mode-selector button.active {
background: var(--superficie);
color: var(--acento);
font-weight: 600;
box-shadow: var(--sombra);
}
.badge-mode {
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 500;
color: var(--tinta-3);
background: var(--superficie);
border-radius: 99px;
padding: 0 5px;
border: 1px solid var(--filete);
}
.mode-selector button.active .badge-mode {
background: var(--acento-lavagem);
color: var(--acento);
border-color: transparent;
}
.filter-group {
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
order: 4;
flex: 1 1 auto;
min-width: 0;
margin-left: 0;
}
.filter-label {
display: inline-flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tinta-3);
cursor: pointer;
white-space: nowrap;
user-select: none;
}
.filter-label:hover {
color: var(--acento);
}
.filter-label i {
font-size: calc(var(--t-micro) * var(--escala-fonte));
}
.collapse-icon,
#filterArrow {
transition: transform 0.2s;
}
.rotated {
transform: rotate(-90deg);
}
/* O colapso é por max-height, e o teto é 40vh — não 40px. O valor fixo
anterior cabia uma única fileira de botões e escondia o restante dos
filtros atrás de uma rolagem de 40 pixels. */
.filter-row {
display: flex;
gap: calc(var(--e-2) * var(--escala-espaco));
flex-wrap: wrap;
align-items: center;
min-width: 0;
overflow: hidden;
max-height: 0;
opacity: 0;
padding: 0;
transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
}
.filter-row.open {
max-height: 40vh;
opacity: 1;
padding: calc(var(--e-2) * var(--escala-espaco)) 0;
overflow-y: auto;
}
.filter-row.collapsed {
display: none;
}
.filter-btn {
font-size: calc(var(--t-mini) * var(--escala-fonte));
padding: 3px calc(var(--e-3) * var(--escala-espaco));
border: 1px solid var(--filete);
border-radius: 99px;
background: var(--superficie);
color: var(--tinta-2);
white-space: nowrap;
transition: all 0.14s;
}
.filter-btn:hover {
border-color: var(--acento);
color: var(--acento);
}
.filter-btn.active {
background: var(--acento);
border-color: var(--acento);
color: #fff;
font-weight: 600;
}
.filter-count {
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
opacity: 0.75;
margin-left: 3px;
}
.filter-loading {
font-size: calc(var(--t-mini) * var(--escala-fonte));
color: var(--tinta-4);
font-style: italic;
}
.list-toggle-btn {
display: none;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
color: var(--acento);
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-3) * var(--escala-espaco));
white-space: nowrap;
order: 1;
}
.cat-item {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
cursor: pointer;
border-bottom: 1px solid var(--filete);
transition: background .12s
}
.cat-item:hover {
background: var(--superficie-2)
}
.cat-nome {
flex: 1;
font-size: var(--t-base);
font-weight: 500
}
.cat-total {
font-family: var(--fonte-dado);
font-size: var(--t-mini);
color: var(--tinta-3);
background: var(--superficie-2);
padding: 1px 7px;
border-radius: 9px
}
.cat-item i {
color: var(--tinta-4);
font-size: .7rem
}
.cat-voltar {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 9px 14px;
background: none;
border: 0;
border-bottom: 1px solid var(--filete);
color: var(--acento);
font: inherit;
font-size: var(--t-menor);
cursor: pointer
}
.cat-voltar:hover {
background: var(--superficie-2)
}
.cat-atual {
padding: 7px 14px;
font-size: var(--t-mini);
color: var(--tinta-3);
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid var(--filete)
}
.list-item .notif-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
margin-left: 4px;
border-radius: 4px;
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
line-height: 1;
color: #fff
}
.list-item .notif-badge.imediata {
background: #d9534f
}
.list-item .notif-badge.semanal {
background: #c8963c
}
.compare-mode-btn {
display: inline-flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
color: var(--tinta-2);
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-3) * var(--escala-espaco));
white-space: nowrap;
}
.compare-mode-btn:hover {
border-color: var(--acento);
color: var(--acento);
}
.compare-mode-btn.active {
background: var(--linha4-bg);
border-color: var(--linha4);
color: var(--linha4);
}
/* histórico */
.history-bar {
border-top: 1px solid var(--filete);
margin-top: calc(var(--e-3) * var(--escala-espaco));
padding-top: calc(var(--e-3) * var(--escala-espaco));
}
.history-bar-inner {
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
flex-wrap: wrap;
}
.history-label {
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tinta-4);
white-space: nowrap;
}
.history-items {
display: flex;
gap: calc(var(--e-2) * var(--escala-espaco));
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.history-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: calc(var(--t-mini) * var(--escala-fonte));
background: var(--superficie-2);
border: 1px solid var(--filete);
border-radius: 99px;
padding: 2px calc(var(--e-3) * var(--escala-espaco));
color: var(--tinta-2);
max-width: 220px;
cursor: pointer;
}
.history-item:hover {
border-color: var(--acento);
color: var(--acento);
}
.history-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.history-back-btn,
.history-clear-btn {
font-size: calc(var(--t-mini) * var(--escala-fonte));
color: var(--tinta-3);
padding: 2px calc(var(--e-2) * var(--escala-espaco));
border-radius: 3px;
}
.history-back-btn:hover,
.history-clear-btn:hover {
color: var(--acento);
background: var(--acento-lavagem);
}
/* ===========================================================================
5. GRADE E PAINÉIS
=========================================================================== */
.main-grid {
display: flex;
flex: 1;
min-height: 0;
}
/* Nome à esquerda, selo encostado na direita. */
.item-linha {
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
min-width: 0;
}
.item-linha .text {
flex: 1 1 auto;
min-width: 0;
/* Sem isto, um nome longo como Stenotrophomonas maltophilia empurra o
selo para fora do painel em vez de ser truncado. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-linha .gram-badge {
margin-left: auto;
}
.left-panel {
width: 264px;
min-width: 170px;
max-width: 520px;
display: flex;
flex-direction: column;
background: var(--superficie);
border-right: 1px solid var(--filete);
min-height: 0;
}
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--papel);
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--e-3) * var(--escala-espaco));
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
border-bottom: 1px solid var(--filete);
background: var(--superficie);
flex-shrink: 0;
}
.panel-header h2 {
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tinta-3);
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
}
.count-badge {
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 500;
color: var(--tinta-3);
background: var(--superficie-2);
border: 1px solid var(--filete);
border-radius: 99px;
padding: 1px 6px;
}
.scroll-list {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: calc(var(--e-2) * var(--escala-espaco));
}
.resizable-container {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--superficie);
}
.resizable-container>h2 {
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tinta-3);
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-5) * var(--escala-espaco));
border-bottom: 1px solid var(--filete);
flex-shrink: 0;
background: var(--superficie);
}
.resizable-container>h2 i {
color: var(--acento);
}
.content-area {
flex: 1;
overflow-y: auto;
min-height: 0;
position: relative;
background: var(--superficie);
}
.detail-area {
/* `min-height: 100%` AQUI QUEBRA O AUTO-AJUSTE dos painéis:
autoAdjustHeights() lê `scrollHeight` desta caixa para decidir a altura
do contêiner. Com min-height 100%, o scrollHeight nunca fica menor que a
altura já aplicada, e cada troca de item faz o painel crescer sem nunca
encolher. Usar min-height: 0 e deixar o estado vazio cuidar da sua
própria altura. */
padding: calc(var(--e-5) * var(--escala-espaco));
min-height: 0;
position: relative;
}
.resize-handle-vertical,
.resize-handle-horizontal {
background: var(--filete);
position: relative;
flex-shrink: 0;
transition: background 0.15s;
z-index: 5;
}
.resize-handle-vertical {
width: 1px;
cursor: col-resize;
}
.resize-handle-horizontal {
height: 1px;
cursor: row-resize;
}
.resize-handle-vertical::after,
.resize-handle-horizontal::after {
content: "";
position: absolute;
inset: -4px;
}
.resize-handle-vertical:hover,
.resize-handle-horizontal:hover,
.resize-handle-vertical:active,
.resize-handle-horizontal:active {
background: var(--acento);
}
/* ===========================================================================
6. LISTA
=========================================================================== */
.list-item {
display: flex;
flex-direction: column;
gap: calc(var(--e-1) * var(--escala-espaco));
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
border-radius: var(--raio);
cursor: pointer;
border-left: 2px solid transparent;
transition: background 0.12s, border-color 0.12s;
}
.list-item:hover {
background: var(--superficie-2);
}
.list-item.active {
background: var(--acento-lavagem);
border-left-color: var(--acento);
}
.list-item.selected-for-compare {
background: var(--linha4-bg);
border-left-color: var(--linha4);
}
.list-item .name {
font-size: calc(var(--t-menor) * var(--escala-fonte));
font-weight: 600;
color: var(--tinta);
line-height: 1.35;
}
.list-item.active .name {
color: var(--acento-escuro);
}
.list-item .meta,
.meta-item {
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
flex-wrap: wrap;
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-3);
}
.meta-right {
margin-left: auto;
}
.gram-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
border-radius: 4px;
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
line-height: 1;
color: #fff;
}
.gram-badge.positivo {
background: #28a745;
}
.gram-badge.negativo {
background: #dc3545;
}
.tag,
.type-badge,
.related-count {
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 500;
padding: 1px 5px;
border-radius: 3px;
background: var(--superficie-afundada);
color: var(--tinta-3);
white-space: nowrap;
}
.cat-tag {
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-3);
white-space: nowrap;
}
.type-badge.pathology,
.type-badge.principal {
background: var(--linha1-bg);
color: var(--linha1);
}
.type-badge.antibiotic {
background: var(--acento-lavagem);
color: var(--acento);
}
.type-badge.microorganism,
.type-badge.ocasional {
background: var(--gram-neutro-bg);
color: var(--gram-neutro);
}
.type-badge.secundário {
background: var(--linha2-bg);
color: var(--linha2);
}
.type-badge.raro {
background: var(--superficie-afundada);
color: var(--tinta-4);
}
.list-loading,
.loading-dots {
padding: calc(var(--e-6) * var(--escala-espaco));
text-align: center;
color: var(--tinta-4);
font-size: calc(var(--t-menor) * var(--escala-fonte));
}
/* ===========================================================================
7. ÁREA DE DETALHE
=========================================================================== */
.detail-content {
font-size: calc(var(--t-base) * var(--escala-fonte));
line-height: 1.6;
color: var(--tinta-2);
}
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: calc(var(--e-4) * var(--escala-espaco));
padding-bottom: calc(var(--e-4) * var(--escala-espaco));
margin-bottom: calc(var(--e-5) * var(--escala-espaco));
border-bottom: 2px solid var(--tinta);
}
.header h3 {
font-size: calc(var(--t-destaque) * var(--escala-fonte));
font-weight: 700;
letter-spacing: -0.02em;
color: var(--tinta);
display: flex;
align-items: baseline;
gap: calc(var(--e-3) * var(--escala-espaco));
}
.header .sub {
font-family: var(--fonte-dado);
font-size: calc(var(--t-menor) * var(--escala-fonte));
color: var(--tinta-3);
margin-top: 3px;
display: block;
}
/* Título de seção: filete que atravessa, como cabeçalho de laudo. */
.section-title {
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--tinta-3);
margin: calc(var(--e-6) * var(--escala-espaco)) 0 calc(var(--e-3) * var(--escala-espaco));
}
.section-title::after {
content: "";
flex: 1;
height: 1px;
background: var(--filete);
}
.section-title:first-child {
margin-top: 0;
}
.section-title i {
color: var(--acento);
}
/* Grade de campos: rótulo pequeno em versalete, valor com respiro.
É a estrutura de um laudo, não de um formulário. */
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: calc(var(--e-4) * var(--escala-espaco));
}
.field-group {
display: flex;
flex-direction: column;
gap: calc(3px * var(--escala-espaco));
min-width: 0;
}
.field-group.full-width {
grid-column: 1 / -1;
}
.field-label {
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tinta-4);
}
.field-value {
font-size: calc(var(--t-menor) * var(--escala-fonte));
line-height: 1.62;
color: var(--tinta-2);
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
background: var(--superficie-2);
border-left: 2px solid var(--filete);
border-radius: 0 var(--raio) var(--raio) 0;
word-break: break-word;
}
.field-value:empty::before {
content: "—";
color: var(--tinta-4);
}
/* ===========================================================================
8. CARD DE PROTOCOLO
=========================================================================== */
.protocol-card {
background: var(--superficie);
border: 1px solid var(--filete);
border-radius: var(--raio);
padding: calc(var(--e-4) * var(--escala-espaco));
margin-bottom: calc(var(--e-3) * var(--escala-espaco));
transition: border-color 0.15s;
}
.protocol-card:hover {
border-color: var(--filete-forte);
}
.protocol-card .header {
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
flex-wrap: wrap;
padding: 0;
margin: 0 0 calc(var(--e-3) * var(--escala-espaco));
border: 0;
}
.protocol-card .name {
font-size: calc(var(--t-menor) * var(--escala-fonte));
font-weight: 700;
color: var(--tinta);
line-height: 1.4;
flex: 1;
min-width: 0;
}
/* linha de tratamento: a única cor obrigatória do card */
.badge-line {
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px calc(var(--e-3) * var(--escala-espaco));
border-radius: 3px;
white-space: nowrap;
cursor: help;
}
.badge-line.primeira {
background: var(--linha1-bg);
color: var(--linha1);
}
.badge-line.segunda {
background: var(--linha2-bg);
color: var(--linha2);
}
.badge-line.terceira {
background: var(--linha3-bg);
color: var(--linha3);
}
.badge-line.alternativa {
background: var(--linha4-bg);
color: var(--linha4);
}
.protocol-card .desc {
font-size: calc(var(--t-menor) * var(--escala-fonte));
line-height: 1.62;
color: var(--tinta-2);
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
background: var(--superficie-2);
border-left: 2px solid var(--filete-forte);
border-radius: 0 var(--raio) var(--raio) 0;
margin: calc(var(--e-2) * var(--escala-espaco)) 0;
}
.protocol-card .meta {
display: flex;
align-items: center;
gap: calc(var(--e-4) * var(--escala-espaco));
flex-wrap: wrap;
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-3);
margin-top: calc(var(--e-3) * var(--escala-espaco));
}
.protocol-card .meta .meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.protocol-card .meta i {
color: var(--tinta-4);
}
.protocol-card .warning {
display: flex;
align-items: flex-start;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
line-height: 1.55;
color: var(--alerta);
background: var(--alerta-bg);
border-left: 2px solid var(--alerta);
border-radius: 0 var(--raio) var(--raio) 0;
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-3) * var(--escala-espaco));
margin-top: calc(var(--e-2) * var(--escala-espaco));
}
.protocol-card .ref {
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-4);
margin-top: calc(var(--e-2) * var(--escala-espaco));
line-height: 1.5;
}
.protocol-card .ref i {
margin-right: 3px;
}
.protocol-card .ref a {
color: var(--acento);
text-decoration: none;
}
.protocol-card .ref a:hover {
text-decoration: underline;
}
.name-link {
color: var(--acento);
font-weight: 600;
cursor: pointer;
}
.name-link:hover {
text-decoration: underline;
}
/* ===========================================================================
9. SELO DE REVISÃO
=========================================================================== */
.selo-revisao {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
letter-spacing: 0.02em;
padding: 2px calc(var(--e-3) * var(--escala-espaco));
border-radius: 99px;
border: 1px solid transparent;
white-space: nowrap;
line-height: 1.6;
font-family: var(--fonte-ui);
}
.selo-revisao.revisado {
background: var(--ok-bg);
color: var(--ok);
border-color: color-mix(in srgb, var(--ok) 32%, transparent);
cursor: pointer;
transition: background 0.15s;
}
.selo-revisao.revisado:hover {
background: color-mix(in srgb, var(--ok) 16%, var(--ok-bg));
}
.selo-revisao.pendente {
background: var(--alerta-bg);
color: var(--alerta);
border-color: color-mix(in srgb, var(--alerta) 32%, transparent);
cursor: help;
}
/* ===========================================================================
10. ESQUEMA ESTRUTURADO
Cada fármaco é uma linha de prescrição. Números em mono com numerais
tabulares: dose é o dado que precisa ser lido com exatidão.
=========================================================================== */
.esquema {
display: flex;
flex-direction: column;
gap: calc(3px * var(--escala-espaco));
margin: calc(var(--e-2) * var(--escala-espaco)) 0;
}
.esq-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-menor) * var(--escala-fonte));
line-height: 1.75;
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
border-left: 2px solid var(--acento);
background: var(--superficie-2);
border-radius: 0 var(--raio) var(--raio) 0;
}
.esq-farmaco {
font-weight: 700;
color: var(--acento);
cursor: pointer;
}
.esq-farmaco:hover {
text-decoration: underline;
}
.esq-dose,
.esq-freq,
.esq-duracao,
.esq-ataque {
font-family: var(--fonte-dado);
font-variant-numeric: tabular-nums;
}
.esq-dose {
font-weight: 600;
color: var(--tinta);
}
.esq-freq {
color: var(--tinta-2);
}
.esq-via {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-2);
background: var(--superficie-afundada);
padding: 0 5px;
border-radius: 3px;
}
.esq-duracao,
.esq-infusao,
.esq-ataque {
color: var(--tinta-3);
}
.esq-mais {
font-weight: 700;
color: var(--tinta-4);
padding-left: calc(var(--e-4) * var(--escala-espaco));
font-size: calc(var(--t-menor) * var(--escala-fonte));
}
.esq-alt-rotulo {
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tinta-4);
margin: calc(var(--e-2) * var(--escala-espaco)) 0 1px;
}
.esq-flag {
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-4);
margin-left: 2px;
cursor: help;
}
.esq-original {
margin-top: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
}
.esq-original summary {
cursor: pointer;
color: var(--tinta-4);
list-style: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.esq-original summary::-webkit-details-marker {
display: none;
}
.esq-original summary::before {
content: "▸";
font-size: 0.8em;
}
.esq-original[open] summary::before {
content: "▾";
}
.esq-original summary:hover {
color: var(--acento);
}
.esq-original p {
margin: calc(var(--e-2) * var(--escala-espaco)) 0 0;
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
background: var(--superficie-afundada);
border-radius: var(--raio);
color: var(--tinta-3);
line-height: 1.6;
}
/* ===========================================================================
11. RELACIONADOS (patologia ↔ microrganismo ↔ antimicrobiano)
=========================================================================== */
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: calc(var(--e-4) * var(--escala-espaco));
}
.related-column {
min-width: 0;
}
.related-column-header {
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tinta-3);
padding-bottom: calc(var(--e-2) * var(--escala-espaco));
border-bottom: 1px solid var(--filete);
margin-bottom: calc(var(--e-2) * var(--escala-espaco));
}
.related-list {
display: flex;
flex-direction: column;
gap: calc(var(--e-1) * var(--escala-espaco));
}
.related-item {
display: flex;
align-items: flex-start;
gap: calc(var(--e-2) * var(--escala-espaco));
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-3) * var(--escala-espaco));
border-radius: var(--raio);
cursor: pointer;
transition: background 0.12s;
}
.related-item:hover {
background: var(--superficie-2);
}
.related-item-content {
flex: 1;
min-width: 0;
}
.related-name {
font-size: calc(var(--t-menor) * var(--escala-fonte));
font-weight: 500;
color: var(--tinta);
line-height: 1.4;
}
.related-item:hover .related-name {
color: var(--acento);
}
.related-obs {
font-size: calc(var(--t-micro) * var(--escala-fonte));
color: var(--tinta-3);
line-height: 1.45;
}
.related-tag,
.related-badge {
font-family: var(--fonte-dado);
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
background: var(--superficie-afundada);
color: var(--tinta-3);
}
/* frequência do agente na patologia */
.related-badge.principal {
background: var(--linha1-bg);
color: var(--linha1);
}
.related-badge.secundário {
background: var(--linha2-bg);
color: var(--linha2);
}
.related-badge.ocasional {
background: var(--gram-neutro-bg);
color: var(--gram-neutro);
}
.related-badge.raro {
background: var(--superficie-afundada);
color: var(--tinta-4);
}
/* sensibilidade: S / I / R — leitura de antibiograma */
.sensibilidade-sensível,
.sensibilidade-sensivel {
background: var(--sens-s-bg);
color: var(--sens-s);
}
.sensibilidade-intermediário,
.sensibilidade-intermediario {
background: var(--sens-i-bg);
color: var(--sens-i);
}
.sensibilidade-resistente {
background: var(--sens-r-bg);
color: var(--sens-r);
}
.sensibilidade-variavel,
.sensibilidade-variável {
background: var(--sens-v-bg);
color: var(--sens-v);
}
.related-count {
margin-left: auto;
background: transparent;
color: var(--tinta-4);
}
.microorganism-related,
.antibiotic-item,
.pathology-item {
min-width: 0;
}
/* ===========================================================================
12. MODAL
=========================================================================== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(9, 20, 17, 0.55);
display: none;
align-items: center;
justify-content: center;
padding: calc(var(--e-5) * var(--escala-espaco));
z-index: 4000;
backdrop-filter: blur(2px);
}
.modal-overlay.active {
display: flex;
}
.modal-content {
background: var(--superficie);
border: 1px solid var(--filete);
border-radius: var(--raio-g);
box-shadow: var(--sombra-alta);
width: 100%;
max-width: 660px;
max-height: 88vh;
overflow-y: auto;
position: relative;
padding: calc(var(--e-6) * var(--escala-espaco));
}
.modal-content h2 {
font-size: calc(var(--t-titulo) * var(--escala-fonte));
font-weight: 700;
letter-spacing: -0.02em;
color: var(--tinta);
padding-bottom: calc(var(--e-3) * var(--escala-espaco));
margin-bottom: calc(var(--e-4) * var(--escala-espaco));
border-bottom: 2px solid var(--tinta);
padding-right: calc(var(--e-7) * var(--escala-espaco));
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
}
.modal-content h2 i {
color: var(--acento);
}
.modal-close {
position: absolute;
top: calc(var(--e-4) * var(--escala-espaco));
right: calc(var(--e-4) * var(--escala-espaco));
width: 30px;
height: 30px;
border-radius: var(--raio);
color: var(--tinta-3);
display: grid;
place-items: center;
transition: background 0.14s, color 0.14s;
}
.modal-close:hover {
background: var(--superficie-afundada);
color: var(--perigo);
}
.modal-body {
display: flex;
flex-direction: column;
gap: calc(var(--e-4) * var(--escala-espaco));
}
.modal-body .field-label {
margin-bottom: 2px;
}
.btn-close,
.btn-print {
display: inline-flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-menor) * var(--escala-fonte));
font-weight: 600;
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
border-radius: var(--raio);
border: 1px solid var(--filete-forte);
color: var(--tinta-2);
}
.btn-print {
background: var(--acento);
border-color: var(--acento);
color: #fff;
}
.btn-print:hover {
background: var(--acento-escuro);
}
.btn-close:hover {
border-color: var(--tinta-4);
}
/* --- perfil do revisor dentro do modal --- */
.rv-cabeca {
display: flex;
gap: calc(var(--e-5) * var(--escala-espaco));
align-items: flex-start;
}
.rv-foto {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--filete);
}
.rv-foto-vazia {
display: grid;
place-items: center;
background: var(--superficie-2);
color: var(--tinta-4);
font-size: calc(1.6rem * var(--escala-fonte));
}
.rv-registro {
font-family: var(--fonte-dado);
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
color: var(--acento);
margin-bottom: 3px;
}
.rv-linha {
font-size: calc(var(--t-mini) * var(--escala-fonte));
color: var(--tinta-3);
line-height: 1.55;
}
.rv-texto {
font-size: calc(var(--t-menor) * var(--escala-fonte));
line-height: 1.65;
color: var(--tinta-2);
}
.rv-links {
font-size: calc(var(--t-mini) * var(--escala-fonte));
}
.rv-links a {
color: var(--acento);
font-weight: 600;
text-decoration: none;
}
.rv-links a:hover {
text-decoration: underline;
}
.rv-rodape {
padding-top: calc(var(--e-3) * var(--escala-espaco));
border-top: 1px solid var(--filete);
font-size: calc(var(--t-mini) * var(--escala-fonte));
color: var(--tinta-3);
line-height: 1.6;
}
.rv-rodape .fa-circle-check {
color: var(--ok);
}
.rv-aviso {
font-size: calc(var(--t-micro) * var(--escala-fonte));
line-height: 1.55;
color: var(--tinta-4);
font-style: italic;
}
/* ===========================================================================
13. PAINEL DE ACESSIBILIDADE
=========================================================================== */
.accessibility-toggle {
position: fixed;
right: calc(var(--e-5) * var(--escala-espaco));
bottom: calc(var(--e-5) * var(--escala-espaco));
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--acento);
color: #fff;
display: grid;
place-items: center;
font-size: 1.05rem;
box-shadow: var(--sombra-alta);
z-index: 3000;
transition: transform 0.16s, background 0.16s;
}
.accessibility-toggle:hover {
background: var(--acento-escuro);
transform: scale(1.06);
}
.accessibility-toggle.active {
background: var(--tinta);
}
.accessibility-panel {
position: fixed;
right: calc(var(--e-5) * var(--escala-espaco));
bottom: calc(70px + var(--e-5) * var(--escala-espaco));
width: 268px;
background: var(--superficie);
border: 1px solid var(--filete-forte);
border-radius: var(--raio-g);
box-shadow: var(--sombra-alta);
padding: calc(var(--e-4) * var(--escala-espaco));
z-index: 3000;
display: none;
}
.accessibility-panel.open {
display: block;
}
.panel-title {
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tinta-3);
padding-bottom: calc(var(--e-3) * var(--escala-espaco));
border-bottom: 1px solid var(--filete);
margin-bottom: calc(var(--e-3) * var(--escala-espaco));
}
.panel-title i {
color: var(--acento);
}
.control-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--e-3) * var(--escala-espaco));
padding: calc(var(--e-2) * var(--escala-espaco)) 0;
}
.control-group .label {
display: inline-flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
font-size: calc(var(--t-menor) * var(--escala-fonte));
color: var(--tinta-2);
white-space: nowrap;
}
.control-group .label i {
color: var(--tinta-4);
width: 14px;
text-align: center;
}
.controls {
display: flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
}
.controls button {
min-width: 28px;
height: 26px;
padding: 0 calc(var(--e-2) * var(--escala-espaco));
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
background: var(--superficie);
color: var(--tinta-2);
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
display: grid;
place-items: center;
transition: all 0.14s;
}
.controls button:hover {
border-color: var(--acento);
color: var(--acento);
background: var(--acento-lavagem);
}
.controls .value {
font-family: var(--fonte-dado);
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
color: var(--tinta);
min-width: 62px;
text-align: center;
}
.divider {
height: 1px;
background: var(--filete);
margin: calc(var(--e-2) * var(--escala-espaco)) 0;
}
.theme-toggle-btn {
display: inline-flex;
align-items: center;
gap: calc(var(--e-2) * var(--escala-espaco));
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-3) * var(--escala-espaco));
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
color: var(--tinta-2);
white-space: nowrap;
}
.theme-toggle-btn:hover {
border-color: var(--acento);
color: var(--acento);
}
/* ===========================================================================
14. COMPARAÇÃO
=========================================================================== */
.compare-content {
padding: calc(var(--e-5) * var(--escala-espaco));
}
.compare-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--e-4) * var(--escala-espaco));
padding-bottom: calc(var(--e-3) * var(--escala-espaco));
border-bottom: 2px solid var(--tinta);
margin-bottom: calc(var(--e-5) * var(--escala-espaco));
}
.compare-title {
font-size: calc(var(--t-maior) * var(--escala-fonte));
font-weight: 700;
display: flex;
align-items: center;
gap: calc(var(--e-3) * var(--escala-espaco));
}
.compare-title i {
color: var(--linha4);
}
.compare-close-btn {
font-size: calc(var(--t-mini) * var(--escala-fonte));
font-weight: 600;
color: var(--tinta-3);
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
padding: calc(var(--e-2) * var(--escala-espaco)) calc(var(--e-3) * var(--escala-espaco));
}
.compare-close-btn:hover {
color: var(--perigo);
border-color: var(--perigo);
}
.compare-grid {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: calc(var(--e-5) * var(--escala-espaco));
align-items: start;
}
.compare-divider {
background: var(--filete);
align-self: stretch;
}
.compare-column {
min-width: 0;
}
.compare-field {
padding: calc(var(--e-3) * var(--escala-espaco)) 0;
border-bottom: 1px solid var(--superficie-2);
}
.compare-field:last-child {
border-bottom: 0;
}
.compare-loading,
.compare-error {
padding: calc(var(--e-7) * var(--escala-espaco));
text-align: center;
font-size: calc(var(--t-menor) * var(--escala-fonte));
color: var(--tinta-4);
}
.compare-error {
color: var(--perigo);
}
/* ===========================================================================
15. ESTADOS: vazio, carregando, esqueleto, aviso
=========================================================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--e-3) * var(--escala-espaco));
text-align: center;
padding: calc(var(--e-7) * var(--escala-espaco)) calc(var(--e-5) * var(--escala-espaco));
color: var(--tinta-4);
min-height: 180px;
}
.empty-state i {
font-size: calc(1.7rem * var(--escala-fonte));
opacity: 0.45;
}
.empty-state span {
font-size: calc(var(--t-menor) * var(--escala-fonte));
color: var(--tinta-3);
max-width: 40ch;
line-height: 1.6;
}
.empty-state .sub {
font-size: calc(var(--t-mini) * var(--escala-fonte));
color: var(--tinta-4);
}
.loading-overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--superficie) 88%, transparent);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--e-3) * var(--escala-espaco));
z-index: 20;
}
/* showLoading() cria a camada com className "loading-overlay active".
`.show` é usado no autocomplete; os dois nomes precisam funcionar. */
.loading-overlay.active,
.loading-overlay.show {
display: flex;
}
.loader,
.loader-small {
width: 26px;
height: 26px;
border: 2px solid var(--filete);
border-top-color: var(--acento);
border-radius: 50%;
animation: girar 0.7s linear infinite;
}
.loader-small {
width: 15px;
height: 15px;
border-width: 2px;
}
@keyframes girar {
to {
transform: rotate(360deg);
}
}
.loader-text {
font-size: calc(var(--t-menor) * var(--escala-fonte));
font-weight: 600;
color: var(--tinta-2);
}
.loader-sub {
font-size: calc(var(--t-mini) * var(--escala-fonte));
color: var(--tinta-4);
}
/* esqueleto: pulsa em opacidade, não em gradiente deslizante — menos
distração periférica em plantão */
.skeleton-loading {
display: flex;
flex-direction: column;
gap: calc(var(--e-2) * var(--escala-espaco));
}
.skeleton-card {
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-4) * var(--escala-espaco));
border-radius: var(--raio);
background: var(--superficie-2);
}
.skeleton-header,
.skeleton-line {
height: 9px;
border-radius: 3px;
background: var(--superficie-afundada);
animation: pulsar 1.4s ease-in-out infinite;
}
.skeleton-header {
width: 62%;
margin-bottom: 6px;
height: 11px;
}
.skeleton-line {
width: 88%;
}
.skeleton-line+.skeleton-line {
margin-top: 5px;
width: 68%;
}
@keyframes pulsar {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
.toast-notification {
position: fixed;
left: 50%;
bottom: calc(var(--e-6) * var(--escala-espaco));
transform: translateX(-50%) translateY(10px);
background: var(--tinta);
color: var(--papel);
font-size: calc(var(--t-menor) * var(--escala-fonte));
padding: calc(var(--e-3) * var(--escala-espaco)) calc(var(--e-5) * var(--escala-espaco));
border-radius: var(--raio);
box-shadow: var(--sombra-alta);
z-index: 5000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
}
.toast-notification.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.expand-btn {
font-size: calc(var(--t-mini) * var(--escala-fonte));
color: var(--acento);
font-weight: 600;
padding: 2px calc(var(--e-2) * var(--escala-espaco));
border-radius: 3px;
}
.expand-btn:hover {
background: var(--acento-lavagem);
}
.highlight {
font-family: var(--fonte-dado);
font-weight: 600;
color: var(--acento);
}
/* ===========================================================================
16. RODAPÉ
=========================================================================== */
.rodape {
position: relative;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
overflow: visible;
height: 26px;
padding: 0 14px;
border-top: 1px solid var(--filete);
background: var(--superficie);
font-size: 11px;
line-height: 1;
margin-top: auto
}
.rodape button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
font: inherit;
font-size: 11px;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap
}
.rodape button i {
font-size: 10px
}
.rodape-alerta {
color: var(--atencao, #c8963c)
}
.rodape-alerta:hover {
text-decoration: underline
}
.rodape-link {
color: var(--acento)
}
.rodape-link:hover {
text-decoration: underline
}
.rodape-sep {
color: var(--tinta-4)
}
.rodape-data {
margin-left: auto;
right: 20px;
color: var(--tinta-4);
white-space: nowrap
}
/* Escala visual proporcional à urgência: imediata é a única que interrompe
a leitura, porque é a única com prazo de 24 horas. */
.notif {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 9px 12px;
border-radius: var(--raio);
margin: 10px 0;
font-size: var(--t-menor);
line-height: 1.45
}
.notif>i {
margin-top: 2px;
flex: 0 0 auto
}
.notif b {
display: block;
font-weight: 600;
margin-bottom: 1px
}
.notif span {
color: var(--tinta-3)
}
.notif-imediata {
background: rgba(217, 83, 79, .10);
border-left: 3px solid var(--rejeitado, #d9534f)
}
.notif-imediata>i, .notif-imediata b {
color: var(--rejeitado, #d9534f)
}
.notif-semanal {
background: rgba(200, 150, 60, .10);
border-left: 3px solid var(--atencao, #c8963c)
}
.notif-semanal>i, .notif-semanal b {
color: var(--atencao, #c8963c)
}
.notif-surto, .notif-estadual {
background: var(--superficie-2);
border-left: 3px solid var(--filete)
}
.notif-surto>i, .notif-estadual>i,
.notif-surto b, .notif-estadual b {
color: var(--tinta-3)
}
.tipo-conduta {
display: inline-block;
padding: 1px 8px;
border-radius: 9px;
background: var(--superficie-2);
color: var(--tinta-3);
font-size: var(--t-mini);
font-weight: 600
}
/* Painel flutuante: ancorado no rodapé, cresce para cima. */
.aviso-texto {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
z-index: 200;
margin: 0;
padding: 11px 32px 12px 13px;
border-top: 1px solid var(--filete);
border-left: 2px solid var(--atencao, #c8963c);
background: var(--superficie-2);
box-shadow: 0 -6px 18px rgba(0, 0, 0, .22)
}
.aviso-texto b {
display: block;
color: var(--tinta);
margin-bottom: 3px;
font-size: 12px
}
.aviso-texto p {
margin: 0;
color: var(--tinta-3);
line-height: 1.5;
font-size: 11px;
max-width: 900px
}
.aviso-fechar {
position: absolute !important;
top: 6px;
right: 8px;
color: var(--tinta-4);
border-radius: 4px
}
.aviso-fechar:hover {
color: var(--tinta)
}
.rep-trecho {
background: var(--superficie-2);
border-left: 2px solid var(--filete);
padding: 9px 12px;
border-radius: 0 6px 6px 0;
margin-bottom: 14px
}
.rep-trecho b {
display: block;
font-size: .7rem;
color: var(--tinta-3);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 4px
}
.rep-trecho p {
margin: 0;
font-size: .8rem;
line-height: 1.5;
color: var(--tinta-2)
}
.rep-erro {
padding: 9px 11px;
border-radius: 6px;
border-left: 3px solid #d9534f;
background: rgba(217, 83, 79, .08);
font-size: .82rem
}
.btn-reportar {
background: none;
border: 0;
padding: 3px 5px;
cursor: pointer;
color: var(--tinta-4);
font-size: .7rem;
border-radius: 4px;
line-height: 1
}
.btn-reportar:hover {
color: var(--atencao, #c8963c);
background: var(--superficie-2)
}
.sub-nome {
margin: 2px 0 10px;
font-size: var(--t-menor);
color: var(--tinta-3);
font-style: italic
}
.field-group.alerta {
border-left: 2px solid var(--atencao, #c8963c);
padding-left: 9px
}
.esp-grupo {
margin-bottom: 14px
}
.esp-grupo h4 {
margin: 0 0 7px;
font-size: var(--t-mini);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--tinta-3);
display: flex;
align-items: center;
gap: 7px
}
.esp-n {
background: var(--superficie-2);
padding: 0 6px;
border-radius: 9px;
font-family: var(--fonte-dado);
font-size: var(--t-micro)
}
.esp-item {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 6px 9px;
border-radius: var(--raio);
cursor: pointer;
border-left: 2px solid transparent
}
.esp-item:hover {
background: var(--superficie-2)
}
.esp-nome {
font-size: var(--t-menor)
}
.esp-obs {
flex: 1 1 100%;
font-size: var(--t-mini);
color: var(--tinta-3);
line-height: 1.4
}
.esp-sensivel .esp-item {
border-left-color: var(--aprovado)
}
.esp-variavel .esp-item {
border-left-color: var(--atencao, #c8963c)
}
.esp-resistente .esp-item {
border-left-color: var(--rejeitado, #d9534f)
}
.esp-resistente .esp-nome {
opacity: .75
}
.esp-sub {
font-size: calc(var(--t-micro) * var(--escala-fonte));
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--tinta-4);
margin: calc(var(--e-2) * var(--escala-espaco)) 0 2px;
display: flex;
align-items: center;
gap: 5px
}
.esp-sub:first-child {
margin-top: 0
}
.rel-vermais {
width: 100%;
margin-top: 6px;
padding: 6px;
background: none;
border: 1px dashed var(--filete);
border-radius: var(--raio);
color: var(--acento);
font: inherit;
font-size: calc(var(--t-mini) * var(--escala-fonte));
cursor: pointer
}
.rel-vermais:hover {
border-color: var(--acento);
background: var(--superficie-2)
}
.rel-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px
}
.rel-col {
min-width: 0
}
.rel-titulo {
margin: 0 0 9px;
font-size: var(--t-menor);
font-weight: 600;
display: flex;
align-items: center;
gap: 7px;
color: var(--tinta-2);
padding-bottom: 6px;
border-bottom: 1px solid var(--filete)
}
.rel-titulo i {
color: var(--acento);
font-size: .8rem
}
.rel-vazio {
font-size: var(--t-mini);
color: var(--tinta-4);
margin: 0
}
.esp-grupo h5 {
margin: 10px 0 5px;
font-size: var(--t-micro);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--tinta-3);
display: flex;
align-items: center;
gap: 6px
}
@media (max-width:860px) {
.rel-split {
grid-template-columns: 1fr;
gap: 20px
}
}
/* ===========================================================================
17. RESPONSIVO
Abaixo de 860px o workspace de três painéis vira navegação em camadas:
a lista abre sobre o conteúdo, em vez de espremer as duas colunas.
=========================================================================== */
@media (max-width: 1024px) {
.left-panel {
width: 224px;
}
.detail-grid {
grid-template-columns: 1fr;
}
.related-grid {
grid-template-columns: 1fr;
}
.compare-grid {
grid-template-columns: 1fr;
}
.compare-divider {
height: 1px;
width: 100%;
}
}
@media (max-width: 480px) {
:root {
--e-4: 8px;
--e-5: 11px;
--e-6: 15px;
--e-7: 20px;
}
.app-header h1 {
font-size: calc(var(--t-maior) * var(--escala-fonte));
}
.mode-selector {
width: 100%;
order: 1
}
.mode-selector button {
flex: 1;
justify-content: center;
}
.nav-divider {
display: none;
}
.detail-area {
padding: calc(var(--e-4) * var(--escala-espaco));
}
.modal-content {
padding: calc(var(--e-5) * var(--escala-espaco));
max-height: 92vh;
}
.rv-cabeca {
flex-direction: column;
align-items: center;
text-align: center;
}
.accessibility-panel {
left: calc(var(--e-4) * var(--escala-espaco));
right: calc(var(--e-4) * var(--escala-espaco));
width: auto;
}
.esq-item {
line-height: 1.9;
}
.history-item {
max-width: 150px;
}
}
/* dispositivos sem hover (toque): alvos maiores, sem estado de passagem */
@media (hover: none) {
.list-item {
padding: calc(var(--e-4) * var(--escala-espaco));
}
.related-item {
padding: calc(var(--e-3) * var(--escala-espaco));
}
.controls button {
min-width: 34px;
height: 32px;
}
}
/* alto contraste do sistema: reforça filetes, que são a base da hierarquia */
@media (prefers-contrast: more) {
:root {
--filete: #94a5a0;
--filete-forte: #6c7f79;
--tinta-3: #4a5c56;
--tinta-4: #5d6f69;
}
.list-item.active {
outline: 1px solid var(--acento);
}
.filter-btn {
border-color: var(--filete-forte);
}
}
/* ===========================================================================
18. IMPRESSÃO
O que sai no papel é a prescrição, não a interface.
=========================================================================== */
@media print {
.app-header,
.nav-bar,
.left-panel,
.resize-handle-vertical,
.resize-handle-horizontal,
.accessibility-toggle,
.accessibility-panel,
.modal-overlay,
.toast-notification,
.list-toggle-btn,
.footer-note,
.esq-original,
.no-print {
display: none !important;
}
/* Container do elemento que terá o tooltip */
.tooltip {
position: relative;
/* Base de posicionamento para o balão */
cursor: pointer;
}
/* O Balão de Texto (Corpo do Tooltip) */
.tooltip::before {
content: attr(data-tooltip);
/* Captura o texto do HTML */
position: absolute;
bottom: 125%;
/* Posiciona acima do elemento */
left: 50%;
transform: translateX(-50%) scale(0.8);
/* Centraliza e reduz o tamanho inicial */
/* Estilização visual */
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
/* Evita quebra de linha indesejada */
/* Estado inicial (oculto) e transição */
opacity: 0;
pointer-events: none;
/* Evita interferência no mouse */
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* A Setinha (Triângulo inferior) */
.tooltip::after {
content: "";
position: absolute;
bottom: 110%;
/* Ajustado logo abaixo do balão */
left: 50%;
transform: translateX(-50%) scale(0.8);
/* Truque da borda transparente para criar o triângulo */
border-width: 6px;
border-style: solid;
border-color: #333 transparent transparent transparent;
/* Estado inicial (oculto) e transição */
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Efeito de Exibição ao passar o mouse (Hover) */
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
transform: translateX(-50%) scale(1);
/* Aplica zoom suave */
}
body,
.content-area,
.right-panel,
.resizable-container {
overflow: visible !important;
height: auto !important;
max-height: none !important;
background: #fff !important;
color: #000 !important;
}
.protocol-card {
break-inside: avoid;
page-break-inside: avoid;
border: 1px solid #999;
}
.esq-item {
border-left: 2px solid #555;
background: none;
}
/* fundo colorido não sai no papel: os estados viram borda */
.selo-revisao.revisado {
border: 1px solid #1a6b47;
}
.selo-revisao.pendente {
border: 1px solid #8a5a00;
}
.badge-line {
border: 1px solid #666;
}
a[href^="http"]::after {
content: " ("attr(href) ")";
font-size: 0.8em;
color: #555;
}
}
/* ===== Menu do revisor ===== */
.user-menu {
order: 4;
flex: 0 0 auto;
margin-left: 0;
position: relative;
}
.user-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--filete);
background: var(--superficie);
color: var(--tinta-3);
cursor: pointer;
transition: .15s;
padding: 0
}
.user-btn:hover, .user-btn[aria-expanded="true"] {
color: var(--acento);
border-color: var(--acento)
}
.user-dropdown {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 236px;
z-index: 400;
background: var(--superficie);
border: 1px solid var(--filete);
border-radius: var(--raio-g);
box-shadow: var(--sombra-alta);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
transition: .15s
}
.user-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto
}
.user-dropdown:not(.show) {
display: none
}
.user-item {
display: flex;
gap: 10px;
align-items: flex-start;
width: 100%;
padding: 11px 14px;
background: none;
border: 0;
text-align: left;
color: var(--tinta);
cursor: pointer;
text-decoration: none;
font-family: var(--fonte-ui);
font-size: var(--t-base)
}
.user-item:hover {
background: var(--superficie-2)
}
.user-item+.user-item {
border-top: 1px solid var(--filete)
}
.user-item i {
color: var(--acento);
margin-top: 2px;
width: 15px;
text-align: center
}
.user-item b {
display: block;
font-size: var(--t-menor);
font-weight: 600;
color: var(--tinta)
}
.user-item small {
display: block;
font-size: var(--t-mini);
color: var(--tinta-3);
margin-top: 1px
}
/* ===== Formulário de candidatura ===== */
.cand-form {
display: grid;
gap: 11px;
grid-template-columns: 1fr 1fr
}
.cand-form .largo {
grid-column: 1 / -1
}
.cand-form label {
display: block;
font-size: var(--t-mini);
color: var(--tinta-3);
margin-bottom: 3px
}
.cand-form input,
.cand-form select,
.cand-form textarea {
width: 100%;
padding: 7px 9px;
border: 1px solid var(--filete);
border-radius: var(--raio);
background: var(--superficie-2);
color: var(--tinta);
/* ← o que faltava */
font-family: var(--fonte-ui);
font-size: var(--t-base)
}
.cand-form input:focus,
.cand-form select:focus,
.cand-form textarea:focus {
outline: none;
border-color: var(--acento);
box-shadow: 0 0 0 2px var(--acento-lavagem)
}
.cand-form input::placeholder,
.cand-form textarea::placeholder {
color: var(--tinta-4)
}
.cand-form textarea {
min-height: 84px;
resize: vertical
}
.cand-consent {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: var(--t-menor);
color: var(--tinta-3);
line-height: 1.45
}
.cand-consent input {
width: auto;
margin-top: 2px
}
.cand-hp {
position: absolute !important;
left: -9999px !important;
opacity: 0;
height: 0;
width: 0;
overflow: hidden
}
@media (max-width:560px) {
.cand-form {
grid-template-columns: 1fr
}
}
/* ===========================================================================
TELAS ESTREITAS — LAYOUT DO CABEÇALHO E DA NAVEGAÇÃO
=========================================================================== */
@media (max-width: 860px) {
/* ---- Faixa 1: logo à esquerda, usuário à direita ---- */
.app-header {
flex-wrap: wrap;
column-gap: calc(var(--e-3) * var(--escala-espaco));
row-gap: calc(var(--e-3) * var(--escala-espaco));
}
.app-header h1 {
order: 1;
flex: 0 0 auto;
margin-right: auto;
}
.user-menu {
order: 2;
flex: 0 0 auto;
margin-left: 0;
}
/* ---- Faixa 2: busca de ponta a ponta ---- */
.search-wrapper {
order: 3;
flex: 0 0 100%;
max-width: none;
margin: 0;
}
.badge-db,
.header-icon-hint {
display: none;
}
/* ---- Faixas 3 e 4 ---- */
.nav-top {
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: calc(var(--e-3) * var(--escala-espaco));
}
/* Faixa 3: modos sozinhos na linha, centralizados */
.mode-selector {
order: 1;
flex: 0 0 100%;
justify-content: center;
min-width: 0;
}
.mode-selector button {
flex: 1 1 0;
min-width: 0;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-divider {
display: none;
}
/* Faixa 4: lista à esquerda, filtro à direita */
.list-toggle-btn {
order: 2;
display: inline-flex;
flex: 0 0 auto;
margin-right: auto;
}
.filter-group {
order: 3;
flex: 0 0 auto;
/* não reivindica a largura dos chips */
min-width: 0;
margin-left: auto;
position: relative;
/* âncora da camada */
}
.filter-row {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: auto;
width: max-content;
max-width: min(88vw, 420px);
z-index: 80;
background: var(--superficie);
border: 1px solid var(--filete-forte);
border-radius: var(--raio);
box-shadow: var(--sombra-alta);
flex-wrap: wrap;
justify-content: flex-start;
}
.filter-row.open {
max-height: 50vh;
overflow-y: auto;
padding: calc(var(--e-3) * var(--escala-espaco));
}
html, body {
max-width: 100%;
overflow-x: clip;
}
.main-grid {
flex-direction: column;
min-height: 0;
}
/* lista como camada sobreposta, controlada por .open */
.left-panel {
position: absolute;
inset: 0 auto 0 0;
width: min(84vw, 340px);
z-index: 60;
transform: translateX(-102%);
transition: transform 0.22s ease;
box-shadow: var(--sombra-alta);
top: var(--altura-topo, 104px);
}
.left-panel .scroll-list {
overflow-y: auto;
flex: 1;
}
.left-panel.open {
transform: translateX(0);
}
.resize-handle-vertical {
display: none;
}
.resize-handle-horizontal {
display: block;
height: 6px;
}
.list-toggle-btn {
display: inline-flex;
}
.right-panel {
width: 100%;
}
.resizable-container {
min-height: 96px;
}
.rodape-data, #dataRodape, footer {
display: none !important;
}
.badge-mode {
display: none;
}
}