/* styles.css — Agente Tef.Net (PRD-TECNICA-0004 / TASK-0002 / UI#5-M)
* Design tokens, layout grid (sidebar + main + bottom-nav mobile),
* responsivo, prefers-reduced-motion, focus-visible.
*/
/* ============ TOKENS ============ */
/* UI#7-M (06/05/2026 turno noite): tema light alinhado newportaltefnet (Bootstrap 3).
* Substituiu o dark-mode original do UI#5-M. Estrutura/grid permanece. */
:root {
/* paleta light — espelha newportaltefnet Bootstrap 3 */
--bg: #f5f5f5;
--surface: #ffffff;
--surface-2: #fafafa;
--surface-3: #e2e2e2; /* sidebar */
--border: #dddddd;
--border-strong: #cccccc;
--text: #333333;
--text-muted: #777777;
--text-subtle: #999999;
--text-inverse: #ffffff;
--accent: #337ab7; /* primary Bootstrap 3 */
--accent-hover: #286090;
--accent-darker: #204d74;
--ok: #5cb85c;
--warn: #f0ad4e;
--rejected: #d9534f;
--partial: #f0ad4e;
/* Cores semânticas extras pro dashboard v2 (REL#2) */
--premium: #337ab7;
--premium-soft: #d9e6f5;
--standard: #777777;
--standard-soft: #e7e7e7;
--radius: 6px;
--radius-sm: 4px;
--radius-lg: 8px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 2px 6px rgba(0,0,0,0.08);
--shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
/* UI#49 (13/05/2026 madrugada): App Shell refactor — header 84px + sidebar
* 253px (+15% vs legado 72/220). Aliases --app-* expostos pro mockup canônico
* de UI#49 e pra futuras telas que queiram consumir variáveis "App Shell"
* (em vez de --header-h, que é genérico e hoje é o mesmo valor).
* Mudança visual: header acomoda futura barra de informação central +
* brand maior; sidebar ganha espaço pra labels em 2 linhas. */
--header-h: 84px;
--app-header-h: 84px;
--sidebar-w: 253px;
--app-sidebar-w: 253px;
--sidebar-w-collapsed: 64px;
--bottom-nav-h: 64px;
--footer-h: 32px;
--app-footer-h: 32px;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
--font-base: 14px;
--line-base: 1.5;
/* DOC#9 — Glass Banking tokens (paleta Tef.Net Brand)
* Aplicados inicialmente no Dashboard (tela piloto). Outras telas migram em onda 2. */
--gl-surface: rgba(255,255,255,.72);
--gl-surface-strong: rgba(255,255,255,.85);
--gl-border: rgba(255,255,255,.55);
--gl-blur: blur(22px) saturate(180%);
--gl-radius: 18px;
--gl-radius-sm: 14px;
--gl-shadow-sm: 0 6px 18px -8px rgba(10,14,39,.18);
--gl-shadow-md: 0 10px 30px -12px rgba(10,14,39,.16);
--gl-shadow-lg: 0 18px 44px -16px rgba(10,14,39,.22);
--gl-brand: #337ab7;
--gl-brand-light: #4c9aff;
--gl-brand-deep: #1e6091;
--gl-brand-pale: #eff6ff;
--gl-mesh:
radial-gradient(at 12% 18%, rgba(76,154,255,.55) 0, transparent 45%),
radial-gradient(at 88% 12%, rgba(96,165,250,.45) 0, transparent 45%),
radial-gradient(at 70% 95%, rgba(56,189,248,.55) 0, transparent 50%),
radial-gradient(at 18% 92%, rgba(51,122,183,.45) 0, transparent 50%),
linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
/* ============================================================================
* DOC#9 — design tokens canonicos (glass banking + tef.net brand)
* Camada `--ag-*` — alias dos legados + tokens novos (spacing, status).
* Decisao: D-DOC9-TEC-01 (docs/PRDs/PRD-0009-design-system/decisoes-tecnicas.md).
* Coexiste com `--accent`, `--surface`, `--gl-*`. NAO remover legados nesta onda.
* ============================================================================ */
/* Brand */
--ag-brand: var(--gl-brand, #337ab7);
--ag-brand-soft: var(--gl-brand-light, #4c9aff);
--ag-brand-deep: var(--gl-brand-deep, #1e6091);
--ag-brand-glass: rgba(51, 122, 183, 0.15);
/* Status semanticos */
--ag-success: #4caf7d;
--ag-warn: #f0b94e;
--ag-alert: #e57373;
--ag-info: #64b5f6;
/* F7-UI (12/05/2026 — Variante A) — Status de resgate por competencia
no heatmap UI#30 V5. Valores deliberadamente mais saturados que os
legados acima pra dar contraste suficiente em borda 2px sobre fundo
teal-l1..l4. */
--ag-status-resgate-nenhum: #ef4444; /* red-500 — 0 lotes ativos */
--ag-status-resgate-em-andamento: #f59e0b; /* amber-500 — algum nao liquidado */
--ag-status-resgate-todos-pagos: #16a34a; /* green-600 — todos liquidados */
--ag-status-resgate-sem-dado: #cbd5e1; /* slate-300 — competencia sem valor */
/* Surface (alias dos legados + camada glass) */
--ag-bg: var(--bg, #f5f5f5);
--ag-bg-elev: var(--surface-2, #fafafa);
--ag-bg-glass: var(--gl-surface, rgba(255, 255, 255, 0.72));
--ag-border: var(--border, #dddddd);
--ag-border-glass: var(--gl-border, rgba(51, 122, 183, 0.18));
/* Text */
--ag-text: var(--text, #333333);
--ag-text-muted: var(--text-muted, #777777);
--ag-text-on-brand: #ffffff;
/* Effects */
--ag-blur-glass: var(--gl-blur, blur(12px) saturate(180%));
--ag-shadow-glass: var(--gl-shadow-md, 0 8px 32px rgba(31, 38, 135, 0.12));
--ag-radius-sm: var(--radius-sm, 4px);
--ag-radius-md: var(--radius, 6px);
--ag-radius-lg: var(--radius-lg, 8px);
/* Spacing scale (4 / 8 / 12 / 16 / 24 / 32) */
--ag-spc-1: 4px;
--ag-spc-2: 8px;
--ag-spc-3: 12px;
--ag-spc-4: 16px;
--ag-spc-5: 24px;
--ag-spc-6: 32px;
}
/* DOC#9 — override dark (alvo futuro pro tema unificado).
* Hoje so `.glass-dark` em pontos especificos do dashboard. */
[data-theme="dark"] {
--ag-bg: #0b1220;
--ag-bg-elev: #0f1d33;
--ag-bg-glass: rgba(20, 30, 50, 0.72);
--ag-border: rgba(100, 181, 246, 0.18);
--ag-border-glass: rgba(100, 181, 246, 0.18);
--ag-text: #e2e8f0;
--ag-text-muted: #94a3b8;
}
/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font: var(--font-base)/var(--line-base) var(--font-sans);
color: var(--text);
background: var(--bg);
min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
/* ============ A11Y ============ */
.skip-link {
position: absolute;
top: -100px;
left: 8px;
background: var(--accent);
color: var(--text-inverse);
padding: 8px 12px;
border-radius: var(--radius-sm);
z-index: 9999;
}
.skip-link:focus { top: 8px; color: var(--text-inverse); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ============ LAYOUT GRID ============
* UI#49 (13/05/2026 madrugada): App Shell refactor — replica grid do mockup
* docs/mockups/UI-0049-layout-app-shell.html. Decisão dura:
* - body é container grid: html/body 100vh + overflow:hidden;
* - sidebar OCUPA AS LINHAS 2 e 3 (vai até o footer-row), header e footer
* em linhas próprias;
* - SCROLL INDEPENDENTE: só .app-main e .app-sidebar têm overflow-y:auto;
* header e footer ficam fixos por natureza (grid + body overflow:hidden);
* - header/sidebar NÃO precisam mais de position:fixed/sticky (B#12 antigo
* virou obsoleto — o grid + body overflow:hidden faz o serviço).
*
* Grid-template-areas:
* header header
* sidebar main
* sidebar footer
*
* Footer fica ao lado da sidebar (alinha visual com o mockup). Se desejar
* footer full-width no futuro, basta trocar a área pra "footer footer".
*/
html, body { height: 100vh; }
body {
margin: 0;
overflow: hidden;
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"sidebar footer";
grid-template-columns: var(--app-sidebar-w, var(--sidebar-w)) 1fr;
grid-template-rows: var(--app-header-h, var(--header-h)) 1fr var(--app-footer-h, var(--footer-h));
}
.app-header {
grid-area: header;
display: flex;
align-items: center;
/* Padding interno mais generoso pra acomodar brand maior + futura barra de info */
padding: 0 24px;
gap: 24px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
/* Altura controlada pelo grid (--app-header-h). Sem position:fixed porque
o body overflow:hidden + grid faz o header ficar naturalmente fixo. */
height: var(--app-header-h, var(--header-h));
z-index: 10;
}
/* Brand maior (UI#49) — logo até 42px, alinhado vertical ao centro */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 42px; width: auto; }
/* Espaço central reservado pra futura barra de informação (placeholder no
* shell — preenchido em entregas posteriores). Hoje fica vazio, ocupa o
* espaço entre brand e header-nav. */
.app-header > .header-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; }
.header-nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: var(--radius-sm);
color: var(--text-muted);
}
.header-link:hover { color: var(--text); background: var(--surface-2); }
.user-menu {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
}
.user-menu:hover { background: var(--surface-3); }
.user-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--ok));
display: inline-block;
}
.user-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar {
grid-area: sidebar;
background: var(--surface-3);
border-right: 1px solid var(--border);
padding: 18px 0;
/* UI#49: scroll independente — sidebar pode rolar sem afetar header/main */
overflow-y: auto;
overflow-x: hidden;
/* Sem position:sticky/fixed — o grid + body overflow:hidden já fixa.
z-index:50 mantido caso algum overlay (modal/toast) precise calcular ordem. */
z-index: 50;
}
.app-sidebar nav { display: flex; flex-direction: column; gap: 0; }
/* === NAV ITEM (UI#49) ===
* Comporta ícone + label (até 2 linhas) + `?` inline.
*
* Regras duras (mockup UI#49):
* - flex-wrap:nowrap — ícone e `?` NUNCA quebram de linha; só o label;
* - min-height:44px — alinha visualmente items de 1 e 2 linhas (acessível:
* touch target ≥44px);
* - NÃO usar white-space:nowrap nem text-overflow:ellipsis: regra antiga
* (memória 18 do CLAUDE.md "Sidebar labels ≤ 22 chars") fica obsoleta —
* labels longos ("Histórico de lotes") aparecem em 2 linhas via line-clamp.
*
* Layout interno do :
* [icon] [nav-label (até 2 linhas)] [help-trigger ?]
*/
.nav-item {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 12px;
padding: 10px 14px;
margin: 0 8px 4px;
border-radius: 6px;
min-height: 44px;
color: var(--text);
font-size: 14px;
font-weight: 500;
transition: background 0.15s, color 0.15s;
text-decoration: none;
}
.nav-item:hover { background: rgba(51,122,183,0.08); }
.nav-item.active {
background: var(--surface);
color: var(--accent);
font-weight: 600;
}
.nav-item .nav-icon,
.nav-item [class^="icon-"] {
flex-shrink: 0;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Label da sidebar — pode quebrar em ATÉ 2 linhas via -webkit-line-clamp.
* NÃO usar ellipsis — perde info. Se a label for ainda maior, vai mostrar
* 2 linhas truncadas e o tooltip do `?` complementa.
* line-height:1.25 + 2 linhas + font-size:14px = ~35px de altura útil,
* cabe no min-height:44px do nav-item (com padding vertical 10px). */
.nav-item .nav-label {
flex: 1;
min-width: 0; /* permite quebrar em flex container */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.25;
word-break: break-word;
white-space: normal;
font-size: 14px;
}
/* Help-trigger (?) injetado pelo manual/src/trigger.js — inline depois do label.
* Crítico (UI#49): display:inline-flex (não block), flex-shrink:0, tamanho fixo.
* Em outros lugares do app o `?` é inserido como sibling do (fora do nav-item)
* — pra sidebar, trigger.js detecta `` e insere DENTRO do
* (depois do .nav-label). Click no `?` é interceptado pelo trigger.js com
* preventDefault+stopPropagation, então a navegação do não dispara. */
.nav-item .help-trigger {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--surface-2);
color: var(--text-muted);
border: 1px solid var(--border);
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
padding: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-item .help-trigger:hover {
background: rgba(51,122,183,0.12);
color: var(--accent);
border-color: var(--accent);
}
/* Mantém compatibilidade com regra genérica antiga ([data-help] + .help-trigger)
* que não se aplica mais em sidebar (`?` agora vive DENTRO do ),
* mas continua valendo pra KPIs/labels fora da sidebar. */
.nav-item .nav-label + .help-trigger {
margin-left: 2px;
}
/* ============================================================================
* UI#11-M — Sidebar recolhível
* ============================================================================ */
.sidebar-header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 4px 10px 8px 10px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 6px;
}
.sidebar-toggle {
width: 28px;
height: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text-muted);
font-size: 14px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sidebar-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
.sidebar-toggle-icon { display: inline-block; transition: transform 0.2s; }
/* Estado colapsado: largura mínima, esconde labels e (?), centraliza ícones */
body.sidebar-collapsed {
--sidebar-w: var(--sidebar-w-collapsed);
--app-sidebar-w: var(--sidebar-w-collapsed);
}
body.sidebar-collapsed .sidebar-header { justify-content: center; padding: 4px 0 8px 0; }
body.sidebar-collapsed .nav-item {
justify-content: center;
padding: 10px 0;
gap: 0;
}
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-item .help-trigger { display: none; }
body.sidebar-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
.app-main {
grid-area: main;
padding: 20px 24px;
/* UI#49: SCROLL INDEPENDENTE — só esse container rola; header/sidebar/footer
ficam fixos via grid + body overflow:hidden. min-height:0 (não auto) é
necessário pra que o overflow funcione dentro do grid row 1fr. */
overflow-y: auto;
min-width: 0;
min-height: 0;
}
.app-footer {
grid-area: footer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
background: var(--surface);
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-subtle);
}
/* ============ ICONES (mascaras CSS sobre SVG) ============ */
[class^="icon-"] {
display: inline-block;
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
vertical-align: middle;
}
.icon-home { -webkit-mask-image: url(assets/icons/home.svg); mask-image: url(assets/icons/home.svg); }
.icon-list { -webkit-mask-image: url(assets/icons/list.svg); mask-image: url(assets/icons/list.svg); }
.icon-user { -webkit-mask-image: url(assets/icons/user.svg); mask-image: url(assets/icons/user.svg); }
.icon-book { -webkit-mask-image: url(assets/icons/book.svg); mask-image: url(assets/icons/book.svg); }
/* ============ LOADING / SPINNER ============ */
.loading-initial {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 20px;
color: var(--text-muted);
}
.spinner {
width: 18px;
height: 18px;
border: 2px solid var(--border-strong);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ============ COMPONENTES BASE ============ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
cursor: pointer;
font-weight: 500;
transition: background 0.15s, border-color 0.15s;
}
.btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--text-inverse);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-danger { color: var(--rejected); border-color: rgba(239,68,68,0.4); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.1); }
/* KPI cards */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px 20px;
}
/* Label inline pra que o help-trigger sibling fique colado, sem quebrar linha */
.kpi-card .kpi-label { display: inline; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card .help-trigger { vertical-align: baseline; }
.kpi-card .kpi-value { display: block; font-size: 24px; font-weight: 700; margin-top: 6px; }
.kpi-card .kpi-trend { display: block; font-size: 12px; margin-top: 4px; color: var(--text-subtle); }
/* DOC#9 — KPI piloto com icone Phosphor (opt-in via prop `icon`).
* Mantem compat: sem `icon`, layout identico ao legado.
* Decisao: D-DOC9-TEC-03 (ver docs/PRDs/PRD-0009-design-system/decisoes-tecnicas.md). */
.kpi-card--with-icon {
position: relative;
padding-right: 52px;
}
.kpi-card--with-icon .kpi-ico {
position: absolute;
top: var(--ag-spc-3);
right: var(--ag-spc-3);
width: 32px;
height: 32px;
display: inline-grid;
place-items: center;
border-radius: var(--ag-radius-md);
background: linear-gradient(135deg, var(--ag-brand) 0%, var(--ag-brand-soft) 100%);
color: var(--ag-text-on-brand);
box-shadow: 0 6px 14px -6px var(--ag-brand-glass);
}
.kpi-card--with-icon .kpi-ico i { font-size: 17px; line-height: 1; }
/* Quando o KPI piloto carrega [hidden], anula display do grid (regra do projeto:
* feedback_hidden_attr_vs_display_flex.md). Aqui usamos display:inline-grid,
* entao [hidden] precisa de !important pra cancelar. */
.kpi-card--with-icon .kpi-ico[hidden] { display: none !important; }
/* Tabela */
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.data-table thead { background: var(--surface-2); }
.data-table th, .data-table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
font-size: 13.5px;
}
.data-table th { font-weight: 600; color: var(--text-muted); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .empty-state {
padding: 40px 20px;
text-align: center;
color: var(--text-muted);
}
/* Badge */
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
border: 1px solid transparent;
}
.badge-disponivel { background: rgba(76,154,255,0.12); color: var(--accent); border-color: rgba(76,154,255,0.3); }
.badge-em_lote { background: rgba(245,158,11,0.12); color: var(--warn); border-color: rgba(245,158,11,0.3); }
.badge-estornado { background: rgba(239,68,68,0.12); color: var(--rejected); border-color: rgba(239,68,68,0.3); }
.badge-aberto { background: rgba(76,154,255,0.12); color: var(--accent); border-color: rgba(76,154,255,0.3); }
/* RES#2 Sprint B (10/05/2026) — novos estados de lote (Migration 035). */
.badge-pendente_aprovacao { background: rgba(245,158,11,0.14); color: var(--warn); border-color: rgba(245,158,11,0.4); }
.badge-aguardando_pagamento { background: rgba(76,154,255,0.12); color: var(--accent); border-color: rgba(76,154,255,0.3); }
.badge-pago { background: rgba(34,197,94,0.12); color: var(--ok); border-color: rgba(34,197,94,0.3); }
.badge-reprovado_tef_net { background: rgba(239,68,68,0.16); color: var(--rejected); border-color: rgba(239,68,68,0.5); cursor: help; }
.badge-reprovado_tef_net:focus { outline: 2px solid var(--rejected); outline-offset: 2px; }
/* Skeleton (loading placeholder) */
.skeleton {
background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
background-size: 200% 100%;
border-radius: var(--radius-sm);
animation: shimmer 1.4s infinite linear;
display: inline-block;
}
.skeleton-line { height: 14px; width: 100%; margin: 4px 0; }
.skeleton-block { height: 80px; width: 100%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Forms */
.form-group { margin-bottom: 16px; }
.form-label {
display: block;
margin-bottom: 6px;
font-weight: 500;
font-size: 13px;
color: var(--text-muted);
}
.form-control {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text);
font: inherit;
transition: border-color 0.15s;
}
.form-control:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(76,154,255,0.18); }
.form-control:disabled { background: var(--surface-2); color: var(--text-subtle); cursor: not-allowed; }
.form-help { font-size: 12px; color: var(--text-subtle); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--rejected); margin-top: 4px; }
/* RES#2 R5 — span read-only do bloco "Dados bancários (resgate)" do perfil.
Visual igual a `.form-control:disabled`, mas semanticamente NÃO é input
editável (não há ataque de change/submit). */
.readonly-value {
display: block;
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text);
font: inherit;
min-height: 1.5em;
word-break: break-all;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
/* Page heading */
.page-header { margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.page-subtitle { color: var(--text-muted); margin: 0; }
.page-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
/* ============ TOAST ============ */
.toast-region {
position: fixed;
bottom: 80px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 9999;
pointer-events: none;
}
.toast {
background: var(--surface-3);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 12px 16px;
box-shadow: var(--shadow-md);
pointer-events: auto;
max-width: 360px;
font-size: 13.5px;
animation: toast-in 0.2s ease-out;
}
.toast-success { border-left: 3px solid var(--ok); }
.toast-error { border-left: 3px solid var(--rejected); }
.toast-info { border-left: 3px solid var(--accent); }
.toast-warn { border-left: 3px solid var(--warn); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* ============ MODAL ============ */
.modal-region:not([aria-hidden="false"]) { display: none; }
.modal-region[aria-hidden="false"] {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5);
z-index: 1000;
padding: 16px;
animation: modal-in 0.18s ease-out;
}
.modal-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
max-width: 520px;
width: 100%;
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-title { margin: 0; font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 18px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
@keyframes modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
/* ============ ERROR / EMPTY / RESTRITO ============ */
.empty-card, .error-card, .restricted-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 40px 24px;
text-align: center;
max-width: 480px;
margin: 32px auto;
}
.empty-card .icon, .error-card .icon, .restricted-card .icon { font-size: 32px; margin-bottom: 8px; opacity: 0.6; }
.empty-card h3, .error-card h3, .restricted-card h3 { margin: 0 0 8px; }
.empty-card p, .error-card p, .restricted-card p { color: var(--text-muted); margin: 0 0 16px; }
/* ============ RESPONSIVO MOBILE ============ */
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"main"
"bottom-nav";
grid-template-columns: 1fr;
grid-template-rows: var(--header-h) 1fr var(--bottom-nav-h);
}
.app-sidebar {
grid-area: bottom-nav;
border-right: none;
border-top: 1px solid var(--border);
padding: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--surface);
z-index: 90;
}
.app-sidebar nav { flex-direction: row; justify-content: space-around; gap: 0; padding-top: 0 !important; }
.nav-item { flex: 1; flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; font-size: 11px; min-height: auto; margin: 0; }
/* Em bottom-nav mobile o label volta a ser inline-flex 1 linha
(cancelando o -webkit-box de UI#49 desktop). Texto curto + ícone empilhado. */
.nav-item .nav-label { font-size: 11px; display: inline-flex; -webkit-line-clamp: initial; -webkit-box-orient: initial; line-height: 1.2; }
/* Toggle/header de colapsar é desktop-only — em mobile sidebar já é bottom-nav */
.sidebar-header { display: none; }
/* Anula estado colapsado em mobile (sidebar vira bottom-nav full-width) */
body.sidebar-collapsed .nav-label { display: inline-flex; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 8px 4px; gap: 4px; }
.app-footer { display: none; }
.app-main { padding: 16px; padding-bottom: calc(var(--bottom-nav-h) + 16px); }
.user-name { display: none; }
/* tabela vira lista de cards */
.data-table thead { display: none; }
.data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
.data-table tr { border-bottom: 1px solid var(--border); padding: 12px 0; }
.data-table td { border: none; padding: 4px 14px; }
.data-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text-muted); }
}
/* ============ UTILIDADES ============ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
.flex-row { display: flex; gap: 12px; }
.flex-col { display: flex; flex-direction: column; gap: 12px; }
.flex-1 { flex: 1; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.hidden { display: none !important; }
/* ============================================================================
* UI#7-M (06/05/2026 turno noite) — Dashboard v2 components
* ============================================================================ */
/* Banner de competência (topo) */
.banner-comp {
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
color: #fff;
padding: 18px 24px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
box-shadow: var(--shadow-md);
}
.banner-titulo { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.2; }
.banner-titulo small { display: block; font-size: 12px; opacity: 0.85; font-weight: 400; margin-top: 4px; }
.banner-stats { display: flex; gap: 24px; }
.banner-stat { text-align: right; }
.banner-stat-label { font-size: 11px; text-transform: uppercase; opacity: 0.85; letter-spacing: 0.4px; }
.banner-stat-value { font-size: 22px; font-weight: 700; margin-top: 2px; }
/* Seletor de competência (dropdown checkbox) */
.seletor-comp-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 18px;
margin-bottom: 18px;
box-shadow: var(--shadow-sm);
}
.seletor-comp-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.seletor-comp-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
padding: 16px 18px;
}
/* UI#30 v0.7.42 (10/05/2026 noite — Lucas-Frontend + Júlia-UX):
Layout 2 colunas — Competência fica compacta (220–320px) e Resgate Disponível
ganha o espaço protagonista (3x maior). Coluna 3 "Em breve" removida.
`minmax(220px, 320px)` evita esticar Competência demais em telas wide. */
.seletor-comp-grid-2col {
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}
.seletor-col { padding: 0 16px; min-width: 0; }
.seletor-col:first-child { padding-left: 0; }
.seletor-col:last-child { padding-right: 0; }
.seletor-col-divider { border-left: 1px solid var(--border); }
.seletor-col-placeholder { opacity: 0.7; }
/* Coluna 2 (Resgate) ganha respiro extra à esquerda do divider */
.seletor-col-resgate { padding-left: 20px; }
.seletor-comp-head-total {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.resgate-total-badge {
display: flex;
flex-direction: column;
align-items: flex-end;
background: linear-gradient(135deg, var(--ok), #4cae4c);
color: #fff;
padding: 4px 12px;
border-radius: var(--radius);
line-height: 1.1;
white-space: nowrap;
}
.resgate-total-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.6px;
opacity: 0.9;
font-weight: 700;
}
.resgate-total-valor { font-size: 14px; font-weight: 700; }
/* FIX A (10/05/2026 noite — Lucas-Frontend): wrapper das ações do head da
coluna 2. Mantém o badge "Total" + botão "Limpar" alinhados em coluna,
com o botão acima do badge e o conjunto colado à direita. */
.seletor-col-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.btn-limpar-mes {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(239, 68, 68, 0.10);
border: 1.5px solid var(--rejected, #ef4444);
color: var(--rejected, #ef4444);
padding: 7px 18px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 0.18s ease;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(239, 68, 68, 0.12);
}
.btn-limpar-mes:hover {
background: var(--rejected, #ef4444);
color: #fff;
border-color: var(--rejected, #ef4444);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
}
.btn-limpar-mes:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(239, 68, 68, 0.20);
}
.meses-disponiveis-list {
display: flex;
flex-direction: column;
gap: 4px;
/* UI#30 v0.7.42 — sem max-height: agora que o bloco ocupa ~75% da largura
e o grid v2b é 4×3 fixo, não precisa scroll vertical interno. */
}
.mes-disponivel {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: all 0.15s;
}
.mes-disponivel:hover { background: rgba(51,122,183,0.08); border-color: var(--accent); }
.mes-disponivel.ativo {
background: var(--accent);
color: #fff;
border-color: var(--accent-darker);
}
.mes-disponivel.ativo .mes-disponivel-valor { color: #fff; }
.mes-disponivel-label { font-weight: 600; text-transform: capitalize; }
.mes-disponivel-valor { color: var(--ok); font-weight: 700; font-size: 13px; }
@media (max-width: 900px) {
.seletor-comp-grid,
.seletor-comp-grid-2col { grid-template-columns: 1fr; }
.seletor-col { padding: 16px 0; }
.seletor-col-divider { border-left: 0; border-top: 1px solid var(--border); }
.seletor-col-resgate { padding-left: 0; }
}
.comp-selected-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
min-height: 24px;
}
.comp-chip {
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
letter-spacing: 0.2px;
text-transform: capitalize;
white-space: nowrap;
}
.comp-dropdown { position: relative; display: inline-block; }
.comp-trigger {
background: var(--surface);
border: 1px solid var(--border);
padding: 8px 14px;
border-radius: var(--radius);
font-size: 13px;
cursor: pointer;
min-width: 240px;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text);
font-family: inherit;
}
.comp-trigger:hover { border-color: var(--accent); }
.comp-trigger .caret { color: var(--text-muted); margin-left: 12px; }
.comp-list {
position: absolute;
top: calc(100% + 4px);
left: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 6px 0;
z-index: 100;
min-width: 240px;
max-height: 320px;
overflow-y: auto;
}
.comp-list-actions {
position: sticky;
top: 0;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 6px 10px;
display: flex;
justify-content: space-between;
gap: 6px;
z-index: 1;
}
.comp-action-btn {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 3px 10px;
font-size: 11px;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
font-weight: 600;
transition: all 0.15s;
}
/* Limpar tudo (default) — vermelho no hover (ação destrutiva) */
.comp-action-btn:hover {
background: var(--rejected);
color: #fff;
border-color: var(--rejected);
}
/* Selecionar tudo — azul brand no hover (ação construtiva) */
.comp-action-btn.comp-action-select:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.comp-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
cursor: pointer;
font-size: 13px;
}
.comp-option:hover { background: var(--surface-2); }
.comp-option input { accent-color: var(--accent); cursor: pointer; }
/* Blocos de cards */
.bloco-titulo {
font-size: 14px;
font-weight: 600;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.6px;
margin: 24px 0 8px;
padding-bottom: 6px;
border-bottom: 2px solid var(--border);
display: inline-block;
}
.bloco-titulo-primary { border-bottom-color: var(--accent); }
.bloco-titulo-success { border-bottom-color: var(--ok); }
.bloco-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
/* Grid 5 colunas (bloco gerencial) */
.kpi-grid-5 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
align-items: stretch;
}
/* Grid 4 colunas (bloco carteira após UI#32) */
.kpi-grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
align-items: stretch;
}
/* Grid 3 colunas (bloco resgate após UI#33) */
.kpi-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
align-items: stretch;
}
/* KPI Card v2 */
/* Card é block (não flex column) pra que .kpi-label fique inline com o
* help-trigger que o módulo manual injeta como sibling. Senão o (?) vira
* uma linha própria embaixo do label. */
.kpi-card-v2 {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
position: relative;
min-height: 120px;
}
.kpi-card-v2 > .kpi-label { display: inline; }
.kpi-card-v2 > .help-trigger { vertical-align: baseline; }
.kpi-card-v2 > .kpi-value,
.kpi-card-v2 > .kpi-sub,
.kpi-card-v2 > .kpi-duo {
display: block;
}
.kpi-card-v2 .kpi-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
font-weight: 600;
}
.kpi-card-v2 .kpi-value {
font-size: 28px;
font-weight: 700;
color: var(--text);
margin: 6px 0 0;
line-height: 1.1;
}
.kpi-card-v2 .kpi-value-primary { color: var(--accent); }
.kpi-card-v2 .kpi-value-success { color: var(--ok); }
.kpi-card-v2 .kpi-value-danger { color: var(--rejected); }
.kpi-card-v2 .kpi-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
line-height: 1.4;
}
.kpi-card-v2.kpi-card-pendente { opacity: 0.7; }
/* KPI Duo (2 valores num card só) */
.kpi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.kpi-duo-item {
background: var(--surface-2);
border-radius: var(--radius-sm);
padding: 6px 10px;
}
.kpi-duo-label {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.kpi-duo-value { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 2px; }
.kpi-duo-item.danger .kpi-duo-value { color: var(--rejected); }
/* Pills inline (Premium / Standard) */
.pill {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
margin-right: 4px;
vertical-align: middle;
}
.pill-premium { background: var(--premium-soft); color: var(--accent-darker); }
.pill-standard { background: var(--standard-soft); color: var(--text); }
/* Badge pendente */
.badge-pendente {
position: absolute;
top: 8px;
right: 8px;
background: var(--text-muted);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
padding: 2px 7px;
border-radius: 10px;
}
/* Responsive */
@media (max-width: 1100px) {
.kpi-grid-5 { grid-template-columns: repeat(2, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
.kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
.banner-comp { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 600px) {
.kpi-grid-5 { grid-template-columns: 1fr; }
.kpi-grid-4 { grid-template-columns: 1fr; }
.kpi-grid-3 { grid-template-columns: 1fr; }
.comp-trigger, .comp-list { min-width: 200px; }
}
/* ============================================================================
* UI#7-M — Resumo geral da página de lotes (topo)
* ============================================================================ */
.lotes-resumo-geral {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.lotes-resumo-item {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: var(--radius-lg);
padding: 14px 18px;
box-shadow: var(--shadow-sm);
}
.lotes-resumo-item.lotes-resumo-provisao { border-left-color: var(--accent); }
.lotes-resumo-item.lotes-resumo-liberado { border-left-color: var(--accent); background: var(--surface-2, #f3f7fc); }
.lotes-resumo-item.lotes-resumo-pago { border-left-color: var(--ok); }
.lotes-resumo-item.lotes-resumo-aberto { border-left-color: var(--warn); }
.lotes-resumo-item.lotes-resumo-cliente-aberto { border-left-color: var(--danger, #d33); }
.lotes-resumo-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
font-weight: 600;
}
.lotes-resumo-valor {
font-size: 22px;
font-weight: 700;
color: var(--text);
margin-top: 4px;
line-height: 1.1;
}
.lotes-resumo-pago .lotes-resumo-valor { color: var(--ok); }
.lotes-resumo-aberto .lotes-resumo-valor { color: var(--warn); }
.lotes-resumo-cliente-aberto .lotes-resumo-valor { color: var(--danger, #d33); }
@media (max-width: 1300px) {
.lotes-resumo-geral { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.lotes-resumo-geral { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================================
* UI#7-M — Filtros por coluna (lotes)
* ============================================================================ */
.filtros-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 18px;
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
}
.filtros-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
align-items: end;
}
.filtro-col { display: flex; flex-direction: column; gap: 4px; }
.filtro-label {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.filtro-col-actions { justify-content: flex-end; }
/* ============================================================================
* UI#7-M — Lotes agrupados por competência (visual de blocos destacados)
* ============================================================================ */
.lotes-grupos { display: flex; flex-direction: column; gap: 16px; }
.lote-grupo {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
position: relative;
}
.lote-grupo::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
z-index: 1;
}
.lote-grupo-head {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-darker) 100%);
color: #fff;
padding: 10px 18px 10px 22px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
cursor: pointer;
list-style: none;
user-select: none;
transition: background 0.15s;
}
/* Some o marker default do */
.lote-grupo-head::-webkit-details-marker { display: none; }
.lote-grupo-head::marker { content: ''; }
.lote-grupo-head:hover { filter: brightness(1.05); }
/* Toggle ▸ / ▾ */
.lote-grupo-toggle {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 4px;
position: relative;
flex-shrink: 0;
}
.lote-grupo-toggle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-left: 5px solid #fff;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transform: translate(-50%, -50%);
transition: transform 0.18s ease;
}
.lote-grupo[open] .lote-grupo-toggle::before {
transform: translate(-50%, -50%) rotate(90deg);
}
/* Bloco esquerdo do header: título + macros (Provisão + Liberado) */
.lote-grupo-titulo-bloco {
display: flex;
align-items: center;
gap: 22px;
flex: 1 1 auto;
min-width: 0;
}
.lote-grupo-titulo {
margin: 0;
font-size: 13px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: 0.2px;
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.lote-grupo-titulo::before {
content: '📦';
font-size: 14px;
}
/* Macros (Provisão · Liberado) — totais grandes da competência, ao lado do título */
.lote-grupo-macros {
display: inline-flex;
align-items: center;
gap: 18px;
padding-left: 18px;
border-left: 1px solid rgba(255,255,255,0.25);
}
.lote-grupo-total-macro {
font-size: 14px;
font-weight: 800;
}
.lote-grupo-resumo {
display: flex;
align-items: center;
gap: 18px;
}
.lote-grupo-resumo-item {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.15;
}
.lote-grupo-resumo-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
font-weight: 600;
}
.lote-grupo-total {
font-size: 13px;
font-weight: 700;
}
.lote-grupo-qtd {
font-size: 12px;
font-weight: 700;
}
.lote-grupo-body { padding: 0; background: var(--surface-2); }
.lote-grupo-body table { margin: 0; border: 0; background: transparent; }
.lote-grupo-body table thead { background: transparent; }
.lote-grupo-body table th {
font-size: 10px;
letter-spacing: 0.6px;
padding: 8px 14px;
border-bottom: 1px solid var(--border);
}
.lote-grupo-body table td {
background: var(--surface);
padding: 10px 14px;
border-bottom: 1px solid var(--border-soft);
font-size: 13px;
}
.lote-grupo-body table tr:last-child td { border-bottom: 0; }
/* Em mobile, header e tabela colapsam pra leitura por linha */
@media (max-width: 600px) {
.lote-grupo-titulo-bloco { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
.lote-grupo-macros { padding-left: 0; border-left: 0; gap: 14px; }
.lote-grupo-resumo { width: 100%; justify-content: space-between; }
.lote-grupo-body table thead { display: none; }
.lote-grupo-body table tbody tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.lote-grupo-body table td { display: flex; justify-content: space-between; padding: 4px 0; border: 0; }
.lote-grupo-body table td::before {
content: attr(data-label);
font-size: 10px;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
}
/* Sidebar: mobile vira bottom-nav (já existia, garantir contraste light) */
@media (max-width: 768px) {
.app-sidebar { background: var(--surface); border-right: 0; border-top: 1px solid var(--border); }
.nav-item { border-left: 0; border-top: 3px solid transparent; padding: 8px 12px; flex-direction: column; gap: 4px; font-size: 11px; }
.nav-item.active { border-left: 0; border-top-color: var(--accent); background: var(--surface-2); }
}
/* ============================================================================
* UI#10-M — Agent Switcher (impersonação no header, só pra interno Tef.Net)
* ============================================================================ */
.agent-switcher { position: relative; }
.agent-switcher-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
color: var(--text);
cursor: pointer;
max-width: 280px;
transition: background 0.15s, border-color 0.15s;
}
.agent-switcher-trigger:hover { background: var(--surface-3); border-color: var(--accent); }
.agent-switcher-trigger[aria-expanded="true"] { border-color: var(--accent); }
.agent-switcher-icon { font-weight: 700; color: var(--accent); }
.agent-switcher-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.agent-switcher .caret { font-size: 10px; opacity: 0.6; }
.agent-switcher-list {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
min-width: 320px;
max-width: 380px;
max-height: 60vh;
display: flex;
flex-direction: column;
z-index: 50;
}
/* CRÍTICO: a regra .agent-switcher-list { display: flex } acima sobrescreve o
[hidden]{display:none} default do user agent. Sem essa regra abaixo, o JS
faz list.hidden=true mas o CSS continua mostrando a lista. (Bug 07/05/2026) */
.agent-switcher-list[hidden] { display: none !important; }
.agent-switcher-search {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: var(--surface);
}
.agent-switcher-search .form-control { font-size: 13px; padding: 6px 10px; }
.agent-switcher-options {
overflow-y: auto;
flex: 1 1 auto;
padding: 4px 0;
}
.agent-switcher-option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 8px 14px;
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-left: 3px solid transparent;
cursor: pointer;
font-size: 13px;
}
.agent-switcher-option:hover { background: var(--surface-2); }
.agent-switcher-option.selecionado {
border-left-color: var(--accent);
background: var(--surface-2);
font-weight: 600;
}
.agent-switcher-option.inativo {
color: var(--danger, #d33);
border-left-color: var(--danger, #d33);
}
.agent-switcher-option.inativo .agent-switcher-option-meta { color: var(--danger, #d33); opacity: 0.85; }
.agent-switcher-option-nome { font-weight: 600; line-height: 1.2; }
.agent-switcher-option-meta { font-size: 11px; color: var(--text-muted); }
.agent-switcher-empty {
padding: 16px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
}
.agent-switcher-actions {
padding: 8px 12px;
border-top: 1px solid var(--border);
position: sticky;
bottom: 0;
background: var(--surface);
}
.agent-switcher-clear {
width: 100%;
padding: 6px 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
}
.agent-switcher-clear:hover { border-color: var(--danger, #d33); color: var(--danger, #d33); }
@media (max-width: 700px) {
.agent-switcher-trigger { max-width: 180px; padding: 6px 10px; }
.agent-switcher-label { max-width: 110px; font-size: 12px; }
.agent-switcher-list { min-width: 280px; right: -8px; }
}
/* ============================================================================
* UI#14 — Pre-login agent picker (08/05/2026 noite)
* Tela de entrada DEV: substitui "Sessão necessária" enquanto devBypass=true.
* ============================================================================ */
.pre-login-screen {
display: grid;
place-items: start center;
min-height: calc(100vh - var(--header-h) - 32px);
padding: 48px 16px 24px;
}
.pre-login-card {
width: 100%;
max-width: 600px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.pre-login-header {
background: var(--surface-2);
border-bottom: 1px solid var(--border);
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.pre-login-brand { display: flex; align-items: center; gap: 12px; }
.pre-login-logo {
width: 36px; height: 36px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--accent) 0%, var(--ok) 100%);
color: var(--text-inverse);
display: grid; place-items: center;
font-weight: 700; font-size: 16px;
}
.pre-login-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.pre-login-brand-text strong { font-size: 14px; }
.pre-login-brand-text small { font-size: 11px; color: var(--text-muted); }
.pre-login-dev-badge {
background: var(--warn);
color: var(--text-inverse);
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
}
.pre-login-body { padding: 28px 28px 20px; text-align: center; }
.pre-login-icon {
width: 56px; height: 56px;
margin: 0 auto 12px;
border-radius: 50%;
background: var(--premium-soft);
display: grid; place-items: center;
font-size: 24px;
}
.pre-login-title { margin: 0 0 6px; font-size: 20px; }
.pre-login-subtitle { font-size: 13px; color: var(--text-muted); margin: 0 0 4px; }
.pre-login-field-label {
display: block;
text-align: left;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin: 20px 0 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.pre-login-dropdown { position: relative; text-align: left; }
.pre-login-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
font-size: 14px;
color: var(--text);
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.pre-login-trigger:hover { border-color: var(--accent); }
.pre-login-trigger[aria-expanded="true"] {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.15);
}
.pre-login-trigger-label {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pre-login-trigger .caret { color: var(--text-muted); margin-left: 8px; font-size: 10px; }
/* INLINE (não absolute) — empurra o botão "Entrar" pra baixo quando abre,
* em vez de vazar do card. Card cresce conforme a lista abre. */
.pre-login-picker {
margin-top: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
overflow: hidden;
}
.pre-login-picker[hidden] { display: none !important; }
.pre-login-search {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface);
position: sticky;
top: 0;
}
.pre-login-search .form-control { font-size: 13px; padding: 6px 10px; width: 100%; }
.pre-login-options {
overflow-y: auto;
flex: 1 1 auto;
padding: 4px 0;
max-height: 320px;
}
.pre-login-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-left: 3px solid transparent;
cursor: pointer;
font-size: 13px;
font-family: inherit;
}
.pre-login-option:hover { background: var(--surface-2); }
.pre-login-option.selecionado {
border-left-color: var(--accent);
background: var(--surface-2);
font-weight: 600;
}
.pre-login-option.inativo {
color: var(--rejected);
border-left-color: var(--rejected);
}
.pre-login-option.inativo .pre-login-option-meta { color: var(--rejected); opacity: 0.85; }
.pre-login-option-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0; flex: 1;
}
.pre-login-option-nome {
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pre-login-option-meta { font-size: 11px; color: var(--text-muted); }
.pre-login-cod-pill {
flex-shrink: 0;
background: var(--surface-3);
color: var(--text-muted);
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-family: ui-monospace, SFMono-Regular, monospace;
}
.pre-login-option.inativo .pre-login-cod-pill {
background: rgba(217, 83, 79, 0.12);
color: var(--rejected);
}
.pre-login-empty {
padding: 20px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
}
.pre-login-actions {
margin-top: 20px;
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
}
.pre-login-hint {
font-size: 12px;
color: var(--text-muted);
text-align: left;
flex: 1;
}
.pre-login-footer {
padding: 12px 20px;
border-top: 1px solid var(--border);
text-align: center;
font-size: 11px;
color: var(--text-subtle);
background: var(--surface-2);
}
@media (max-width: 700px) {
.pre-login-card { max-width: 100%; }
.pre-login-body { padding: 20px 16px 16px; }
.pre-login-actions { flex-direction: column-reverse; align-items: stretch; }
.pre-login-actions .btn-primary { width: 100%; }
.pre-login-hint { text-align: center; }
}
/* ============================================================================
* UI#16 + UI#17 (08/05/2026 noite) — Seção DEV no sidebar + páginas internas
* (Faturamento iframe + Gestão de Desenvolvimento com abas).
* Visível APENAS pra tpUser='Tef.Net' (body.is-tefnet).
* ============================================================================ */
/* Defesa em profundidade tripla:
(1) atributo `hidden` no HTML — UA mostra display:none por default;
(2) JS só remove o atributo `hidden` quando AppState.user.tpUser === 'Tef.Net'
e adiciona body.is-tefnet — sem JS, seção fica oculta pelo (1);
(3) Mesmo se algo escapar do (1)+(2), a regra abaixo força ocultação
quando body.is-tefnet não está presente. */
body:not(.is-tefnet) .nav-section.dev-only { display: none !important; }
.nav-section.dev-only { display: block; }
.nav-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 6px;
margin-top: 8px;
border-top: 1px solid var(--border);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.7px;
color: var(--text-subtle);
font-weight: 700;
}
.nav-section-badge {
background: var(--warn);
color: #fff;
font-size: 9px;
padding: 2px 7px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.5px;
}
.nav-section .nav-icon {
width: 18px;
text-align: center;
font-size: 14px;
color: var(--text-muted);
}
.nav-section .nav-item.active .nav-icon { color: var(--accent); }
/* Sidebar minimizado: esconde label e badge da seção DEV também (UI#11-M) */
body.sidebar-collapsed .nav-section-header { padding: 8px 0; justify-content: center; }
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-section-badge { display: none; }
/* Página #faturamento e #gestao-dev — iframe full-height na área principal */
.iframe-wrapper {
width: 100%;
height: calc(100vh - var(--header-h) - 140px); /* desconta header app + page-header */
min-height: 480px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.iframe-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Toolbar da iframe quando viewing doc dentro da Gestão de Dev */
.dev-iframe-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
margin-bottom: 8px;
}
.dev-iframe-toolbar .dev-iframe-title {
flex: 1;
font-size: 13px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Abas da Gestão de Desenvolvimento */
.dev-tabs {
display: flex;
gap: 0;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
.dev-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: var(--text-muted);
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.dev-tab:hover { color: var(--text); background: var(--surface-2); }
.dev-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.dev-tab-icon { font-size: 14px; }
.dev-tab-count {
background: var(--surface-3);
color: var(--text-muted);
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
font-weight: 600;
}
.dev-tab.active .dev-tab-count { background: var(--premium-soft); color: var(--accent); }
/* ============ UI#19 (09/05/2026) — PageTabs componente reutilizável ============
Tabs no estilo underline minimal (Variante A), aceitam variant via classe
.level-l1 (default) ou .level-l2. Usado em #faturamento; preparado pra reuso. */
.page-tabs {
display: flex;
gap: 0;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
margin-top: 14px;
margin-bottom: 16px;
}
.page-tabs.level-l2 {
margin-top: 8px;
margin-bottom: 12px;
}
.page-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: var(--text-muted);
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.page-tabs.level-l2 .page-tab { padding: 8px 12px; font-size: 12px; }
.page-tab:hover { color: var(--text); background: var(--surface-2); }
.page-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.page-tab:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
border-radius: 2px;
}
.page-tab-icon { font-size: 14px; }
.page-tab-count {
background: var(--surface-3);
color: var(--text-muted);
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
font-weight: 600;
}
.page-tab.active .page-tab-count { background: var(--premium-soft); color: var(--accent); }
/* page-faturamento — itens auxiliares do header */
.page-faturamento .page-title-tag {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
}
.page-faturamento .page-tab-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
/* Empty state pra abas L1 sem conteúdo (Aba 2/3 enquanto não há nada construído) */
.empty-tab-state {
background: var(--surface);
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 48px 24px;
text-align: center;
}
.empty-tab-state .empty-tab-title {
font-size: 17px;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.empty-tab-state .empty-tab-desc {
color: var(--text-muted);
margin: 0 0 18px;
font-size: 13px;
}
.empty-tab-state .empty-tab-hint {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-size: 12px;
color: var(--text-muted);
display: inline-block;
text-align: left;
line-height: 1.6;
}
.empty-tab-state .empty-tab-hint code {
background: var(--surface-3);
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
color: var(--text);
}
/* UI#20 — host L2 dentro de L1 (page-tabs-host-l2) */
.page-tabs-host-l2 { margin-bottom: 0; }
.page-tab-content-l2 { margin-top: 0; }
/* Grid de docs */
.dev-doc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 8px;
}
.dev-doc-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--text);
text-align: left;
transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.dev-doc-link:hover {
border-color: var(--accent);
border-left-color: var(--accent);
background: var(--surface-2);
transform: translateX(2px);
}
.dev-doc-link .icon {
font-size: 15px;
color: var(--accent);
width: 18px;
text-align: center;
}
.dev-doc-link .nome {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dev-doc-link .ext {
font-size: 10px;
color: var(--text-subtle);
background: var(--surface-3);
padding: 1px 6px;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* ============================================================================
* DOC#9 — Glassmorphism Banking · Dashboard piloto (08/05/2026 noite)
* Paleta Tef.Net Brand · Phosphor Duotone · backdrop-filter blur saturate
* Escopado a .page-dashboard-v2 — outras telas seguem padrão antigo até onda 2
* ============================================================================ */
.page-dashboard-v2 {
position: relative;
min-height: 100%;
padding: 4px;
background: var(--gl-mesh);
background-attachment: fixed;
border-radius: var(--gl-radius);
}
/* Banner glass */
.page-dashboard-v2 .banner-comp {
background: linear-gradient(135deg, var(--gl-brand-deep) 0%, var(--gl-brand) 60%, var(--gl-brand-light) 100%);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius);
box-shadow: var(--gl-shadow-md);
position: relative;
overflow: hidden;
}
.page-dashboard-v2 .banner-titulo-wrap {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 1;
}
.page-dashboard-v2 .banner-icon {
font-size: 38px;
color: rgba(255,255,255,.85);
flex-shrink: 0;
}
.page-dashboard-v2 .banner-comp::before {
content: '';
position: absolute;
top: -40%; right: -10%;
width: 50%; height: 200%;
background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
pointer-events: none;
}
/* Seletor card com surface translúcida.
* z-index elevado: quando o dropdown de competência abre, ele precisa ficar
* ACIMA dos KPI cards (que também têm backdrop-filter e criam stacking context
* próprio). Sem isso, em stacking contexts irmãos o que vem depois no DOM
* (KPIs) fica por cima — bug visual reportado em 09/05/2026. */
.page-dashboard-v2 .seletor-comp-card {
background: var(--gl-surface-strong);
backdrop-filter: var(--gl-blur);
-webkit-backdrop-filter: var(--gl-blur);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius);
box-shadow: var(--gl-shadow-sm);
position: relative;
z-index: 20;
}
/* KPI cards Glass */
.page-dashboard-v2 .kpi-card-v2 {
background: var(--gl-surface-strong);
backdrop-filter: var(--gl-blur);
-webkit-backdrop-filter: var(--gl-blur);
border: 1px solid var(--gl-border);
border-radius: var(--gl-radius);
box-shadow: var(--gl-shadow-sm);
position: relative;
overflow: hidden;
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.page-dashboard-v2 .kpi-card-v2:hover {
transform: translateY(-4px);
box-shadow: var(--gl-shadow-lg);
}
/* Orb decorativo no canto superior direito (cor varia por kind) */
.page-dashboard-v2 .kpi-card-v2::before {
content: '';
position: absolute;
top: -30%; right: -30%;
width: 130px; height: 130px;
border-radius: 50%;
background: var(--gl-brand);
opacity: .22;
filter: blur(28px);
z-index: 0;
pointer-events: none;
}
.page-dashboard-v2 .kpi-card-v2 > * { position: relative; z-index: 1; }
.page-dashboard-v2 .kpi-card-v2 .kpi-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gl-brand-deep);
font-weight: 700;
/* sem padding-right — antes o gap criado entre nome e (?) ficava grande demais.
* Agora o card inteiro reserva espaço pro ícone via padding-right (regra abaixo). */
}
/* Reserva espaço pra ícone do canto superior direito sem afetar fluxo do label/help-trigger */
.page-dashboard-v2 .kpi-card-v2 {
padding-right: 56px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-ico {
width: 34px; height: 34px;
border-radius: 10px;
display: inline-grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
box-shadow: 0 6px 16px -6px rgba(51,122,183,.5);
flex-shrink: 0;
position: absolute;
top: 14px; right: 14px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-ico i { font-size: 18px; }
.page-dashboard-v2 .kpi-card-v2 .kpi-value { color: var(--gl-brand-deep); }
.page-dashboard-v2 .kpi-card-v2 .kpi-value-success { color: #047857; }
.page-dashboard-v2 .kpi-card-v2 .kpi-value-primary { color: var(--gl-brand); }
/* KPI duo (cards 2 valores) com superfície sutil */
.page-dashboard-v2 .kpi-duo-item {
background: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.6);
}
/* Trigger do seletor + chips com leve translucidez */
.page-dashboard-v2 .comp-trigger {
background: rgba(255,255,255,.9);
border-color: rgba(51,122,183,.25);
}
.page-dashboard-v2 .comp-trigger:hover { border-color: var(--gl-brand); }
.page-dashboard-v2 .comp-chip {
background: linear-gradient(135deg, var(--gl-brand), var(--gl-brand-light));
box-shadow: 0 3px 8px -3px rgba(51,122,183,.4);
}
/* Botão primário (Resgatar) com gradient brand */
.page-dashboard-v2 .btn-primary {
background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-deep) 100%);
border: 0;
color: #fff;
box-shadow: 0 8px 22px -10px rgba(51,122,183,.55);
transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.page-dashboard-v2 .btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(51,122,183,.7);
background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-deep) 100%);
border: 0;
}
.page-dashboard-v2 .btn-primary:disabled {
background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
box-shadow: none;
cursor: not-allowed;
}
/* Mes-disponivel com hover glass */
.page-dashboard-v2 .mes-disponivel {
background: rgba(255,255,255,.65);
border-color: rgba(51,122,183,.18);
transition: all .2s cubic-bezier(.4,0,.2,1);
}
.page-dashboard-v2 .mes-disponivel:hover {
background: rgba(255,255,255,.9);
transform: translateX(2px);
border-color: var(--gl-brand);
}
.page-dashboard-v2 .mes-disponivel.ativo {
background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
border-color: var(--gl-brand-deep);
}
/* Badge resgate-total com brand */
.page-dashboard-v2 .resgate-total-badge {
background: linear-gradient(135deg, var(--gl-brand-deep), var(--gl-brand));
box-shadow: 0 6px 18px -6px rgba(30,96,145,.5);
}
/* Bloco título sublinhado com brand */
.page-dashboard-v2 .bloco-titulo-primary { border-bottom-color: var(--gl-brand); }
.page-dashboard-v2 .bloco-titulo-success { border-bottom-color: #14b8a6; }
/* Pendente: opacidade preservada */
.page-dashboard-v2 .kpi-card-v2.kpi-card-pendente { opacity: 0.65; }
.page-dashboard-v2 .kpi-card-v2.kpi-card-pendente::before { opacity: 0.1; }
/* Badge PENDENTE escondido no Glass: estava desalinhando o card.
* Os 3 sinais que mantemos como evidência de "pendente":
* 1. opacity 0.65 (fade visível)
* 2. valores "—" (em vez de número)
* 3. footer "regra a definir"
* Card volta a alinhar-se com os outros do bloco. */
.page-dashboard-v2 .kpi-card-v2.kpi-card-pendente .badge-pendente {
display: none;
}
/* Variação de orb: card success (provisionamento) usa teal */
.page-dashboard-v2 .kpi-card-v2.kpi-success::before { background: #14b8a6; }
.page-dashboard-v2 .kpi-card-v2.kpi-success .kpi-ico {
background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
box-shadow: 0 6px 16px -6px rgba(20,184,166,.5);
}
/* Pills Premium/Standard ajustados pra glass */
.page-dashboard-v2 .pill-premium {
background: linear-gradient(135deg, rgba(51,122,183,.18), rgba(76,154,255,.22));
color: var(--gl-brand-deep);
font-weight: 700;
}
.page-dashboard-v2 .pill-standard {
background: rgba(119,119,119,.15);
color: #4b5563;
font-weight: 700;
}
/* Responsive */
@media (max-width: 1100px) {
.page-dashboard-v2 .kpi-card-v2 .kpi-ico {
width: 30px; height: 30px;
}
}
/* ============================================================================
* DOC#9 — Glass Dark Mode (inversão de cores) — toggle via ?dark=1 na URL
* Vibe: Midnight Pro do v5 com brand Tef.Net mantida em pontos de destaque
* ============================================================================ */
.page-dashboard-v2.glass-dark {
background:
radial-gradient(at 12% 18%, rgba(76,154,255,.35) 0, transparent 45%),
radial-gradient(at 88% 12%, rgba(99,102,241,.30) 0, transparent 45%),
radial-gradient(at 70% 95%, rgba(56,189,248,.32) 0, transparent 50%),
radial-gradient(at 18% 92%, rgba(51,122,183,.40) 0, transparent 50%),
linear-gradient(135deg, #0b1220 0%, #0f1d33 50%, #0b1220 100%);
color: #e2e8f0;
}
/* Banner permanece com gradient brand (continua azul vibrante destaca-se no dark) */
.page-dashboard-v2.glass-dark .banner-comp {
background: linear-gradient(135deg, #1e3a5f 0%, var(--gl-brand) 60%, var(--gl-brand-light) 100%);
border-color: rgba(255,255,255,.15);
box-shadow: 0 12px 36px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}
/* Seletor card translúcido escuro */
.page-dashboard-v2.glass-dark .seletor-comp-card {
background: rgba(15,29,51,.6);
border-color: rgba(255,255,255,.12);
box-shadow: 0 6px 22px -8px rgba(0,0,0,.5);
color: #cbd5e1;
}
.page-dashboard-v2.glass-dark .seletor-comp-head strong { color: #f1f5f9; }
.page-dashboard-v2.glass-dark .text-muted { color: #94a3b8 !important; }
/* KPI cards Glass Dark */
.page-dashboard-v2.glass-dark .kpi-card-v2 {
background: rgba(15,29,51,.55);
border-color: rgba(255,255,255,.12);
box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
}
.page-dashboard-v2.glass-dark .kpi-card-v2:hover {
background: rgba(15,29,51,.7);
box-shadow: 0 16px 40px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(76,154,255,.25);
}
.page-dashboard-v2.glass-dark .kpi-card-v2::before {
background: var(--gl-brand-light);
opacity: .35;
}
.page-dashboard-v2.glass-dark .kpi-card-v2.kpi-success::before { background: #2dd4bf; opacity: .35; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-label {
color: #93c5fd;
}
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-value { color: #f8fafc; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-value-success { color: #6ee7b7; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-value-primary { color: #93c5fd; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-sub { color: #cbd5e1; }
.page-dashboard-v2.glass-dark .kpi-card-v2 .kpi-ico {
box-shadow: 0 0 22px -2px rgba(76,154,255,.5);
}
/* KPI duo dark */
.page-dashboard-v2.glass-dark .kpi-duo-item {
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.1);
}
.page-dashboard-v2.glass-dark .kpi-duo-label { color: #94a3b8; }
.page-dashboard-v2.glass-dark .kpi-duo-value { color: #f1f5f9; }
.page-dashboard-v2.glass-dark .kpi-duo-item.danger .kpi-duo-value { color: #fca5a5; }
/* Trigger + chips + dropdown */
.page-dashboard-v2.glass-dark .comp-trigger {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
color: #e2e8f0;
}
.page-dashboard-v2.glass-dark .comp-trigger:hover { border-color: var(--gl-brand-light); }
.page-dashboard-v2.glass-dark .comp-trigger .caret { color: #94a3b8; }
.page-dashboard-v2.glass-dark .comp-list {
background: rgba(15,29,51,.95);
border-color: rgba(255,255,255,.15);
color: #e2e8f0;
}
.page-dashboard-v2.glass-dark .comp-list-actions {
background: rgba(15,29,51,.95);
border-bottom-color: rgba(255,255,255,.1);
}
.page-dashboard-v2.glass-dark .comp-action-btn {
background: transparent;
border-color: rgba(255,255,255,.15);
color: #cbd5e1;
}
.page-dashboard-v2.glass-dark .comp-option:hover { background: rgba(255,255,255,.05); }
/* Mes-disponivel dark */
.page-dashboard-v2.glass-dark .mes-disponivel {
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.12);
color: #e2e8f0;
}
.page-dashboard-v2.glass-dark .mes-disponivel:hover {
background: rgba(255,255,255,.1);
border-color: var(--gl-brand-light);
}
.page-dashboard-v2.glass-dark .mes-disponivel.ativo {
background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 0 20px -2px rgba(76,154,255,.5);
}
.page-dashboard-v2.glass-dark .mes-disponivel-valor { color: #6ee7b7; }
.page-dashboard-v2.glass-dark .mes-disponivel.ativo .mes-disponivel-valor { color: #fff; }
/* Bloco título dark */
.page-dashboard-v2.glass-dark .bloco-titulo {
color: #e2e8f0;
border-bottom-color: rgba(255,255,255,.1);
}
.page-dashboard-v2.glass-dark .bloco-titulo-primary { border-bottom-color: var(--gl-brand-light); }
.page-dashboard-v2.glass-dark .bloco-titulo-success { border-bottom-color: #2dd4bf; }
.page-dashboard-v2.glass-dark .bloco-sub { color: #94a3b8; }
/* Pills no dark */
.page-dashboard-v2.glass-dark .pill-premium {
background: rgba(76,154,255,.2);
color: #93c5fd;
}
.page-dashboard-v2.glass-dark .pill-standard {
background: rgba(148,163,184,.2);
color: #cbd5e1;
}
/* Botão primário no dark mantém gradient brand mas com glow */
.page-dashboard-v2.glass-dark .btn-primary {
background: linear-gradient(135deg, var(--gl-brand) 0%, var(--gl-brand-light) 100%);
box-shadow: 0 0 22px -2px rgba(76,154,255,.55);
}
.page-dashboard-v2.glass-dark .btn-primary:disabled {
background: linear-gradient(135deg, #475569 0%, #334155 100%);
opacity: 0.6;
}
/* Tabela placeholder texto */
.page-dashboard-v2.glass-dark #tabela-container p { color: #94a3b8; }
/* ============================================================================
* Aba "Logs DEV" em Gestão de Desenvolvimento (09/05/2026)
* Substitui o botão flutuante 🪲 Logs (removido) por um painel inline.
* ============================================================================ */
.dev-logs-panel { margin-top: 16px; }
.dev-logs-toolbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: 0;
font-size: 13px;
color: var(--text-muted);
}
.dev-logs-toolbar strong { color: var(--text); font-size: 15px; }
.dev-logs-body {
background: #0d1117;
color: #c9d1d9;
border: 1px solid var(--border);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
padding: 8px;
font-family: ui-monospace, 'SF Mono', monospace;
font-size: 12px;
max-height: 540px;
overflow-y: auto;
}
.dev-logs-body .empty-card {
background: transparent;
color: #8b949e;
border: 0;
}
.dev-log-row {
padding: 6px 10px;
border-bottom: 1px solid #21262d;
display: grid;
grid-template-columns: 80px 100px 1fr;
gap: 10px;
align-items: start;
}
.dev-log-row:last-child { border-bottom: 0; }
.dev-log-row .dev-log-time { color: #58a6ff; white-space: nowrap; }
.dev-log-row .dev-log-tag { color: #d2a8ff; font-weight: 600; }
.dev-log-row .dev-log-msg { color: #c9d1d9; word-break: break-word; }
.dev-log-row .dev-log-data {
grid-column: 1 / -1;
margin: 4px 0 0 0;
padding: 6px 10px;
background: rgba(255,255,255,.04);
border-left: 2px solid #58a6ff;
border-radius: 4px;
white-space: pre-wrap;
word-break: break-all;
color: #8b949e;
font-size: 11px;
}
.dev-log-row.dev-log-warn .dev-log-msg { color: #d29922; }
.dev-log-row.dev-log-error .dev-log-msg { color: #f85149; }
.dev-log-row.dev-log-error .dev-log-data { border-left-color: #f85149; }
@media (max-width: 600px) {
.dev-log-row { grid-template-columns: 1fr; }
.dev-log-row .dev-log-time, .dev-log-row .dev-log-tag { font-size: 10px; }
}
/* ============================================================================
* Help-trigger alinhamento global (09/05/2026)
* Garante que o (?) sempre fique no FINAL do nome, alinhado e sem quebrar
* sozinho em linha nova (orphan). Aplica em todos os data-help do app.
* ============================================================================ */
[data-help] {
/* "Cola" o (?) no fim do nome via white-space — última palavra + (?) ficam
* juntos como bloco indivisível, evita órfão em quebras de linha. */
hyphens: none;
}
[data-help] + .help-trigger {
vertical-align: middle;
margin-left: 4px;
flex-shrink: 0;
}
/* ============================================================================
* Responsivo Dashboard (09/05/2026) — corrigir sobreposições em mobile
* Sintomas: ícone Phosphor invadindo o label longo em telas estreitas;
* banner empilhando errado; KPIs em 5 colunas estourando.
* ============================================================================ */
/* Tablet (<1100px) — KPIs em 5 colunas viram 2x3 (já tinha mas reforçado aqui) */
@media (max-width: 1100px) {
.page-dashboard-v2 .kpi-card-v2 {
min-height: 110px; /* permite encolher um pouco */
padding-right: 50px;
}
/* Banner empilha em coluna pra não cortar texto */
.page-dashboard-v2 .banner-comp {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.page-dashboard-v2 .banner-stats {
width: 100%;
justify-content: flex-end;
}
}
/* Mobile (<700px) — tudo em 1 coluna, ícone menor */
@media (max-width: 700px) {
.page-dashboard-v2 .kpi-card-v2 {
padding-right: 44px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-ico {
width: 28px; height: 28px;
top: 10px; right: 10px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-ico i { font-size: 14px; }
.page-dashboard-v2 .kpi-card-v2 .kpi-label {
font-size: 10px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-value {
font-size: 22px; /* era 28px */
}
/* Pills de Premium/Standard quebram linha em mobile */
.page-dashboard-v2 .pill { display: inline-block; margin-bottom: 2px; }
}
/* Mobile estrito (<480px) — ainda mais compacto */
@media (max-width: 480px) {
.page-dashboard-v2 {
padding: 0;
}
.page-dashboard-v2 .banner-comp {
padding: 14px 16px;
}
.page-dashboard-v2 .banner-titulo { font-size: 18px; }
.page-dashboard-v2 .banner-stat-value { font-size: 18px; }
.page-dashboard-v2 .seletor-comp-card {
padding: 12px 14px;
}
.page-dashboard-v2 .kpi-card-v2 {
padding: 12px 14px;
min-height: 96px;
}
.page-dashboard-v2 .kpi-card-v2 .kpi-value { font-size: 20px; }
/* KPI duo (2 valores num card) — colunas mais apertadas */
.page-dashboard-v2 .kpi-duo-value { font-size: 16px; }
}
/* Selector de competência — coluna 2 e 3 com badge total não invadem coluna 1 */
@media (max-width: 900px) {
.page-dashboard-v2 .seletor-comp-head { flex-wrap: wrap; gap: 8px; }
.page-dashboard-v2 .resgate-total-badge { align-self: flex-start; }
}
/* ============================================================================
* DOC#9 ONDA 2 — Chrome harmonizado + 5 KPIs diferenciados (09/05/2026)
* Header e sidebar alinhados com o tema atual (light) ganham polidura do v7:
* • brand mark com sombra brand sutil
* • nav-item.active com gradient brand-soft + glow lateral
* • dev-only badge com gradient emerald→teal
* • 5 KPIs ganham cores diferenciadas dentro da família brand (k1..k5)
* ============================================================================ */
/* Header — fundo gradient brand-pale + borda inferior brand sutil
* Casa com o mesh do conteúdo. Mantém legibilidade light mas sai do branco "morto". */
.app-header {
background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
border-bottom: 1px solid #d8e6f5;
box-shadow: 0 2px 12px -6px rgba(51,122,183,.18);
position: relative;
}
.app-header::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(76,154,255,.5) 50%, transparent 100%);
}
.brand img {
filter: drop-shadow(0 2px 6px rgba(51,122,183,.25));
}
/* Sidebar — fundo brand-pale (eff6ff/f0f9ff) com mesh radial bem suave
* Conversa visualmente com o mesh do conteúdo (mesma família) sem competir. */
.app-sidebar {
background:
radial-gradient(at 50% 0%, rgba(76,154,255,.12) 0, transparent 50%),
radial-gradient(at 50% 100%, rgba(56,189,248,.08) 0, transparent 50%),
linear-gradient(180deg, #f0f7ff 0%, #e8f1fb 100%);
border-right: 1px solid #d8e6f5;
}
.app-sidebar .sidebar-header {
border-bottom: 1px solid rgba(51,122,183,.12);
}
.app-sidebar .sidebar-toggle {
background: rgba(255,255,255,.85);
border-color: rgba(51,122,183,.2);
}
/* Nav-item — texto e hover ajustados pra novo fundo */
.nav-item:hover {
background: rgba(51,122,183,.1);
}
/* Sidebar — refinamento do nav-item active com gradient + glow lateral */
.nav-item.active {
background: linear-gradient(180deg, rgba(51,122,183,.14), rgba(51,122,183,.06));
border-left-color: transparent; /* substituído pelo ::before com gradient */
position: relative;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(51,122,183,.12);
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 22px;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, var(--accent), #4c9aff);
box-shadow: 0 0 10px rgba(76,154,255,.55);
}
/* Dev-only section — badge ganha gradient emerald→teal pra harmonizar com Glass */
.nav-section.dev-only .nav-section-badge {
background: linear-gradient(135deg, #10b981, #14b8a6);
color: #052e1f;
box-shadow: 0 2px 8px -2px rgba(16,185,129,.4);
border: 0;
}
/* User-menu / agent-switcher: leve refinamento de borda em hover */
.user-menu:hover {
background: rgba(51,122,183,.08);
}
/* ============================================================================
* KPI cards — 5 cores diferenciadas dentro da família brand
* Usa --orb / --ico-1 / --ico-2 / --ico-shadow / --label-color
* As classes k1..k5 sobrescrevem as variáveis no escopo do card.
* ============================================================================ */
.page-dashboard-v2 .kpi-card-v2.k1 {
--orb: var(--accent);
}
.page-dashboard-v2 .kpi-card-v2.k1 .kpi-ico {
background: linear-gradient(135deg, var(--accent) 0%, #4c9aff 100%);
box-shadow: 0 6px 16px -6px rgba(51,122,183,.5);
}
.page-dashboard-v2 .kpi-card-v2.k2 {
--orb: #4c9aff;
}
.page-dashboard-v2 .kpi-card-v2.k2 .kpi-ico {
background: linear-gradient(135deg, #4c9aff 0%, #6cb3ff 100%);
box-shadow: 0 6px 16px -6px rgba(76,154,255,.5);
}
.page-dashboard-v2 .kpi-card-v2.k2 .kpi-label { color: #1e6091; }
.page-dashboard-v2 .kpi-card-v2.k3 {
--orb: #0ea5e9;
}
.page-dashboard-v2 .kpi-card-v2.k3 .kpi-ico {
background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
box-shadow: 0 6px 16px -6px rgba(14,165,233,.5);
}
.page-dashboard-v2 .kpi-card-v2.k3 .kpi-label { color: #0369a1; }
.page-dashboard-v2 .kpi-card-v2.k3 .kpi-value { color: #075985; }
.page-dashboard-v2 .kpi-card-v2.k4 {
--orb: #64748b;
opacity: 0.85;
}
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-ico {
background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
box-shadow: 0 6px 16px -6px rgba(100,116,139,.45);
}
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-label { color: #64748b; }
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-value { color: #334155; }
.page-dashboard-v2 .kpi-card-v2.k5 {
--orb: #14b8a6;
border: 1px solid rgba(20,184,166,.25);
box-shadow: 0 12px 30px -12px rgba(20,184,166,.28), inset 0 0 0 1px rgba(20,184,166,.06);
}
.page-dashboard-v2 .kpi-card-v2.k5 .kpi-ico {
background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
box-shadow: 0 6px 16px -6px rgba(20,184,166,.5);
}
.page-dashboard-v2 .kpi-card-v2.k5 .kpi-label { color: #0e7490; }
.page-dashboard-v2 .kpi-card-v2.k5 .kpi-value { color: #115e59; }
/* ============================================================================
* 🧪 EXPERIMENTAL — DOC#9 ONDA 4 — Tint de fundo nos KPIs especiais
* Pedido em 09/05/2026 madrugada: Provisionamento (k5) com tint verde-teal,
* Cancelados (k4) com tint rose/red. Mantém Glass mas reforça a semântica.
*
* 🔄 PARA REVERTER: deletar este bloco inteiro (entre EXPERIMENTAL → FIM EXPERIMENTAL).
* Cards voltam ao fundo branco translúcido padrão.
* ============================================================================ */
/* k5 Provisionamento — tint teal (success) */
.page-dashboard-v2 .kpi-card-v2.k5 {
background: linear-gradient(
135deg,
rgba(204, 251, 241, .92) 0%, /* teal-100 quase opaco */
rgba(153, 246, 228, .82) 100% /* teal-200 */
);
border: 1px solid rgba(20, 184, 166, .35);
box-shadow:
0 14px 32px -14px rgba(20, 184, 166, .35),
inset 0 0 0 1px rgba(20, 184, 166, .08);
}
.page-dashboard-v2 .kpi-card-v2.k5::before {
background: #14b8a6;
opacity: 0.4; /* orb mais forte sobre fundo já tintado */
}
/* k4 Cancelados — tint rose/red (danger pendente) */
.page-dashboard-v2 .kpi-card-v2.k4 {
background: linear-gradient(
135deg,
rgba(254, 226, 226, .92) 0%, /* red-100 */
rgba(254, 205, 211, .82) 100% /* rose-200 */
);
border: 1px solid rgba(239, 68, 68, .28);
box-shadow:
0 14px 32px -14px rgba(239, 68, 68, .25),
inset 0 0 0 1px rgba(239, 68, 68, .06);
}
.page-dashboard-v2 .kpi-card-v2.k4::before {
background: #ef4444;
opacity: 0.32;
}
/* Ícone de Cancelados ganha tom red pra acompanhar o tint do fundo */
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-ico {
background: linear-gradient(135deg, #ef4444 0%, #fca5a5 100%);
box-shadow: 0 6px 14px -4px rgba(239, 68, 68, .55);
}
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-label { color: #991b1b; }
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-duo-item.danger .kpi-duo-value { color: #991b1b; }
.page-dashboard-v2 .kpi-card-v2.k4 .kpi-duo-label { color: #b91c1c; }
/* k4 cancelado mantém opacidade (regra anterior) — não ofuscar o tint */
.page-dashboard-v2 .kpi-card-v2.k4.kpi-card-pendente { opacity: 0.85; }
/* ============================================================================
* FIM EXPERIMENTAL — DOC#9 ONDA 4
* ============================================================================ */
/* ============================================================================
* UI#20 — Padrão "Explodir" (09/05/2026)
* KPIs ganham comportamento clicável + painel detalhado abaixo do bloco.
* ============================================================================ */
.kpi-explodivel {
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
position: relative;
}
.kpi-explodivel:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .15);
}
.kpi-explodivel:focus-visible {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 2px;
}
.kpi-explodivel::after {
content: '▾';
position: absolute;
right: 10px;
bottom: 6px;
font-size: 11px;
color: var(--text-muted, #64748b);
transition: transform .2s ease;
}
.kpi-explodivel.explodir-aberto::after {
transform: rotate(180deg);
}
.explodir-detail {
grid-column: 1 / -1;
margin-top: 10px;
padding: 12px;
background: var(--bg-soft, #f8fafc);
border: 1px solid var(--border, #e2e8f0);
border-radius: 8px;
font-size: 13px;
}
.explodir-detail[hidden] { display: none; }
.explodir-loading {
padding: 12px;
text-align: center;
color: var(--text-muted, #64748b);
}
.explodir-error {
padding: 12px;
background: #fef2f2;
color: #991b1b;
border-radius: 6px;
}
.explodir-table-wrap {
overflow-x: auto;
background: white;
border-radius: 6px;
}
.explodir-table-wrap .data-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.explodir-table-wrap th,
.explodir-table-wrap td {
padding: 8px 10px;
border-bottom: 1px solid var(--border, #e2e8f0);
text-align: left;
}
.explodir-table-wrap th {
background: var(--bg-soft, #f1f5f9);
font-weight: 600;
color: var(--text-muted, #475569);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
}
.explodir-table-wrap td.col-num,
.explodir-table-wrap th.col-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.explodir-table-wrap tr:last-child td { border-bottom: 0; }
/* ==========================================================================
UI#50 (14/05/2026) — Desmembrar "Comissão Não-Pgs" em "Comissão Pendente".
Mockup aprovado: docs/mockups/UI-0050-v1-comissao-nao-pgs-desmembrar-2-opcoes.html
- Subtítulo inline no card com 2 dots coloridos (repasse / cliente)
- Sub-tabs no drill com filtragem JS-only (data-bucket)
========================================================================== */
/* Subtítulo do card "Comissão Pendente" */
.ind-sub-breakdown {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 6px;
margin-top: 4px;
font-size: 11px;
color: var(--text-muted, #64748b);
line-height: 1.3;
}
.cnpg-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.cnpg-dot-repasse { background: var(--warn, #f3b04a); }
.cnpg-dot-cliente { background: var(--text-muted, #8b95b3); }
.cnpg-sub-sep { color: var(--border, #cbd5e1); margin: 0 2px; }
.cnpg-sub-label { white-space: nowrap; }
.cnpg-sub-empty {
color: var(--success, #3fc78a);
font-weight: 500;
white-space: nowrap;
}
/* Sub-tabs do drill de Comissão Pendente */
.cnpg-subtabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
padding: 4px;
background: var(--bg-soft, #f1f5f9);
border-radius: 8px;
border: 1px solid var(--border, #e2e8f0);
flex-wrap: wrap;
}
.cnpg-subtab {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--text-muted, #475569);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cnpg-subtab:hover {
background: rgba(255, 255, 255, .6);
color: var(--text, #0f172a);
}
.cnpg-subtab.active {
background: white;
border-color: var(--border, #cbd5e1);
color: var(--text, #0f172a);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.cnpg-subtab.active.cnpg-subtab-repasse {
border-color: rgba(243, 176, 74, .5);
background: rgba(243, 176, 74, .08);
}
.cnpg-subtab.active.cnpg-subtab-cliente {
border-color: rgba(139, 149, 179, .5);
background: rgba(139, 149, 179, .08);
}
.cnpg-subtab-count {
font-size: 11px;
font-variant-numeric: tabular-nums;
padding: 2px 6px;
border-radius: 999px;
background: var(--bg-soft, #f1f5f9);
color: var(--text-muted, #64748b);
font-weight: 500;
}
.cnpg-subtab.active .cnpg-subtab-count {
background: var(--border, #e2e8f0);
color: var(--text, #0f172a);
}
/* Pill por natureza nas linhas da tabela do drill */
.cnpg-row-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}
.cnpg-row-pill-repasse {
background: rgba(243, 176, 74, .14);
color: #b67a1d;
border: 1px solid rgba(243, 176, 74, .4);
}
.cnpg-row-pill-cliente {
background: rgba(139, 149, 179, .14);
color: var(--text-muted, #475569);
border: 1px solid rgba(139, 149, 179, .4);
}
/* DT Eduardo-2 (14/05/2026) — Coordenação sub-tab × filtro coluna.
Sub-tab usa esta classe para esconder linhas por bucket; o filtro de coluna
do explodir.js usa atributo [hidden] no mesmo . Ambos resolvem pra
`display:none` — a linha só fica visível quando passa em AMBOS critérios
(intersecção natural). Evita o filtro coluna sobrescrever a decisão da
sub-tab quando o usuário digita após chavear bucket. */
tr.cnpg-hidden-bucket { display: none !important; }
/* UI#20 — Sub-seções dentro do explodir (espelha duo do KPI) */
.explodir-secao + .explodir-secao { margin-top: 18px; }
.explodir-secao-titulo {
margin-bottom: 6px;
font-size: 12px;
color: var(--text-muted, #64748b);
text-transform: uppercase;
letter-spacing: .04em;
}
.explodir-secao-titulo b { color: var(--text, #0f172a); font-size: 13px; letter-spacing: 0; }
/* UI#20 v2 — header do painel explodir com título + ações (filtro + fechar).
PRD-0014-EXT-03 / UI#45: align-items baseline (era center) pra que o
subtitulo inline alinhe com o titulo no mesmo eixo de texto. */
.explodir-detail .explodir-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 4px 4px 12px 4px;
border-bottom: 1px solid var(--border, #e2e8f0);
margin-bottom: 12px;
}
.explodir-detail .explodir-titulo {
font-size: 14px;
font-weight: 600;
color: var(--text, #0f172a);
min-width: 0;
/* PRD-0014-EXT-03 / UI#45: flex 0 0 auto (era 1 1 auto) — o titulo nao
mais consome todo o espaco; .explodir-header-text envolve titulo+subtitulo
e e quem tem flex: 1. */
flex: 0 0 auto;
}
.explodir-detail .explodir-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.explodir-detail .explodir-filter {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--border, #e2e8f0);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
font-family: inherit;
background: white;
width: 200px;
outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
.explodir-detail .explodir-filter:focus {
border-color: var(--accent, #337ab7);
box-shadow: 0 0 0 2px rgba(51, 122, 183, .18);
}
.explodir-detail .explodir-close {
appearance: none;
border: 1px solid var(--border, #e2e8f0);
background: white;
width: 28px;
height: 28px;
border-radius: 6px;
font-size: 18px;
line-height: 1;
color: var(--text-muted, #64748b);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.explodir-detail .explodir-close:hover {
background: #fee2e2;
color: #991b1b;
border-color: #fca5a5;
}
.explodir-detail .explodir-close:focus-visible {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 2px;
}
/* duo-item clicável fica um bocado destacado quando ativo */
.kpi-duo-item.kpi-explodivel {
cursor: pointer;
border-radius: 6px;
transition: background .12s ease;
position: relative;
padding: 6px 8px;
}
.kpi-duo-item.kpi-explodivel:hover {
background: rgba(51, 122, 183, .08);
}
.kpi-duo-item.kpi-explodivel:focus-visible {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 1px;
}
.kpi-duo-item.kpi-explodivel::after {
content: '▾';
position: absolute;
right: 4px;
bottom: 2px;
font-size: 10px;
color: var(--text-muted, #64748b);
transition: transform .2s ease;
}
.kpi-duo-item.kpi-explodivel.explodir-aberto::after { transform: rotate(180deg); }
.kpi-duo-item.kpi-explodivel.explodir-aberto {
background: rgba(51, 122, 183, .12);
}
/* UI#20 v3 — filtros por coluna (linha extra sob o thead) */
.explodir-table-wrap .explodir-filter-row th {
background: #fafafa;
padding: 4px 6px;
text-transform: none;
letter-spacing: 0;
font-weight: normal;
}
.explodir-col-filter {
appearance: none;
-webkit-appearance: none;
width: 100%;
border: 1px solid var(--border, #e2e8f0);
border-radius: 4px;
padding: 4px 6px;
font-size: 11px;
font-family: inherit;
background: white;
outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
box-sizing: border-box;
}
.explodir-col-filter:focus {
border-color: var(--accent, #337ab7);
box-shadow: 0 0 0 2px rgba(51, 122, 183, .18);
}
.explodir-col-filter::placeholder { color: #94a3b8; font-style: italic; }
/* --- RES#2 Sprint D (10/05/2026) — Drill com tabs (Opção C) --- */
/* Tabs sobre painel explodir: separa "Por modalidade" (Premium/Standard)
de "Por cliente" (lista detalhada via agente_kpi_clientes_listar.php).
Tokens DOC#9 glassmorphism — borda discreta, hover suave. */
.explodir-tabs {
display: flex;
gap: 4px;
padding: 8px 12px 0;
border-bottom: 1px solid var(--border, #e2e8f0);
background: transparent;
}
.explodir-tabs[hidden] { display: none; }
.explodir-tab {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid transparent;
border-bottom: none;
padding: 8px 16px;
font-size: 13px;
font-family: inherit;
font-weight: 500;
color: var(--text-muted, #64748b);
border-radius: 6px 6px 0 0;
cursor: pointer;
transition: color .12s ease, background .12s ease, border-color .12s ease;
margin-bottom: -1px; /* alinha com a borda do tabs */
}
.explodir-tab:hover {
color: var(--accent, #337ab7);
background: rgba(51, 122, 183, .06);
}
.explodir-tab:focus-visible {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 2px;
}
.explodir-tab.active {
color: var(--accent, #337ab7);
background: var(--surface, #fff);
border-color: var(--border, #e2e8f0);
border-bottom-color: var(--surface, #fff);
font-weight: 600;
}
/* Tabela "Por cliente" dentro do explodir-tabs */
.explodir-tabela-clientes {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.explodir-tabela-clientes th,
.explodir-tabela-clientes td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--border, #e2e8f0);
}
.explodir-tabela-clientes th {
background: var(--surface-2, #f8fafc);
font-weight: 600;
color: var(--text-muted, #64748b);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.explodir-tabela-clientes td.col-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.explodir-tabela-clientes tfoot td {
font-weight: 700;
background: var(--surface-2, #f8fafc);
border-top: 2px solid var(--border, #e2e8f0);
}
.explodir-modalidade-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 16px;
}
.explodir-mod-card {
padding: 16px;
border: 1px solid var(--border, #e2e8f0);
border-radius: 8px;
background: var(--surface, #fff);
}
.explodir-mod-card-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-muted, #64748b);
font-weight: 600;
margin-bottom: 6px;
}
.explodir-mod-card-value {
font-size: 22px;
font-weight: 700;
color: var(--accent, #337ab7);
}
.explodir-mod-prem .explodir-mod-card-label { color: #ec4899; }
.explodir-mod-std .explodir-mod-card-label { color: var(--text-muted, #64748b); }
/* UI#20 v4 — filtros maiores (~30%) + dropdown nativo pra colunas de domínio fixo */
.explodir-col-filter {
/* +30% no padding/font-size em relação ao v3 */
padding: 6px 9px;
font-size: 13px;
height: 30px;
line-height: 1.3;
}
.explodir-col-filter-select {
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, var(--text-muted, #64748b) 50%),
linear-gradient(135deg, var(--text-muted, #64748b) 50%, transparent 50%);
background-position:
calc(100% - 14px) 13px,
calc(100% - 9px) 13px;
background-size: 5px 5px;
background-repeat: no-repeat;
appearance: none;
-webkit-appearance: none;
padding-right: 24px;
}
.explodir-col-filter-select:focus {
background-image:
linear-gradient(45deg, var(--accent, #337ab7) 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, var(--accent, #337ab7) 50%);
}
/* UI#20 — Triggers explodir no card "Parceiros vinculados" (kpiV2) */
/* Número grande do KPI vira clicável quando tem data-explodir-key */
.kpi-card-v2 .kpi-value[data-explodir-key] {
cursor: pointer;
display: inline-block;
border-radius: 6px;
padding: 0 6px;
margin-left: -6px;
transition: background .12s ease;
position: relative;
}
.kpi-card-v2 .kpi-value[data-explodir-key]:hover {
background: rgba(51, 122, 183, .08);
}
.kpi-card-v2 .kpi-value[data-explodir-key]:focus-visible {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 1px;
}
.kpi-card-v2 .kpi-value[data-explodir-key].explodir-aberto {
background: rgba(51, 122, 183, .12);
}
.kpi-card-v2 .kpi-value[data-explodir-key]::after {
content: '▾';
font-size: 10px;
color: var(--text-muted, #64748b);
margin-left: 4px;
vertical-align: middle;
transition: transform .2s ease;
}
.kpi-card-v2 .kpi-value[data-explodir-key].explodir-aberto::after {
transform: rotate(180deg);
}
/* Pills PREMIUM/STANDARD clicáveis e número ao lado também */
.pill-explodivel,
.explodivel-num {
cursor: pointer;
border-radius: 4px;
padding: 2px 4px;
transition: background .12s ease, box-shadow .12s ease;
}
.pill-explodivel:hover,
.explodivel-num:hover {
background: rgba(51, 122, 183, .12);
}
.pill-explodivel:focus-visible,
.explodivel-num:focus-visible {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 1px;
}
.pill-explodivel.explodir-aberto,
.explodivel-num.explodir-aberto {
box-shadow: 0 0 0 2px var(--accent, #337ab7) inset;
}
/* Linha "+ N parceiros não vinculados" */
.explodivel-linha-nao-vinc {
cursor: pointer;
border-radius: 4px;
padding: 2px 6px;
transition: background .12s ease;
}
.explodivel-linha-nao-vinc:hover {
background: rgba(51, 122, 183, .08);
color: var(--accent, #337ab7) !important;
}
.explodivel-linha-nao-vinc:focus-visible {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 1px;
}
.explodivel-linha-nao-vinc.explodir-aberto {
background: rgba(51, 122, 183, .12);
color: var(--accent, #337ab7) !important;
}
.explodivel-linha-nao-vinc::after {
content: ' ▾';
font-size: 10px;
opacity: .6;
}
.explodivel-linha-nao-vinc.explodir-aberto::after {
content: ' ▴';
}
/* UI#22 — Seletor ano → mês no card "Resgate disponível" */
.anos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 8px;
padding: 8px 0;
border-top: 1px dashed var(--border, #e2e8f0);
margin-top: 6px;
}
.ano-pill {
appearance: none;
border: 1.5px solid var(--brand-pale, #e8f1f9);
background: var(--brand-pale, #e8f1f9);
color: var(--brand-dark, #285a87);
font-weight: 600;
font-size: 14px;
padding: 10px 0;
border-radius: 8px;
cursor: pointer;
transition: all .15s;
font-family: inherit;
position: relative;
text-align: center;
}
.ano-pill:hover {
border-color: var(--brand, #337ab7);
background: white;
box-shadow: 0 4px 12px -4px rgba(51, 122, 183, .3);
}
.ano-pill.ativo {
background: var(--brand, #337ab7);
color: white;
border-color: var(--brand, #337ab7);
box-shadow: 0 4px 12px -4px rgba(51, 122, 183, .5);
}
.ano-pill::before {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ok, #14b8a6);
box-shadow: 0 0 0 2px white;
}
.ano-pill.ativo::before { box-shadow: 0 0 0 2px var(--brand, #337ab7); }
.meses-vertical {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border, #e2e8f0);
}
.meses-vertical-label {
font-size: 11px;
color: var(--text-muted, #64748b);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 4px;
font-weight: 600;
}
.anos-vazio {
padding: 12px;
background: var(--brand-soft, #f4f9fc);
border: 1px dashed var(--border, #e2e8f0);
border-radius: 8px;
text-align: center;
font-size: 12px;
color: var(--text-muted, #64748b);
font-style: italic;
}
/* ========================================================================
UI#30 — Variante 5 (10/05/2026 noite — Lucas-Frontend + Júlia-UX)
Calendário heatmap multi-ano + painel de detalhe lateral.
Substitui visualmente a Variante B (dropdown ano + grid 4×3).
Cor da célula = intensidade do R$ disponível (l1..l4) — paleta verde
alinhada ao mockup canônico docs/mockups/UI-0030-v2.
Tokens: --brand-* / --ok / --border / --text-muted (DOC#9).
Regra dura: valor R$ DENTRO do chip (feedback_dono_prefere_informacoes_completas).
======================================================================== */
.resgate-heatmap {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 8px;
border-top: 1px dashed var(--border, #e2e8f0);
margin-top: 6px;
}
.resgate-heatmap-body {
display: grid;
/* Heatmap precisa de ~600px pra 12 cells caberem com label de mês.
Painel lateral fica fluido entre 220-280px. */
grid-template-columns: minmax(560px, 1fr) minmax(220px, 280px);
gap: 16px;
align-items: start;
}
/* ---- Grid principal: cabeçalho + N linhas de ano ---- */
.resgate-heatmap-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.rh-row {
display: grid;
/* UI#30 V5 ajuste 1 — colunas dos meses 65px mínimo (era 36px) pra comportar "9.999" sem vazar. */
grid-template-columns: 44px repeat(12, minmax(65px, 1fr));
gap: 4px;
align-items: center;
}
.rh-row-header .rh-col-mes-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
color: var(--text-muted, #64748b);
text-align: center;
padding-bottom: 2px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
.rh-col-ano-label {
font-size: 12px;
font-weight: 700;
color: var(--text-muted, #64748b);
letter-spacing: .04em;
text-align: right;
padding-right: 4px;
}
/* ---- Célula (chip do mês) ----
UI#30 V5 ajuste 1 (10/05/2026 noite): largura mínima 65px (era ~50px) pra
comportar valores truncados pt-BR como "9.999" sem vazar. fmtChip agora
trunca + separador pt-BR ao invés de arredondar/compactar com "k". */
.rh-cell {
appearance: none;
font-family: inherit;
background: rgba(0, 0, 0, 0.03);
border: 1px solid var(--border, #e2e8f0);
border-radius: 6px;
padding: 4px 2px;
min-height: 44px;
min-width: 65px; /* UI#30 V5 ajuste 1 — 65px pra "9.999" caber */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
color: var(--text-muted, #64748b);
/* Valor truncado pt-BR (fmtChip): "208" / "1.234" / "9.999" / "1,2M" */
font-size: 11px;
font-weight: 600;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
position: relative;
}
.rh-cell:hover:not(.zero) {
transform: scale(1.06);
box-shadow: 0 0 0 2px rgba(51, 122, 183, .35);
z-index: 2;
}
.rh-cell:focus-visible {
outline: 2px solid var(--brand, #337ab7);
outline-offset: 1px;
z-index: 2;
}
.rh-cell-valor {
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: center;
}
/* Escala heatmap (verde Tef.Net — alinhada ao --ok / --success) */
.rh-cell.zero {
background: var(--neutral-soft, #f4f5f7);
border-style: dashed;
cursor: default;
opacity: 0.7;
}
.rh-cell.zero .rh-cell-valor { color: var(--text-muted, #94a3b8); font-weight: 400; }
.rh-cell.l1 {
background: rgba(20, 184, 166, 0.18);
border-color: rgba(20, 184, 166, 0.25);
color: var(--text, #2d3748);
}
.rh-cell.l2 {
background: rgba(20, 184, 166, 0.35);
border-color: rgba(20, 184, 166, 0.45);
color: var(--text, #2d3748);
}
.rh-cell.l3 {
background: rgba(20, 184, 166, 0.58);
border-color: rgba(20, 184, 166, 0.65);
color: #0f3a35;
font-weight: 700;
}
.rh-cell.l4 {
background: rgba(20, 184, 166, 0.82);
border-color: rgba(20, 184, 166, 0.92);
color: #fff;
font-weight: 700;
}
.rh-cell.selected {
outline: 2px solid var(--brand, #337ab7);
outline-offset: 1px;
box-shadow: 0 4px 12px -4px rgba(51, 122, 183, .5);
z-index: 3;
}
/* F7-UI (Variante A — 12/05/2026) — Borda colorida + bolinha por status_resumo.
Substitui a borda 1px padrao do .rh-cell por borda 2px na cor do status.
Bolinha 8px no canto sup. direito reforca a comunicacao (colorblind-safe).
Convive com .selected (outline-brand fica POR FORA da borda — sem conflito). */
.rh-cell.rh-cell-status-nenhum { border: 2px solid var(--ag-status-resgate-nenhum, #ef4444); }
.rh-cell.rh-cell-status-em-andamento { border: 2px solid var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-cell.rh-cell-status-todos-pagos { border: 2px solid var(--ag-status-resgate-todos-pagos, #16a34a); }
.rh-cell.rh-cell-status-nenhum::after,
.rh-cell.rh-cell-status-em-andamento::after,
.rh-cell.rh-cell-status-todos-pagos::after {
content: '';
position: absolute;
top: 3px;
right: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 0 1.5px var(--surface, #fff);
pointer-events: none;
}
.rh-cell.rh-cell-status-nenhum::after { background: var(--ag-status-resgate-nenhum, #ef4444); }
.rh-cell.rh-cell-status-em-andamento::after { background: var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-cell.rh-cell-status-todos-pagos::after { background: var(--ag-status-resgate-todos-pagos, #16a34a); }
/* ---- Painel lateral de detalhe ---- */
.resgate-heatmap-detalhe {
background: var(--surface, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 10px;
padding: 14px 16px;
min-height: 220px;
display: flex;
flex-direction: column;
gap: 8px;
}
.rh-detalhe-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
color: var(--text-muted, #94a3b8);
font-size: 12.5px;
text-align: center;
gap: 8px;
}
.rh-detalhe-empty-ico {
font-size: 28px;
opacity: 0.5;
}
.rh-detalhe-empty p { margin: 0; line-height: 1.4; }
.rh-detalhe-card {
display: flex;
flex-direction: column;
gap: 6px;
}
.rh-detalhe-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted, #64748b);
font-weight: 600;
}
.rh-detalhe-mes {
font-size: 14px;
font-weight: 700;
color: var(--text, #2d3748);
margin-bottom: 2px;
}
.rh-detalhe-big {
font-size: 24px;
font-weight: 800;
color: var(--ok, #14b8a6);
letter-spacing: -.02em;
line-height: 1.1;
margin-bottom: 6px;
}
.rh-detalhe-row {
display: flex;
justify-content: space-between;
font-size: 12px;
padding: 6px 0;
border-top: 1px solid var(--border, #e2e8f0);
color: var(--text-muted, #64748b);
}
.rh-detalhe-row b {
color: var(--text, #2d3748);
font-weight: 600;
}
.rh-status-ok { color: var(--ok, #14b8a6) !important; }
.rh-status-warn { color: var(--warning-dark, #b97a23) !important; }
.rh-status-muted{ color: var(--text-muted, #94a3b8) !important; }
.rh-detalhe-action {
margin-top: 10px;
width: 100%;
font-size: 12.5px;
}
/* ---- Legenda ---- */
.resgate-heatmap-legend {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-muted, #64748b);
flex-wrap: wrap;
padding: 6px 2px 0;
}
.rh-leg-sw {
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid var(--border, #e2e8f0);
}
.rh-leg-sw.zero { background: var(--neutral-soft, #f4f5f7); border-style: dashed; }
.rh-leg-sw.l1 { background: rgba(20, 184, 166, 0.18); border-color: rgba(20, 184, 166, 0.30); }
.rh-leg-sw.l2 { background: rgba(20, 184, 166, 0.35); border-color: rgba(20, 184, 166, 0.45); }
.rh-leg-sw.l3 { background: rgba(20, 184, 166, 0.58); border-color: rgba(20, 184, 166, 0.65); }
.rh-leg-sw.l4 { background: rgba(20, 184, 166, 0.82); border-color: rgba(20, 184, 166, 0.92); }
.rh-leg-pico {
font-weight: 600;
color: var(--text, #2d3748);
}
/* ---- Legenda em 3 zonas (UI#30 V5 ajuste 3 — 10/05/2026 noite) ---------
Rodapé do heatmap distribui:
[zona esquerda: swatches "menos → mais"] | [zona centro: Total + Pico] | [zona direita: botão Limpar mês]
Mantém wrap em telas estreitas (mobile empilha cada zona).
----------------------------------------------------------------------- */
.resgate-heatmap-legend-3zone {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.rh-leg-zone {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.rh-leg-zone-left { flex: 0 0 auto; }
.rh-leg-zone-center {
flex: 1 1 auto;
justify-content: center;
gap: 8px;
font-weight: 600;
color: var(--text, #2d3748);
}
.rh-leg-zone-right { flex: 0 0 auto; }
.rh-leg-total {
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
}
.rh-leg-total-label {
font-weight: 600;
color: var(--text-muted, #64748b);
}
.rh-leg-total .resgate-total-valor {
font-size: 13px;
font-weight: 700;
color: var(--ok, #14b8a6);
}
.rh-leg-sep {
opacity: 0.5;
margin: 0 2px;
}
/* Dark mode mantém contraste — Total verde forte continua, label cinza claro. */
.page-dashboard-v2.glass-dark .rh-leg-zone-center { color: #e6ecff; }
.page-dashboard-v2.glass-dark .rh-leg-total-label { color: #9aa6c7; }
.page-dashboard-v2.glass-dark .rh-leg-total .resgate-total-valor { color: #6ee7b7; }
/* ---- F7-UI (12/05/2026 — Variante A) — Legenda nova "Status do resgate" -----
Bloco separado embaixo da legenda 3-zonas (intensidade R$). 4 chips:
nenhum / em_andamento / todos_pagos / sem_dado. Cada chip tem swatch
replicando o estilo do .rh-cell (borda 2px colorida + bolinha) pro operador
bater olho e entender o codigo visual sem precisar do tooltip.
Layout: flex centralizado, wrap em telas estreitas. */
.resgate-heatmap-legend-status {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
padding: 10px 14px;
background: var(--brand-soft, #f4f9fc);
border: 1px solid var(--brand-pale, #e8f1f9);
border-radius: 8px;
font-size: 12px;
}
.rh-leg-status-titulo {
font-size: 10px;
color: var(--text-muted, #64748b);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 700;
align-self: center;
margin-right: 4px;
}
.rh-leg-status-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 10px;
border-radius: 999px;
background: var(--surface, #fff);
border: 1px solid var(--border, #e2e8f0);
font-weight: 600;
color: var(--text, #2d3748);
}
.rh-leg-status-sample {
width: 18px;
height: 18px;
border-radius: 4px;
background: rgba(20, 184, 166, 0.35);
position: relative;
}
.rh-leg-status-sample.st-nenhum { border: 2px solid var(--ag-status-resgate-nenhum, #ef4444); }
.rh-leg-status-sample.st-em-andamento { border: 2px solid var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-leg-status-sample.st-todos-pagos { border: 2px solid var(--ag-status-resgate-todos-pagos, #16a34a); }
.rh-leg-status-sample.st-nenhum::after,
.rh-leg-status-sample.st-em-andamento::after,
.rh-leg-status-sample.st-todos-pagos::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--surface, #fff);
}
.rh-leg-status-sample.st-nenhum::after { background: var(--ag-status-resgate-nenhum, #ef4444); }
.rh-leg-status-sample.st-em-andamento::after { background: var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-leg-status-sample.st-todos-pagos::after { background: var(--ag-status-resgate-todos-pagos, #16a34a); }
.rh-leg-status-sample.st-sem-dado {
background: var(--neutral-soft, #f4f5f7);
border: 1px dashed var(--ag-status-resgate-sem-dado, #cbd5e1);
}
/* Pill colorida usada no painel detalhe lateral (renderDetalhe) e
defensivamente em outros pontos. */
.rh-detalhe-status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.rh-detalhe-status-pill::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
}
.rh-detalhe-status-pill.st-nenhum {
background: rgba(239, 68, 68, .12);
color: var(--ag-status-resgate-nenhum, #ef4444);
border: 1px solid rgba(239, 68, 68, .32);
}
.rh-detalhe-status-pill.st-nenhum::before { background: var(--ag-status-resgate-nenhum, #ef4444); }
.rh-detalhe-status-pill.st-em-andamento {
background: rgba(245, 158, 11, .12);
color: #b45309;
border: 1px solid rgba(245, 158, 11, .32);
}
.rh-detalhe-status-pill.st-em-andamento::before { background: var(--ag-status-resgate-em-andamento, #f59e0b); }
.rh-detalhe-status-pill.st-todos-pagos {
background: rgba(22, 163, 74, .12);
color: var(--ag-status-resgate-todos-pagos, #16a34a);
border: 1px solid rgba(22, 163, 74, .32);
}
.rh-detalhe-status-pill.st-todos-pagos::before { background: var(--ag-status-resgate-todos-pagos, #16a34a); }
/* ---- Responsivo ---- */
@media (max-width: 1024px) {
/* Painel detalhe vai pra baixo (empilha) em telas estreitas */
.resgate-heatmap-body {
grid-template-columns: 1fr;
}
}
/* UI#30 V5 rodada 2 — AJUSTE 1 (v0.7.45, 10/05/2026):
Responsivo mobile do heatmap. Layout column + scroll horizontal no grid +
painel detalhe full-width embaixo + legenda 3-zone empilhada. Testado
visualmente em iPhone SE (375px) e mantém grid 12-col com scroll. */
@media (max-width: 768px) {
/* Body vira coluna — painel detalhe fica embaixo do grid (já era assim no 1024 mas reforça). */
.resgate-heatmap-body {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Grid principal ganha scroll horizontal — 12 cells continuam, basta arrastar.
Min-width garante que cells não comprimem demais. */
.resgate-heatmap-grid {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Padding-bottom dá respiro pra scrollbar nativa de mobile */
padding-bottom: 4px;
}
/* Cell reduzida pra 50px — cabe + chips no viewport sem comprimir valor pt-BR. */
.rh-row {
grid-template-columns: 40px repeat(12, minmax(50px, 1fr));
gap: 3px;
}
.rh-cell {
font-size: 10px;
min-width: 50px;
min-height: 36px;
padding: 3px 1px;
}
.rh-col-ano-label { font-size: 10px; padding-right: 2px; }
.rh-row-header .rh-col-mes-label { font-size: 8px; }
/* Painel detalhe vai full-width embaixo */
.resgate-heatmap-detalhe {
width: 100%;
min-height: auto;
}
/* Legenda 3 zonas vira coluna — empilha menos→mais / total+pico / limpar mês */
.resgate-heatmap-legend-3zone {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.rh-leg-zone {
justify-content: center;
}
.rh-leg-zone-right {
justify-content: center;
}
}
@media (max-width: 720px) {
/* Fallback antigo (mantido pra não quebrar layout em testes existentes) */
.rh-col-ano-label { font-size: 10px; padding-right: 2px; }
.rh-row-header .rh-col-mes-label { font-size: 8px; }
}
/* ---- Dark mode (DOC#9 .glass-dark) ---- */
.page-dashboard-v2.glass-dark .resgate-heatmap-detalhe {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.10);
}
.page-dashboard-v2.glass-dark .rh-col-ano-label,
.page-dashboard-v2.glass-dark .rh-row-header .rh-col-mes-label,
.page-dashboard-v2.glass-dark .rh-detalhe-title,
.page-dashboard-v2.glass-dark .rh-detalhe-row { color: #9aa6c7; }
.page-dashboard-v2.glass-dark .rh-cell {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.10);
color: #c2cce0;
}
.page-dashboard-v2.glass-dark .rh-cell.zero { background: rgba(255,255,255,0.02); }
.page-dashboard-v2.glass-dark .rh-cell.l1 { background: rgba(34,197,94,0.18); color: #c2cce0; }
.page-dashboard-v2.glass-dark .rh-cell.l2 { background: rgba(34,197,94,0.35); color: #e6ecff; }
.page-dashboard-v2.glass-dark .rh-cell.l3 { background: rgba(34,197,94,0.55); color: #fff; }
.page-dashboard-v2.glass-dark .rh-cell.l4 { background: rgba(34,197,94,0.78); color: #fff; }
.page-dashboard-v2.glass-dark .rh-detalhe-mes,
.page-dashboard-v2.glass-dark .rh-detalhe-row b { color: #e6ecff; }
.page-dashboard-v2.glass-dark .rh-detalhe-big { color: #6ee7b7; }
.page-dashboard-v2.glass-dark .rh-leg-pico { color: #e6ecff; }
/* ========================================================================
UI#30 V5 rodada 2 — info-tooltip glass (v0.7.45, 10/05/2026)
Tooltip custom genérico (chip do heatmap, X/Y do painel detalhe, etc.).
Coexiste com .help-tooltip (UI#29) — singletons separados no DOM.
Visual idêntico ao help-tooltip (glass Banking DOC#9, paleta brand).
======================================================================== */
.info-tooltip {
position: fixed;
background: rgba(20, 30, 50, 0.92);
color: #e8ecf3;
padding: 10px 14px;
border-radius: 8px;
border: 1px solid rgba(51, 122, 183, 0.35);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: 12.5px;
line-height: 1.4;
max-width: 260px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
z-index: 10000;
opacity: 0;
transform: translateY(-4px);
transition: opacity 150ms ease, transform 150ms ease;
pointer-events: none;
/* Default position antes do JS posicionar — fica fora da tela */
top: -9999px;
left: -9999px;
}
.info-tooltip[data-open] {
opacity: 1;
transform: translateY(0);
pointer-events: none;
}
.info-tooltip-body {
font-size: 12.5px;
color: #e8ecf3;
}
.info-tooltip-body strong {
display: block;
font-weight: 700;
color: #64b5f6; /* accent — alinhado ao .help-tooltip-title */
font-size: 13px;
margin-bottom: 4px;
}
.info-tooltip-body div {
margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
.info-tooltip {
transition: opacity 0s !important;
transform: none !important;
}
}
/* ========================================================================
UI#30 V5 rodada 2 — seletor-comp UNIFICADO (v0.7.45, 10/05/2026)
AJUSTE 5: dropdown competência movido pra dentro do bloco "Resgate
disponível". Layout column full-width — header + actions row + chips +
heatmap + legenda. Substitui seletor-comp-grid-2col que partia em colunas.
======================================================================== */
.seletor-comp-unified {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px;
}
.seletor-comp-unified .comp-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.seletor-comp-unified .comp-titulo {
font-size: 15px;
font-weight: 700;
color: var(--text, #2d3748);
margin: 0;
letter-spacing: -0.01em;
}
.seletor-comp-unified .comp-subtitulo {
font-size: 12px;
color: var(--text-muted, #64748b);
font-weight: 400;
}
.seletor-comp-unified .comp-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.seletor-comp-unified .comp-actions .comp-dropdown {
position: relative;
flex: 0 0 auto;
}
.seletor-comp-unified .comp-meta {
font-size: 12px;
color: var(--text-muted, #64748b);
}
.seletor-comp-unified .comp-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 24px;
}
/* Mobile: header/actions empilham natural */
@media (max-width: 768px) {
.seletor-comp-unified {
padding: 14px 14px;
}
.seletor-comp-unified .comp-actions {
flex-direction: column;
align-items: stretch;
}
.seletor-comp-unified .comp-meta {
text-align: center;
}
}
/* ========================================================================
UI#23 — Conta da Competência + Histórico (09/05/2026)
Componente conta-da-competencia.js + bloco histórico no dashboard.
Tokens: usa --brand-* / --success / --warning / --danger / --border (DOC#9 v8).
======================================================================== */
/* Toolbar do bloco Conta */
.conta-toolbar {
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e9f0);
border-radius: 10px;
padding: 12px 16px;
margin: 16px 0 12px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.conta-toolbar-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.conta-toolbar-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-soft, #9aa3b2);
font-weight: 500;
}
.conta-toolbar-value {
font-size: 13px;
font-weight: 600;
color: var(--text, #2d3748);
}
.conta-toolbar-value.brand {
color: var(--brand, #337ab7);
font-size: 15px;
}
.conta-toolbar-divider {
width: 1px;
height: 32px;
background: var(--border, #e5e9f0);
}
.conta-toolbar-spacer { flex: 1; }
.badge-multi {
display: inline-block;
padding: 1px 7px;
border-radius: 999px;
background: var(--warning-soft, #fff8e1);
color: var(--warning-dark, #b97a23);
font-size: 9px;
font-weight: 700;
margin-left: 6px;
letter-spacing: .04em;
}
/* Toggle Tudo/Premium/Standard (E-08) */
.modalidade-toggle {
display: inline-flex;
gap: 2px;
background: var(--neutral-soft, #f1f3f5);
padding: 3px;
border-radius: 6px;
}
.modalidade-toggle button {
background: transparent;
border: 0;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
color: var(--text-muted, #6b7280);
font-weight: 500;
transition: all .12s;
}
.modalidade-toggle button.active {
background: var(--surface, #fff);
color: var(--brand, #337ab7);
box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.modalidade-toggle button:not(.active):hover { color: var(--text, #2d3748); }
.btn-reapurar {
border: 1px solid var(--brand, #337ab7);
color: var(--brand, #337ab7);
background: var(--brand-soft, #e8f1fb);
}
.btn-reapurar:hover {
background: var(--brand, #337ab7);
color: #fff;
}
/* UI#23 Onda 5 — Botão Fechar competência + estados */
.btn-fechar {
border: 1px solid var(--success, #5cb85c);
color: var(--success-dark, #3d8b3d);
background: var(--success-soft, #e8f5e9);
}
.btn-fechar:hover {
background: var(--success, #5cb85c);
color: #fff;
}
.badge-fechada {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: 6px;
background: var(--success-soft, #e8f5e9);
color: var(--success-dark, #3d8b3d);
font-size: 12px;
font-weight: 600;
border: 1px solid #c5e6c5;
cursor: help;
}
.badge-aguarda-apurar {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: 6px;
background: var(--neutral-soft, #f1f3f5);
color: var(--text-muted, #6b7280);
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border, #e5e9f0);
font-style: italic;
cursor: help;
}
/* Banner info de reapuração auto */
.conta-banner-info {
background: var(--info-soft, #e3f4fb);
border: 1px solid #bee5f0;
color: #1e6585;
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
}
.conta-banner-info i {
font-size: 18px;
color: var(--info, #5bc0de);
}
/* Bloco principal */
.bloco-conta-host { /* container */ }
.bloco-conta-skel {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 16px 0;
}
.conta-bloco {
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e9f0);
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.bloco-titulo-info { color: var(--brand-dark, #286090); }
.conta-group-sub {
margin: 8px 0 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-soft, #9aa3b2);
font-weight: 500;
padding: 4px 0;
border-bottom: 1px dashed var(--border, #e5e9f0);
}
.conta-group-sub:first-child { margin-top: 0; }
/* Grid de cards — 4 colunas em desktop, 2 em tablet, 1 em mobile */
.conta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 8px;
}
@media (max-width: 1100px) {
.conta-grid { grid-template-columns: repeat(2, 1fr); }
.bloco-conta-skel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.conta-grid { grid-template-columns: 1fr; }
.bloco-conta-skel { grid-template-columns: 1fr; }
}
/* Card individual */
.ind-card {
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e9f0);
border-radius: 6px;
padding: 12px 14px;
transition: all .12s;
position: relative;
}
.ind-card-split {
cursor: pointer;
background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}
.ind-card-split:hover {
border-color: var(--brand, #337ab7);
background: var(--brand-soft, #e8f1fb);
}
.ind-card-split:focus-visible {
outline: 2px solid var(--brand, #337ab7);
outline-offset: 2px;
}
.ind-card-split.expanded {
border-color: var(--brand, #337ab7);
background: var(--brand-soft, #e8f1fb);
box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
.ind-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted, #6b7280);
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.ind-value {
font-family: "SF Mono", "Menlo", monospace;
font-size: 17px;
font-weight: 700;
color: var(--text, #2d3748);
margin: 4px 0 0;
}
.ind-value-muted { color: var(--text-soft, #9aa3b2); font-weight: 600; }
.ind-value-success { color: var(--success-dark, #3d8b3d); }
.ind-value-warn { color: var(--warning-dark, #b97a23); }
.ind-value-alert { color: var(--danger, #d9534f); }
.ind-sub {
font-size: 11px;
color: var(--text-soft, #9aa3b2);
margin-top: 2px;
}
/* FIX B-UX (10/05/2026 noite — Lucas-Frontend): dica inline no card KPI
"Vr. à Resgatar". Aparece quando há valor disponível mas o ciclo ainda
não está fechado (apurada/null). Explica por que o botão Solicitar
Resgate fica desabilitado. */
.kpi-dica {
font-size: 0.78rem;
color: var(--warn, #d97706);
margin-top: 4px;
font-weight: 500;
background: rgba(240, 185, 78, 0.08);
padding: 4px 8px;
border-radius: 4px;
border-left: 2px solid var(--warn, #d97706);
}
/* Breakdown Premium/Standard (E-08) */
.ind-breakdown {
display: none;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--border, #e5e9f0);
font-size: 11px;
}
.ind-card-split.expanded .ind-breakdown { display: block; }
.ind-bp {
display: flex;
justify-content: space-between;
padding: 1px 0;
font-family: "SF Mono", "Menlo", monospace;
}
.ind-bp-prem { color: #8b5cf6; font-weight: 600; }
.ind-bp-std { color: var(--brand, #337ab7); font-weight: 600; }
.ind-arrow {
position: absolute;
right: 10px;
top: 12px;
font-size: 9px;
color: var(--text-soft, #9aa3b2);
transition: transform .15s;
}
.ind-card-split.expanded .ind-arrow {
transform: rotate(180deg);
color: var(--brand, #337ab7);
}
/* Filtro Premium/Standard via classe no .conta-bloco (E-08) */
.conta-bloco.mod-premium .ind-bp-std,
.conta-bloco.mod-premium .ind-bp:has(.ind-bp-std) { opacity: .35; }
.conta-bloco.mod-standard .ind-bp-prem,
.conta-bloco.mod-standard .ind-bp:has(.ind-bp-prem) { opacity: .35; }
.conta-bloco.mod-premium .ind-card-split:not(.expanded) .ind-value::after {
content: ' (Premium)';
font-size: 10px;
color: #8b5cf6;
font-weight: 500;
}
.conta-bloco.mod-standard .ind-card-split:not(.expanded) .ind-value::after {
content: ' (Standard)';
font-size: 10px;
color: var(--brand, #337ab7);
font-weight: 500;
}
/* Negativos (vermelho — paridade conta.php) */
.conta-negativos {
background: var(--danger-soft, #fde8e7);
border: 1px solid #f5c2bf;
border-radius: 6px;
padding: 12px 14px;
margin: 12px 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.conta-negativos .ind-card {
background: transparent;
border: 0;
padding: 0;
}
.conta-negativos .ind-card:hover { background: transparent; }
.conta-negativos .ind-label { color: #8a2c28; }
.conta-negativos .ind-value { color: #8a2c28; }
@media (max-width: 800px) {
.conta-negativos { grid-template-columns: 1fr; }
}
/* Stats extras (E-10) */
.conta-stats-extra {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
gap: 12px;
margin-top: 14px;
}
@media (max-width: 1100px) {
.conta-stats-extra { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.conta-stats-extra { grid-template-columns: 1fr; }
}
.stat-pill {
background: var(--neutral-soft, #f1f3f5);
border-radius: 6px;
padding: 10px 12px;
}
.stat-pill.stat-pp {
background: linear-gradient(135deg, var(--brand-soft, #e8f1fb), #f0f6fc);
}
.stat-pill-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted, #6b7280);
font-weight: 500;
}
.stat-pill-value {
font-size: 18px;
font-weight: 700;
color: var(--text, #2d3748);
margin-top: 2px;
}
.stat-pill-value.success { color: var(--success-dark, #3d8b3d); }
.stat-pill-value.warn { color: var(--warning-dark, #b97a23); }
.stat-pill-value.alert { color: var(--danger, #d9534f); }
.barra-pgs {
background: var(--surface, #fff);
border-radius: 6px;
padding: 10px 14px;
border: 1px solid var(--border, #e5e9f0);
}
.barra-pgs-label {
font-size: 11px;
color: var(--text-muted, #6b7280);
margin-bottom: 6px;
}
.barra-stack {
display: flex;
height: 18px;
border-radius: 4px;
overflow: hidden;
background: var(--neutral-soft, #f1f3f5);
}
.barra-pgs-fill { background: var(--success, #5cb85c); }
.barra-npg-fill { background: var(--warning, #f0ad4e); }
.barra-canc-fill { background: var(--danger, #d9534f); }
.barra-pgs-leg {
display: flex;
gap: 12px;
margin-top: 6px;
font-size: 11px;
color: var(--text-muted, #6b7280);
flex-wrap: wrap;
}
.barra-pgs-leg span::before { content: "■ "; }
.barra-pgs-leg .lg-pgs { color: var(--success-dark, #3d8b3d); }
.barra-pgs-leg .lg-npg { color: var(--warning-dark, #b97a23); }
.barra-pgs-leg .lg-canc { color: var(--danger, #d9534f); }
/* CTA contextual de Resgatar (E-07: 2º botão dentro do bloco Conta) */
.conta-cta-resgate {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
padding: 14px 16px;
background: linear-gradient(135deg, var(--success-soft, #e8f5e9), #f0fbef);
border: 1px solid #c5e6c5;
border-radius: 6px;
flex-wrap: wrap;
gap: 12px;
}
.conta-cta-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.conta-cta-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--success-dark, #3d8b3d);
font-weight: 500;
}
.conta-cta-valor {
font-size: 22px;
font-weight: 700;
color: var(--success-dark, #3d8b3d);
font-family: "SF Mono", "Menlo", monospace;
}
.btn-resgatar-conta {
white-space: nowrap;
}
/* Help footer */
.conta-help-foot {
font-size: 11px;
color: var(--text-soft, #9aa3b2);
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border, #e5e9f0);
}
.conta-help-foot strong { color: var(--text-muted, #6b7280); }
.conta-help-foot code {
background: var(--neutral-soft, #f1f3f5);
padding: 1px 5px;
border-radius: 3px;
font-size: 10px;
color: var(--text, #2d3748);
}
/* ========================================================================
Histórico (sparkline + YTD + delta) — UI#23
======================================================================== */
.bloco-historico-host { /* container */ }
.hist-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
margin-top: 8px;
}
@media (max-width: 900px) {
.hist-grid { grid-template-columns: 1fr; }
}
.hist-card {
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e9f0);
border-radius: 10px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.hist-card-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted, #6b7280);
font-weight: 500;
margin-bottom: 8px;
}
.hist-card-value {
font-size: 22px;
font-weight: 700;
color: var(--text, #2d3748);
font-family: "SF Mono", "Menlo", monospace;
}
.hist-card-value.brand { color: var(--brand-dark, #286090); }
.hist-card-meta {
font-size: 11px;
color: var(--text-soft, #9aa3b2);
margin-top: 4px;
}
.hist-spark { /* primeira coluna 2x */ }
.hist-spark-bars {
display: flex;
align-items: end;
gap: 4px;
height: 60px;
margin-top: 8px;
}
.hist-spark-bars .spark-bar,
.hist-spark-bars .spark-bar-atual,
.hist-spark-bars .spark-bar-min {
flex: 1;
border-radius: 2px 2px 0 0;
transition: opacity .12s;
cursor: help;
min-height: 4px;
}
.hist-spark-bars .spark-bar { background: var(--brand, #337ab7); opacity: .85; }
.hist-spark-bars .spark-bar:hover { opacity: 1; }
.hist-spark-bars .spark-bar-atual {
background: var(--success, #5cb85c);
}
.hist-spark-bars .spark-bar-min {
background: var(--brand-soft, #e8f1fb);
border: 1px solid var(--brand, #337ab7);
}
.hist-spark-meses {
display: flex;
gap: 4px;
margin-top: 4px;
font-size: 10px;
color: var(--text-soft, #9aa3b2);
text-transform: uppercase;
}
.hist-spark-meses span {
flex: 1;
text-align: center;
}
.hist-spark-meses span.atual {
color: var(--success-dark, #3d8b3d);
font-weight: 600;
}
.hist-delta-up { color: var(--success-dark, #3d8b3d); }
.hist-delta-down { color: var(--danger, #d9534f); }
.hist-delta-neutral { color: var(--text-muted, #6b7280); }
/* =================================================================
AUTH#3 Opção C — Gestão de Dev: Cron Manual + Backup & Rollback
v0.7.33 (10/05/2026 tarde)
================================================================= */
.page-tabs-host { margin-bottom: 16px; }
.page-tabs-content { min-height: 300px; }
.dev-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.dev-info-card,
.dev-action-card {
background: var(--surface-1, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 8px;
padding: 16px 20px;
}
.dev-info-title,
.dev-action-title {
margin: 0 0 12px;
font-size: 16px;
font-weight: 600;
color: var(--text, #111827);
}
.dev-info-list {
margin: 0 0 12px;
padding-left: 20px;
font-size: 14px;
line-height: 1.7;
color: var(--text-muted, #4b5563);
}
.dev-info-list code {
background: var(--surface-2, #f3f4f6);
padding: 1px 6px;
border-radius: 3px;
font-size: 12px;
}
.dev-info-hint,
.dev-action-hint {
margin: 8px 0;
color: var(--text-muted, #6b7280);
font-size: 13px;
}
.dev-action-hint code {
background: var(--surface-2, #f3f4f6);
padding: 1px 6px;
border-radius: 3px;
font-size: 12px;
}
.dev-code-block {
background: var(--surface-2, #1f2937);
color: var(--text-on-dark, #e5e7eb);
padding: 12px 14px;
border-radius: 6px;
font-size: 12.5px;
overflow-x: auto;
margin: 8px 0 0;
}
.dev-code-block code { color: inherit; background: none; padding: 0; }
.dev-card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.dev-form-row {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0;
flex-wrap: wrap;
}
.dev-form-row label { font-size: 13px; color: var(--text-muted, #4b5563); min-width: 0; }
.dev-input,
.dev-select {
padding: 6px 10px;
border: 1px solid var(--border, #d1d5db);
border-radius: 4px;
font-size: 13px;
background: var(--surface-1, #fff);
color: var(--text, #111827);
}
.dev-input:focus,
.dev-select:focus {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 1px;
}
.dev-badge-pending {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(245, 158, 11, 0.15);
color: #b45309;
border: 1px solid rgba(245, 158, 11, 0.4);
border-radius: 10px;
vertical-align: middle;
}
/* FIX C (10/05/2026 noite — Lucas-Frontend): cron manual — picker ano+mês
substitui input "AAAA-MM" + caixa explicativa substitui badge "Aguarda AUTH#3". */
.dev-comp-picker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.dev-comp-picker .dev-select { min-width: 110px; }
.dev-comp-preview {
font-size: 12.5px;
color: var(--text-muted, #6b7280);
}
.dev-comp-preview code {
background: var(--surface-2, #f3f4f6);
padding: 1px 6px;
border-radius: 3px;
font-size: 12px;
color: var(--accent, #337ab7);
font-weight: 600;
}
.dev-cli-hint {
margin-top: 12px;
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.3);
border-left: 3px solid var(--warn, #f59e0b);
border-radius: 6px;
padding: 10px 14px;
}
.dev-cli-hint-title {
font-size: 13px;
font-weight: 500;
color: var(--text, #111827);
margin-bottom: 8px;
}
.dev-cli-hint-body {
font-size: 13px;
color: var(--text-muted, #4b5563);
}
.dev-cli-cmd {
background: #1f2937;
color: #e5e7eb;
padding: 10px 12px;
border-radius: 4px;
font-size: 12.5px;
overflow-x: auto;
margin: 6px 0 8px;
white-space: pre;
}
.dev-cli-cmd code { color: inherit; background: none; padding: 0; }
.btn.btn-sm {
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
}
/* Tabela de backups */
.dev-backup-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.dev-backup-table th,
.dev-backup-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border, #e5e7eb);
text-align: left;
}
.dev-backup-table th {
font-weight: 600;
color: var(--text-muted, #4b5563);
background: var(--surface-2, #f9fafb);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dev-backup-table code {
font-size: 12px;
background: var(--surface-2, #f3f4f6);
padding: 1px 6px;
border-radius: 3px;
}
/* Diagnóstico de Rollback — 3 cards lado a lado */
.dev-diag-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
margin-top: 8px;
}
.dev-diag-card {
background: var(--surface-2, #f9fafb);
border: 1px solid var(--border, #e5e7eb);
border-left-width: 4px;
border-radius: 6px;
padding: 12px 14px;
}
.dev-diag-card h4 {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--text, #111827);
}
.dev-diag-card.dev-diag-a { border-left-color: #10b981; }
.dev-diag-card.dev-diag-b { border-left-color: #f59e0b; }
.dev-diag-card.dev-diag-c { border-left-color: #ef4444; }
.dev-diag-stat {
font-size: 13px;
color: var(--text, #111827);
margin: 4px 0;
}
.dev-diag-stat strong {
font-size: 15px;
color: var(--accent, #337ab7);
}
.dev-diag-meta {
font-size: 11.5px;
color: var(--text-muted, #6b7280);
margin-top: 6px;
word-break: break-word;
}
.dev-diag-meta code {
background: var(--surface-1, #fff);
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
}
/* Botões de Rollback (todos disabled enquanto AUTH#3 não aprovar) */
.dev-rollback-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 8px 0 12px;
}
.btn-rb-a:not(:disabled) { color: #047857; border-color: rgba(16, 185, 129, 0.4); }
.btn-rb-b:not(:disabled) { color: #b45309; border-color: rgba(245, 158, 11, 0.4); }
.btn-rb-c:not(:disabled) { color: #b91c1c; border-color: rgba(239, 68, 68, 0.4); }
.dev-warn-card {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
border-left: 4px solid #f59e0b;
border-radius: 6px;
padding: 10px 14px;
font-size: 13px;
color: var(--text, #111827);
line-height: 1.55;
}
/* =================================================================
UI#33 — Editor de Diretrizes NF (Gestão Dev → aba Diretrizes NF)
v0.7.48 (10/05/2026 madrugada virada 2)
================================================================= */
.diretrizes-nf-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.diretrizes-nf-status {
font-size: 12.5px;
color: var(--text-muted, #6b7280);
font-style: italic;
}
.diretrizes-nf-status-dirty {
color: #b45309;
font-weight: 600;
font-style: normal;
}
.diretrizes-nf-editor-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: stretch;
}
@media (max-width: 900px) {
.diretrizes-nf-editor-cols {
grid-template-columns: 1fr;
}
}
.diretrizes-nf-col {
display: flex;
flex-direction: column;
min-width: 0; /* permite shrink em grid */
}
.diretrizes-nf-col-title {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted, #6b7280);
margin-bottom: 6px;
}
.diretrizes-nf-textarea {
width: 100%;
min-height: 500px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 13px;
line-height: 1.55;
padding: 12px 14px;
border: 1px solid var(--border, #d1d5db);
border-radius: 6px;
background: var(--surface-1, #fff);
color: var(--text, #111827);
resize: vertical;
box-sizing: border-box;
tab-size: 2;
}
.diretrizes-nf-textarea:focus {
outline: 2px solid var(--accent, #337ab7);
outline-offset: 1px;
border-color: var(--accent, #337ab7);
}
.diretrizes-nf-charcount {
margin-top: 6px;
font-size: 11.5px;
text-align: right;
}
.diretrizes-nf-charcount-over {
color: var(--danger, #d9534f);
font-weight: 700;
}
.diretrizes-nf-preview {
min-height: 500px;
padding: 12px 16px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
background: var(--surface-2, #f9fafb);
color: var(--text, #111827);
font-size: 14px;
line-height: 1.6;
overflow-y: auto;
box-sizing: border-box;
}
.diretrizes-nf-preview h1,
.diretrizes-nf-preview h2,
.diretrizes-nf-preview h3 {
margin: 14px 0 8px;
font-weight: 600;
color: var(--text, #111827);
}
.diretrizes-nf-preview h1 { font-size: 20px; border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 6px; }
.diretrizes-nf-preview h2 { font-size: 16px; }
.diretrizes-nf-preview h3 { font-size: 14px; color: var(--text-muted, #4b5563); }
.diretrizes-nf-preview h1:first-child,
.diretrizes-nf-preview h2:first-child,
.diretrizes-nf-preview h3:first-child { margin-top: 0; }
.diretrizes-nf-preview p { margin: 8px 0; }
.diretrizes-nf-preview ul {
margin: 8px 0;
padding-left: 22px;
}
.diretrizes-nf-preview li { margin: 3px 0; }
.diretrizes-nf-preview blockquote {
margin: 10px 0;
padding: 8px 14px;
border-left: 3px solid var(--accent, #337ab7);
background: rgba(51, 122, 183, 0.06);
color: var(--text, #111827);
font-style: italic;
border-radius: 0 4px 4px 0;
}
.diretrizes-nf-preview code {
background: var(--surface-1, #fff);
border: 1px solid var(--border, #e5e7eb);
padding: 1px 6px;
border-radius: 3px;
font-size: 12px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.diretrizes-nf-preview strong { font-weight: 700; }
/* ============================================================================
RES#2 Sprint B — Bandeja de Resgates (workflow Tef.Net aprovar/reprovar)
Tokens DOC#9: --warn / --rejected / --ok / --accent / --border / --surface-*
============================================================================ */
.bandeja-resgates-card .dev-card-header { align-items: center; }
.bandeja-resgates-toolbar {
display: flex;
align-items: center;
gap: 8px;
}
.bandeja-resgates-contador {
margin-bottom: 12px;
font-size: 13px;
color: var(--text-muted, #6b7280);
}
.bandeja-resgates-contador strong {
color: var(--text, #111827);
font-size: 15px;
}
.bandeja-resgates-table {
width: 100%;
border-collapse: collapse;
}
.bandeja-resgates-table thead th {
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--text-muted, #6b7280);
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 10px 12px;
border-bottom: 1px solid var(--border, #e5e7eb);
background: var(--surface-2, #f9fafb);
}
.bandeja-resgates-table tbody td {
padding: 12px;
border-bottom: 1px solid var(--border, #e5e7eb);
vertical-align: middle;
font-size: 13px;
}
.bandeja-resgates-table tbody tr:hover {
background: var(--surface-2, #f9fafb);
}
.bandeja-parceiro-nome {
font-weight: 500;
color: var(--text, #111827);
/* máximo de 2 linhas, com elipse */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 280px;
}
.bandeja-resgates-table .btn-success {
background: rgba(34, 197, 94, 0.1);
color: var(--ok, #22c55e);
border-color: rgba(34, 197, 94, 0.35);
margin-right: 4px;
}
.bandeja-resgates-table .btn-success:hover:not(:disabled) {
background: rgba(34, 197, 94, 0.2);
}
.bandeja-resgates-table .btn-danger {
background: rgba(239, 68, 68, 0.1);
color: var(--rejected, #d9534f);
border-color: rgba(239, 68, 68, 0.35);
}
.bandeja-resgates-table .btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.2);
}
.bandeja-resgates-table .btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.diretrizes-nf-preview em { font-style: italic; }
/* ============================================================================
RES#2 Sprint C — Modal "Solicitar Resgate" (solicitar-resgate-modal.js)
Tokens DOC#9: --accent / --ok / --rejected / --warn / --border / --surface-*
Layout vertical em sections; uploads em drop-zone visual.
============================================================================ */
.srm-body { display: flex; flex-direction: column; gap: 18px; }
.srm-cabecalho {
display: flex; gap: 24px; flex-wrap: wrap;
padding: 12px 14px;
background: var(--surface-2, #f9fafb);
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
}
.srm-resumo { display: flex; flex-direction: column; }
.srm-resumo-label { font-size: 11px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.4px; }
.srm-resumo-valor { font-size: 15px; color: var(--text, #111827); margin-top: 2px; }
.srm-valor-destaque { color: var(--ok, #22c55e); font-size: 18px; }
.srm-section {
padding: 0;
}
.srm-section-titulo {
font-size: 14px; font-weight: 600; color: var(--text, #111827);
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
}
.srm-section-hint { font-size: 12px; color: var(--text-muted, #6b7280); margin: 0 0 8px 0; }
.srm-required {
font-size: 10px; color: var(--rejected, #d9534f);
background: rgba(239, 68, 68, 0.1);
padding: 2px 8px; border-radius: 10px; font-weight: 500; text-transform: uppercase;
letter-spacing: 0.3px;
}
.srm-optional {
font-size: 10px; color: var(--text-muted, #6b7280);
background: var(--surface-2, #f9fafb); border: 1px solid var(--border, #e5e7eb);
padding: 2px 8px; border-radius: 10px; font-weight: 500; text-transform: uppercase;
letter-spacing: 0.3px;
}
/* --- Diretrizes (Markdown) --- */
.srm-diretrizes-wrap {
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
background: rgba(51, 122, 183, 0.04);
}
.srm-diretrizes-wrap .srm-section-titulo {
padding: 10px 12px;
border-bottom: 1px solid var(--border, #e5e7eb);
margin: 0;
}
.srm-diretrizes-status { font-size: 11px; color: var(--text-muted, #6b7280); font-weight: 400; text-transform: none; letter-spacing: 0; }
.srm-diretrizes {
padding: 8px 14px;
max-height: 200px; overflow-y: auto;
font-size: 13px;
line-height: 1.55;
color: var(--text, #111827);
}
.srm-diretrizes h1, .srm-diretrizes h2, .srm-diretrizes h3 {
margin: 10px 0 6px 0; color: var(--accent, #337ab7);
}
.srm-diretrizes h1 { font-size: 16px; }
.srm-diretrizes h2 { font-size: 15px; }
.srm-diretrizes h3 { font-size: 14px; }
.srm-diretrizes p { margin: 6px 0; }
.srm-diretrizes ul { margin: 6px 0; padding-left: 22px; }
.srm-diretrizes li { margin: 2px 0; }
.srm-diretrizes blockquote {
margin: 8px 0; padding: 6px 12px;
border-left: 3px solid var(--accent, #337ab7);
background: rgba(51, 122, 183, 0.07);
border-radius: 0 4px 4px 0;
font-style: italic;
}
.srm-diretrizes code {
background: var(--surface-1, #fff); border: 1px solid var(--border, #e5e7eb);
padding: 1px 5px; border-radius: 3px; font-size: 12px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.srm-diretrizes strong { font-weight: 700; }
.srm-diretrizes em { font-style: italic; }
/* --- Radio group (forma de pagamento) --- */
.srm-radio-group {
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
padding: 4px 0;
display: flex; flex-direction: column;
margin: 0;
}
.srm-radio {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid var(--border, #e5e7eb);
}
.srm-radio:last-child { border-bottom: none; }
.srm-radio:hover { background: var(--surface-2, #f9fafb); }
.srm-radio input[type="radio"] { margin: 0; cursor: pointer; }
.srm-radio-text { font-size: 13px; color: var(--text, #111827); line-height: 1.4; }
.srm-radio-text strong { color: var(--accent, #337ab7); }
.srm-radio-mark {
/* placeholder pra customização futura; hoje usa o radio nativo */
display: none;
}
/* --- Upload (drop-zone visual) --- */
.srm-upload-wrap {
border: 1.5px dashed var(--border, #e5e7eb);
border-radius: 6px;
padding: 10px;
text-align: center;
background: rgba(51, 122, 183, 0.02);
transition: border-color 0.15s, background 0.15s;
}
.srm-upload-wrap:hover { border-color: var(--accent, #337ab7); background: rgba(51, 122, 183, 0.05); }
.srm-upload-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--accent, #337ab7); color: #fff;
border-radius: 5px;
cursor: pointer; font-size: 13px; font-weight: 500;
border: none;
transition: background 0.15s;
}
.srm-upload-trigger:hover { background: #2a6396; }
.srm-upload-icon { font-size: 14px; }
.srm-upload-preview { margin-top: 10px; min-height: 0; }
.srm-upload-preview:empty { margin-top: 0; }
.srm-file-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 8px 6px 12px;
background: var(--surface-1, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 18px;
max-width: 100%;
}
.srm-file-name {
font-size: 13px; color: var(--text, #111827);
font-weight: 500;
max-width: 280px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srm-file-size { font-size: 11px; color: var(--text-muted, #6b7280); }
.srm-file-remove {
background: rgba(239, 68, 68, 0.1); color: var(--rejected, #d9534f);
border: none; border-radius: 50%;
width: 22px; height: 22px;
cursor: pointer; font-size: 14px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s;
}
.srm-file-remove:hover { background: rgba(239, 68, 68, 0.2); }
/* --- Textarea de observação --- */
.srm-textarea {
width: 100%;
font-family: inherit; font-size: 13px;
padding: 8px 10px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 5px;
resize: vertical;
min-height: 60px;
}
.srm-textarea:focus { outline: 2px solid var(--accent, #337ab7); outline-offset: 1px; border-color: var(--accent, #337ab7); }
.srm-charcount {
font-size: 11px; text-align: right; margin-top: 4px;
}
/* --- Erro de submit --- */
.srm-err {
padding: 10px 14px;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 5px;
color: var(--rejected, #d9534f);
font-size: 13px;
}
/* Bloco do boleto quando hidden via [hidden] — feedback_hidden_attr_vs_display_flex.md */
.srm-section[hidden] { display: none !important; }
/* RES#2 Sprint C — Coluna Anexos na bandeja Tef.Net (gestao-dev). */
.bandeja-anexos-col { white-space: nowrap; }
.bandeja-anexo-link {
display: inline-block;
padding: 3px 8px;
margin-right: 4px;
font-size: 12px;
text-decoration: none;
color: var(--accent, #337ab7);
background: rgba(51, 122, 183, 0.08);
border: 1px solid rgba(51, 122, 183, 0.2);
border-radius: 3px;
transition: background 0.12s;
}
.bandeja-anexo-link:hover {
background: rgba(51, 122, 183, 0.18);
text-decoration: none;
}
/* --- RES#2 Sprint D — Bandeja Tef.Net em #lotes --- */
/* Sub-totals no header (cards por status) */
.bandeja-tefnet-wrap {
display: flex;
flex-direction: column;
gap: 16px;
}
.bandeja-totals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 8px;
}
.bandeja-total-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 8px;
border: 1px solid var(--border, #e2e8f0);
background: var(--surface, #fff);
box-shadow: 0 1px 3px rgba(0,0,0,.04);
/* UI#51 (14/05/2026): cards viram filtros clicáveis. */
cursor: pointer;
user-select: none;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.bandeja-total-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.bandeja-total-card[aria-pressed="true"] {
border-color: var(--brand-500, #2962ff);
box-shadow: 0 0 0 2px rgba(41,98,255,.18);
}
.bandeja-total-card:focus-visible {
outline: 2px solid var(--brand-500, #2962ff);
outline-offset: 2px;
}
.bandeja-total-icon {
font-size: 24px;
flex-shrink: 0;
}
.bandeja-total-body { flex: 1; min-width: 0; }
.bandeja-total-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-muted, #64748b);
font-weight: 600;
}
.bandeja-total-qtd {
font-size: 12px;
color: var(--text-muted, #64748b);
}
.bandeja-total-valor {
font-size: 17px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text, #0f172a);
}
.bandeja-total-warn { border-left: 4px solid #f59e0b; }
.bandeja-total-info { border-left: 4px solid #3b82f6; }
.bandeja-total-success { border-left: 4px solid #10b981; }
.bandeja-total-danger { border-left: 4px solid #ef4444; }
.bandeja-total-muted { border-left: 4px solid #94a3b8; }
/* AP#12 (14/05/2026): cor "parcial" pra status aprovado_parcial (Em correção). */
.bandeja-total-parcial { border-left: 4px solid #c084fc; }
/* Status badge na coluna Status da tabela bandeja */
.status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.status-warn { background: rgba(245,158,11,.12); color: #b45309; }
.status-info { background: rgba(59,130,246,.12); color: #1d4ed8; }
.status-success { background: rgba(16,185,129,.12); color: #047857; }
.status-danger { background: rgba(239,68,68,.12); color: #b91c1c; }
.status-muted { background: rgba(148,163,184,.16); color: #475569; }
/* Tabs do #lotes (mesmo estilo de page-tabs L1) */
.lotes-tabs-host { margin-bottom: 16px; }
.bandeja-filtros { margin-bottom: 12px; }
/* ============================================================
RES#2 — Política de resgate (11/05/2026)
Chip rente ao botão de Resgatar + modal do 3º automático.
============================================================ */
/* Chip rente — sempre visível ao lado do botão "Solicitar resgate".
Decisão direta do dono: "tanto o botão como ele do lado, não custa nada". */
.conta-cta-resgate {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.resgate-chip-rente {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 10px;
font-size: 12.5px;
min-width: 220px;
max-width: 360px;
}
.resgate-chip-rente .rcr-icon {
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
.resgate-chip-rente .rcr-text { display: flex; flex-direction: column; gap: 1px; }
.resgate-chip-rente strong {
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.resgate-chip-rente small {
font-size: 11.5px;
line-height: 1.35;
opacity: 0.85;
}
.resgate-chip-rente.unlocked {
background: rgba(34, 197, 94, 0.14);
border: 1px solid rgba(34, 197, 94, 0.45);
color: #15803d;
}
.resgate-chip-rente.unlocked-extra {
background: rgba(76, 154, 255, 0.14);
border: 1px solid rgba(76, 154, 255, 0.45);
color: #1d4ed8;
}
.resgate-chip-rente.locked {
background: rgba(245, 158, 11, 0.14);
border: 1px solid rgba(245, 158, 11, 0.45);
color: #b45309;
}
/* Modal RES#2 — popup do "último resgate automático".
Glass DOC#9 espelhando o mockup canônico
(docs/mockups/RES-0002-v1-politica-resgate-popup-config-card.html). */
.res2-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
backdrop-filter: blur(4px);
}
.res2-modal {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(245, 158, 11, 0.45);
border-radius: 22px;
box-shadow:
0 18px 44px -16px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(245, 158, 11, 0.45);
max-width: 560px;
width: 100%;
color: #e6ecff;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.res2-modal-header {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 22px 24px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(245, 158, 11, 0.14);
}
.res2-modal-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 700;
flex-shrink: 0;
background: #f59e0b;
color: #1a1410;
}
.res2-modal-headtext h3 {
margin: 0 0 4px;
font-size: 18px;
font-weight: 700;
color: #e6ecff;
}
.res2-modal-headtext p {
margin: 0;
color: #9aa6c7;
font-size: 13px;
}
.res2-modal-body { padding: 18px 24px 22px; }
.res2-resume {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 10px;
overflow: hidden;
margin-bottom: 18px;
}
.res2-resume-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
font-size: 13.5px;
}
.res2-resume-row:last-child { border-bottom: none; }
.res2-resume-row.highlight {
background: rgba(34, 197, 94, 0.14);
border-top: 1px solid rgba(34, 197, 94, 0.45);
border-bottom: 1px solid rgba(34, 197, 94, 0.45);
}
.res2-resume-row .r-lbl { color: #9aa6c7; }
.res2-resume-row.highlight .r-lbl { color: #e6ecff; font-weight: 600; }
.res2-resume-row .r-val {
font-weight: 600;
color: #e6ecff;
font-variant-numeric: tabular-nums;
}
.res2-resume-row .r-val.ok { color: #22c55e; font-size: 15px; }
.res2-alert {
background: rgba(245, 158, 11, 0.14);
border: 1px solid rgba(245, 158, 11, 0.45);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.res2-alert strong {
color: #f59e0b;
font-size: 13.5px;
font-weight: 600;
}
.res2-alert small {
color: #9aa6c7;
font-size: 12px;
line-height: 1.5;
}
.res2-modal-footer {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 14px 24px;
background: rgba(0, 0, 0, 0.18);
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.res2-modal-footer .btn {
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
padding: 9px 18px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid transparent;
}
.res2-modal-footer .btn-primary {
background: #337ab7;
color: #fff;
border-color: #1e6091;
}
.res2-modal-footer .btn-primary:hover { background: #4c9aff; }
.res2-modal-footer .btn-secondary {
background: rgba(255, 255, 255, 0.04);
color: #e6ecff;
border-color: rgba(255, 255, 255, 0.18);
}
.res2-modal-footer .btn-secondary:hover { background: rgba(255, 255, 255, 0.07); }
/* RES#2 F4 — tooltip dos lotes anteriores no popup do 3o resgate */
.r-lbl-hover {
position: relative;
cursor: help;
border-bottom: 1px dotted #6b7596;
}
.r-info-icon {
display: inline-block;
margin-left: 4px;
color: #4c9aff;
font-size: 11px;
}
.r-tooltip {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
background: #161e3d;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 8px;
padding: 8px 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
min-width: 320px;
max-width: 420px;
z-index: 10000;
font-size: 11.5px;
white-space: nowrap;
}
.r-lbl-hover:hover .r-tooltip,
.r-lbl-hover:focus-within .r-tooltip {
display: block;
}
.r-tt-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 10px;
align-items: center;
padding: 4px 0;
border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.r-tt-row:last-child { border-bottom: none; }
.r-tt-row code {
font-family: 'Menlo', 'Monaco', monospace;
color: #4c9aff;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.r-tt-status {
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.04em;
}
.r-tt-status-pendente_aprovacao { background: rgba(76,154,255,0.18); color: #4c9aff; }
.r-tt-status-aguardando_pagamento { background: rgba(245,158,11,0.18); color: #f59e0b; }
.r-tt-status-pago { background: rgba(34,197,94,0.18); color: #22c55e; }
.r-tt-data {
color: #9aa6c7;
font-size: 10.5px;
}
/* RES#2 F6 — Pix cadastrado + Boleto data no popup upload (solicitar-resgate-modal) */
.srm-pix-row .srm-pix-box { padding: 4px 0; }
.srm-pix-loading { color: var(--text-muted, #6b7596); font-size: 12.5px; padding: 8px; }
.srm-pix-vazio {
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.45);
border-radius: 8px;
padding: 12px 14px;
font-size: 13px;
}
.srm-pix-vazio strong { color: #b45309; display: block; margin-bottom: 4px; }
.srm-pix-vazio p { margin: 0; color: #6b7596; font-size: 12.5px; line-height: 1.5; }
.srm-pix-vazio code,
.srm-pix-aviso-diferente code {
background: rgba(0,0,0,0.06);
padding: 1px 6px;
border-radius: 3px;
font-family: 'Menlo', 'Monaco', monospace;
font-size: 12px;
}
.srm-pix-info {
background: rgba(76, 154, 255, 0.08);
border: 1px solid rgba(76, 154, 255, 0.32);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 10px;
}
.srm-pix-linha {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
font-size: 13px;
}
.srm-pix-linha .srm-pix-lbl {
font-weight: 600;
color: var(--text-muted, #6b7596);
min-width: 70px;
}
.srm-pix-valor {
font-family: 'Menlo', 'Monaco', monospace;
font-size: 13px;
padding: 2px 8px;
background: rgba(0,0,0,0.06);
border-radius: 4px;
flex: 1;
}
.srm-pix-copy {
background: var(--brand, #337ab7);
color: #fff;
border: 1px solid var(--brand-deep, #1e6091);
padding: 4px 10px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.srm-pix-copy:hover { background: var(--brand-light, #4c9aff); }
.srm-pix-confirma {
border: none;
padding: 0;
margin: 8px 0 0;
}
.srm-pix-confirma legend {
font-size: 12.5px;
font-weight: 600;
margin-bottom: 6px;
padding: 0;
color: var(--text, #e6ecff);
}
.srm-pix-aviso-diferente {
margin-top: 10px;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.45);
border-radius: 8px;
padding: 12px 14px;
font-size: 13px;
}
.srm-pix-aviso-diferente strong { color: #b91c1c; display: block; margin-bottom: 4px; }
.srm-pix-aviso-diferente p { margin: 0; color: #6b7596; font-size: 12.5px; line-height: 1.5; }
/* Boleto data */
.srm-input-date {
width: 240px;
background: rgba(255,255,255,0.07);
color: var(--text, #e6ecff);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 8px;
padding: 8px 12px;
font-size: 13.5px;
font-family: inherit;
}
.srm-boleto-data-hint {
font-size: 12px;
color: var(--text-muted, #6b7596);
margin-top: 6px;
}
/* ============================================================
* UI#37-39 — Histórico & Tendências (sparkline 4 camadas, YTD vs YTD-1, Δ YoY)
* Adicionado em 12/05/2026 — PRD-0013
* ============================================================ */
/* Variáveis de cor das 4 camadas */
:root {
--spark-aguard: #6c757d; /* aguardando — cinza neutro */
--spark-disp: #0d6efd; /* disponível — brand azul */
--spark-lote: #fd7e14; /* em lote — laranja */
--spark-liquid: #198754; /* liquidado — verde */
}
/* Container das barras stacked */
.hist-spark-bars-stacked {
display: flex;
align-items: flex-end;
gap: 4px;
height: 60px;
}
/* Barra stacked (container vertical — segmentos empilham de baixo pra cima via column-reverse) */
.hist-spark-stacked {
flex: 1;
display: flex;
flex-direction: column-reverse; /* liquidado na base, aguardando no topo */
border-radius: 2px 2px 0 0;
overflow: hidden;
cursor: default;
transition: opacity 0.15s;
}
.hist-spark-stacked:hover,
.hist-spark-stacked:focus {
opacity: 0.85;
outline: 2px solid var(--spark-disp);
outline-offset: 1px;
}
.hist-spark-stacked-atual {
box-shadow: 0 0 0 1px var(--spark-disp);
}
/* Segmento individual */
.hist-spark-segmento {
width: 100%;
min-height: 2px;
transition: height 0.2s ease;
}
/* Barra monocromática (Opção B — retrocompat com estilo anterior) */
.hist-spark-bar {
flex: 1;
background: var(--spark-disp, #0d6efd);
border-radius: 2px 2px 0 0;
transition: opacity 0.15s;
cursor: default;
}
.hist-spark-bar:hover { opacity: 0.75; }
.hist-spark-bar-atual { box-shadow: 0 0 0 1px var(--spark-disp); }
.hist-spark-bar-min { background: var(--color-border, #dee2e6); min-height: 3px; }
/* Regra obrigatória — [hidden] vs display:flex|column-reverse
(feedback_hidden_attr_vs_display_flex.md) */
.hist-spark-stacked[hidden],
.hist-spark-bar[hidden],
.hist-spark-segmento[hidden],
.hist-spark-bars-stacked[hidden] { display: none !important; }
/* Toggle A/B */
.hist-spark-toggle {
display: flex;
gap: 4px;
margin-bottom: 6px;
}
.hist-toggle-btn {
font-size: 11px;
padding: 2px 8px;
border: 1px solid var(--color-border, #dee2e6);
border-radius: 4px;
background: transparent;
cursor: pointer;
color: var(--color-text-muted, #6c757d);
transition: background 0.15s, color 0.15s;
}
.hist-toggle-btn.active {
background: var(--spark-disp, #0d6efd);
color: #fff;
border-color: var(--spark-disp, #0d6efd);
}
.hist-toggle-btn[hidden] { display: none !important; }
.hist-spark-toggle[hidden] { display: none !important; }
/* Legenda das camadas */
.hist-spark-legenda {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
font-size: 10px;
color: var(--color-text-muted, #6c757d);
}
.hist-leg-item { display: flex; align-items: center; gap: 3px; }
.hist-leg-cor { display: inline-block; width: 8px; height: 8px; border-radius: 1px; }
.hist-spark-legenda[hidden] { display: none !important; }
/* YTD comparativo (UI#38) — Bug 1 fix + legibilidade (PRD-0013 12/05/2026 noite) */
/* Estrutura: bloco-atual (valor+badge+período) → divisor → bloco-anterior (rótulo+valor+período) */
.hist-ytd-bloco-atual {
margin-bottom: 8px;
}
.hist-ytd-inline {
display: flex !important;
align-items: baseline;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
}
.hist-ytd-inline[hidden] { display: none !important; }
.hist-ytd-inline .hist-card-value {
display: inline-block !important;
font-size: 22px;
line-height: 1.1;
}
.hist-ytd-periodo-atual {
font-size: 12px;
color: var(--text-soft, #9aa3b2);
margin-top: 4px;
font-weight: 500;
}
.hist-ytd-divisor {
border-top: 1px dashed var(--border-soft, rgba(120, 130, 145, 0.25));
margin: 10px 0;
}
.hist-ytd-bloco-anterior {
/* respiro vertical e hierarquia clara — valor histórico visível, não escondido */
}
.hist-ytd-ant-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted, #6b7280);
font-weight: 500;
margin-bottom: 2px;
}
.hist-ytd-ant-valor {
font-size: 16px;
font-weight: 600;
color: var(--text, #2d3748);
font-family: "SF Mono", "Menlo", monospace;
line-height: 1.2;
}
.hist-ytd-ant-periodo {
font-size: 12px;
color: var(--text-soft, #9aa3b2);
margin-top: 2px;
font-weight: 500;
}
.hist-ytd-badge {
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
}
.hist-ytd-badge-up { background: rgba(25, 135, 84, 0.12); color: #198754; }
.hist-ytd-badge-down { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.hist-ytd-badge-neutral { background: var(--color-surface-2, #f8f9fa); color: var(--color-text-muted, #6c757d); }
/* Δ MoM + YoY — hierarquia legível (PRD-0013 12/05/2026 noite) */
/* Estrutura por seção: label · percentual GRANDE · valores médios · período menor */
.hist-delta-pct {
font-size: 22px;
font-weight: 700;
line-height: 1.1;
margin: 4px 0;
font-family: "SF Mono", "Menlo", monospace;
}
.hist-delta-up { color: #198754; }
.hist-delta-down { color: #dc3545; }
.hist-delta-neutral { color: var(--text-soft, #9aa3b2); }
.hist-delta-valores {
font-size: 14px;
font-weight: 600;
color: var(--text, #2d3748);
font-family: "SF Mono", "Menlo", monospace;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: nowrap;
margin: 2px 0;
}
.hist-delta-ant-num {
color: var(--text-muted, #6b7280);
}
.hist-delta-arrow {
color: var(--text-soft, #9aa3b2);
font-weight: 400;
}
.hist-delta-atual-num {
color: var(--text, #2d3748);
}
.hist-delta-periodos {
font-size: 11px;
color: var(--text-soft, #9aa3b2);
margin-top: 2px;
font-weight: 500;
}
.hist-ytd-comparativo {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0;
flex-wrap: wrap;
}
.hist-ytd-ant {
font-size: 11px;
color: var(--color-text-muted, #6c757d);
}
.hist-ytd-badge {
font-size: 11px;
font-weight: 600;
padding: 1px 6px;
border-radius: 10px;
}
.hist-ytd-badge-up { background: rgba(25, 135, 84, 0.12); color: #198754; }
.hist-ytd-badge-down { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.hist-ytd-badge-neutral { background: var(--color-surface-2, #f8f9fa); color: var(--color-text-muted, #6c757d); }
.hist-ytd-comparativo[hidden] { display: none !important; }
/* Delta MoM + YoY (UI#39) — Bug 2 fix (PRD-0013 12/05/2026) */
/* Padronizado com YTD em 12/05/2026 noite: reusa .hist-ytd-bloco-atual/anterior/inline. */
/* .hist-delta-secao: agrupa MoM e YoY com divisor MAIOR entre seções. */
.hist-delta-secao {
margin-bottom: 12px;
}
.hist-delta-secao:last-child { margin-bottom: 0; }
.hist-delta-secao[hidden] { display: none !important; }
.hist-delta-divisor {
border-top: 1px solid var(--color-border, #dee2e6);
margin: 8px 0;
}
.hist-delta-divisor[hidden] { display: none !important; }
.hist-card-meta-sm {
font-size: 10px;
color: var(--color-text-muted, #6c757d);
margin-top: 2px;
}
/* Mantém compatibilidade com hist-delta-bloco/rotulo/separador (código legado) */
.hist-delta-bloco {
margin-bottom: 4px;
}
.hist-delta-rotulo {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted, #6c757d);
margin-bottom: 2px;
}
.hist-delta-valor {
font-size: 1.25rem;
font-weight: 700;
}
.hist-delta-meta {
font-size: 11px;
color: var(--color-text-muted, #6c757d);
}
.hist-delta-separador {
border-top: 1px solid var(--color-border, #dee2e6);
margin: 8px 0;
}
.hist-delta-up { color: #198754; }
.hist-delta-down { color: #dc3545; }
.hist-delta-neutral { color: var(--color-text-muted, #6c757d); }
.hist-delta-bloco[hidden] { display: none !important; }
.hist-delta-separador[hidden] { display: none !important; }
/* tooltip-rico — HTML formatado no tooltip custom (Bug 3 fix, PRD-0013 12/05/2026) */
/* Usado dentro do singleton #info-tooltip-singleton/.info-tooltip-body */
.tooltip-rico {
font-size: 12px;
line-height: 1.6;
min-width: 160px;
}
.tooltip-rico strong {
font-size: 13px;
display: block;
margin-bottom: 2px;
}
.tooltip-rico hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin: 4px 0;
}
/* ============================================================
* UI#40 (PRD-0014) — Drill direto: oculta barra de tabs com 1 único item.
* Quando explodirAttachTabs recebe apenas 1 tab, a barra de tabs
* não agrega valor visual — ocultá-la deixa o drill mais limpo.
* Compatibilidade: Chrome 105+, Firefox 121+, Safari 15.4+, Edge Chromium.
* Fallback gracioso: browsers sem :has() mostram a barra com 1 botão (funcional).
* ============================================================ */
.explodir-tabs:has(.explodir-tab:only-child) {
display: none;
}
/* [hidden] override: explodir.js pode setar painel.querySelector('.explodir-tabs').hidden */
/* Regra feedback_hidden_attr_vs_display_flex.md: elemento com display controlado por CSS */
/* deve ter [hidden]{display:none !important} para evitar conflito. */
.explodir-tabs[hidden] {
display: none !important;
}
/* PRD-0014-EXT-03 / UI#45 (12/05/2026 noite — pos UI#44) — subtitulo inline
do drill ("Por cliente"). Substitui o formato pills empilhadas (UI#43) pelo
formato compacto "— STD: R$ X | PRE: R$ Y" rente ao titulo (decisao do dono
no screenshot anotado). Header agora e flex BASELINE (row), nao column.
Regra [hidden]{display:none !important} obrigatoria pra coexistir com flex
(feedback_hidden_attr_vs_display_flex.md).
PRD-0014-EXT-04 / UI#46 (12/05/2026 noite — pos UI#45): texto agora e POR
EXTENSO ("Standard"/"Premium") + Grupo Cobertura mostra "N clientes / R$ X"
(string mais longa). flex-wrap+gap ja cobrem a quebra de linha quando o
espaco horizontal e insuficiente — classes .exsub-* mantidas. */
.explodir-header-text {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
}
.explodir-titulo {
font-weight: 600;
font-size: 14px;
}
.explodir-subtitulo {
font-size: 13px;
color: var(--ag-text-muted, #6b7280);
font-variant-numeric: tabular-nums;
}
.explodir-subtitulo[hidden] {
display: none !important;
}
/* Standard = neutro muted (mesmo cinza do subtitulo). */
.explodir-subtitulo .exsub-std {
color: var(--ag-text-muted, #6b7280);
}
/* Premium = destaque dourado (alinhado a .pill-premium / warning-dark). */
.explodir-subtitulo .exsub-pre {
color: var(--warning-dark, #b97a23);
font-weight: 600;
}
/* Separador "|" entre STD e PRE — tom mais discreto que os valores. */
.explodir-subtitulo .exsub-sep {
color: var(--border-strong, var(--ag-border, #cfd6e0));
margin: 0 4px;
}
/* ============================================================================
PRD-0017 / UI#48 (12/05/2026 noite) — Bloco Inadimplencia da competencia.
Espelha o mockup DT-0017-v2 usando tokens canonicos do projeto
(--danger*, --warning*, --age-*). Os tokens --age-* sao NOVOS pra cobrir
os 4 buckets de aging (1-30, 31-60, 61-90, 90+) com gradacao visual.
============================================================================ */
/* Tokens de aging (4 buckets) — declarados em :root pra reuso futuro
(REL#5 timeline, ind-card de outras telas, etc.) */
:root {
--age-1-30: var(--warning, #f0ad4e); /* amarelo: ate 30 dias */
--age-31-60: #ec7c1d; /* laranja: ate 60 */
--age-61-90: var(--danger, #d9534f); /* vermelho: ate 90 */
--age-90mais: #8b1a17; /* vermelho escuro: 90+ */
}
/* Container principal do bloco (visualmente "section em vermelho leve"). */
.secao-inadimplencia.bloco-inadimplencia {
background: linear-gradient(180deg, #fff8f7 0%, var(--surface, #ffffff) 100%);
border: 1px solid #f0c3c1;
border-radius: var(--radius, 10px);
box-shadow: 0 1px 2px rgba(217, 83, 79, 0.08);
padding: 16px 18px;
margin: 16px 0;
}
.bloco-inadimplencia-header {
border-bottom: 1px solid var(--border, #e5e9f0);
padding-bottom: 10px;
margin-bottom: 14px;
}
.bloco-titulo-inadimplencia {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--danger-dark, #b73a36);
display: flex;
align-items: center;
gap: 10px;
}
.bloco-inadimplencia .bloco-sub {
color: var(--text-muted, #6b7280);
font-size: 13px;
margin: 6px 0 0;
}
/* Grid dos 6 cards em UMA linha em desktop (>=1024). Mobile/tablet quebra. */
.cards-grid-inadimplencia {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
@media (max-width: 1280px) {
.cards-grid-inadimplencia { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.cards-grid-inadimplencia { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.cards-grid-inadimplencia { grid-template-columns: 1fr; }
}
/* Variante "danger" do .ind-card pro tema vermelho do bloco.
Reusa .ind-card base (padding, border, hover) ja definido no styles.css. */
.cards-grid-inadimplencia .ind-card.ind-card-danger {
cursor: pointer;
transition: all .15s ease;
}
.cards-grid-inadimplencia .ind-card-danger:hover {
border-color: var(--danger, #d9534f);
box-shadow: 0 4px 16px rgba(217, 83, 79, 0.12);
transform: translateY(-1px);
}
.cards-grid-inadimplencia .ind-card-danger.explodir-aberto {
border-color: var(--danger, #d9534f);
box-shadow: 0 0 0 2px var(--danger-soft, #fde8e7);
background: #fff8f7;
}
/* Host do drill compartilhado (explodirGroup faz appendChild aqui). */
.bloco-inadimplencia-drill-host {
margin-top: 14px;
}
.bloco-inadimplencia-drill-host .explodir-detail {
background: #fafbfc;
border: 1px solid var(--border, #e5e9f0);
border-radius: var(--radius-sm, 6px);
padding: 12px 14px;
}
/* Drill: secao interna (aging, top 5, insight). */
.bloco-inadimplencia .drill-secao {
margin-bottom: 14px;
}
.bloco-inadimplencia .drill-secao:last-child {
margin-bottom: 0;
}
.bloco-inadimplencia .drill-secao-titulo {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
/* Aging stacked bar */
.bloco-inadimplencia .aging-barra {
display: flex;
height: 28px;
border-radius: 5px;
overflow: hidden;
border: 1px solid var(--border, #e5e9f0);
background: var(--neutral-soft, #f1f3f5);
}
.bloco-inadimplencia .aging-seg {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 6px;
}
.bloco-inadimplencia .aging-seg.aging-1-30 { background: var(--age-1-30); }
.bloco-inadimplencia .aging-seg.aging-31-60 { background: var(--age-31-60); }
.bloco-inadimplencia .aging-seg.aging-61-90 { background: var(--age-61-90); }
.bloco-inadimplencia .aging-seg.aging-90mais { background: var(--age-90mais); }
.bloco-inadimplencia .aging-empty {
width: 100%;
text-align: center;
color: var(--text-muted, #6b7280);
font-size: 13px;
padding: 6px 0;
}
.bloco-inadimplencia .aging-leg {
display: flex;
gap: 16px;
margin-top: 8px;
font-size: 11px;
color: var(--text-muted, #6b7280);
flex-wrap: wrap;
}
.bloco-inadimplencia .aging-leg span { display: inline-flex; align-items: center; gap: 4px; }
.bloco-inadimplencia .aging-leg .swatch {
width: 10px;
height: 10px;
border-radius: 2px;
display: inline-block;
}
.bloco-inadimplencia .aging-leg .aging-1-30-swatch { background: var(--age-1-30); }
.bloco-inadimplencia .aging-leg .aging-31-60-swatch { background: var(--age-31-60); }
.bloco-inadimplencia .aging-leg .aging-61-90-swatch { background: var(--age-61-90); }
.bloco-inadimplencia .aging-leg .aging-90mais-swatch { background: var(--age-90mais); }
.bloco-inadimplencia .aging-leg .aging-critico {
color: var(--danger-dark, #b73a36);
font-weight: 700;
}
/* Top 5 tabela */
.bloco-inadimplencia .top-tabela-wrap { overflow-x: auto; }
.bloco-inadimplencia .top-tabela {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.bloco-inadimplencia .top-tabela th {
text-align: left;
font-size: 10px;
text-transform: uppercase;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
padding: 8px 10px;
border-bottom: 1px solid var(--border, #e5e9f0);
}
.bloco-inadimplencia .top-tabela td {
padding: 9px 10px;
border-bottom: 1px solid var(--border, #e5e9f0);
}
.bloco-inadimplencia .top-tabela tr:last-child td { border-bottom: 0; }
.bloco-inadimplencia .top-tabela .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.bloco-inadimplencia .top-tabela .col-num-strong { color: var(--danger-dark, #b73a36); font-weight: 600; }
.bloco-inadimplencia .top-tabela .top-empty {
text-align: center;
color: var(--text-muted, #6b7280);
padding: 16px;
}
.bloco-inadimplencia .dias-badge {
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
display: inline-block;
}
.bloco-inadimplencia .dias-1-30 { background: var(--warning-soft, #fff8e1); color: var(--age-1-30); }
.bloco-inadimplencia .dias-31-60 { background: #ffe8d4; color: var(--age-31-60); }
.bloco-inadimplencia .dias-61-90 { background: var(--danger-soft, #fde8e7); color: var(--age-61-90); }
.bloco-inadimplencia .dias-90mais { background: #f0c3c1; color: var(--age-90mais); }
/* Insight nota */
.bloco-inadimplencia .nota-inadimplencia {
background: #fff8f7;
border-left: 3px solid var(--danger, #d9534f);
padding: 10px 14px;
border-radius: var(--radius-sm, 6px);
font-size: 13px;
margin-top: 14px;
}
.bloco-inadimplencia .nota-inadimplencia strong { color: var(--danger-dark, #b73a36); }
/* Tokens de pill — reaproveita classes ja definidas em styles.css
(.pill-danger, .pill-premium, .pill-standard). Sem necessidade de
redeclarar aqui. */
/* =====================================================================
PRD-0047 / UI#47 — Card "Competência Selecionada" (Variante C aprovada)
---------------------------------------------------------------------
Substitui o duplo Δ MoM + Δ YoY antigo. 1 card único:
- Header com label + "mes/AAAA · R$ valor" (destaque 22px)
- 2 linhas empilhadas (vs Mês Anterior + vs Mesmo Mês Ano Anterior)
separadas por divisor tracejado.
- Cada linha tem badge de delta colorido (up/down/neutral/aguardando).
Mockup: docs/mockups/UI-0047-historico-cards-comparativos-v1-variantes.html
Decisão dono: 13/05/2026 madrugada (aprovou Variante C inline).
===================================================================== */
.hist-comp-card {
background: var(--surface, #ffffff);
border: 1px solid var(--border, #dddddd);
border-radius: var(--radius, 10px);
padding: 16px;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.hist-comp-card[hidden] { display: none !important; }
.hist-comp-header {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border, #dddddd);
}
.hist-comp-header-label {
font-size: 11px;
text-transform: uppercase;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
letter-spacing: .04em;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.hist-comp-header-mes {
font-size: 22px;
font-weight: 700;
color: var(--brand-dark, #286090);
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.hist-comp-header-sep {
color: var(--text-soft, #9aa3b2);
margin: 0 6px;
font-weight: 400;
}
.hist-comp-header-valor { color: var(--text, #2d3748); }
.hist-comp-linha {
padding: 10px 0;
}
.hist-comp-linha + .hist-comp-linha {
border-top: 1px dashed var(--border-soft, rgba(120,130,145,0.25));
}
.hist-comp-linha-label {
font-size: 10px;
text-transform: uppercase;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
letter-spacing: .04em;
margin-bottom: 4px;
}
.hist-comp-linha-body {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
flex-wrap: nowrap;
}
.hist-comp-linha-valor {
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text, #2d3748);
display: flex;
align-items: baseline;
gap: 8px;
}
.hist-comp-linha-mes {
font-size: 12px;
font-weight: 400;
color: var(--text-muted, #6b7280);
}
.hist-comp-delta {
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.hist-comp-delta.up {
background: rgba(25, 135, 84, 0.12);
color: var(--success-dark, #3d8b3d);
}
.hist-comp-delta.down {
background: rgba(220, 53, 69, 0.12);
color: var(--danger-dark, #b73a36);
}
.hist-comp-delta.neutral {
background: var(--surface-2, #fafafa);
color: var(--text-muted, #6b7280);
}
.hist-comp-delta.aguardando {
background: rgba(240, 173, 78, 0.18);
color: var(--warning-dark, #b97a23);
}
/* B-historico-provisao-unificada (13/05/2026):
"sem movimentação" substitui "R$ 0,00" quando provisão é null/zero.
Discreto, itálico, fonte normal (não pesada como valor monetário).
Aplicado tanto no valor central do header quanto nas linhas comparativas
e no card Provisão Acumulada (YTD). */
.hist-comp-sem-mov {
color: var(--text-muted, #6b7280);
font-style: italic;
font-weight: 400;
font-size: 0.95em;
letter-spacing: 0.01em;
}
/* Quando "sem movimentação" aparece como hist-card-value (no card YTD),
reduz a tipografia pra não competir com o valor monetário em outras competências. */
.hist-card-value.hist-comp-sem-mov {
font-size: 1.15rem;
font-weight: 400;
}
/* Nota discreta em multisseleção (>1 mês) — substitui card por placeholder. */
.hist-comp-multi-nota {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Título "Provisão Acumulada · jan~mai 2026" — período em destaque secundário.
O ícone 📅 + "Provisão Acumulada" mantém o styling de .hist-card-label;
o período herda mas ganha cor brand pra reforçar contexto temporal. */
.hist-ytd-titulo {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
font-size: 15px;
}
.hist-ytd-titulo-base {
text-transform: uppercase;
letter-spacing: .04em;
}
.hist-ytd-titulo-periodo {
text-transform: none;
letter-spacing: 0;
color: var(--brand-dark, #286090);
font-weight: 700;
}
/* ============================================================================
AP#11 — Tela única de validação de resgate (PRD-0007-EXT · 13/05/2026)
============================================================================
Substitui os 2 modais antigos (Aprovar / Reprovar) por modal único com 3
ações no footer (Reprovar / Parcial / Total). Visual reaproveita tokens
DOC#9 do design system; classes `lvm-` (lote-validar-modal), `cadm-`
(cadastro-motivo), `lcm-` (lote-correcao), `ciente-` (popup ciente parceiro).
REGRA DURA — feedback_hidden_attr_vs_display_flex: toda classe com
`display: flex|grid|block` que pode receber `[hidden]` em runtime declara
explicitamente `[hidden]{display:none !important}`. Senão o atributo é
silenciosamente ignorado.
============================================================================ */
/* ── Bandeja Tef.Net — chips de período (AP#11) ─────────────────────────────── */
.bandeja-chips-periodo {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.chip-periodo {
padding: 6px 12px;
border-radius: 999px;
background: var(--surface, #fff);
color: var(--text, #2d3748);
border: 1px solid var(--border-strong, #cfd6e0);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all .15s;
}
.chip-periodo:hover {
background: var(--neutral-soft, #f1f3f5);
}
.chip-periodo[aria-pressed="true"] {
background: var(--brand-soft, #e8f1fb);
border-color: var(--brand, #337ab7);
color: var(--brand-dark, #286090);
font-weight: 600;
}
.chip-periodo-limpar {
border-style: dashed;
color: var(--text-muted, #6b7280);
}
/* ── Modal de validação (lvm-*) ─────────────────────────────────────────────── */
.lvm-body {
display: flex;
flex-direction: column;
gap: 14px;
}
.lvm-body[hidden] { display: none !important; }
/* Resumo (parceiro / competência / forma / valor) */
.lvm-resumo {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 12px 16px;
background: var(--brand-soft, #e8f1fb);
border: 1px solid var(--brand, #337ab7);
border-radius: 6px;
}
.lvm-resumo[hidden] { display: none !important; }
.lvm-resumo-item { display: flex; flex-direction: column; }
.lvm-resumo-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
margin-bottom: 2px;
}
.lvm-resumo-valor { font-size: 14px; font-weight: 700; color: var(--text, #2d3748); }
.lvm-brand { color: var(--brand-dark, #286090); }
/* Seções (anexos, data prev, status) */
.lvm-section { display: flex; flex-direction: column; gap: 8px; }
.lvm-section[hidden] { display: none !important; }
.lvm-section-titulo {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-soft, #9aa3b2);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.lvm-help-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--border-strong, #cfd6e0);
color: var(--text-muted, #6b7280);
font-size: 11px;
font-weight: 600;
cursor: help;
flex-shrink: 0;
}
.lvm-help-trigger:hover { background: var(--neutral-soft, #f1f3f5); }
/* Grid de 3 cards de check (NF / Pix-Boleto / Valor) */
.lvm-anexos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.lvm-anexos-grid[hidden] { display: none !important; }
.lvm-anexo-card {
border: 2px solid var(--border, #e5e9f0);
border-radius: 6px;
padding: 12px;
background: var(--surface, #fff);
cursor: pointer;
transition: all .15s;
text-align: left;
font-family: inherit;
font-size: inherit;
color: inherit;
}
.lvm-anexo-card:hover { border-color: var(--brand, #337ab7); }
.lvm-anexo-card:focus-visible {
outline: 2px solid var(--brand, #337ab7);
outline-offset: 2px;
}
.lvm-anexo-card.lvm-checked {
border-color: var(--ok, #5cb85c);
background: rgba(92, 184, 92, 0.08);
}
.lvm-anexo-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.lvm-anexo-titulo { font-size: 13px; font-weight: 600; }
.lvm-anexo-check {
width: 22px;
height: 22px;
border: 2px solid var(--border-strong, #cfd6e0);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface, #fff);
color: transparent;
transition: all .15s;
font-weight: 700;
}
.lvm-anexo-card.lvm-checked .lvm-anexo-check {
background: var(--ok, #5cb85c);
border-color: var(--ok, #5cb85c);
color: #fff;
}
.lvm-anexo-body {
font-size: 12px;
color: var(--text-muted, #6b7280);
word-break: break-word;
}
.lvm-pix-chave {
display: inline-block;
padding: 2px 6px;
background: var(--neutral-soft, #f1f3f5);
border-radius: 3px;
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 11px;
word-break: break-all;
}
.lvm-anexo-link {
display: inline-block;
margin-right: 6px;
margin-top: 4px;
font-size: 11px;
color: var(--brand, #337ab7);
text-decoration: none;
}
.lvm-anexo-link:hover { text-decoration: underline; }
.lvm-anexo-extra { margin-top: 6px; }
.lvm-anexo-hint { font-style: italic; }
/* Data prevista */
.lvm-data-prev {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e9f0);
border-radius: 6px;
flex-wrap: wrap;
}
.lvm-data-prev[hidden] { display: none !important; }
.lvm-input-date {
border: 1px solid var(--border-strong, #cfd6e0);
padding: 6px 10px;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
}
.lvm-data-hint { font-size: 12px; }
.lvm-alerta-finde {
background: rgba(240, 173, 78, 0.12);
border-left: 3px solid var(--warning, #f0ad4e);
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
color: var(--warning-dark, #b97a23);
}
.lvm-alerta-finde[hidden] { display: none !important; }
/* Status bar dinâmica */
.lvm-modal-status {
padding: 10px 14px;
border-radius: 6px;
font-size: 12px;
text-align: center;
display: block;
}
.lvm-modal-status[hidden] { display: none !important; }
.lvm-status-info {
background: var(--brand-soft, #e8f1fb);
color: var(--brand-dark, #286090);
}
.lvm-status-success {
background: rgba(92, 184, 92, 0.12);
color: var(--ok, #5cb85c);
}
.lvm-status-warning {
background: rgba(240, 173, 78, 0.12);
color: var(--warning-dark, #b97a23);
}
/* Formulários inline (revelados ao escolher Reprovar/Parcial) */
.lvm-secao-decisao {
display: block; /* override [hidden] OK no body */
padding: 14px;
border-radius: 6px;
border-left: 4px solid;
margin-top: 8px;
}
.lvm-secao-decisao[hidden] { display: none !important; }
.lvm-decisao-reprovar {
background: rgba(217, 83, 79, 0.06);
border-left-color: var(--rejected, #d9534f);
}
.lvm-decisao-parcial {
background: rgba(240, 173, 78, 0.10);
border-left-color: var(--warning, #f0ad4e);
}
.lvm-secao-decisao-titulo {
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
}
.lvm-decisao-reprovar .lvm-secao-decisao-titulo { color: var(--rejected, #d9534f); }
.lvm-decisao-parcial .lvm-secao-decisao-titulo { color: var(--warning-dark, #b97a23); }
.lvm-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.lvm-form-row[hidden] { display: none !important; }
.lvm-form-label {
font-size: 11px;
text-transform: uppercase;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
}
.lvm-form-inline { display: flex; align-items: center; gap: 8px; }
.lvm-form-inline[hidden] { display: none !important; }
.lvm-select, .lvm-textarea {
border: 1px solid var(--border-strong, #cfd6e0);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
background: var(--surface, #fff);
width: 100%;
}
.lvm-textarea { min-height: 70px; resize: vertical; }
.lvm-btn-add-motivo {
background: transparent;
border: 1px dashed var(--brand, #337ab7);
color: var(--brand-dark, #286090);
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
font-family: inherit;
}
.lvm-btn-add-motivo:hover { background: var(--brand-soft, #e8f1fb); }
.lvm-form-footrow {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
}
.lvm-form-footrow[hidden] { display: none !important; }
.lvm-err {
color: var(--rejected, #d9534f);
font-size: 12px;
}
.lvm-err-submit {
background: rgba(217, 83, 79, 0.08);
border-left: 3px solid var(--rejected, #d9534f);
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
display: block;
}
.lvm-err-submit[hidden] { display: none !important; }
.lvm-cc { font-size: 11px; }
.lvm-aviso-1chance {
margin-top: 8px;
padding: 8px 12px;
background: rgba(240, 173, 78, 0.15);
border: 1px solid var(--warning, #f0ad4e);
border-radius: 4px;
font-size: 12px;
color: var(--warning-dark, #b97a23);
}
/* Footer customizado do modal (substitui o slot padrão de Modal) */
.lvm-footer-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 14px 0 0 0;
border-top: 1px solid var(--border, #e5e9f0);
margin-top: 8px;
}
.lvm-footer-actions[hidden] { display: none !important; }
.lvm-footer-left, .lvm-footer-right {
display: flex;
gap: 8px;
}
.lvm-footer-left[hidden], .lvm-footer-right[hidden] { display: none !important; }
.lvm-btn-reprovar {
background: var(--surface, #fff);
color: var(--rejected, #d9534f);
border: 1px solid var(--rejected, #d9534f);
}
.lvm-btn-reprovar:hover:not(:disabled) { background: rgba(217, 83, 79, 0.08); }
.lvm-btn-parcial {
background: var(--warning, #f0ad4e);
color: #fff;
border: 1px solid var(--warning-dark, #b97a23);
}
.lvm-btn-parcial:hover:not(:disabled) { background: var(--warning-dark, #b97a23); }
.lvm-btn-total {
background: var(--ok, #5cb85c);
color: #fff;
border: 1px solid var(--success-dark, #3d8b3d);
}
.lvm-btn-total:hover:not(:disabled) { background: var(--success-dark, #3d8b3d); }
.lvm-btn-confirma-rep {
background: var(--rejected, #d9534f);
color: #fff;
border: 1px solid var(--rejected, #d9534f);
}
.lvm-btn-confirma-rep[hidden] { display: none !important; }
.lvm-btn-confirma-rep:hover:not(:disabled) { background: #b73a36; }
.lvm-btn-confirma-parc {
background: var(--warning-dark, #b97a23);
color: #fff;
border: 1px solid var(--warning-dark, #b97a23);
}
.lvm-btn-confirma-parc[hidden] { display: none !important; }
.lvm-btn-confirma-parc:hover:not(:disabled) { background: #8c5a18; }
/* Responsivo — abaixo de 700px, resumo vira 2 cols + anexos viram coluna */
@media (max-width: 700px) {
.lvm-resumo { grid-template-columns: repeat(2, 1fr); }
.lvm-anexos-grid { grid-template-columns: 1fr; }
.lvm-footer-actions { flex-direction: column; align-items: stretch; }
.lvm-footer-left, .lvm-footer-right { flex-direction: column; }
}
/* ── Modal de cadastro de motivo (cadm-*) ───────────────────────────────────── */
.cadm-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.cadm-body[hidden] { display: none !important; }
.cadm-help {
font-size: 12px;
margin: 0;
}
.cadm-form-row { display: flex; flex-direction: column; gap: 4px; }
.cadm-form-row[hidden] { display: none !important; }
.cadm-form-label {
font-size: 11px;
text-transform: uppercase;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
}
.cadm-input {
border: 1px solid var(--border-strong, #cfd6e0);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
background: var(--surface, #fff);
}
.cadm-form-footrow {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
}
.cadm-form-footrow[hidden] { display: none !important; }
.cadm-err { color: var(--rejected, #d9534f); font-size: 12px; }
.cadm-cc { font-size: 11px; }
/* ── Popup "Ciente" obrigatório (ciente-*) ──────────────────────────────────── */
.ciente-body {
display: flex;
flex-direction: column;
gap: 14px;
font-size: 14px;
}
.ciente-body[hidden] { display: none !important; }
.ciente-intro { line-height: 1.5; }
.ciente-bloco {
padding: 10px 14px;
border-radius: 6px;
background: var(--neutral-soft, #f1f3f5);
display: flex;
flex-direction: column;
gap: 6px;
}
.ciente-bloco[hidden] { display: none !important; }
.ciente-tom-danger .ciente-bloco {
background: rgba(217, 83, 79, 0.06);
border-left: 3px solid var(--rejected, #d9534f);
}
.ciente-tom-warning .ciente-bloco {
background: rgba(240, 173, 78, 0.10);
border-left: 3px solid var(--warning, #f0ad4e);
}
.ciente-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ciente-row[hidden] { display: none !important; }
.ciente-row-obs { flex-direction: column; }
.ciente-label {
font-size: 11px;
text-transform: uppercase;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
}
.ciente-obs { font-size: 13px; line-height: 1.5; }
/* ── Modal de correção (lcm-*) ──────────────────────────────────────────────── */
.lcm-body {
display: flex;
flex-direction: column;
gap: 14px;
}
.lcm-body[hidden] { display: none !important; }
.lcm-aviso {
padding: 10px 14px;
background: rgba(240, 173, 78, 0.15);
border: 1px solid var(--warning, #f0ad4e);
border-radius: 4px;
color: var(--warning-dark, #b97a23);
font-size: 13px;
}
.lcm-section { display: flex; flex-direction: column; gap: 6px; }
.lcm-section[hidden] { display: none !important; }
.lcm-section-titulo {
font-size: 12px;
text-transform: uppercase;
color: var(--text-soft, #9aa3b2);
font-weight: 600;
}
.lcm-upload-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--surface, #fff);
border: 1px dashed var(--brand, #337ab7);
border-radius: 4px;
color: var(--brand-dark, #286090);
font-size: 13px;
cursor: pointer;
width: fit-content;
}
.lcm-upload-trigger[hidden] { display: none !important; }
.lcm-upload-trigger:hover { background: var(--brand-soft, #e8f1fb); }
.lcm-upload-preview { font-size: 12px; color: var(--text-muted, #6b7280); }
.lcm-file-pill {
display: inline-block;
padding: 4px 10px;
background: var(--neutral-soft, #f1f3f5);
border-radius: 999px;
font-size: 12px;
}
.lcm-textarea {
border: 1px solid var(--border-strong, #cfd6e0);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
resize: vertical;
}
.lcm-cc { font-size: 11px; }
.lcm-err {
color: var(--rejected, #d9534f);
font-size: 12px;
padding: 8px 12px;
background: rgba(217, 83, 79, 0.08);
border-left: 3px solid var(--rejected, #d9534f);
border-radius: 4px;
display: block;
}
.lcm-err[hidden] { display: none !important; }
/* ── Botão btn-warning (faltava no design system pra "Ver correção") ────────── */
.btn-warning {
background: var(--warning, #f0ad4e);
color: #fff;
border: 1px solid var(--warning-dark, #b97a23);
}
.btn-warning:hover:not(:disabled) { background: var(--warning-dark, #b97a23); }
.btn-warning[hidden] { display: none !important; }
/* ════════════════════════════════════════════════════════════════════════════
* AP#12 / UI#52 (14/05/2026 — Bloco 2)
* Botão "📬 Pendências" do header + Modal-lista de pendências do parceiro.
* Substitui o popup-fila do AP#11 (lote-notificacao-parceiro popup-por-popup).
* Decisão do dono via mockup docs/mockups/UI-0052-v3-bloco2-final.html.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── Botão header "Pendências" + badge contador ─────────────────────────── */
.header-pendencias-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 6px;
border: 1px solid var(--border-strong, #cfd6e0);
background: var(--surface, #fff);
color: var(--text, #1f2937);
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: border-color .12s, background .12s, color .12s;
}
.header-pendencias-btn:hover {
border-color: var(--brand-500, #2962ff);
color: var(--brand-500, #2962ff);
}
.header-pendencias-btn:focus-visible {
outline: 2px solid var(--brand-500, #2962ff);
outline-offset: 2px;
}
.header-pendencias-btn[hidden] { display: none !important; }
.header-pendencias-icon { font-size: 15px; }
.header-pendencias-label { font-size: 13px; }
.header-pendencias-badge {
position: absolute;
top: -7px;
right: -7px;
background: #ef4444;
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border: 2px solid var(--surface, #fff);
min-width: 18px;
text-align: center;
line-height: 1;
}
.header-pendencias-badge[hidden] { display: none !important; }
/* ─── Modal-lista (.pml-*) ───────────────────────────────────────────────── */
.pml-body-wrap {
display: flex;
flex-direction: column;
gap: 12px;
}
.pml-subtitulo {
margin: 6px 0 0;
font-size: 13px;
color: var(--text-muted, #64748b);
line-height: 1.45;
}
.pml-lembrete {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-left: 3px solid #d97706;
border-radius: 6px;
padding: 8px 12px;
font-size: 12.5px;
color: #78350f;
}
.pml-itens {
display: flex;
flex-direction: column;
gap: 8px;
}
.pml-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted, #64748b);
}
.pml-empty-icon { font-size: 42px; margin-bottom: 8px; }
.pml-empty h3 { margin: 0 0 4px; color: var(--text, #1f2937); }
.pml-empty p { margin: 0; font-size: 13px; }
/* Item individual da lista — visual da v1 (cards diretos, tudo inline) */
.pml-item {
background: var(--surface, #fff);
border: 1px solid var(--border, #e5e9f0);
border-radius: 10px;
padding: 14px 16px;
transition: border-color .15s, box-shadow .15s, transform .12s;
}
.pml-item:hover {
border-color: var(--brand-500, #2962ff);
box-shadow: 0 4px 14px rgba(0,0,0,.10);
transform: translateY(-1px);
}
.pml-item-lido {
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.pml-row1 {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.pml-numero {
font-weight: 700;
font-family: -apple-system, ui-monospace, monospace;
font-size: 14px;
color: var(--text, #1f2937);
}
.pml-competencia {
color: var(--text-muted, #64748b);
font-size: 12px;
}
.pml-valor {
margin-left: auto;
font-weight: 700;
color: var(--text, #1f2937);
font-variant-numeric: tabular-nums;
}
.pml-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.pml-badge-danger { background: #fee2e2; color: #b91c1c; }
.pml-badge-parcial { background: #f3e8ff; color: #6b21a8; }
.pml-lido-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #d1fae5;
color: #065f46;
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
}
.pml-row2 {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
margin-top: 8px;
}
.pml-motivo-line {
flex: 1;
min-width: 240px;
color: var(--text, #1f2937);
font-size: 12.5px;
line-height: 1.5;
}
.pml-motivo-label {
color: var(--text-muted, #64748b);
font-weight: 500;
}
.pml-obs {
margin-top: 4px;
font-size: 12.5px;
}
.pml-acoes {
display: flex;
gap: 6px;
flex-shrink: 0;
flex-wrap: wrap;
}
.pml-btn {
padding: 7px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--border-strong, #cfd6e0);
background: var(--surface, #fff);
white-space: nowrap;
transition: background .12s, border-color .12s, color .12s;
}
.pml-btn:hover:not(:disabled) {
border-color: var(--brand-500, #2962ff);
color: var(--brand-500, #2962ff);
}
.pml-btn:disabled,
.pml-btn-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.pml-btn-primary {
background: var(--brand-500, #2962ff);
border-color: var(--brand-500, #2962ff);
color: #fff;
}
.pml-btn-primary:hover:not(:disabled) {
background: var(--brand-600, #1d4ed8);
color: #fff;
}
.pml-btn-warning {
background: #f59e0b;
border-color: #f59e0b;
color: #fff;
}
.pml-btn-warning:hover:not(:disabled) {
background: #d97706;
color: #fff;
}
.pml-btn-ghost {
background: transparent;
color: var(--text-muted, #64748b);
}
.pml-btn-ghost:hover:not(:disabled) {
background: #f8fafc;
color: var(--text, #1f2937);
border-color: var(--border-strong, #cfd6e0);
}
/* Mobile — colapsa botões abaixo da linha de motivo */
@media (max-width: 640px) {
.pml-row2 { flex-direction: column; }
.pml-acoes { width: 100%; }
.pml-btn { flex: 1; min-width: 0; }
}
/* === AP#13 — Marcar pago (MarcarPagoModal) =============================== */
/* Modal "Marcar como pago" — substitui placeholder textual em
`aguardando_pagamento` por form completo (data + forma + comprovante
opcional + observação). Reusa modal-card/modal-body/modal-footer do
sistema (DOC#9 glass). Estilos abaixo só pra elementos internos. */
.mpm-body { font-size: 14px; }
.mpm-resumo {
background: var(--surface-2, rgba(255, 255, 255, 0.03));
border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
border-radius: var(--radius-md, 8px);
padding: 12px 14px;
margin-bottom: 16px;
}
.mpm-resumo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px 16px;
}
.mpm-resumo-cell { display: flex; flex-direction: column; gap: 2px; }
.mpm-resumo-lbl {
font-size: 11px;
color: var(--text-muted, #6b7596);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mpm-resumo-val { font-size: 14px; color: var(--text); }
.mpm-resumo-val code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: var(--surface-3, rgba(255, 255, 255, 0.04));
padding: 1px 6px;
border-radius: 3px;
font-size: 12px;
}
.mpm-valor-destaque { color: var(--ok, #22c55e); font-weight: 700; }
.mpm-section { margin-bottom: 16px; }
.mpm-section-titulo {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.mpm-section-hint {
margin: 0 0 8px;
font-size: 12px;
color: var(--text-muted, #6b7596);
}
.mpm-required {
display: inline-block;
font-size: 10px;
color: var(--rejected, #d9534f);
background: rgba(217, 83, 79, 0.12);
padding: 1px 6px;
border-radius: 4px;
margin-left: 6px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
vertical-align: middle;
}
.mpm-optional {
display: inline-block;
font-size: 10px;
color: var(--text-muted, #6b7596);
background: var(--surface-3, rgba(255, 255, 255, 0.04));
padding: 1px 6px;
border-radius: 4px;
margin-left: 6px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
vertical-align: middle;
}
.mpm-input-date { width: 100%; max-width: 200px; }
/* Radios de forma_pag — espelha layout das radios do srm (solicitar-resgate) */
.mpm-radio-group {
border: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.mpm-radio {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
border-radius: var(--radius-md, 8px);
background: var(--surface-2, rgba(255, 255, 255, 0.02));
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.mpm-radio:hover { border-color: var(--accent, #4c9aff); }
.mpm-radio input[type="radio"] { margin: 0; cursor: pointer; }
.mpm-radio-mark { display: none; /* visual via input nativo — suficiente */ }
.mpm-radio-text { flex: 1; font-size: 13px; line-height: 1.4; color: var(--text); }
.mpm-radio-text strong { font-weight: 600; }
.mpm-radio:has(input:checked) {
border-color: var(--accent, #4c9aff);
background: rgba(76, 154, 255, 0.08);
}
/* Upload de comprovante */
.mpm-upload-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.mpm-upload-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border: 1px dashed var(--border-strong, rgba(255, 255, 255, 0.18));
border-radius: var(--radius-md, 8px);
background: var(--surface-2, rgba(255, 255, 255, 0.02));
cursor: pointer;
font-size: 13px;
color: var(--text);
transition: border-color 0.15s, background 0.15s;
align-self: flex-start;
}
.mpm-upload-trigger:hover {
border-color: var(--accent, #4c9aff);
background: rgba(76, 154, 255, 0.06);
}
.mpm-upload-icon { font-size: 16px; }
.mpm-upload-preview { display: flex; flex-direction: column; gap: 6px; }
.mpm-file-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: var(--radius-md, 8px);
font-size: 12px;
color: var(--text);
align-self: flex-start;
max-width: 100%;
}
.mpm-file-name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 280px;
}
.mpm-file-size {
font-size: 11px;
color: var(--text-muted, #6b7596);
}
.mpm-file-remove {
background: none;
border: none;
color: var(--text-muted, #6b7596);
font-size: 16px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.mpm-file-remove:hover { color: var(--rejected, #d9534f); }
.mpm-textarea {
width: 100%;
resize: vertical;
min-height: 70px;
font-family: inherit;
font-size: 13px;
}
.mpm-charcount {
font-size: 11px;
text-align: right;
margin-top: 4px;
}
.mpm-err {
background: rgba(217, 83, 79, 0.1);
border: 1px solid rgba(217, 83, 79, 0.35);
color: var(--rejected, #d9534f);
padding: 10px 12px;
border-radius: var(--radius-md, 8px);
font-size: 13px;
margin-top: 8px;
}
/* Regra dura: classe usa `display: flex` em elementos que podem receber
[hidden] — memória feedback_hidden_attr_vs_display_flex.md.
`.mpm-err[hidden]` precisa ser invisível mesmo com display computado.
(Browsers modernos respeitam [hidden] por default, mas adicionamos a
regra explícita pra blindar caso uma cascata futura sobrescreva.) */
.mpm-err[hidden] { display: none !important; }
@media (max-width: 540px) {
.mpm-resumo-grid { grid-template-columns: 1fr 1fr; }
.mpm-input-date { max-width: 100%; }
}