/* ═══════════════════════════════════════════════════════════════════════
Fiobras HUB — DESIGN TOKENS (v3.27.0)
═══════════════════════════════════════════════════════════════════════
Single source of truth pra cores, raios, breakpoints e tipografia.
Compartilhado entre HUB (index.html) e os 3 sub-apps via:
Light mode é default (data-theme="light" no ).
Dark mode aplica via [data-theme="dark"] no final do arquivo.
IMPORTANTE: vars antigas dos sub-apps (--green, --red, etc) ficam
como ALIASES dos tokens novos pra não quebrar CSS existente.
*/
:root {
/* ─── Surfaces ─────────────────────────────────────────────────────── */
/* v4.10.206 — valores ALINHADOS à paleta real do hub.css (tokens estavam defasados;
o Comercial, que confia nos tokens, renderizava borda/texto diferentes do HUB). */
--t-bg: #EDF1EA; /* fundo do app */
--t-bg-deep: #E3E7DE; /* fundo mais escuro (sidenav, áreas embutidas) */
--t-surface: #FFFFFF; /* superfície de cards/modais */
--t-surface-2: #F4F7F0; /* superfície secundária (hover, sub-painéis) */
--t-surface-3: #EAEEE3; /* superfície terciária */
/* ─── Borders ──────────────────────────────────────────────────────── */
--t-border: #DAE3D2; /* borda padrão */
--t-border-2: #C5D2BC; /* borda média (separadores) */
--t-border-3: #C5CDB8; /* borda forte (focus, hover) */
/* ─── Text ─────────────────────────────────────────────────────────── */
--t-text: #1A2118; /* texto principal */
--t-text-2: #3D4337; /* texto secundário (subtitles) */
--t-muted: #5A6450; /* texto muted (labels, captions) */
--t-muted-2: #727C62; /* texto muito muted (v4.10.191 · era apagado demais) */
/* ─── Brand (Fiobras) ──────────────────────────────────────────────── */
--t-brand: #008835; /* verde Fiobras principal */
--t-brand-hover: #006B2A; /* hover/pressed */
--t-brand-soft: #E6F4EC; /* fundo brand suave */
--t-brand-soft-2: #C7E5D2; /* fundo brand médio */
--t-brand-2: #00A040; /* verde claro (gradient stops) */
--t-brand-3: #00B347; /* verde mais claro (highlights) */
/* ─── Accent (amarelo) ─────────────────────────────────────────────── */
--t-accent: #FFCB00; /* amarelo Fiobras (ponto do F) */
--t-accent-soft: #FFF8D6; /* fundo amarelo suave */
/* ─── Status semânticos ────────────────────────────────────────────── */
--t-info: #2563EB; /* azul info */
--t-info-soft: #DBEAFE;
--t-success: #10B981; /* verde sucesso (não brand) */
--t-success-soft: #D1FAE5;
--t-warn: #EA580C; /* laranja warning */
--t-warn-soft: #FFEDD5;
--t-warn-2: #D97706; /* amarelo escuro alerta */
--t-danger: #DC2626; /* vermelho perigo */
--t-danger-soft: #FEE2E2;
--t-purple: #7C3AED; /* roxo (Jacques avatar, etc) */
--t-purple-soft: #EDE9FE;
/* ─── Border radius (v3.26.0) ─────────────────────────────────────── */
--t-radius-xs: 4px;
--t-radius-sm: 8px;
--t-radius-md: 12px;
--t-radius-lg: 16px;
--t-radius-xl: 20px;
--t-radius-pill: 999px;
/* ─── Breakpoints (v3.23.0) — só documentação, não funcionam em @media */
--bp-xs: 360px;
--bp-sm: 480px;
--bp-md: 640px;
--bp-lg: 768px;
--bp-xl: 1024px;
/* ─── Tipografia ───────────────────────────────────────────────────── */
--t-font-display: 'Outfit', sans-serif;
--t-font-body: 'Poppins', sans-serif;
--t-font-mono: 'DM Mono', monospace;
/* ─── Shadows ──────────────────────────────────────────────────────── */
--t-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
--t-shadow-md: 0 2px 8px rgba(0,0,0,.06);
--t-shadow-lg: 0 8px 24px rgba(0,0,0,.10);
--t-shadow-xl: 0 16px 40px rgba(0,0,0,.14);
/* ─── Z-index hierarchy (v4.10.4 · Etapa 5 do plano de auditoria) ──
5 camadas fixas. NUNCA usar valor cru — sempre var(--z-*).
overlay → backdrops, sticky leves (notch-spacer, sticky tabs)
dropdown → menus, popovers, tooltips, user dropdown
modal → modais, bottom-sheets, lightboxes
toast → notificações (sempre sobre modal)
splash → splash screen, atualização forçada (domina tudo)
Antes da v4.10.4: caos com valores 1, 100, 200, 300, 9000, 9999,
10000, 99998, 99999 — toast às vezes ficava atrás do modal etc.
Ver §9.0.2 do CLAUDE.md. */
--z-overlay: 100;
--z-dropdown: 1000;
--z-modal: 5000;
--z-toast: 9000;
--z-splash: 10000;
/* ─── Aliases pra retrocompat com CSS antigo ──────────────────────── */
/* Sub-apps usam --green, --red, etc. Mapeamento direto pros tokens. */
--green: var(--t-brand);
--green2: var(--t-brand-hover);
--green-l: var(--t-brand-soft-2);
--green-ll: var(--t-brand-soft);
--blue: var(--t-info);
--blue-l: var(--t-info-soft);
--yellow: var(--t-accent);
--yellow-l: var(--t-accent-soft);
--red: var(--t-danger);
--red-l: var(--t-danger-soft);
--orange: var(--t-warn);
--orange-l: var(--t-warn-soft);
--purple: var(--t-purple);
--purple-l: var(--t-purple-soft);
}
/* ═══════════════════════════════════════════════════════════════════════
Avatares consistentes (v3.32.3)
═══════════════════════════════════════════════════════════════════════
Sistema único de avatares — reutilizado em HUB, CRM, Preço, Manutenção.
Se user tem foto cadastrada (users-profile//foto), usa foto.
Senão: iniciais + gradient fixo por user (classe .u-).
*/
.av{
display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;font-family:'Outfit',sans-serif;font-weight:700;
color:#fff;letter-spacing:-.02em;position:relative;flex-shrink:0;
user-select:none;background-size:cover;background-position:center;
overflow:hidden;
}
.av.sz-xs{width:20px;height:20px;font-size:8.5px;border:1.5px solid var(--t-surface,#fff);}
.av.sz-sm{width:26px;height:26px;font-size:10px;border:2px solid var(--t-surface,#fff);}
.av.sz-md{width:32px;height:32px;font-size:12px;border:2px solid var(--t-surface,#fff);}
.av.sz-lg{width:44px;height:44px;font-size:16px;border:3px solid var(--t-surface,#fff);}
/* cores por user (gradient fixo) */
.av.u-admin {background:linear-gradient(135deg,#1B1F18,#3A3A3C);}
.av.u-william {background:linear-gradient(135deg,#008835,#00b347);}
.av.u-joacir {background:linear-gradient(135deg,#0D9488,#14B8A6);}
.av.u-hernandes{background:linear-gradient(135deg,#2563EB,#60a5fa);}
.av.u-vorlei {background:linear-gradient(135deg,#EA580C,#fb923c);}
.av.u-pedro {background:linear-gradient(135deg,#7C3AED,#a855f7);}
.av.u-ivonei {background:linear-gradient(135deg,#D97706,#FBBF24);}
.av.u-roland {background:linear-gradient(135deg,#DC2626,#F87171);}
.av.u-more {background:var(--t-surface-2,#F4F6F0);color:var(--t-muted,#6B7166);border-color:var(--t-border,#E3E7DE);}
.av.u-default {background:linear-gradient(135deg,#6B7166,#9CA295);}
/* stack empilhado */
.av-stack{display:inline-flex;align-items:center;cursor:pointer;}
.av-stack .av{margin-left:-8px;}
.av-stack .av:first-child{margin-left:0;}
.av-stack.sz-xs .av{margin-left:-6px;}
/* tooltip hover */
.av-wrap{position:relative;display:inline-block;}
/* v3.48.3 — tooltip ancorado à esquerda (left:0 em vez de left:50%) pra não vazar do card.
Quando o avatar tá no canto esquerdo do card, centralizar fazia o tooltip estourar pra fora. */
.av-wrap .av-tip{
position:absolute;bottom:100%;left:0;transform:none;
margin-bottom:6px;background:#1B1F18;color:#fff;padding:4px 10px;
border-radius:6px;font-family:'Poppins',sans-serif;font-size:11px;font-weight:500;
white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:100;
}
.av-wrap .av-tip::after{
content:"";position:absolute;top:100%;left:14px;transform:none;
border:4px solid transparent;border-top-color:#1B1F18;
}
.av-wrap:hover .av-tip{opacity:1;}
/* dropdown expansão */
.av-dropdown{
position:absolute;top:100%;left:0;margin-top:6px;
background:var(--t-surface,#fff);border:1px solid var(--t-border,#E3E7DE);
border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);
min-width:220px;z-index:50;display:none;
}
.av-dropdown.open{display:block;}
.av-dropitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;}
.av-dropitem:hover{background:var(--t-surface-2,#F4F6F0);}
.av-dropitem-name{font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;flex:1;color:var(--t-text,#1B1F18);}
.av-dropitem-action{font-family:'DM Mono',monospace;font-size:10px;color:var(--t-muted,#6B7166);text-transform:uppercase;}
/* ═══════════════════════════════════════════════════════════════════════
Modais bottom-sheet em mobile (v3.28.0)
═══════════════════════════════════════════════════════════════════════
Aplica em TODOS os apps que linkam tokens.css. Em mobile (≤640px),
modais com classe .modal-bg viram slide-up cobrindo a base da tela
com drag handle no topo. Padrão iOS/Android moderno.
Sub-apps que tinham regra mobile própria continuam funcionando — esta
regra usa !important onde necessário pra prevalecer.
*/
@media (max-width: 640px) {
.modal-bg.open {
align-items: flex-end !important;
justify-content: stretch !important;
}
.modal-bg.open .modal {
width: 100% !important;
max-width: 100vw !important;
border-radius: var(--t-radius-lg, 20px) var(--t-radius-lg, 20px) 0 0 !important;
max-height: 90vh !important;
overflow-y: auto !important;
padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
animation: t-bs-slide-up .28s cubic-bezier(.2,.8,.2,1);
position: relative;
}
/* Drag handle no topo do modal */
.modal-bg.open .modal::before {
content: "";
display: block;
width: 40px;
height: 4px;
background: var(--t-border-2, #D4DAC9);
border-radius: var(--t-radius-xs, 4px);
margin: -4px auto 16px;
flex-shrink: 0;
pointer-events: none;
}
}
@keyframes t-bs-slide-up {
from { transform: translateY(100%); opacity: .6; }
to { transform: translateY(0); opacity: 1; }
}
/* ─── Dark mode ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
/* v4.10.206 — alinhado à paleta dark real do hub.css */
--t-bg: #1C1C1E;
--t-bg-deep: #0D0E10;
--t-surface: #2C2C2E;
--t-surface-2: #3A3A3C;
--t-surface-3: #1F1F21;
--t-border: #38383A;
--t-border-2: #48484A;
--t-border-3: #5A5A5C;
--t-text: #F5F5F7;
--t-text-2: #C7C7CC;
--t-muted: #98989D;
--t-muted-2: #636366;
/* Brand fica igual no dark (verde funciona bem em ambos) */
--t-brand-soft: #1A2E1F;
--t-brand-soft-2: #2A4030;
/* Status soft mais escuros */
--t-info-soft: #1A2E45;
--t-success-soft: #1A3A28;
--t-warn-soft: #3A2410;
--t-danger-soft: #3A1818;
--t-purple-soft: #2A1F45;
}
/* ═══════════════════════════════════════════════════════════════════════
:focus-visible global (v4.10.5 · Etapa 6 do plano de auditoria)
═══════════════════════════════════════════════════════════════════════
Foco visível custom — anel verde brand. Aplicado universalmente em
button/a/input/select/textarea/[tabindex]. NÃO afeta clicks (mouse),
só Tab navigation (graças ao :focus-visible vs :focus). Compartilhado
pelos 4 apps via tokens.css (HUB + CRM + Manutenção + Preço).
ANTES da v4.10.5: outline default do browser (azul). Em dark mode
ficava invisível. Acessibilidade WCAG AA falhava.
*/
:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 136, 53, 0.45),
0 0 0 5px rgba(0, 136, 53, 0.18);
border-radius: var(--t-radius-sm, 8px);
transition: box-shadow 0.12s ease;
}
/* Inputs e selects mantêm o border-radius original */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
border-radius: inherit;
box-shadow: 0 0 0 3px rgba(0, 136, 53, 0.35);
}
/* Pills, chips, avatares — usa radius do componente */
.av:focus-visible,
.cm-chip:focus-visible,
.tag:focus-visible {
border-radius: var(--t-radius-pill, 999px);
}
/* Reduce motion respeitado */
@media (prefers-reduced-motion: reduce) {
:focus-visible { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
Micro-interações / Motion (v4.10.163)
═══════════════════════════════════════════════════════════════════════
Camada de fluidez compartilhada por TODOS os apps (HUB + sub-apps).
Utilitários opt-in (.fx-*) + press tátil universal. GPU-only (transform/opacity).
JS complementar em /js/microfx.js (window.MicroFX). Respeita reduced-motion.
*/
:root{
--fx-spring: cubic-bezier(.34,1.56,.64,1); /* overshoot tátil */
--fx-ease: cubic-bezier(.2,.8,.2,1); /* saída suave */
--fx-lift: 0 10px 28px rgba(0,0,0,.12);
}
[data-theme="dark"]{ --fx-lift: 0 12px 32px rgba(0,0,0,.45); }
/* Press tátil universal — :where() tem especificidade 0, nunca sobrepõe :active próprio do componente */
@media (prefers-reduced-motion: no-preference){
:where(button, .btn, [role="button"]){ transition: transform .14s var(--fx-spring); }
:where(button, .btn, [role="button"]):active{ transform: scale(.96); }
}
/* .fx-tactile — lift no hover + press no toque (opt-in) */
.fx-tactile{ transition: transform .18s var(--fx-ease), box-shadow .18s var(--fx-ease); }
@media (hover:hover){ .fx-tactile:hover{ transform: translateY(-3px); box-shadow: var(--fx-lift); } }
.fx-tactile:active{ transform: scale(.985); transition-duration:.08s; }
/* Ripple — elemento com .fx-ripple + data-fx="ripple"; o JS injeta .fx-ripple-ink */
.fx-ripple{ position:relative; overflow:hidden; }
.fx-ripple-ink{ position:absolute; border-radius:50%; background:currentColor; opacity:.26;
transform:translate(-50%,-50%) scale(0); pointer-events:none; animation:fx-rip .6s var(--fx-ease) forwards; }
@keyframes fx-rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }
/* Stagger reveal — anima só quando o JS adiciona .fx-in (gatilho na entrada da aba, não a cada render) */
.fx-stagger.fx-in > *{ animation: fx-rise .42s var(--fx-ease) both; animation-delay: calc(var(--fx-i, 0) * 38ms); }
@keyframes fx-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
/* Dock magnético — item escala por --fx-t (0..1) setado pelo JS via proximidade do cursor/dedo */
.fx-dock-item{ transition: transform .16s var(--fx-ease);
transform: scale(calc(1 + var(--fx-t,0) * .5)) translateY(calc(var(--fx-t,0) * -10px)); transform-origin:bottom center; }
/* Indicador de aba deslizante (criado/movido pelo JS) */
.fx-tab-ind{ position:absolute; z-index:0; left:0; top:0; border-radius:var(--t-radius-pill,999px);
transition: transform .38s var(--fx-spring), width .38s var(--fx-spring), height .2s, opacity .2s; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
.fx-tactile, .fx-dock-item, .fx-tab-ind{ transition:none !important; }
.fx-tactile:hover, .fx-dock-item{ transform:none !important; }
.fx-stagger.fx-in > *{ animation:none !important; }
.fx-ripple-ink{ display:none !important; }
}