/**
* PDV web (pague_azul_pdv) - camada visual "modo A" (linguagem Linear/Bucket do painel master)
*
* COPIA PROPRIA (sem include cruzado) de pague_azul_system/assets/css/v2/master.css, secoes 1-16,
* em 2026-10-12. Mudou la, avalie copiar para ca. Secoes 17-18 sao so dos apps de balcao
* (PDV web e Escritorio): traducao das classes legadas (.page-header, .stats-grid, .table-container,
* .badge) para os padroes do modo A, numeros grandes nas telas de venda/caixa e o login variacao A.
*
* Ordem: style.css -> modal-padrao.css -> v2/tokens.css -> v2/pdv.css -> v2/master.css (pa_v2_head em components/tema.php)
*
* Linguagem: neutros sem azul, bordas de 1px, densidade compacta, cor so pontual (ponto de status),
* acao = --ms-acao (quase-preto no claro, quase-branco no escuro); o acento da marca (--v2-primaria)
* fica para foco, links e a barra de carregamento. Micro-caixa-alta = font-variant-caps: all-small-caps
* (o texto do DOM nao muda: testes de texto seguem valendo).
*
* Indice: 1 tokens | 2 menu | 3 topo | 4 cabecalho/cartoes | 5 botoes | 6 campos | 7 abas/selos | 8 tabelas
* 9 modais | 12 base global | 13 padroes de modulo (.pa-cab, .pa-kpis, .pa-barra-filtros, .pa-tabela, gaveta,
* PaVisor) | 14 PaControles | 15 graficos | 11 responsivo | 16 carregando (PaRede/PaCarregando)
* 17 balcao | 18 login A
*/
/* ==================== 1. TOKENS ==================== */
:root {
/* acao (botao primario): quase-preto neutro */
--ms-acao: #18181B;
--ms-acao-hover: #2C2D32;
--ms-acao-texto: #FFFFFF;
/* menu lateral: superficie quase branca, texto escuro, cinzas neutros; ativo = tinta neutra (sem barra) */
--ms-menu-fundo: #FBFBFB;
--ms-menu-texto: #3A3B40; /* 10.9:1 */
--ms-menu-forte: #111113;
--ms-menu-icone: #6B6D74; /* 5.1:1 (icone e rotulos suaves do menu) */
--ms-menu-grupo: #6B6D74; /* 5.1:1 - rotulo de grupo */
--ms-menu-hover: rgba(0, 0, 0, 0.04);
--ms-menu-ativo: rgba(0, 0, 0, 0.06);
--ms-menu-ativo-texto: #111113;
--ms-menu-barra: transparent;
--ms-menu-divisor: rgba(0, 0, 0, 0.06);
/* superficies e campos (claro): neutros puros, sem tinta azul */
--v2-fundo: #F7F7F8;
--v2-sidebar: #FBFBFB;
--v2-superficie: #FFFFFF;
--v2-superficie-2: #F6F6F7;
--v2-elevada: #FFFFFF;
--v2-neutro: rgba(0, 0, 0, 0.05);
--v2-hover: rgba(0, 0, 0, 0.03);
--v2-ativo: rgba(0, 0, 0, 0.055);
--v2-borda: rgba(0, 0, 0, 0.075);
--v2-borda-forte: rgba(0, 0, 0, 0.12);
--v2-campo: #F8F8F9;
--v2-campo-borda: #8A8C93; /* 3.4:1 sobre branco (limite de componente) */
--v2-controle: #5E6068;
--v2-texto-forte: #111113;
--v2-texto: #2E2F33; /* 13.6:1 */
--v2-texto-suave: #66686F; /* 5.6:1 sobre branco, 5.2:1 sobre a superficie-2 */
--v2-texto-fraco: #9A9CA3; /* so icones decorativos */
--v2-skeleton: #ECECEE;
--ms-selecao: #C9D7F8; /* selecao de texto: 12:1 com o texto forte */
--ms-selecao-texto: #111113;
--v2-anel: rgba(37, 99, 235, 0.30);
/* raios e sombras: cantos 8-10px, sombra quase nula */
--v2-r-sm: 8px;
--v2-r-md: 10px;
--v2-r-lg: 12px;
--v2-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.03);
--ms-sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.03);
--v2-sombra-3: 0 24px 56px -16px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
--v2-topbar-altura: 56px;
}
@media screen {
html[data-tema="escuro"] {
--ms-acao: #EDEDEF;
--ms-acao-hover: #FFFFFF;
--ms-acao-texto: #111113;
--ms-menu-fundo: #121315; /* quase-preto neutro (nao azul-marinho) */
--ms-menu-texto: #C4C5CA; /* 10.6:1 */
--ms-menu-forte: #EDEDEF;
--ms-menu-icone: #85878E; /* 5:1 */
--ms-menu-grupo: #85878E;
--ms-menu-hover: rgba(255, 255, 255, 0.04);
--ms-menu-ativo: rgba(255, 255, 255, 0.075);
--ms-menu-ativo-texto: #EDEDEF;
--ms-menu-barra: transparent;
--ms-menu-divisor: rgba(255, 255, 255, 0.06);
--v2-fundo: #0F1012;
--v2-sidebar: #121315;
--v2-superficie: #161719;
--v2-superficie-2: #1C1D20;
--v2-elevada: #1E1F22;
--v2-neutro: rgba(255, 255, 255, 0.06);
--v2-hover: rgba(255, 255, 255, 0.035);
--v2-ativo: rgba(255, 255, 255, 0.07);
--v2-borda: rgba(255, 255, 255, 0.07);
--v2-borda-forte: rgba(255, 255, 255, 0.12);
--v2-campo: #1A1B1E;
--v2-campo-borda: #6A6C73; /* 3.2:1 sobre o campo */
--v2-controle: #8C8E95;
--v2-texto-forte: #EDEDEF;
--v2-texto: #CDCED2;
--v2-texto-suave: #8E9097; /* 5.4:1 sobre a superficie */
--v2-texto-fraco: #63656C;
--v2-placeholder: #7E8087;
--v2-skeleton: #222326;
--v2-overlay: rgba(0, 0, 0, 0.62);
--ms-selecao: #34508F; /* 6:1 com o texto */
--ms-selecao-texto: #F3F3F5;
--v2-sombra-1: 0 0 0 transparent;
--ms-sombra-cartao: 0 0 0 transparent; /* "none" invalidaria sombras compostas */
--v2-sombra-3: 0 24px 56px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
}
/* ==================== 2. MENU LATERAL ==================== */
/* Compacto (estilo Linear/Bucket): itens de 32px, texto 13px, icones de traco cinza, grupos com
rotulo pequeno em cinza (recolhiveis como antes), item ativo = tinta neutra discreta, sem barra.
Tokens reapontados DENTRO de .sidebar: busca, trilho e selos do painel.css herdam. */
.sidebar {
--v2-texto: var(--ms-menu-texto);
--v2-texto-forte: var(--ms-menu-forte);
--v2-texto-suave: var(--ms-menu-icone);
--v2-hover: var(--ms-menu-hover);
--v2-neutro: var(--ms-menu-hover);
--v2-ativo: var(--ms-menu-ativo);
--v2-borda: var(--ms-menu-divisor);
--v2-sidebar: var(--ms-menu-fundo);
background: var(--ms-menu-fundo);
color: var(--ms-menu-texto);
border-right: 1px solid var(--v2-borda-forte);
}
html[data-tema="escuro"] .sidebar { border-right-color: rgba(255, 255, 255, 0.07); }
.sidebar-header { min-height: var(--v2-topbar-altura); padding: 14px 14px 10px; border-bottom: 1px solid var(--ms-menu-divisor); }
/* selo vivo: definicao unica em v2/painel.css (pdv: pdv.css); aqui so o tamanho no menu */
.sidebar .pa-marca-logo { width: 30px; height: 30px; border-radius: 9px; }
.sidebar .pa-marca-inicial { font-size: 15.5px; }
.sidebar .pa-marca-nome { font-size: 14.5px; font-weight: 700; color: var(--ms-menu-forte); letter-spacing: -0.01em; }
.sidebar .pa-marca-slogan {
margin-top: 1px;
font-size: 11.5px;
font-weight: 400;
letter-spacing: 0;
font-variant-caps: normal;
text-transform: none;
line-height: 1.25;
color: var(--ms-menu-grupo);
}
/* busca */
.sidebar .pa-menu-busca { padding: 10px 10px 4px; }
.sidebar .pa-menu-busca-input { height: 32px; line-height: 30px; border-radius: var(--v2-r-sm); border-color: var(--v2-borda-forte); background: var(--ms-menu-fundo); font-size: 12.5px; }
html[data-tema="escuro"] .sidebar .pa-menu-busca-input { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.09); }
.sidebar .pa-menu-busca-input:hover:not(:focus) { border-color: var(--v2-campo-borda); }
/* areas (grupos): rotulo pequeno cinza, sem divisor (o espaco separa) */
.sidebar .pa-grupo + .pa-grupo { margin-top: 10px; padding-top: 0; border-top: 0; }
.sidebar .pa-grupo-btn {
height: 26px;
margin-top: 0;
padding: 0 8px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
font-variant-caps: normal;
line-height: 1.2;
color: var(--ms-menu-grupo);
}
.sidebar .pa-grupo-btn:hover { background: var(--ms-menu-hover); color: var(--ms-menu-forte); }
.sidebar .pa-grupo.contem-atual > .pa-grupo-btn { color: var(--ms-menu-grupo); }
.sidebar .pa-grupo-seta { color: var(--ms-menu-icone); opacity: 0; transition: opacity 0.12s ease; }
.sidebar .pa-grupo-btn:hover .pa-grupo-seta,
.sidebar .pa-grupo-btn:focus-visible .pa-grupo-seta,
.sidebar .pa-grupo.recolhido .pa-grupo-seta { opacity: 1; }
/* itens */
.sidebar .nav-item { height: 32px; margin: 1px 0; padding: 0 8px; gap: 9px; border-radius: 7px; color: var(--ms-menu-texto); font-weight: 450; }
.sidebar .nav-item span { font-size: 13px; }
.sidebar .nav-item .pa-ico { width: 16px; height: 16px; color: var(--ms-menu-icone); }
.sidebar .nav-item:hover { background: var(--ms-menu-hover); color: var(--ms-menu-forte); }
.sidebar .nav-item:hover .pa-ico { color: var(--ms-menu-forte); }
.sidebar .nav-item.active { background: var(--ms-menu-ativo); color: var(--ms-menu-ativo-texto); font-weight: 550; }
.sidebar .nav-item.active .pa-ico { color: var(--ms-menu-ativo-texto); }
.sidebar .nav-item.active::before { display: none; }
.sidebar .nav-item .nav-badge { box-shadow: none; height: 17px; line-height: 17px; font-size: 10.5px; }
/* rodape do menu */
.sidebar .pa-menu-rodape { border-top-color: var(--ms-menu-divisor); }
.sidebar .pa-menu-trilho-btn:hover,
.sidebar .pa-menu-busca-btn:hover { background: var(--ms-menu-hover); color: var(--ms-menu-forte); }
/* modo trilho: o divisor entre areas ja vem do painel.css */
html.pa-menu-trilho .sidebar .pa-grupo + .pa-grupo { margin-top: 4px; padding-top: 4px; }
/* gaveta do celular */
.sidebar-overlay { background: rgba(0, 0, 0, 0.45); }
/* ==================== 3. TOPBAR ==================== */
/* mesma superficie da pagina (sem faixa), filete de 1px; controles discretos */
.topbar,
html[data-tema="escuro"] .topbar {
background: color-mix(in srgb, var(--v2-fundo) 86%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid var(--v2-borda);
padding: 0 28px 0 18px;
}
.topbar-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; }
.btn-toggle-sidebar,
.pa-btn-icone { width: 32px; height: 32px; border-radius: var(--v2-r-sm); }
.btn-toggle-sidebar:hover,
.pa-btn-icone:hover { background: var(--v2-neutro); }
/* seletor de cidade: campo discreto */
.topbar .topbar-cidade {
height: 32px;
padding: 0 4px 0 10px;
background: var(--v2-superficie);
border: 1px solid var(--v2-borda-forte);
border-radius: var(--v2-r-sm);
}
.topbar .topbar-cidade:hover { border-color: var(--v2-campo-borda); }
.topbar .topbar-cidade-select { height: 30px; min-height: 30px; font-size: 13px; font-weight: 500; color: var(--v2-texto-forte); }
html .topbar .topbar-cidade:focus-within { border-color: var(--v2-primaria); box-shadow: 0 0 0 1px var(--v2-primaria), 0 0 0 4px var(--v2-anel); }
.pa-chip-marca { height: 24px; border: 1px solid var(--v2-borda-forte); background: var(--v2-superficie); }
.topbar-separator { height: 20px; background: var(--v2-borda-forte); }
/* usuario: avatar neutro */
.pa-avatar {
width: 30px;
height: 30px;
border: 1px solid var(--v2-borda-forte);
background: var(--v2-superficie-2);
color: var(--v2-texto-forte);
font-size: 11.5px;
font-weight: 600;
}
.user-name { font-size: 13px; font-weight: 500; }
.user-role {
font-size: 11.5px;
font-weight: 400;
letter-spacing: 0;
font-variant-caps: normal;
line-height: 1.2;
}
.btn-logout { height: 32px; padding: 0 10px; border-radius: var(--v2-r-sm); font-size: 13px; }
.btn-logout:hover { background: var(--v2-neutro); }
/* ==================== 4. CABECALHO, CARTOES, SECOES ==================== */
.content-area { padding: 28px 32px 56px; }
.page-header { margin-bottom: 22px; }
.page-header h1 {
font-size: 24px;
font-weight: 650;
letter-spacing: -0.025em;
line-height: 1.15;
}
.page-header p { margin-top: 4px; font-size: 13.5px; color: var(--v2-texto-suave); }
.content-section,
.card,
.filters-bar,
.table-container,
.stat-card,
.stat-card-small {
background: var(--v2-superficie);
border: 1px solid var(--v2-borda);
border-radius: var(--v2-r-md);
box-shadow: var(--ms-sombra-cartao);
}
.content-section { padding: 22px 24px; }
.section-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.stat-card-title,
.stat-card .stat-info .stat-label {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.08em;
font-variant-caps: all-small-caps; line-height: 1.2;
}
.stat-card-value { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
/* ==================== 5. BOTOES ==================== */
.btn { height: 34px; padding: 0 14px; border-radius: var(--v2-r-sm); font-weight: 500; letter-spacing: -0.005em; }
.btn-sm { height: 30px; padding: 0 11px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
html .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--v2-superficie), 0 0 0 4px var(--v2-primaria); }
/* Acao principal: azul-noite solido (fora das linhas de tabela, que seguem o padrao neutro do painel.css) */
.btn-primary,
.page-header .btn-success, .page-actions .btn-success,
.pa-modal-footer .btn-success, .modal-overlay .modal-footer .btn-success, .modal-actions .btn-success {
background: var(--ms-acao);
color: var(--ms-acao-texto);
border-color: transparent;
}
.btn-primary:hover:not(:disabled),
html[data-tema="escuro"] .btn-primary:hover:not(:disabled),
.page-header .btn-success:hover:not(:disabled), .page-actions .btn-success:hover:not(:disabled),
.pa-modal-footer .btn-success:hover:not(:disabled), .modal-overlay .modal-footer .btn-success:hover:not(:disabled),
.modal-actions .btn-success:hover:not(:disabled) {
background: var(--ms-acao-hover);
color: var(--ms-acao-texto);
filter: none;
}
.btn-primary:active:not(:disabled) { background: var(--ms-acao); }
/* seta/icone de avancar desliza no hover (como no "Entrar") */
.btn :is(.fa-arrow-right, .fa-chevron-right, .fa-angle-right, .fa-long-arrow-alt-right) { transition: transform 0.2s ease; }
.btn:hover:not(:disabled) :is(.fa-arrow-right, .fa-chevron-right, .fa-angle-right, .fa-long-arrow-alt-right) { transform: translateX(3px); }
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-default,
.btn-outline,
.btn-outline-primary {
background: var(--v2-superficie);
border-color: var(--v2-borda-forte);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}
.btn-outline,
.btn-outline-primary { color: var(--v2-texto-forte); }
.btn-outline:hover:not(:disabled),
.btn-outline-primary:hover:not(:disabled) { background: var(--v2-superficie-2); color: var(--v2-texto-forte); border-color: var(--v2-campo-borda); }
/* ==================== 6. CAMPOS E ROTULOS ==================== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="time"], input[type="url"],
select, textarea,
:where(input[type="search"], input[type="datetime-local"], input[type="month"], input[type="week"], .form-control, .form-select) {
min-height: 38px;
border-radius: var(--v2-r-sm);
}
/* anel de foco nitido: contorno de 1px no acento + halo (vence os modulos, como o painel.css) */
html :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):focus {
border-color: var(--v2-primaria) !important;
background-color: var(--v2-superficie);
box-shadow: 0 0 0 1px var(--v2-primaria), 0 0 0 4px var(--v2-anel) !important;
}
html .topbar .topbar-cidade-select:focus { background-color: transparent; box-shadow: none !important; }
/* rotulos de campo: micro-caixa-alta (so rotulos "soltos" - os que envolvem checkbox/radio ficam normais) */
.form-group > label:not(:has(input, select, textarea)),
.pa-form-grid label:not(:has(input, select, textarea)),
.form-grid label:not(:has(input, select, textarea)),
.filter-group > label:not(:has(input, select, textarea)),
label.form-label {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.08em;
font-variant-caps: all-small-caps; line-height: 1.2;
color: var(--v2-texto-suave);
margin-bottom: 7px;
}
.form-section-title,
.pa-form-section-title { font-size: 11px; letter-spacing: 0.1em; font-weight: 650; }
/* ==================== 7. ABAS, FILTROS, SELOS ==================== */
.tab-btn,
.tab-button { height: 40px; font-weight: 500; }
.tab-btn.active,
.tab-button.active { font-weight: 600; }
.tab-btn.active,
.tab-button.active { border-bottom-color: var(--v2-texto-forte); }
.pa-modal-tab.active { border-bottom-color: var(--v2-texto-forte); }
.filters-bar { padding: 14px 18px; }
/* selo de status (pilula pequena com ponto) */
.pa-selo {
height: 22px;
padding: 0 8px;
border-radius: 6px;
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.08em;
font-variant-caps: all-small-caps; line-height: 1.2;
}
/* ==================== 8. TABELAS ==================== */
html .table > thead > tr > th,
html table.dataTable > thead > tr > th,
html table.dataTable thead th,
html table.dataTable thead td {
background: var(--v2-superficie-2);
color: var(--v2-texto-suave);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.07em;
font-variant-caps: all-small-caps; line-height: 1.2;
border-bottom: 1px solid var(--v2-borda-forte);
padding-top: 11px;
padding-bottom: 11px;
}
html .table > thead > tr > th:first-child,
html table.dataTable > thead > tr > th:first-child { border-top-left-radius: var(--v2-r-sm); }
html .table > thead > tr > th:last-child,
html table.dataTable > thead > tr > th:last-child { border-top-right-radius: var(--v2-r-sm); }
html .table > tbody > tr > td,
html table.dataTable > tbody > tr > td { padding-top: 12px; padding-bottom: 12px; }
html .dataTables_wrapper .dataTables_filter input,
html .dataTables_wrapper .dataTables_length select { height: 34px; min-height: 34px; background-color: var(--v2-campo); border-color: var(--v2-borda-forte); }
html .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--ms-acao) !important;
border-color: transparent !important;
color: var(--ms-acao-texto) !important;
}
/* ==================== 9. MODAIS ==================== */
.pa-modal-box,
.modal-overlay > .modal,
.modal-overlay > .modal-content,
.modal-overlay .modal-content { border-radius: 16px; }
.pa-modal-header,
.modal-overlay .modal-header { min-height: 64px; padding: 18px 20px 18px 24px; }
.pa-modal-header h1, .pa-modal-header h2, .pa-modal-header h3, .pa-modal-header h4,
.modal-overlay .modal-header h1, .modal-overlay .modal-header h2, .modal-overlay .modal-header h3,
.modal-overlay .modal-header h4, .modal-overlay .modal-header h5 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.pa-modal-footer,
.modal-overlay .modal-footer,
.modal-overlay .modal-actions { background: var(--v2-superficie-2); padding: 14px 24px; }
.pa-modal-body .modal-actions { background: var(--v2-superficie-2); }
.pa-modal,
.modal-overlay { background: rgba(8, 8, 10, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* lote 9: quem rola e o .pa-modal-body; a caixa e o form NAO cortam (o overflow:hidden deles so servia para arredondar
os cantos e fazia o campo rolado para baixo do rodape contar como "cortado"). Os cantos ficam com o cabecalho e o
rodape (herdam o raio da caixa: 16px no modal, 14px/0 na gaveta). Antes era contorno local em #modalVeiculo. */
html .pa-modal-box,
html .pa-modal-box > form { overflow: visible; }
html .pa-modal-box > form { border-radius: inherit; }
html .pa-modal-box > .pa-modal-header,
html .pa-modal-box > form > .pa-modal-header { border-top-left-radius: inherit; border-top-right-radius: inherit; }
html .pa-modal-box > .pa-modal-footer,
html .pa-modal-box > form > .pa-modal-footer,
html .pa-modal-box > .pa-modal-body:last-child,
html .pa-modal-box > form > .pa-modal-body:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
/* ==================== 12. BASE GLOBAL (herdada por todos os modulos do system) ==================== */
/* versalete nunca vaza para campos nem para o "i" do glossario */
input, select, textarea, .dash-info { font-variant-caps: normal; }
/* Selecao de texto visivel nos 2 temas (antes: --v2-primaria-tint sobre branco = quase invisivel).
Vale em tabelas, modais e campos (o ::selection global alcanca input/textarea no Chrome/Edge). */
::selection { background: var(--ms-selecao); color: var(--ms-selecao-texto); }
/* Pesos: corpo 400, rotulos 500, so titulos 600-700 (a Inter e variavel 400-700: nada sintetico).
strong/b continuam fortes de proposito; os demais textos de dado nao. */
html .table > tbody > tr > td,
html table.dataTable > tbody > tr > td { font-weight: 400; font-variant-numeric: tabular-nums; }
.info-value, .pa-modal-body dd { font-weight: 400; }
.badge, .status-badge { font-weight: 500; }
/* lote 9: o main.css punha todo .status-badge em caixa alta ("NÃO CONECTADO" na Integração). Caixa normal, como o
texto do HTML (o textContent nao muda: testes de texto seguem valendo). */
html .status-badge { text-transform: none; letter-spacing: 0; }
/* lote 9: so para leitor de tela (rotulo de coluna de icones, etc.). Antes: .audit-sr local da Auditoria. */
.pa-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* ---- Tabelas: numeros alinhados a direita quando a coluna e marcada como numerica ---- */
html :is(.table, table.dataTable) :is(th, td):is(.num, .numero, .valor, .text-right, .text-end, .dt-right, .dt-body-right) { text-align: right; }
html table.dataTable thead > tr > th:is(.num, .numero, .valor, .text-right, .text-end, .dt-right, .dt-head-right) { padding-right: 26px; }
/* busca, "mostrar N", "mostrando X de Y", paginacao: no tom do login */
html .dataTables_wrapper .dataTables_length label,
html .dataTables_wrapper .dataTables_filter label {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.08em;
font-variant-caps: all-small-caps; line-height: 1.2;
}
html .dataTables_wrapper .dataTables_filter input { width: 260px; border-radius: var(--v2-r-sm); }
html .dataTables_wrapper .dataTables_info { font-size: 12.5px; color: var(--v2-texto-suave); }
html .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--v2-r-sm); }
/* pilulas de status: mesma altura, cores semanticas suaves, ponto nos estados */
.badge { height: 22px; padding: 0 9px; font-size: 11.5px; letter-spacing: 0.01em; }
/* acoes de linha: botoes-icone discretos */
html :is(td, .table-actions, .pa-acoes-linha) :is(.btn-action, .btn-icon) { width: 30px; height: 30px; border-radius: var(--v2-r-sm); }
/* ---- Modais .pa-modal ---- */
/* subtitulo/ID ao lado do titulo vira pilula */
.pa-modal-header h3 .pa-modal-sub,
.pa-modal-header .pa-modal-sub {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 6px;
border: 1px solid var(--v2-borda-forte);
background: var(--v2-superficie-2);
color: var(--v2-texto-suave);
font-family: var(--v2-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.04em;
opacity: 1;
}
/* titulos de secao dentro do corpo: fortes e compactos. SEM text-transform de proposito: caixa-alta
por CSS muda o innerText (e o texto copiado) e quebrava os testes que conferem o titulo da secao. */
html .pa-modal-body :is(h4, h5) {
font-size: 13.5px;
font-weight: 650;
letter-spacing: -0.005em;
color: var(--v2-texto-forte);
}
/* pares rotulo/valor: rotulo em micro-caixa-alta cinza */
.info-label,
.pa-modal-body dt {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.08em;
font-variant-caps: all-small-caps; line-height: 1.2;
color: var(--v2-texto-suave);
}
.info-card { background: var(--v2-superficie-2); border-radius: var(--v2-r-md); }
/* grade de pares (opt-in, base do piloto de verificacoes):
- Placa
- ABC1D23
...
*/
.pa-pares { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px 24px; margin: 0; }
.pa-pares > div { min-width: 0; }
.pa-pares dt { margin: 0 0 4px; }
.pa-pares dd { margin: 0; color: var(--v2-texto-forte); font-size: 14px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* rodape: primaria azul-noite (secao 5); secundaria fantasma */
.pa-modal-footer :is(.btn-secondary, .btn-light, .btn-default, .btn-outline-secondary) {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--v2-texto);
}
.pa-modal-footer :is(.btn-secondary, .btn-light, .btn-default, .btn-outline-secondary):hover:not(:disabled) {
background: var(--v2-neutro);
border-color: transparent;
color: var(--v2-texto-forte);
}
/* entrada curta */
.pa-modal.active > .pa-modal-box { animation: ms-modal-entra 0.18s var(--v2-ease) both; }
@keyframes ms-modal-entra { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
/* ==================== 13. PADROES DE MODULO (lote 1: Fiscalizacao, 2026-10-11) ==================== */
/* Componentes opt-in para as telas de modulo. JS de apoio: assets/js/v2/componentes.js (PaFiltros, PaTabela, PaVisor).
* .pa-cab ............ cabecalho de pagina (titulo, descricao curta, acoes a direita: primaria quase-preta, demais fantasma)
* .pa-kpis/.pa-kpi ... faixa de indicadores do modulo (painel unico, celulas com filete; button.pa-kpi = filtra a lista)
* .pa-barra-filtros .. filtros em linha, contagem de filtros ativos, Limpar; recolhivel no celular
* .pa-tabela ......... DataTables com cabecalho fixo (dom PaTabela.DOM), linhas densas, .pa-st (ponto+texto), td.num,
* .pa-acoes (icones discretos), tr.pa-clicavel (linha abre o detalhe), .pa-vazio-tabela
* .pa-gaveta ......... detalhe em painel lateral (variante do .pa-modal: modal.show/hide e testes continuam valendo)
* .pa-modal-det ...... detalhe em modal grande de evidencia (2 colunas: fotos | dados)
* .pa-det-* .......... cabecalho do detalhe (identificador grande, pilulas, metadados), secoes, .pa-pares, .pa-tempo
* .pa-galeria ........ foto principal + miniaturas (abre o PaVisor)
* .pa-visor .......... visualizador de imagens em tela cheia (zoom, arrastar, setas, brilho/contraste, baixar)
* Lote 2 (Financeiro, 2026-10-11), so aditivo: td.num sem quebra de linha, .pa-valor-neg (saida em vermelho),
* .pa-kpi-valor.moeda (R$ nao parte), .pa-kpi.principal (o numero que importa maior).
* Lote 9 (consolidacao, 2026-10-11), so aditivo: toast abaixo da gaveta aberta, .pa-sr (so leitor de tela, secao 12),
* .pa-selo.implantacao, .pa-secoes (secoes em coluna lateral), principal com destaque no celular, modal que nao corta
* (secao 9), .status-badge em caixa normal (secao 12). O KPI impar no celular ja era regra do lote 3 (abaixo). */
/* ---- tons semanticos (ponto de status, pilulas, KPIs) ---- */
:is(.pa-st, .pa-pilula, .pa-kpi, .pa-tempo li) { --pa-tom: var(--v2-texto-fraco); --pa-tom-txt: var(--v2-texto); --pa-tom-tint: var(--v2-neutro); }
:is(.pa-st, .pa-pilula, .pa-kpi, .pa-tempo li, .pa-ponto):is(.ok, [data-tom="ok"]) { --pa-tom: var(--v2-sucesso); --pa-tom-txt: var(--v2-sucesso-texto); --pa-tom-tint: var(--v2-sucesso-tint); }
:is(.pa-st, .pa-pilula, .pa-kpi, .pa-tempo li, .pa-ponto):is(.erro, [data-tom="erro"]) { --pa-tom: var(--v2-erro); --pa-tom-txt: var(--v2-erro-texto); --pa-tom-tint: var(--v2-erro-tint); }
:is(.pa-st, .pa-pilula, .pa-kpi, .pa-tempo li, .pa-ponto):is(.alerta, [data-tom="alerta"]) { --pa-tom: var(--v2-alerta); --pa-tom-txt: var(--v2-alerta-texto); --pa-tom-tint: var(--v2-alerta-tint); }
:is(.pa-st, .pa-pilula, .pa-kpi, .pa-tempo li, .pa-ponto):is(.info, [data-tom="info"]) { --pa-tom: var(--v2-primaria); --pa-tom-txt: var(--v2-info-texto); --pa-tom-tint: var(--v2-info-tint); }
:is(.pa-st, .pa-pilula, .pa-kpi, .pa-tempo li, .pa-ponto):is(.violeta, [data-tom="violeta"]) { --pa-tom: var(--v2-violeta-texto); --pa-tom-txt: var(--v2-violeta-texto); --pa-tom-tint: var(--v2-violeta-tint); }
:is(.pa-st, .pa-pilula, .pa-kpi, .pa-tempo li, .pa-ponto):is(.ciano, [data-tom="ciano"]) { --pa-tom: var(--v2-ciano-texto); --pa-tom-txt: var(--v2-ciano-texto); --pa-tom-tint: var(--v2-ciano-tint); }
.pa-ponto { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pa-tom, var(--v2-texto-fraco)); }
/* ---- cabecalho de pagina ---- */
.pa-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.pa-cab > div:first-child { min-width: min(360px, 100%); flex: 1 1 auto; } /* base auto: no celular o cabecalho vira coluna */
.pa-cab h1 { display: flex; align-items: center; gap: 10px; }
.pa-cab h1 > i { display: none; } /* o icone do modulo ja esta no menu: o titulo fica limpo */
.pa-cab p { max-width: 720px; }
.pa-cab .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pa-cab .page-actions .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.pa-cab .page-actions .btn i { font-size: 12px; }
/* secundarias: fantasma com filete (a primaria fica quase-preta pela secao 5) */
.pa-cab .page-actions .btn:not(.btn-primary):not(.btn-success),
.btn-fantasma {
background: transparent;
border: 1px solid var(--v2-borda-forte);
box-shadow: none;
color: var(--v2-texto-forte);
}
.pa-cab .page-actions .btn:not(.btn-primary):not(.btn-success):hover:not(:disabled),
.btn-fantasma:hover:not(:disabled) { background: var(--v2-neutro); border-color: var(--v2-borda-forte); color: var(--v2-texto-forte); }
.pa-cab .page-actions .btn:not(.btn-primary):not(.btn-success) i,
.btn-fantasma i { color: var(--v2-texto-suave); }
/* ---- faixa de KPIs (mesma linguagem da Inicio) ---- */
.pa-kpis {
--pa-kpi-linha: color-mix(in srgb, var(--v2-texto-forte) 8%, var(--v2-superficie));
display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 12px; overflow: hidden;
background: var(--v2-superficie); border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); box-shadow: var(--ms-sombra-cartao);
}
html[data-tema="escuro"] .pa-kpis { --pa-kpi-linha: color-mix(in srgb, #FFFFFF 7%, var(--v2-superficie)); }
.pa-kpi {
position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 13px 16px 12px; margin: 0;
background: var(--v2-superficie); border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--pa-kpi-linha);
font: inherit; color: inherit; text-align: left;
}
button.pa-kpi { cursor: pointer; transition: background-color 0.12s ease; }
button.pa-kpi:hover { background: color-mix(in srgb, var(--v2-texto-forte) 2.5%, var(--v2-superficie)); }
button.pa-kpi:focus-visible { outline: 2px solid var(--v2-anel); outline-offset: -2px; }
button.pa-kpi.ativo { background: color-mix(in srgb, var(--v2-texto-forte) 4%, var(--v2-superficie)); }
button.pa-kpi.ativo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--v2-texto-forte); }
.pa-kpi-rot { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--v2-texto-suave); }
.pa-kpi-rot .pa-ponto { background: var(--pa-tom); }
.pa-kpi-valor { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--v2-texto-forte); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* lote 2: valor em reais nao parte entre "R$" e o numero (opt-in: .pa-kpi-valor.moeda) */
.pa-kpi-valor.moeda { white-space: nowrap; overflow-wrap: normal; }
/* lote 2: o numero que importa (ex.: faturamento) um pouco maior que os vizinhos */
.pa-kpi.principal .pa-kpi-valor { font-size: 26px; }
.pa-kpi-valor.pa-valor-neg { color: var(--v2-erro-texto); }
.pa-kpi-sub { font-size: 12px; line-height: 1.4; color: var(--v2-texto-suave); font-variant-numeric: tabular-nums; }
.pa-kpi-sub b { font-weight: 600; color: var(--pa-tom-txt); }
/* ---- barra de filtros ---- */
.pa-barra-filtros {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 12px; padding: 12px 14px;
background: var(--v2-superficie); border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); box-shadow: var(--ms-sombra-cartao);
}
.pa-filtros-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; flex: 1 1 0; min-width: 0; }
.pa-filtro { display: flex; flex-direction: column; gap: 5px; flex: 1 1 140px; min-width: 120px; max-width: 220px; margin: 0; }
.pa-filtro.largo { flex-basis: 240px; max-width: 340px; }
.pa-barra-filtros .pa-filtro > label {
margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; font-variant-caps: normal; line-height: 1.2; color: var(--v2-texto-suave);
}
.pa-barra-filtros .pa-filtro :is(input, select) { height: 34px; min-height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13px; width: 100%; }
.pa-filtros-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; min-height: 34px; }
.pa-filtros-acoes .btn { height: 34px; padding: 0 11px; font-size: 13px; }
.pa-filtros-conta {
display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; white-space: nowrap;
background: var(--v2-neutro); color: var(--v2-texto-forte); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.pa-filtros-conta:empty { display: none; }
.pa-filtros-alternar { display: none; }
/* ---- tabela ---- */
html .table-container.pa-tabela { overflow: visible; padding: 0; }
html .pa-tabela .dataTables_wrapper { padding: 0; overflow: visible; }
.pa-tabela .pa-dt-topo,
.pa-tabela .pa-dt-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 14px; }
.pa-tabela .pa-dt-rodape { border-top: 1px solid var(--v2-borda); }
html .pa-tabela .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) { float: none; margin: 0; padding: 0; }
/* a tabela rola dentro do cartao com o cabecalho preso no alto (no celular a pagina rola normal) */
.pa-tabela .pa-rolagem { overflow: auto; border-top: 1px solid var(--v2-borda); }
@media (min-width: 769px) {
.pa-tabela .pa-rolagem { max-height: max(380px, calc(100vh - 150px)); }
body.pa-embed .pa-tabela .pa-rolagem { max-height: max(320px, calc(100vh - 110px)); }
}
html .pa-tabela .pa-rolagem table.dataTable { margin: 0 !important; border-collapse: separate; border-spacing: 0; width: 100% !important; }
/* lote 13 (2026-10-11): tabela mais larga que o cartao (janela do Espaco ~820 px, notebook 1024-1280 com menu).
A .pa-rolagem ja rolava, mas a barra horizontal fica no FIM da caixa (ate 100vh de altura, abaixo da dobra; no Mac e
no touch nem aparece) e nada indicava colunas a direita: a coluna saia "cortada" na borda e Acoes parecia sumida.
(a) sombra na borda que ainda tem conteudo (some ao chegar ao fim: capa "local" x sombra "scroll");
(b) 1a coluna (identificador) presa a esquerda ao rolar de lado. */
html .pa-tabela .pa-rolagem {
background:
linear-gradient(to left, var(--v2-superficie) 45%, transparent) 100% 0 / 36px 100% no-repeat local,
radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--v2-texto-forte) 16%, transparent), transparent) 100% 0 / 14px 100% no-repeat scroll,
var(--v2-superficie);
}
html .pa-tabela .pa-rolagem > table > thead > tr > th:first-child,
html .pa-tabela .pa-rolagem > table > tbody > tr > td:first-child { position: sticky; left: 0; }
html .pa-tabela .pa-rolagem > table > thead > tr > th:first-child { z-index: 3; }
html .pa-tabela .pa-rolagem > table > tbody > tr > td:first-child { z-index: 1; background-color: var(--v2-superficie); }
/* hover/linha atual sao translucidos: na coluna presa vao sobre a superficie (senao o texto rolado aparece por baixo) */
html .pa-tabela .pa-rolagem > table > tbody > tr:is(:hover, .odd, .even) { background-color: transparent; } /* tom azul legado (dashboard.css) no tr ficava so fora da coluna presa */
html .pa-tabela .pa-rolagem > table > tbody > :is(tr.pa-clicavel, tr):hover > td:first-child { background: linear-gradient(var(--v2-hover), var(--v2-hover)) var(--v2-superficie); }
html .pa-tabela .pa-rolagem > table > tbody > tr.pa-atual > td:first-child { background: linear-gradient(var(--v2-ativo), var(--v2-ativo)) var(--v2-superficie); }
/* (c) colunas secundarias somem quando o CARTAO (nao a tela) fica estreito: e o
mesmo atributo no | . Nunca em Acoes nem no identificador; o dado segue no detalhe e na exportacao.
baixa: cartao ate 1000 px (1280 com menu, janela do Espaco); media: ate 640 px (celular, janela pequena). */
html .table-container.pa-tabela { container: pa-tabela / inline-size; }
/* estado vazio/carregando (tabela ainda sem DataTables, logo sem .pa-rolagem): o cabecalho tambem rola em vez de cortar */
html .table-container.pa-tabela:has(> table) { overflow-x: auto; }
@container pa-tabela (max-width: 1000px) { html .pa-tabela :is(th, td)[data-pa-prio="baixa"] { display: none; } }
@container pa-tabela (max-width: 640px) { html .pa-tabela :is(th, td)[data-pa-prio="media"] { display: none; } }
html .pa-tabela table.dataTable > thead > tr > th {
position: sticky; top: 0; z-index: 2; border-radius: 0 !important; padding-top: 9px; padding-bottom: 9px;
background: var(--v2-superficie-2); white-space: nowrap;
}
html .pa-tabela table.dataTable > tbody > tr > td {
padding-top: 9px; padding-bottom: 9px; font-size: 13.5px; vertical-align: middle; border-bottom: 1px solid var(--v2-borda);
white-space: normal; overflow-wrap: normal;
}
/* a tabela cabe no cartao: menos folga para a seta de ordenacao; coluna sem ordenacao sem folga */
/* !important: o dashboard.css reserva "padding-right: 30px !important" em todo th do DataTables e vencia estas regras
(lote 2: com 9 colunas a coluna Acoes saia do cartao em 1366) */
html .pa-tabela table.dataTable > thead > tr > th { padding-right: 22px !important; }
html .pa-tabela table.dataTable > thead > tr > th:is(.sorting_disabled, .pa-col-acoes) { padding-right: 12px !important; }
html .pa-tabela table.dataTable :is(td, th):first-child { padding-left: 14px; }
html .pa-tabela table.dataTable > tbody > tr:last-child > td { border-bottom: 0; }
html .pa-tabela table.dataTable > tbody > tr.pa-clicavel { cursor: pointer; }
html .pa-tabela table.dataTable > tbody > tr.pa-clicavel:hover > td { background: var(--v2-hover); }
html .pa-tabela table.dataTable > tbody > tr.pa-atual > td { background: var(--v2-ativo); }
html .pa-tabela :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }
/* lote 2: valor numerico/monetario nunca quebra ("R$" numa linha e "50,00" na outra, visto em Debitos a 1366) */
html .pa-tabela table.dataTable > tbody > tr > td.num,
html .pa-tabela > .pa-rolagem > table.table > tbody > tr > td.num,
html :is(.table, table.dataTable) td:is(.num, .numero, .valor) { white-space: nowrap; }
/* valor negativo (saida/estorno): so o texto em vermelho, o sinal "-" continua no texto */
.pa-valor-neg { color: var(--v2-erro-texto); }
html .pa-tabela td.num.pa-valor-neg { color: var(--v2-erro-texto); }
html .pa-tabela :is(th, td).pa-col-acoes { width: 1%; white-space: nowrap; text-align: right; }
/* lote 2: tabela SIMPLES (sem DataTables; ex.: paginacao no servidor) com o mesmo visual.
*/
html .pa-tabela > .pa-rolagem:first-child { border-top: 0; }
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) { margin: 0; border-collapse: separate; border-spacing: 0; width: 100%; }
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) > thead > tr > th {
position: sticky; top: 0; z-index: 2; border-radius: 0 !important; padding: 9px 12px; background: var(--v2-superficie-2); white-space: nowrap;
}
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) > tbody > tr > td {
padding: 9px 12px; font-size: 13.5px; vertical-align: middle; border-bottom: 1px solid var(--v2-borda); font-variant-numeric: tabular-nums;
white-space: normal; overflow-wrap: normal;
}
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) :is(td, th):first-child { padding-left: 14px; }
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) > tbody > tr:last-child > td { border-bottom: 0; }
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) > tbody > tr:hover > td { background: transparent; }
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) > tbody > tr.pa-clicavel { cursor: pointer; }
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) > tbody > tr.pa-clicavel:hover > td { background: var(--v2-hover); }
html .pa-tabela > .pa-rolagem > table.table:not(.dataTable) > tbody > tr.pa-atual > td { background: var(--v2-ativo); }
.pa-tabela .pa-dt-rodape { font-size: 12.5px; color: var(--v2-texto-suave); font-variant-numeric: tabular-nums; }
/* paginacao simples (botoes) no rodape da tabela */
.pa-paginas { display: inline-flex; align-items: center; gap: 2px; }
.pa-paginas button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--v2-r-sm); background: transparent; color: var(--v2-texto); font: inherit; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pa-paginas button:hover:not(:disabled) { background: var(--v2-neutro); color: var(--v2-texto-forte); }
.pa-paginas button.active { background: var(--ms-acao); color: var(--ms-acao-texto); }
.pa-paginas button:disabled { opacity: 0.4; cursor: default; }
.pa-sub { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--v2-texto-suave); }
.pa-truncar { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* placa: chip monoespacado discreto (lista e detalhe) */
.pa-placa {
display: inline-block; padding: 1px 6px; border: 1px solid var(--v2-borda-forte); border-radius: 5px; background: var(--v2-superficie-2);
font-family: var(--v2-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; color: var(--v2-texto-forte); white-space: nowrap;
}
/* status: ponto + texto (cor so no ponto) */
.pa-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--v2-texto-forte); white-space: nowrap; }
.pa-st::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pa-tom); }
.pa-st.fraco { color: var(--v2-texto-suave); font-weight: 450; }
.pa-st + .pa-st { margin-left: 10px; }
/* acoes da linha: icones discretos (contorno so no hover/foco) */
html .pa-tabela td .pa-acoes { display: inline-flex; align-items: center; gap: 0; justify-content: flex-end; }
html .pa-tabela td .pa-acoes :is(.btn, .btn-action) {
width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center;
background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; color: var(--v2-texto-suave) !important;
}
html .pa-tabela td .pa-acoes :is(.btn, .btn-action) i { font-size: 13px; }
html .pa-tabela td .pa-acoes :is(.btn, .btn-action):is(:hover, :focus-visible):not(:disabled) {
background: var(--v2-superficie) !important; border-color: var(--v2-borda-forte) !important; color: var(--v2-texto-forte) !important;
}
html .pa-tabela td .pa-acoes .pa-acao-perigo:is(:hover, :focus-visible):not(:disabled) { color: var(--v2-erro-texto) !important; }
html .pa-tabela td .pa-acoes .pa-acao-ok:is(:hover, :focus-visible):not(:disabled) { color: var(--v2-sucesso-texto) !important; }
.pa-contador-fotos { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; font-size: 12px; color: var(--v2-texto-suave); font-variant-numeric: tabular-nums; }
/* estado vazio / erro dentro da tabela */
.pa-vazio-tabela { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 16px; text-align: center; white-space: normal; }
.pa-vazio-tabela .pa-vazio-icone { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 10px; border: 1px solid var(--v2-borda-forte); background: var(--v2-superficie-2); color: var(--v2-texto-suave); font-size: 15px; }
.pa-vazio-tabela strong { font-size: 14px; font-weight: 600; color: var(--v2-texto-forte); }
.pa-vazio-tabela span { font-size: 13px; color: var(--v2-texto-suave); max-width: 420px; }
.pa-vazio-tabela .btn { margin-top: 6px; }
html .pa-tabela table.dataTable > tbody > tr > td.pa-td-vazio { padding: 0; }
/* ---- barra de selecao em lote (aparece com itens marcados) ---- */
.pa-lote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 10px 8px 14px; border-radius: var(--v2-r-md); background: var(--ms-acao); color: var(--ms-acao-texto); font-size: 13px; }
.pa-lote strong { font-weight: 600; }
.pa-lote .pa-lote-acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pa-lote .btn { height: 30px; padding: 0 11px; font-size: 12.5px; background: transparent; border: 1px solid color-mix(in srgb, var(--ms-acao-texto) 28%, transparent); color: var(--ms-acao-texto); box-shadow: none; }
.pa-lote .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ms-acao-texto) 12%, transparent); color: var(--ms-acao-texto); }
/* ---- pilula de status (cabecalho do detalhe) ---- */
.pa-pilula { font-family: var(--v2-fonte); letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--pa-tom-tint); color: var(--pa-tom-txt); font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.pa-pilula::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pa-tom); }
/* ---- detalhe: gaveta lateral ---- */
.pa-modal.pa-gaveta { justify-content: flex-end; align-items: stretch; padding: 8px; background: rgba(8, 8, 10, 0.32); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pa-modal.pa-gaveta > .pa-modal-box { width: min(640px, 100%); max-width: none; height: auto; max-height: none; border-radius: 14px; }
.pa-modal.pa-gaveta.active > .pa-modal-box { animation: pa-gaveta-entra 0.2s var(--v2-ease) both; }
@keyframes pa-gaveta-entra { from { opacity: 0.4; transform: translateX(28px); } }
/* lote 9 (antes repetido em usuarios/perfis/auditoria): com a gaveta aberta, o aviso (toast) desce para nao cobrir as
setas e o X do cabecalho dela */
body:has(.pa-modal.pa-gaveta.active) .toast-container { top: 96px !important; }
/* ---- detalhe: modal grande de evidencia ---- */
.pa-modal-box.pa-modal-det { max-width: 1120px; height: min(90vh, 820px); }
.pa-modal-box.pa-modal-det.estreito { max-width: 760px; } /* sem fotos: uma coluna, janela mais estreita */
/* cabecalho do detalhe (dentro do .pa-modal-header): identificador grande + pilulas + metadados */
.pa-modal-header.pa-det-cab { align-items: flex-start; min-height: 0; padding: 18px 16px 16px 24px; }
.pa-det-cab-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pa-det-sobre { font-size: 12.5px; color: var(--v2-texto-suave); font-variant-numeric: tabular-nums; }
.pa-modal-header .pa-det-id,
.pa-det-id { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-family: var(--v2-mono); font-size: 26px; font-weight: 650; letter-spacing: 0.03em; line-height: 1.15; color: var(--v2-texto-forte); }
.pa-det-id.texto { font-family: inherit; letter-spacing: -0.02em; font-size: 22px; }
.pa-det-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--v2-texto-suave); }
.pa-det-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pa-det-meta span > :not(i) { min-width: 0; }
.pa-det-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; } /* 1 linha por item: altura do cabecalho estavel */
.pa-det-meta > span > i { margin-right: 6px; }
.pa-det-meta i { font-size: 11.5px; color: var(--v2-texto-suave); }
.pa-det-ferramentas { display: flex; align-items: center; gap: 2px; flex: none; }
.pa-det-ferramentas .pa-btn-ic { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--v2-r-sm); background: transparent; color: var(--v2-texto-suave); cursor: pointer; font-size: 13px; }
.pa-det-ferramentas .pa-btn-ic:hover:not(:disabled) { background: var(--v2-neutro); color: var(--v2-texto-forte); }
.pa-det-ferramentas .pa-btn-ic:disabled { opacity: 0.35; cursor: default; }
.pa-det-ferramentas .pa-modal-close { margin-left: 4px; }
/* corpo: secoes separadas por filete */
.pa-modal-body.pa-det-corpo { padding: 4px 24px 24px; }
.pa-det-sec { padding: 18px 0 0; }
.pa-det-sec + .pa-det-sec { margin-top: 18px; border-top: 1px solid var(--v2-borda); }
html .pa-modal-body .pa-det-sec > h4,
.pa-det-sec > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--v2-texto-forte); }
.pa-det-sec > h4 .pa-det-sec-extra { margin-left: auto; font-size: 12.5px; font-weight: 450; color: var(--v2-texto-suave); }
.pa-det-sec > h4 a.pa-det-sec-extra { color: var(--v2-primaria-forte); text-decoration: none; }
.pa-det-sec > h4 a.pa-det-sec-extra:hover { text-decoration: underline; }
.pa-det-sec p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--v2-texto); }
.pa-det-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.pa-pares { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 20px; }
.pa-pares > .largo { grid-column: 1 / -1; }
.pa-pares dd { font-size: 13.5px; line-height: 1.45; }
.pa-pares dd .pa-sub { margin-top: 2px; }
.pa-pares dd a { color: var(--v2-primaria-forte); text-decoration: none; }
.pa-pares dd a:hover { text-decoration: underline; }
/* status (.pa-st) dentro dos pares: texto longo quebra linha em vez de invadir a coluna vizinha (lote 11;
antes era contorno local do carro_guardiao). Na tabela o .pa-st segue nowrap. */
.pa-pares dd .pa-st { white-space: normal; align-items: baseline; }
.pa-pares dd .pa-st::before { transform: translateY(-1px); }
/* caixa de destaque dentro do detalhe (ex.: debito gerado, documento) */
.pa-det-caixa { padding: 14px 16px; border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); background: var(--v2-superficie-2); }
.pa-det-caixa-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pa-det-caixa-topo:last-child { margin-bottom: 0; } /* caixa so com valor + pilula: sem folga embaixo (pedido do lote 3) */
.pa-det-caixa-valor { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--v2-texto-forte); font-variant-numeric: tabular-nums; }
.pa-det-caixa .pa-det-nota { margin-top: 10px; font-size: 12.5px; color: var(--v2-texto-suave); }
.pa-det-caixa .btn { margin-top: 12px; }
/* duas colunas (modal de evidencia): fotos a esquerda, dados a direita */
.pa-det-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); gap: 0 28px; align-items: start; }
.pa-det-grade > .pa-det-col-evidencia { min-width: 0; } /* sem sticky: coluna mais alta que a janela deixava as miniaturas inalcancaveis */
.pa-det-grade.sem-evidencia { grid-template-columns: minmax(0, 1fr); }
/* mapa sob demanda */
.pa-det-mapa { margin-top: 12px; height: 220px; border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); overflow: hidden; background: var(--v2-superficie-2); }
.pa-det-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.pa-det-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pa-det-links .btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
/* rodape do detalhe: acoes de decisao a direita, Fechar fantasma */
.pa-det-rodape { justify-content: space-between; flex-wrap: wrap; }
.pa-det-rodape .pa-det-rodape-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* ---- lote 9: selo "em implantacao" (configuracao sem leitor: fica visivel, marcada; regra do dono) ---- */
.pa-selo.implantacao { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--v2-borda-forte); color: var(--v2-texto-suave); background: transparent; }
/* ---- lote 9: secoes em coluna lateral (pagina de ajustes; modelo: Configuracoes)
* ---- */
.pa-secoes { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; }
.pa-secoes-conteudo { min-width: 0; max-width: 860px; }
.pa-secoes-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.pa-secoes-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent;
font-size: 13.5px; font-weight: 500; color: var(--v2-texto); text-align: left; white-space: nowrap; cursor: pointer;
}
.pa-secoes-item i { width: 16px; text-align: center; font-size: 13px; color: var(--v2-texto-suave); }
.pa-secoes-item:hover:not(.active) { background: var(--v2-hover, var(--v2-neutro)); color: var(--v2-texto-forte); }
.pa-secoes-item.active { background: var(--v2-superficie); border-color: var(--v2-borda-forte); color: var(--v2-texto-forte); font-weight: 600; }
.pa-secoes-item.active i { color: var(--v2-texto-forte); }
.pa-secoes-item:focus-visible { outline: 2px solid var(--v2-primaria); outline-offset: 1px; }
.pa-secoes-item[data-implantacao]::after {
content: "em implantação"; margin-left: auto; padding: 0 6px; border: 1px solid var(--v2-borda-forte); border-radius: 5px;
font-size: 12px; font-weight: 600; letter-spacing: 0.06em; font-variant-caps: all-small-caps; line-height: 18px; color: var(--v2-texto-suave);
}
.pa-secao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; padding: 0 0 14px; margin-bottom: 16px; border-bottom: 1px solid var(--v2-borda); }
.pa-secao-titulo { margin: 0 0 3px; font-size: 15px; font-weight: 600; color: var(--v2-texto-forte); }
.pa-secao-ajuda { margin: 0; font-size: 13px; line-height: 1.5; color: var(--v2-texto-suave); max-width: 560px; }
.pa-secao-cab .pa-st { margin-top: 2px; }
@media (max-width: 900px) {
.pa-secoes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pa-secoes-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; } /* quebra em linhas: nada fica cortado */
.pa-secoes-item { width: auto; flex: none; }
.pa-secoes-item[data-implantacao]::after { display: none; } /* no celular o selo aparece no cabecalho da secao */
}
@media (max-width: 720px) {
.pa-secao-cab { flex-direction: column; }
}
/* ---- linha do tempo ---- */
.pa-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.pa-tempo li { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 2px 10px; align-items: baseline; padding: 0 0 14px; }
.pa-tempo li:last-child { padding-bottom: 0; }
.pa-tempo li::before { content: ""; grid-row: 1; grid-column: 1; align-self: center; width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: var(--pa-tom); box-shadow: 0 0 0 3px var(--v2-elevada); position: relative; z-index: 1; }
.pa-tempo li:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 12px; bottom: -2px; width: 1px; background: var(--v2-borda-forte); }
.pa-tempo-oque { font-size: 13.5px; color: var(--v2-texto-forte); font-weight: 500; }
.pa-tempo-quando { font-size: 12.5px; color: var(--v2-texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-tempo-quem { grid-column: 2 / -1; font-size: 12.5px; color: var(--v2-texto-suave); overflow-wrap: anywhere; }
/* ---- galeria: foto principal + miniaturas ---- */
.pa-galeria { display: flex; flex-direction: column; gap: 8px; }
.pa-galeria-principal {
position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: zoom-in;
border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); background: #0E0F11;
}
.pa-galeria-principal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pa-galeria-principal:focus-visible { outline: 2px solid var(--v2-anel); outline-offset: 2px; }
.pa-galeria-selo { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; background: rgba(10, 10, 12, 0.72); color: #F2F2F3; font-size: 12px; font-weight: 500; pointer-events: none; font-variant-numeric: tabular-nums; }
.pa-galeria-selo.cont { left: 10px; top: 10px; }
.pa-galeria-selo.ampliar { right: 10px; bottom: 10px; opacity: 0; transition: opacity 0.15s ease; }
.pa-galeria-principal:hover .pa-galeria-selo.ampliar,
.pa-galeria-principal:focus-visible .pa-galeria-selo.ampliar { opacity: 1; }
.pa-galeria-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.pa-galeria-mini { position: relative; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: pointer; border: 1px solid var(--v2-borda); border-radius: 7px; background: #0E0F11; opacity: 0.72; transition: opacity 0.12s ease, border-color 0.12s ease; }
.pa-galeria-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-galeria-mini:hover, .pa-galeria-mini.ativa { opacity: 1; }
.pa-galeria-mini.ativa { border-color: var(--v2-texto-forte); box-shadow: 0 0 0 1px var(--v2-texto-forte); }
.pa-galeria-mini:focus-visible { outline: 2px solid var(--v2-anel); outline-offset: 1px; }
.pa-galeria-vazia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 24px; border: 1px dashed var(--v2-borda-forte); border-radius: var(--v2-r-md); color: var(--v2-texto-suave); font-size: 13px; text-align: center; }
.pa-galeria-vazia i { font-size: 18px; color: var(--v2-texto-fraco); }
.pa-galeria-legenda { font-size: 12px; color: var(--v2-texto-suave); font-variant-numeric: tabular-nums; }
/* ---- visualizador de imagens (sempre escuro: a foto e o assunto) ---- */
.pa-visor { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: #0A0A0B; color: #ECECEE; }
.pa-visor[hidden] { display: none; }
.pa-visor-topo { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px 8px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pa-visor-titulo { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 12px; overflow: hidden; }
.pa-visor-titulo strong { font-size: 14px; font-weight: 600; color: #F5F5F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-visor-contador { font-size: 13px; color: #A9AAB0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-visor-ferramentas { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.pa-visor-ferramentas button,
.pa-visor-ferramentas a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: #D4D5D9; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.pa-visor-ferramentas :is(button, a):hover { background: rgba(255, 255, 255, 0.09); color: #FFFFFF; }
.pa-visor-ferramentas :is(button, a):focus-visible { outline: 2px solid #7DA2F5; outline-offset: 1px; }
.pa-visor-ferramentas button.ativo { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.pa-visor-zoom { min-width: 48px; text-align: center; font-size: 12.5px; color: #A9AAB0; font-variant-numeric: tabular-nums; }
.pa-visor-sep { width: 1px; height: 20px; margin: 0 6px; background: rgba(255, 255, 255, 0.12); }
.pa-visor-ajustes { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 12.5px; color: #C2C3C8; }
.pa-visor-ajustes[hidden] { display: none; }
.pa-visor-ajustes label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #C2C3C8; font-size: 12.5px; font-weight: 500; letter-spacing: 0; font-variant-caps: normal; }
.pa-visor-ajustes input[type="range"] { width: 120px; accent-color: #E9E9EC; min-height: 0; }
.pa-visor-ajustes output { min-width: 40px; color: #ECECEE; font-variant-numeric: tabular-nums; }
.pa-visor-palco { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.pa-visor-palco.arrastando { cursor: grabbing; }
.pa-visor-palco img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; }
.pa-visor-nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(20, 20, 22, 0.7); color: #F2F2F3; cursor: pointer; font-size: 15px; }
.pa-visor-nav:hover { background: rgba(40, 40, 44, 0.9); }
.pa-visor-nav:disabled { opacity: 0.3; cursor: default; }
.pa-visor-nav.ant { left: 16px; }
.pa-visor-nav.prox { right: 16px; }
.pa-visor-tiras { display: flex; justify-content: center; gap: 6px; padding: 10px 12px 12px; overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.pa-visor-tiras[hidden] { display: none; }
.pa-visor-tiras button { flex: none; width: 64px; height: 48px; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; background: #000; opacity: 0.55; cursor: pointer; }
.pa-visor-tiras button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-visor-tiras button:hover { opacity: 0.9; }
.pa-visor-tiras button.ativa { opacity: 1; border-color: #F2F2F3; box-shadow: 0 0 0 1px #F2F2F3; }
.pa-visor-dica { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 5px 10px; border-radius: 6px; background: rgba(20, 20, 22, 0.78); color: #C9CACF; font-size: 12px; pointer-events: none; white-space: nowrap; animation: pa-visor-dica 4s ease forwards; }
@keyframes pa-visor-dica { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.pa-visor:focus { outline: none; }
html.pa-visor-aberto, html.pa-visor-aberto body { overflow: hidden; }
/* ---- responsivo dos padroes ---- */
@media (max-width: 900px) {
.pa-det-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
.pa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-kpi { padding: 11px 12px 10px; }
.pa-kpi-valor { font-size: 19px; }
.pa-kpi.principal .pa-kpi-valor { font-size: 21px; }
/* lote 9: a 390 px o principal se perdia entre os vizinhos: fundo um tom acima e rotulo forte (discreto) */
.pa-kpi.principal { background: color-mix(in srgb, var(--v2-texto-forte) 3%, var(--v2-superficie)); }
.pa-kpi.principal .pa-kpi-rot { color: var(--v2-texto-forte); }
/* numero impar de KPIs: o ultimo ocupa a linha inteira (sem celula vazia ao lado; pedido do lote 3) */
.pa-kpis > .pa-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pa-barra-filtros { padding: 10px 12px; }
.pa-filtros-alternar { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border: 1px solid var(--v2-borda-forte); border-radius: var(--v2-r-sm); background: transparent; color: var(--v2-texto-forte); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pa-filtros-alternar i { font-size: 12px; color: var(--v2-texto-suave); }
.pa-barra-filtros:not(.aberta) .pa-filtros-campos { display: none; }
.pa-filtros-campos { flex-basis: 100%; order: 3; }
.pa-filtro, .pa-filtro.largo { flex: 1 1 140px; max-width: none; }
html .pa-tabela .pa-rolagem { overflow-x: auto; }
.pa-modal.pa-gaveta { padding: 0; }
.pa-modal.pa-gaveta > .pa-modal-box { width: 100%; border-radius: 0; }
.pa-modal-header.pa-det-cab { padding: 14px 10px 12px 16px; }
.pa-modal-body.pa-det-corpo { padding: 2px 16px 20px; }
.pa-det-id { font-size: 22px; }
.pa-det-rodape .pa-det-rodape-acoes { order: -1; width: 100%; }
.pa-det-rodape .pa-det-rodape-acoes .btn { flex: 1 1 0; }
.pa-det-rodape > .btn { width: 100%; }
.pa-visor-topo { padding: 6px 6px 8px 12px; flex-wrap: wrap; row-gap: 2px; }
.pa-visor-titulo { order: 2; flex-basis: 100%; flex-wrap: wrap; row-gap: 0; }
.pa-visor-ferramentas { margin-left: auto; }
.pa-visor-dica { white-space: normal; width: max-content; max-width: 86%; text-align: center; }
.pa-visor-ferramentas .pa-visor-rot { display: none; }
.pa-visor-nav { width: 38px; height: 38px; margin-top: -19px; }
.pa-visor-nav.ant { left: 8px; }
.pa-visor-nav.prox { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.pa-modal.pa-gaveta.active > .pa-modal-box { animation: none; }
}
/* ==================== 14. CONTROLES PROPRIOS (PaControles: lista suspensa, calendario, hora) ==================== */
/* Componente em assets/js/v2/componentes.js (delegacao; o nativo segue fonte da verdade). Pele do modo A:
neutra, borda 1px, selecao = acao (quase-preto no claro / quase-branco no escuro). As janelas do Espaco
trocam so os tokens --pa-ctl-* (espaco-embed.css); a casca do Espaco tem copia propria (espaco.css). */
:root {
--pa-ctl-fundo: var(--v2-elevada);
--pa-ctl-filtro: none;
--pa-ctl-borda: var(--v2-borda-forte);
--pa-ctl-borda-hoje: var(--v2-borda-forte);
--pa-ctl-sombra: 0 16px 36px -12px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.05);
--pa-ctl-raio: 10px;
--pa-ctl-raio-item: 6px;
--pa-ctl-texto: var(--v2-texto);
--pa-ctl-forte: var(--v2-texto-forte);
--pa-ctl-suave: var(--v2-texto-suave);
--pa-ctl-hover: var(--v2-ativo);
--pa-ctl-sel: var(--ms-acao);
--pa-ctl-sel-texto: var(--ms-acao-texto);
--pa-ctl-campo: var(--v2-campo);
--pa-ctl-campo-borda: var(--v2-borda-forte);
--pa-ctl-divisor: var(--v2-borda);
--pa-ctl-foco: var(--v2-primaria);
--pa-ctl-anel: var(--v2-anel);
--pa-ctl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--pa-ctl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
--pa-ctl-ico-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
--pa-ctl-ico-hora: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
color-scheme: light; /* o que segue nativo (celular, data-pa-nativo) acompanha o tema */
}
@media screen {
html[data-tema="escuro"] {
--pa-ctl-sombra: 0 20px 44px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
color-scheme: dark;
}
}
/* campos FECHADOS: seta propria no select; icone proprio na data/hora (o indicador nativo some quando o
componente esta ativo - html.pa-ctl). !important so na seta/icone: CSS de modulo com "background:" nao os apaga. */
html select:not([multiple]):not([size]):not([data-pa-nativo]) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 30px !important;
background-image: var(--pa-ctl-chevron) !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 14px 14px !important;
text-overflow: ellipsis;
cursor: pointer;
}
html select:not([multiple]):not([size]):disabled { cursor: not-allowed; }
html.pa-ctl input:is([type="date"], [type="datetime-local"], [type="time"]):not([data-pa-nativo], [data-pa-nativo] *) {
padding-right: 32px !important;
background-image: var(--pa-ctl-ico-data) !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 15px 15px !important;
}
html.pa-ctl input[type="time"]:not([data-pa-nativo], [data-pa-nativo] *) { background-image: var(--pa-ctl-ico-hora) !important; }
html.pa-ctl input:is([type="date"], [type="datetime-local"], [type="time"]):not([data-pa-nativo], [data-pa-nativo] *)::-webkit-calendar-picker-indicator { display: none; }
/* janela flutuante (montada no , position fixed) */
.pa-ctl-pop {
position: fixed;
z-index: 2147483000;
top: 0;
left: 0;
display: flex;
flex-direction: column;
min-width: 160px;
max-width: min(420px, calc(100vw - 16px));
padding: 4px;
overflow: auto;
overscroll-behavior: contain;
background: var(--pa-ctl-fundo);
color: var(--pa-ctl-texto);
border: 1px solid var(--pa-ctl-borda);
border-radius: var(--pa-ctl-raio);
box-shadow: var(--pa-ctl-sombra);
-webkit-backdrop-filter: var(--pa-ctl-filtro);
backdrop-filter: var(--pa-ctl-filtro);
font-size: 13.5px;
line-height: 1.35;
text-align: left;
transform-origin: top left;
animation: pa-ctl-entra 0.12s ease-out;
}
.pa-ctl-pop.acima { transform-origin: bottom left; }
@keyframes pa-ctl-entra { from { opacity: 0; transform: scale(0.985); } }
.pa-ctl-pop [hidden] { display: none !important; }
.pa-ctl-pop[data-tipo="select"] { overflow: hidden; }
.pa-ctl-busca { flex: none; padding: 4px 4px 6px; }
.pa-ctl-busca input {
width: 100%;
height: 32px;
min-height: 32px;
padding: 0 10px;
border: 1px solid var(--pa-ctl-campo-borda);
border-radius: calc(var(--pa-ctl-raio-item) + 2px);
background: var(--pa-ctl-campo);
color: var(--pa-ctl-forte);
font: inherit;
outline: none;
}
.pa-ctl-busca input:focus { border-color: var(--pa-ctl-foco); box-shadow: 0 0 0 3px var(--pa-ctl-anel); }
.pa-ctl-lista { position: relative; flex: 1 1 auto; min-height: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.pa-ctl-opcao {
position: relative;
padding: 7px 12px 7px 30px;
border-radius: var(--pa-ctl-raio-item);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--pa-ctl-texto);
cursor: pointer;
}
.pa-ctl-opcao.ativa { background: var(--pa-ctl-hover); color: var(--pa-ctl-forte); }
.pa-ctl-opcao[aria-selected="true"] { color: var(--pa-ctl-forte); font-weight: 600; }
.pa-ctl-opcao[aria-selected="true"]::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
background: currentColor;
-webkit-mask: var(--pa-ctl-check) center / contain no-repeat;
mask: var(--pa-ctl-check) center / contain no-repeat;
}
.pa-ctl-opcao[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.pa-ctl-grupo { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pa-ctl-suave); }
.pa-ctl-vazio { padding: 10px 12px; color: var(--pa-ctl-suave); }
/* calendario e hora */
.pa-ctl-pop:not([data-tipo="select"]) { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; padding: 10px; }
.pa-ctl-cal { width: 238px; }
.pa-ctl-cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pa-ctl-cal-titulo { display: inline-block; font-weight: 600; color: var(--pa-ctl-forte); }
.pa-ctl-cal-titulo::first-letter { text-transform: uppercase; }
.pa-ctl-nav {
width: 30px;
height: 30px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: var(--pa-ctl-raio-item);
background: transparent;
color: var(--pa-ctl-suave);
cursor: pointer;
}
.pa-ctl-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-ctl-nav:hover { background: var(--pa-ctl-hover); color: var(--pa-ctl-forte); }
.pa-ctl-cal-semana,
.pa-ctl-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pa-ctl-cal-semana span { padding: 4px 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--pa-ctl-suave); }
.pa-ctl-dia,
.pa-ctl-col button {
height: 32px;
padding: 0;
border: 0;
border-radius: var(--pa-ctl-raio-item);
background: transparent;
color: var(--pa-ctl-texto);
font: inherit;
font-size: 13px;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.pa-ctl-dia:hover:not(:disabled),
.pa-ctl-col button:hover { background: var(--pa-ctl-hover); color: var(--pa-ctl-forte); }
.pa-ctl-dia.outro { color: var(--pa-ctl-suave); opacity: 0.6; }
.pa-ctl-dia.hoje { font-weight: 700; color: var(--pa-ctl-forte); box-shadow: inset 0 0 0 1px var(--pa-ctl-borda-hoje); }
.pa-ctl-dia.cursor { box-shadow: inset 0 0 0 2px var(--pa-ctl-foco); }
.pa-ctl-dia.sel,
.pa-ctl-dia.sel:hover,
.pa-ctl-col button.sel,
.pa-ctl-col button.sel:hover { background: var(--pa-ctl-sel); color: var(--pa-ctl-sel-texto); font-weight: 600; opacity: 1; }
.pa-ctl-dia:disabled { opacity: 0.3; cursor: not-allowed; }
.pa-ctl-hora { display: flex; flex-direction: column; }
.pa-ctl-hora-rotulos,
.pa-ctl-hora-cols { display: grid; grid-template-columns: 52px 52px; gap: 4px; }
.pa-ctl-hora-rotulos span { padding: 7px 0 6px; text-align: center; font-size: 11px; font-weight: 600; color: var(--pa-ctl-suave); }
.pa-ctl-col { position: relative; height: 232px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pa-ctl-col button { flex: none; height: 30px; }
.pa-ctl-pop[data-tipo="datetime-local"] .pa-ctl-hora { padding-left: 12px; border-left: 1px solid var(--pa-ctl-divisor); }
.pa-ctl-rodape { flex-basis: 100%; display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--pa-ctl-divisor); }
.pa-ctl-rodape button {
height: 28px;
padding: 0 10px;
border: 0;
border-radius: var(--pa-ctl-raio-item);
background: transparent;
color: var(--pa-ctl-forte);
font: inherit;
font-size: 12.5px;
font-weight: 550;
cursor: pointer;
}
.pa-ctl-rodape button:first-child { margin-right: auto; color: var(--pa-ctl-suave); }
.pa-ctl-rodape button:hover { background: var(--pa-ctl-hover); }
.pa-ctl-rodape .pa-ctl-ok,
.pa-ctl-rodape .pa-ctl-ok:hover { background: var(--pa-ctl-sel); color: var(--pa-ctl-sel-texto); }
@media (prefers-reduced-motion: reduce) { .pa-ctl-pop { animation: none; } }
/* ==================== 15. GRAFICOS (paleta --pa-graf-*, lote 11, 2026-10-11) ==================== */
/* Lidos por executivo.js e carro-guardiao.js (Chart.js) com o v2 de reserva. Pele: texto suave, grade quase
invisivel, eixos neutros, dica = superficie elevada com borda 1px. Serie 1-8 sobria e coerente com os
data-tom dos KPIs (1 info, 2 ok, 3 alerta, 4 erro, 5 violeta, 6 ciano, 7 neutro, 8 tom profundo).
As janelas do Espaco sobrescrevem grade/dica/raio em espaco-embed.css (carregado depois). */
:root {
--pa-graf-texto: var(--v2-texto-suave);
--pa-graf-grade: rgba(0, 0, 0, 0.06);
--pa-graf-eixo: rgba(0, 0, 0, 0.14);
--pa-graf-dica: var(--v2-elevada);
--pa-graf-dica-borda: var(--v2-borda-forte);
--pa-graf-raio: 8;
--pa-graf-1: #3B63C4;
--pa-graf-2: #2F8F5B;
--pa-graf-3: #C07A1A;
--pa-graf-4: #C2453D;
--pa-graf-5: #7356BF;
--pa-graf-6: #23838A;
--pa-graf-7: #8A8C93;
--pa-graf-8: #2E2F33;
}
@media screen {
html[data-tema="escuro"] {
--pa-graf-grade: rgba(255, 255, 255, 0.06);
--pa-graf-eixo: rgba(255, 255, 255, 0.14);
--pa-graf-1: #7E9BE0;
--pa-graf-2: #5BB98A;
--pa-graf-3: #D9A050;
--pa-graf-4: #E07A72;
--pa-graf-5: #A592E0;
--pa-graf-6: #5FB4B8;
--pa-graf-7: #85878E;
--pa-graf-8: #CDCED2;
}
}
/* ==================== 11. RESPONSIVO ==================== */
@media (max-width: 1100px) {
.content-area { padding: 26px 24px 44px; }
}
@media (max-width: 1024px) {
.sidebar.active { box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6); }
}
@media (max-width: 768px) {
.topbar { padding: 8px 12px; }
.content-area { padding: 20px 14px 36px; }
.page-header h1 { font-size: 23px; }
html .dataTables_wrapper .dataTables_filter input { width: auto; }
.btn-toggle-sidebar,
.topbar .pa-btn-icone { width: 32px; height: 32px; }
.topbar .topbar-cidade { height: 34px; }
}
@media (max-width: 480px) {
.content-area { padding: 16px 12px 32px; }
/* celular: o titulo da pagina precisa caber - sem separador nem botao do Espaco (janelas nao cabem no celular),
seletor de cidade so com o nome (sem icone, largura contida) */
.topbar :is(.topbar-separator, .pa-modo-espaco-btn, .topbar-cidade-icon) { display: none; }
.topbar .topbar-cidade { padding-left: 6px; }
.topbar .topbar-cidade-select { max-width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
.btn :is(.fa-arrow-right, .fa-chevron-right, .fa-angle-right, .fa-long-arrow-alt-right) { transition: none !important; }
.pa-modal.active > .pa-modal-box { animation: none; }
.btn:hover:not(:disabled) :is(.fa-arrow-right, .fa-chevron-right, .fa-angle-right, .fa-long-arrow-alt-right) { transform: none; }
}
/* ==================== 16. CARREGANDO (PaRede no app.js + PaCarregando no componentes.js, 2026-10-12) ==================== */
/* Barra global: linha fina que corre no topo da area de conteudo (left = borda do menu, calculado no JS) */
.pa-rede-barra { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10050; overflow: hidden;
pointer-events: none; opacity: 0; transition: opacity .25s ease .1s; background: color-mix(in srgb, var(--v2-primaria) 14%, transparent); }
.pa-rede-barra.ativa { opacity: 1; transition-delay: 0s; }
.pa-rede-barra > span { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; border-radius: 0 2px 2px 0;
background: var(--v2-primaria); animation: pa-rede-corre 1.3s cubic-bezier(.45, 0, .35, 1) infinite; }
@keyframes pa-rede-corre { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
html.pa-rede-ocupada body { cursor: progress; }
/* Estado local (PaCarregando.em): camada sobre o bloco; aparece com atraso para respostas rapidas nao piscarem */
.pa-carregando-rel { position: relative; }
.pa-carregando { min-height: 64px; }
.pa-carregando-camada { position: absolute; inset: 0; z-index: 5; border-radius: inherit; animation: pa-carr-aparece .2s ease .15s both; }
@keyframes pa-carr-aparece { from { opacity: 0; } to { opacity: 1; } }
.pa-carregando-esqueleto { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 18px;
background: var(--v2-superficie); }
.pa-carregando-esqueleto { overflow: hidden; }
.pa-carregando-esqueleto .pa-esq { height: 12px; flex: none; }
.pa-carregando-esqueleto .pa-esq:nth-child(1) { width: 42%; }
.pa-carregando-esqueleto .pa-esq:nth-child(2) { width: 70%; height: 22px; }
.pa-carregando-esqueleto .pa-esq:nth-child(3n) { width: 56%; }
.pa-carregando-esqueleto .pa-esq:nth-child(3n+4) { width: 84%; }
.pa-carregando-spinner { display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--v2-superficie) 72%, transparent); animation-delay: .4s; }
.pa-carregando-selo { inset: 12px auto auto 50%; transform: translateX(-50%); background: none; animation-delay: .25s; pointer-events: none; }
.pa-carregando-caixa { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
background: var(--v2-elevada); border: 1px solid var(--v2-borda); box-shadow: var(--v2-sombra-sm, 0 2px 8px rgba(0,0,0,.08));
color: var(--v2-texto-suave); font-size: 13px; font-weight: 500; white-space: nowrap; }
/* Bloco cinza pulsando (esqueleto) e spinner discreto */
.pa-esq { display: block; border-radius: var(--v2-r-sm); background: linear-gradient(90deg, var(--v2-skeleton, var(--v2-superficie-2)) 25%,
var(--v2-borda) 50%, var(--v2-skeleton, var(--v2-superficie-2)) 75%); background-size: 200% 100%; animation: pa-esq-pulsa 1.3s linear infinite; }
@keyframes pa-esq-pulsa { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pa-spinner { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%;
border: 2px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: var(--v2-primaria); animation: pa-gira .75s linear infinite; }
@keyframes pa-gira { to { transform: rotate(360deg); } }
/* Tabela recarregando (PaTabela.carregando) */
tr.pa-esq-linha > td { padding-top: 13px; padding-bottom: 13px; }
tr.pa-esq-linha:hover > td { background: transparent; }
.pa-esq-celula { height: 12px; width: 72%; }
tr.pa-esq-linha > td:nth-child(3n+2) .pa-esq-celula { width: 52%; }
tr.pa-esq-linha > td:nth-child(3n) .pa-esq-celula { width: 88%; }
tr.pa-esq-linha:nth-child(even) .pa-esq-celula { opacity: .75; }
/* Botao ocupado (PaCarregando.botao): spinner no lugar do icone; largura nao pula */
.btn.pa-btn-ocupado, button.pa-btn-ocupado { cursor: progress; }
.pa-btn-ocupado > i.fas, .pa-btn-ocupado > i.fa-solid, .pa-btn-ocupado > i.far { display: none; }
.pa-spinner-btn { width: 1em; height: 1em; border-width: 2px; border-color: color-mix(in srgb, currentColor 30%, transparent);
border-top-color: currentColor; margin-right: 6px; vertical-align: -0.15em; }
@media (prefers-reduced-motion: reduce) {
.pa-rede-barra > span { animation: none; width: 100%; opacity: .7; }
.pa-esq { animation: none; }
.pa-spinner { animation-duration: 1.6s; }
.pa-carregando-camada { animation-duration: 0s; }
}
/* Corpo de detalhe (PaCarregando.esqueletoHtml) e selo do mapa */
.pa-esq-bloco { display: flex; flex-direction: column; gap: 14px; padding: 6px 2px 10px; }
.pa-esq-bloco .pa-esq-titulo { height: 20px; width: 46%; margin-bottom: 4px; }
.pa-esq-par { display: grid; grid-template-columns: 34% 1fr; gap: 16px; align-items: center; }
.pa-esq-par .pa-esq { height: 12px; }
.pa-esq-par:nth-child(even) .pa-esq:last-child { width: 62%; }
.pa-carregando-selo { z-index: 30; }
/* ==================== 17. BALCAO (so PDV web / Escritorio, 2026-10-12) ==================== */
/* Telas de uso intenso (venda, recarga, caixa, debito, consulta): o modo A com numeros grandes,
campos de 42-48px e o mesmo markup de antes (IDs e campos intactos). Esta secao traduz as classes
legadas dos 2 apps (.page-header, .stats-grid/.stat-card, .table-container>.table, .badge) para a
linguagem dos padroes da secao 13 (.pa-cab, .pa-kpis, .pa-tabela, .pa-st). */
/* ---- casca: contexto (loja/cidade) no menu e no topo ---- */
.sidebar .pa-sidebar-contexto {
margin: 8px 10px 2px; padding: 8px 10px; border: 1px solid var(--ms-menu-divisor); border-radius: var(--v2-r-sm);
background: transparent; color: var(--ms-menu-texto); font-size: 12.5px;
}
.sidebar .pa-sidebar-contexto :is(i, svg, .pa-ico) { color: var(--ms-menu-icone); }
.sidebar .sidebar-footer { border-top: 1px solid var(--ms-menu-divisor); }
.topbar .topbar-cidade { gap: 8px; padding: 0 10px; font-size: 13px; color: var(--v2-texto-forte); }
.topbar .topbar-cidade :is(svg, .pa-ico) { width: 15px; height: 15px; color: var(--v2-texto-suave); }
/* ---- cabecalho de pagina (= .pa-cab) ---- */
html .page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
html .page-header h1, html .page-header h2 { font-size: 24px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; color: var(--v2-texto-forte); }
html .page-header :is(h1, h2) > i { display: none; }
html .page-header p { margin-top: 4px; font-size: 13.5px; color: var(--v2-texto-suave); }
html .page-header .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html .page-header .page-actions .btn { height: 32px; padding: 0 12px; font-size: 13px; }
html .page-header .page-actions .btn:not(.btn-primary):not(.btn-success) { background: transparent; border: 1px solid var(--v2-borda-forte); box-shadow: none; color: var(--v2-texto-forte); }
html .page-header .page-actions .btn:not(.btn-primary):not(.btn-success):hover:not(:disabled) { background: var(--v2-neutro); }
html .page-header .page-actions .btn:not(.btn-primary):not(.btn-success) i { color: var(--v2-texto-suave); }
/* ---- faixa de KPIs (= .pa-kpis/.pa-kpi): painel unico, celulas com filete, ponto de cor no rotulo ---- */
html .stats-grid {
--pa-kpi-linha: color-mix(in srgb, var(--v2-texto-forte) 8%, var(--v2-superficie));
display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 16px; overflow: hidden;
background: var(--v2-superficie); border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); box-shadow: var(--ms-sombra-cartao);
}
html[data-tema="escuro"] .stats-grid { --pa-kpi-linha: color-mix(in srgb, #FFFFFF 7%, var(--v2-superficie)); }
html .stats-grid > .stat-card {
display: block; min-width: 0; margin: 0; padding: 14px 16px 13px; border: 0; border-radius: 0; transform: none;
background: var(--v2-superficie); box-shadow: 0 0 0 1px var(--pa-kpi-linha);
}
html .stats-grid > .stat-card:hover { transform: none; box-shadow: 0 0 0 1px var(--pa-kpi-linha); }
html .stats-grid .stat-icon { display: none; }
html .stats-grid .stat-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
html .stats-grid .stat-label {
order: -1; display: flex; align-items: center; gap: 7px; margin: 0;
font-size: 12.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--v2-texto-suave);
}
html .stats-grid .stat-label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pa-tom, var(--v2-texto-fraco)); }
html .stats-grid .stat-card:has(.stat-icon.green) { --pa-tom: var(--v2-sucesso); }
html .stats-grid .stat-card:has(.stat-icon.blue) { --pa-tom: var(--v2-primaria); }
html .stats-grid .stat-card:has(.stat-icon.orange) { --pa-tom: var(--v2-alerta); }
html .stats-grid .stat-card:has(.stat-icon.red) { --pa-tom: var(--v2-erro); }
html .stats-grid .stat-card:has(.stat-icon.purple) { --pa-tom: var(--v2-violeta-texto); }
html .stats-grid .stat-value {
font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--v2-texto-forte);
font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html .stats-grid .stat-detalhe { font-size: 12px; color: var(--v2-texto-suave); }
html .stats-grid .stat-card.destaque { background: color-mix(in srgb, var(--v2-texto-forte) 3%, var(--v2-superficie)); }
html .stats-grid .stat-card.destaque .stat-value { font-size: 28px; }
html .stats-grid .stat-card.destaque .stat-label { color: var(--v2-texto-forte); }
/* KPI ainda sem numero ("--"): esqueleto (classe posta por PaBalcao.esqueletos) */
html .stat-value.pa-esq-valor { color: transparent; width: 64%; height: 22px; margin: 3px 0; }
/* ---- secoes ---- */
html .content-section { padding: 20px 22px; margin-bottom: 16px; border-radius: var(--v2-r-md); box-shadow: var(--ms-sombra-cartao); }
html .section-title {
display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0; border: 0;
font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--v2-texto-forte);
}
html .section-title i { font-size: 13px; color: var(--v2-texto-suave); }
/* ---- tabelas simples (= .pa-tabela): cabecalho fixo micro-caixa-alta, linhas densas ---- */
html :is(.table-container, .table-responsive):has(> .table) {
padding: 0; overflow: auto; max-height: max(380px, calc(100vh - 170px));
background: var(--v2-superficie); border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); box-shadow: none;
}
html :is(.table-container, .table-responsive) > .table { margin: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
html :is(.table-container, .table-responsive) > .table > thead > tr > th {
position: sticky; top: 0; z-index: 2; padding: 9px 12px; border-radius: 0 !important; white-space: nowrap; text-align: left;
background: var(--v2-superficie-2); color: var(--v2-texto-suave); border-bottom: 1px solid var(--v2-borda-forte);
font-size: 15px; font-weight: 500; letter-spacing: 0.07em; font-variant-caps: all-small-caps; line-height: 1.2; text-transform: none;
}
html :is(.table-container, .table-responsive) > .table > tbody > tr > td {
padding: 9px 12px; font-size: 13.5px; vertical-align: middle; border-bottom: 1px solid var(--v2-borda); font-variant-numeric: tabular-nums;
}
html :is(.table-container, .table-responsive) > .table :is(th, td):first-child { padding-left: 14px; }
html :is(.table-container, .table-responsive) > .table > tbody > tr:last-child > td { border-bottom: 0; }
html :is(.table-container, .table-responsive) > .table > tbody > tr:hover > td { background: var(--v2-hover); }
html :is(.table-container, .table-responsive) > .table > tbody > tr > td[colspan] { padding: 28px 16px; color: var(--v2-texto-suave); text-align: center; }
@media (max-width: 768px) { html :is(.table-container, .table-responsive):has(> .table) { max-height: none; } }
/* status nas tabelas e listas: ponto + texto (cor so no ponto) - mesmo desenho do .pa-st */
:is(.badge, .status-badge) { --pa-tom: var(--v2-texto-fraco); }
:is(.badge, .status-badge):is(.badge-success, .success, .ativo, .aprovado, .pago, .aberto) { --pa-tom: var(--v2-sucesso); }
:is(.badge, .status-badge):is(.badge-warning, .warning, .pendente) { --pa-tom: var(--v2-alerta); }
:is(.badge, .status-badge):is(.badge-danger, .danger, .cancelado, .expirado, .fechado) { --pa-tom: var(--v2-erro); }
:is(.badge, .status-badge):is(.badge-info, .info, .badge-primary) { --pa-tom: var(--v2-primaria); }
html :is(.table, .historico-lista, .historico-item, .resultado-consulta) :is(.badge, .status-badge) {
display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0; border: 0; border-radius: 0;
background: transparent !important; color: var(--v2-texto-forte) !important;
font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
html :is(.table, .historico-lista, .historico-item, .resultado-consulta) :is(.badge, .status-badge)::before {
content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pa-tom);
}
html :is(.table, .historico-lista, .historico-item, .resultado-consulta) :is(.badge, .status-badge) > i { display: none; }
/* ---- campos e botoes do balcao: maiores que no painel (uso o dia todo, teclado) ---- */
html :is(.content-section, .pa-modal-body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select) {
min-height: 42px; font-size: 14.5px;
}
html :is(.content-section, .pa-modal-body) :is(.form-group > label, label.form-label) { margin-bottom: 6px; }
html .input-valor,
html input.input-valor {
min-height: 50px !important; font-size: 22px !important; font-weight: 600; letter-spacing: -0.01em;
font-variant-numeric: tabular-nums; color: var(--v2-texto-forte);
}
html .input-troco { background: var(--v2-superficie-2); }
html .content-section .btn,
html .pa-modal-footer .btn { height: 40px; padding: 0 16px; font-size: 14px; }
html .btn-lg,
html .content-section .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; font-weight: 600; }
/* acao principal do balcao = quase-preto do modo A (confirmar venda/recarga/abrir caixa) */
html :is(.content-section, .pa-modal-footer, .pa-modal-body) .btn-success {
background: var(--ms-acao); color: var(--ms-acao-texto); border-color: transparent; box-shadow: none;
}
html :is(.content-section, .pa-modal-footer, .pa-modal-body) .btn-success:hover:not(:disabled) { background: var(--ms-acao-hover); color: var(--ms-acao-texto); filter: none; }
/* secundarias de secao (sangria, suprimento, reimprimir): fantasma com filete */
html .content-section :is(.btn-info, .btn-warning, .btn-outline) {
background: transparent; border: 1px solid var(--v2-borda-forte); box-shadow: none; color: var(--v2-texto-forte);
}
html .content-section :is(.btn-info, .btn-warning, .btn-outline):hover:not(:disabled) { background: var(--v2-neutro); color: var(--v2-texto-forte); }
html .content-section :is(.btn-info, .btn-warning, .btn-outline) i { color: var(--v2-texto-suave); }
html .btn:disabled { opacity: 0.45; }
/* ---- numeros que o atendente le de longe: saldo, troco, diferenca, total ---- */
html :is(.saldo-display, .troco-display) {
border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); background: var(--v2-superficie-2); box-shadow: none;
}
html :is(.saldo-label, .troco-label) {
font-size: 15px; font-weight: 500; letter-spacing: 0.08em; font-variant-caps: all-small-caps; line-height: 1.2;
text-transform: none; color: var(--v2-texto-suave);
}
html :is(.saldo-valor, .troco-valor, .diferenca-valor) {
font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--v2-texto-forte);
}
html .resumo-recarga,
html .fechamento-resumo { border: 1px solid var(--v2-borda); border-radius: var(--v2-r-md); background: var(--v2-superficie-2); box-shadow: none; }
html :is(.resumo-item, .fechamento-resumo > *) { font-variant-numeric: tabular-nums; }
html .resumo-item.destaque { border-top: 1px solid var(--v2-borda-forte); }
html .resumo-item.destaque > :last-child { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; color: var(--v2-texto-forte); }
html .historico-resumo .stat-valor { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--v2-texto-forte); }
/* spinner legado (.loading-spinner) no desenho discreto do modo A */
html .loading-spinner {
border: 2px solid color-mix(in srgb, var(--v2-texto-suave) 22%, transparent) !important;
border-top-color: var(--v2-texto-forte) !important; box-shadow: none;
}
/* ---- botao ocupado automatico (PaRede: clique que dispara requisicao) ---- */
.pa-btn-ocupado { cursor: progress; }
/* ---- opcoes de pagamento (Dinheiro/PIX/Cartao): selecao neutra (tinta + filete forte), sem azul ---- */
html :is(input:checked + .pa-opcao-pagamento, .pagamento-opcao input:checked + .pagamento-btn, .forma-option input:checked + .forma-option-content) {
background: var(--v2-ativo); border-color: var(--v2-texto-forte); box-shadow: inset 0 0 0 1px var(--v2-texto-forte); color: var(--v2-texto-forte);
}
html :is(input:checked + .pa-opcao-pagamento, .pagamento-opcao input:checked + .pagamento-btn, .forma-option input:checked + .forma-option-content) i { color: var(--v2-texto-forte); }
/* ---- acoes de linha nas tabelas: icones discretos (= .pa-acoes), nao botoes de 40px ---- */
html :is(.table-container, .table-responsive) > .table td .btn {
width: 30px; height: 30px; min-height: 0; padding: 0; display: inline-grid; place-items: center;
background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--v2-texto-suave);
}
html :is(.table-container, .table-responsive) > .table td .btn:is(:hover, :focus-visible):not(:disabled) { background: var(--v2-superficie); border-color: var(--v2-borda-forte); color: var(--v2-texto-forte); }
html :is(.table-container, .table-responsive) > .table td .btn i { font-size: 13px; margin: 0; }
html :is(.table-container, .table-responsive) > .table td .btn:has(> span:not(.pa-spinner)) { width: auto; padding: 0 10px; } /* botao com texto */
/* ---- faixa de estado do caixa: neutra, cor so no ponto do icone ---- */
html .caixa-banner { background: var(--v2-superficie); border: 1px solid var(--v2-borda); box-shadow: var(--ms-sombra-cartao); }
html .caixa-banner :is(strong, h3, .caixa-banner-info strong) { color: var(--v2-texto-forte) !important; }
html .caixa-banner-icone { position: relative; background: var(--v2-superficie-2); border: 1px solid var(--v2-borda); color: var(--v2-texto-suave); box-shadow: none; }
html .caixa-banner-icone::after { content: ""; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--v2-superficie); background: var(--v2-texto-fraco); }
html .caixa-banner-fechado .caixa-banner-icone::after { background: var(--v2-alerta); }
html .caixa-banner-aberto .caixa-banner-icone::after { background: var(--v2-sucesso); }
/* ---- atalhos da Inicio: icone neutro ---- */
html .quick-action-icon { background: var(--v2-superficie-2) !important; border: 1px solid var(--v2-borda); color: var(--v2-texto-forte) !important; }
html .quick-action-card { box-shadow: none; }
html .quick-action-card:hover { border-color: var(--v2-borda-forte); background: var(--v2-superficie-2); transform: none; box-shadow: none; }
/* ---- celular ---- */
@media (max-width: 768px) {
html .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html .stats-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
html .stats-grid .stat-value { font-size: 20px; }
html .content-section { padding: 16px 14px; }
html .page-header h1, html .page-header h2 { font-size: 22px; }
html :is(.saldo-valor, .troco-valor, .diferenca-valor) { font-size: 24px; }
}
/* ==================== 18. LOGIN (variacao A do painel: vitrine neutra + formulario) ==================== */
/* so na tela de login com vitrine (o selecionar_loja segue com o cartao centrado) */
html body.login-page:has(.login-vitrine) {
display: block; min-height: 100vh; margin: 0; padding: 0; background: var(--v2-fundo); background-image: none; color: var(--v2-texto);
}
html body.login-page .login-container:has(> .login-vitrine) {
display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; min-height: 100vh; width: 100%; max-width: none; margin: 0; padding: 0;
background: transparent; box-shadow: none; border: 0; border-radius: 0;
}
@media (min-width: 960px) {
html body.login-page .login-container:has(> .login-vitrine) { grid-template-columns: minmax(0, 1.05fr) minmax(440px, 1fr); }
}
/* vitrine (esquerda): superficie neutra, filete, mapa de ruas em traco fino */
.login-vitrine { display: none; }
@media (min-width: 960px) {
.login-vitrine {
position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow: hidden;
padding: 40px 48px; background: var(--v2-superficie-2); border-right: 1px solid var(--v2-borda); color: var(--v2-texto);
}
}
.login-vitrine-mapa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.login-vitrine-mapa path { fill: none; stroke: var(--v2-borda-forte); stroke-width: 1.2; }
.login-vitrine-mapa circle { fill: var(--v2-texto-fraco); }
.login-vitrine-mapa circle.livre { fill: var(--v2-sucesso); }
.login-vitrine > :not(.login-vitrine-mapa) { position: relative; }
.login-vitrine-topo { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--v2-texto-forte); }
.login-vitrine-topo .pa-ponto { background: var(--v2-sucesso); }
.login-vitrine-corpo { max-width: 440px; }
.login-vitrine-selo {
margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; font-variant-caps: all-small-caps; line-height: 1.2; color: var(--v2-texto-suave);
}
.login-vitrine-titulo { margin: 0 0 8px; font-size: 30px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--v2-texto-forte); }
.login-vitrine-desc { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--v2-texto-suave); }
.login-inst { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--v2-borda); }
.login-inst > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--v2-borda); }
.login-inst dt { font-size: 15px; font-weight: 500; letter-spacing: 0.08em; font-variant-caps: all-small-caps; line-height: 1.35; color: var(--v2-texto-suave); }
.login-inst dd { margin: 0; font-size: 13.5px; color: var(--v2-texto-forte); }
.login-vitrine-rodape { font-size: 12.5px; color: var(--v2-texto-suave); }
/* formulario (direita): sem cartao, coluna estreita centrada */
html body.login-page .login-container:has(> .login-vitrine) > .login-box {
align-self: center; justify-self: center; width: min(400px, calc(100% - 40px)); max-width: none; margin: 40px auto; padding: 0;
background: transparent; border: 0; border-radius: 0; box-shadow: none; animation: none;
}
html body.login-page .login-box .login-topo { display: flex; justify-content: flex-end; margin: 0 0 18px; }
html body.login-page :is(.login-marca, .login-logo-wrap) { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; }
html body.login-page .login-logo { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; font-size: 14px; }
html body.login-page .login-title { margin: 0 0 6px; font-size: 26px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; color: var(--v2-texto-forte); text-align: left; }
html body.login-page .login-subtitle { margin: 0 0 26px; font-size: 13.5px; color: var(--v2-texto-suave); text-align: left; }
html body.login-page .login-form .form-group { margin-bottom: 16px; }
html body.login-page .login-form label {
display: block; margin: 0 0 7px; font-size: 15px; font-weight: 500; letter-spacing: 0.08em; font-variant-caps: all-small-caps; line-height: 1.2;
text-transform: none; color: var(--v2-texto-suave);
}
html body.login-page .login-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input:not([type])) {
width: 100%; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14.5px;
background: var(--v2-superficie); border: 1px solid var(--v2-borda-forte); border-radius: var(--v2-r-sm); box-shadow: none; color: var(--v2-texto-forte);
}
html body.login-page .login-form input:hover:not(:focus) { border-color: var(--v2-campo-borda); }
html body.login-page .btn-login {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 8px; padding: 0 16px;
background: var(--ms-acao); color: var(--ms-acao-texto); border: 0; border-radius: var(--v2-r-sm); box-shadow: none;
font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; cursor: pointer;
}
html body.login-page .btn-login:hover:not(:disabled) { background: var(--ms-acao-hover); transform: none; box-shadow: none; filter: none; }
html body.login-page .btn-login:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--v2-fundo), 0 0 0 4px var(--v2-primaria); }
html body.login-page .btn-login:disabled { opacity: 0.6; cursor: progress; }
html body.login-page .btn-login i { font-size: 13px; }
html body.login-page .login-message { border-radius: var(--v2-r-sm); font-size: 13px; box-shadow: none; }
html body.login-page :is(.voltar-link, .login-link) { color: var(--v2-texto-suave); font-size: 13px; }
html body.login-page :is(.voltar-link, .login-link):hover { color: var(--v2-texto-forte); }
html body.login-page .login-rodape-a { margin-top: 28px; font-size: 12px; color: var(--v2-texto-suave); }
/* acao principal vermelha do balcao (Registrar Debito, botao grande): quase-preto do modo A - o vermelho fica para
o perigo de verdade (excluir/cancelar), que nao usa .btn-lg */
html .content-section .btn-danger.btn-lg { background: var(--ms-acao); color: var(--ms-acao-texto); border-color: transparent; box-shadow: none; }
html .content-section .btn-danger.btn-lg:hover:not(:disabled) { background: var(--ms-acao-hover); color: var(--ms-acao-texto); filter: none; }
|