/* =============================================================================
mobile-fix.css — fixes globais de responsividade
Aplicado em todas as telas via no .
Filosofia: regras conservadoras, target especifico, !important so quando
nao tem outro jeito. Foco em:
- Inputs nao causarem zoom no iOS (font-size >= 16px)
- Tabelas terem scroll horizontal se nao couberem
- Modais nao estourarem viewport
- Padding reduzido em telas pequenas
- Touch targets minimos (44px segundo Apple/Material)
2026-06-06.
============================================================================= */
/* =============================================================================
TOKENS DO TEMA ESCURO PADRÃO DO PORTAL (referência: home / index.html)
Paleta oficial adotada a partir de 2026-06. Use estas variáveis ao
reformular/criar telas internas. Documentação completa no CLAUDE.md
("DIRETRIZ PERMANENTE: tema escuro padrão do portal").
============================================================================= */
:root{
/* Fundo e superfícies */
--pb-bg: #0C0907; /* fundo da página e separadores/traços */
--pb-bg-hover: #171009; /* hover de "quadros" na cor do fundo */
--pb-surface-white: #fff; /* listas/tabelas internas dos heros */
/* Hero (mesma cor do card de login): marrom translúcido + blur */
--pb-hero-bg: linear-gradient(160deg, rgba(74,58,42,.5) 0%, rgba(58,45,32,.5) 100%);
--pb-hero-blur: blur(16px) saturate(140%);
--pb-hero-radius: 6px;
--pb-hero-shadow: 0 12px 38px rgba(0,0,0,.55);
--pb-hero-brown-1: #4A3A2A; /* base do gradiente do hero (sem alpha) */
--pb-hero-brown-2: #3A2D20;
/* Texto sobre o fundo escuro */
--pb-title: #f4f0ea; /* título de página (.pg-title) */
--pb-hero-title: #fff; /* título de hero (1.3rem, ls 2px, MAIÚSC.) */
--pb-text: rgba(255,255,255,.82); /* texto corrido (.descricao) */
--pb-text-strong: #e3c069; /* destaque no texto */
--pb-label: rgba(255,255,255,.66);/* rótulo de seção (MAIÚSCULAS) */
--pb-muted: rgba(255,255,255,.62);/* data / rótulos secundários */
--pb-link: #e3c878; /* links dentro de hero ("Ver painel") */
/* Dourado (acento de marca) */
--gold: #c8a84b;
--gold-2: #b8981b;
/* Faixa superior (topbar) */
--pb-topbar-bg: rgba(16,13,11,.55);
--pb-topbar-blur: blur(10px);
/* Menu lateral (transparente sobre o fundo) */
--pb-nav-item: rgba(255,255,255,.82);
--pb-nav-icon: rgba(255,255,255,.55);
--pb-nav-caret: rgba(255,255,255,.32);
--pb-nav-hover-bg: rgba(255,255,255,.08);
--pb-nav-active-bg: #a08c4a; /* item ativo (folha) — texto #fff */
--pb-sidebar-mobile-bg: #14110e; /* menu deslizante opaco no mobile */
/* Breadcrumb */
--pb-bc: rgba(255,255,255,.72);
--pb-bc-sep: rgba(255,255,255,.35);
}
/* ============ Logo Biolchi (portal interno) ============
Marca da Biolchi no lugar do antigo wordmark em texto ("processos.").
Escopo restrito a [src*="biolchi-logo"] para NAO afetar o logo do Banrisul
(banrisul-logo-full.png), que tem estilo proprio em banrisul-tema.css.
No tema escuro troca para a versao branca, garantindo contraste em qualquer
lugar (menu lateral OU faixa do topo). */
.pb-sidebar-logo img.pb-brand-logo[src*="biolchi-logo"] {
display: block;
height: 26px;
width: auto;
max-width: 178px;
}
html[data-pb-tema="escuro"] .pb-brand-logo[src*="biolchi-logo"] {
content: url("/biolchi-logo-branco.png");
}
/* ============ Faixa superior (topbar) do portal interno ============
Injetada por /topbar-biolchi.js. Mesma cor do menu (#eeecea) levemente
escurecida, para diferenciar do site Banrisul (menu azul-marinho). Nao
aparece nas telas Banrisul. No tema escuro o filtro global de /tema.js
inverte o fundo junto com o resto da pagina. */
.pb-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 52px;
z-index: 1100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 16px;
background: #e4e0db;
border-bottom: 1px solid rgba(0, 0, 0, .08);
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
font-family: 'Albert Sans', system-ui, sans-serif;
}
.pb-topbar-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.pb-topbar-right {
display: flex;
align-items: center;
flex-shrink: 0;
}
.pb-topbar-toggle {
width: 38px;
height: 38px;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #3a352f;
flex-shrink: 0;
}
.pb-topbar-toggle:hover {
background: rgba(0, 0, 0, .06);
}
.pb-topbar-brand {
display: flex;
align-items: center;
min-width: 0;
}
.pb-topbar .pb-brand-logo {
display: block;
height: 19.2px; /* 24px - 20% */
width: auto;
max-width: 128px;
}
/* bloco do usuario dentro da faixa: cancela bordas/padding herdados do
contexto do menu lateral; mantem o avatar dourado e o nome */
.pb-topbar .pb-sidebar-user {
border: 0 !important;
padding: 0 !important;
margin: 0;
background: transparent;
color: #3a352f;
font-size: .82rem;
display: flex;
align-items: center;
gap: 9px;
}
/* O nome do usuario na faixa aparece sempre (mesmo com o menu recolhido):
a regra body.pb-collapsed .pb-user-nome serve so para o rail estreito. */
.pb-topbar .pb-user-nome {
display: inline-block !important;
}
/* No mobile, a faixa mostra so as iniciais (avatar) — sem repetir o nome. */
@media (max-width: 768px) {
.pb-topbar .pb-user-nome {
display: none !important;
}
}
/* Com a faixa ativa: menu e conteudo descem para baixo dela e o cabecalho
antigo do menu (logo/usuario) some, junto do hamburguer flutuante. */
body.pb-has-topbar .pb-sidebar {
top: 52px;
height: calc(100vh - 52px);
/* mesma cor da faixa (#e4e0db): menu e faixa ficam levemente escurecidos e
idênticos, dando unidade visual ao portal interno */
background: #e4e0db;
}
body.pb-has-topbar.pb-has-sidebar {
padding-top: 52px !important;
}
body.pb-has-topbar .pb-sidebar-logo {
display: none !important;
}
body.pb-has-topbar .pb-hamburger {
display: none !important;
}
/* ============ MOBILE: ate 640px (smartphones) ============ */
@media (max-width: 640px) {
/* ---- Inputs: previne zoom-in automatico do iOS (precisa >= 16px) ---- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input:not([type]),
select,
textarea {
font-size: 16px !important;
}
/* ---- Body: padding mais enxuto ---- */
body {
padding: 12px;
}
body.pb-has-sidebar {
padding-left: 8px;
padding-right: 8px;
padding-top: 60px;
}
/* ---- Headings: reduz tipografia ---- */
h1 { font-size: 1.2rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .94rem; }
.pg-title { font-size: 1.15rem; }
/* ---- Tabelas: wrap pra scroll horizontal quando estourar ---- */
.tbl-wrap,
.tbl-wrap-mobile,
.pv-tbl-wrap,
.md-tl-body,
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* tabelas dentro de cards/sections viram scrollaveis horizontalmente */
.pv-sec-inner table,
.pv-card table,
.section table,
.container table {
font-size: .8rem;
}
/* ---- Modais (overlay padrao Biolchi): nao estourar viewport ---- */
.modal-overlay,
.mp-overlay,
.mp-edit-overlay,
.proj-modal-overlay,
.modal-bg,
[class*="modal-bg"],
[class*="modal-overlay"] {
padding: 8px;
align-items: flex-start;
}
/* container do modal: largura cheia, altura limitada com scroll interno */
.modal-overlay > .modal-box,
.modal-overlay > .modal-content,
.mp-overlay > .mp-modal,
.mp-edit-overlay > .mp-edit-modal,
.proj-modal-overlay > .modal-card,
.modal-bg > .modal,
[class*="modal-overlay"] > div:not(.modal-overlay):not([class*="overlay"]) {
width: 100% !important;
max-width: 100% !important;
max-height: 90vh;
overflow-y: auto;
margin: 8px auto;
}
/* ---- Touch targets minimos ---- */
button,
.btn,
a.btn,
.pb-nav-item,
.pb-nav-sub {
min-height: 38px;
}
/* botoes pequenos (lupa, lixeira) ficam um pouco maiores */
.btn-sm,
.mp-btn-remover,
.btn-acao-card,
.bm-fbtn {
min-height: 36px;
padding: 7px 10px;
}
/* ---- Forms: campos verticais ---- */
.form-row,
.filters-row,
.filtros {
flex-direction: column;
gap: 10px;
}
.form-row > .fg,
.filters-row > .fg,
.filtros > .fg {
width: 100%;
flex: 1 1 100%;
min-width: 0;
}
.form-row > .fg input,
.form-row > .fg select,
.filters-row > .fg input,
.filters-row > .fg select {
width: 100%;
}
/* ---- Grids genericos viram 1 coluna ---- */
.kpi-grid,
.pv-grid,
.pv-charts,
.row-2col,
.bm-kpi {
grid-template-columns: 1fr !important;
}
/* ---- Sections: padding reduzido ---- */
.section,
.pv-card,
.pv-sec-inner,
.bm-card {
padding: 14px 12px !important;
}
/* ---- KPI cards menores ---- */
.kpi-value,
.bm-val { font-size: 1.4rem !important; }
.kpi-label,
.bm-lbl { font-size: .58rem !important; }
/* ---- Esconder colunas opcionais em tabelas (precisa data-mobile-hide) ---- */
[data-mobile-hide="true"],
th[data-mobile-hide],
td[data-mobile-hide] {
display: none !important;
}
/* ---- Breadcrumb: menos espaco ---- */
.pb-breadcrumb {
padding: 6px 12px;
font-size: .72rem;
}
}
/* ============ MOBILE PEQUENO: ate 420px ============ */
@media (max-width: 420px) {
body { padding: 8px; }
body.pb-has-sidebar { padding-left: 4px; padding-right: 4px; }
h1 { font-size: 1.05rem; }
h2 { font-size: .95rem; }
.pg-title { font-size: 1rem; }
/* Section title em uma linha so quando der */
.section-title { font-size: .92rem; }
/* Modais: menos margem */
[class*="modal-overlay"],
[class*="modal-bg"] {
padding: 4px;
}
}
/* ============ DESKTOP/TABLET: pequenos refinos ============ */
@media (max-width: 1024px) and (min-width: 641px) {
/* Sidebar collapsable quando estreito */
body.pb-has-sidebar { padding-left: 56px; }
}
/* ============================================================================
GLOBAL SAFETY NET — impede overflow horizontal em qualquer tela.
Regras genericas que protegem telas que ainda nao tem CSS responsivo proprio.
(Adicionado 2026-06-12.)
============================================================================ */
@media (max-width: 640px) {
/* ---- Tabelas largas SEM wrapper proprio: rolam na horizontal em vez de
estourar a viewport. So vira scroll quando o conteudo nao cabe. O
display:block afeta apenas a caixa externa da ; thead/tbody/tr/td
mantem o layout de tabela atraves de uma tabela anonima. ---- */
table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---- Imagens/videos nunca ultrapassam a largura da tela ---- */
img,
video {
max-width: 100%;
height: auto;
}
/* ---- Codigo / texto pre-formatado quebra em vez de empurrar o layout ---- */
pre,
code {
white-space: pre-wrap;
word-break: break-word;
}
/* ---- Palavras/URLs muito longas nao estouram o layout ---- */
body {
overflow-wrap: break-word;
}
}