/* ═══════════════════════════════════════════════════════════ Rede Faz — folha de estilo única do sistema Paleta: cinza/preto (UI) + cores da marca (acentos) Tema claro e escuro via [data-tema] no ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Cores da marca (iguais nos dois temas) ─────────────── */ :root { --marca-vermelho: #E01F26; --marca-verde: #1A6B36; --marca-marinho: #1C2951; --marca-azul: #1B4C8C; --marca-laranja: #EE8B32; } /* ── Tema Claro (padrão) ────────────────────────────────── */ :root, [data-tema="claro"] { color-scheme: light; --acento: #1C2951; /* marinho da marca */ --acento-escuro: #121B37; --acento-suave: #EDF0F6; --acento-borda: #C6CEDE; --sidebar-bg: #17191C; /* preto grafite */ --sidebar-hover: #24282D; --sidebar-ativo: #2E333A; --sidebar-texto: #B9BFC7; --sidebar-titulo:#6C737D; --fundo: #F4F5F7; --card: #FFFFFF; --card-alt: #FAFBFC; --borda: #E3E6EA; --borda-forte: #CFD4DA; --texto: #16191D; --texto-sub: #666D77; --texto-fraco: #939AA3; --vermelho: #C7343A; --verde: #1F7A45; --amarelo: #B47709; --azul-info: #1B4C8C; --topbar-bg: #FFFFFF; --input-bg: #FFFFFF; --input-borda: #D5D9DF; --sombra: 0 1px 2px rgba(16,19,23,.06), 0 4px 14px rgba(16,19,23,.05); --sombra-forte: 0 8px 30px rgba(16,19,23,.13); --radius: 10px; --radius-sm: 7px; --trans: .18s ease; } /* ── Tema Escuro ────────────────────────────────────────── */ [data-tema="escuro"] { color-scheme: dark; --acento: #7C93C8; --acento-escuro: #9DB0DA; --acento-suave: rgba(124,147,200,.12); --acento-borda: rgba(124,147,200,.28); --sidebar-bg: #0A0B0D; --sidebar-hover: #16191D; --sidebar-ativo: #21262C; --sidebar-texto: #A7AEB7; --sidebar-titulo:#5C636C; --fundo: #0D0F11; --card: #16191D; --card-alt: #1B1F24; --borda: #262B31; --borda-forte: #343A42; --texto: #E4E7EB; --texto-sub: #9BA3AD; --texto-fraco: #6E767F; --vermelho: #F0605F; --verde: #4CB57A; --amarelo: #E0A93B; --azul-info: #6C9BE0; --topbar-bg: #16191D; --input-bg: #1B1F24; --input-borda: #333941; --sombra: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35); --sombra-forte: 0 8px 30px rgba(0,0,0,.55); } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--fundo); color: var(--texto); font-size: 14px; line-height: 1.55; transition: background .2s, color .2s; } a { color: var(--acento); text-decoration: none; } a:hover { color: var(--acento-escuro); } ::selection { background: var(--acento); color: #fff; } /* Barra de rolagem discreta (padrão da casa) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } [data-tema="escuro"] ::-webkit-scrollbar-thumb { background: #3A4048; background-clip: content-box; } /* ═══ Layout ═══════════════════════════════════════════ */ .app-layout { display: flex; min-height: 100vh; } .main { flex: 1; margin-left: 232px; display: flex; flex-direction: column; transition: margin-left var(--trans); } body.menu-recolhido .main { margin-left: 66px; } .page-body { padding: 22px 26px 40px; flex: 1; } /* ═══ Sidebar ══════════════════════════════════════════ */ .sidebar { width: 232px; min-width: 232px; background: var(--sidebar-bg); position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; overflow: hidden; transition: width var(--trans), min-width var(--trans); } body.menu-recolhido .sidebar { width: 66px; min-width: 66px; } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px; border-bottom: 1px solid rgba(255,255,255,.07); } .sidebar-logo img { width: 34px; height: 34px; flex-shrink: 0; } .sidebar-marca { line-height: 1; white-space: nowrap; } .sidebar-marca b { display: block; font-size: 17px; letter-spacing: -.3px; color: #fff; font-weight: 700; } .sidebar-marca b i { font-style: normal; font-weight: 400; color: #9AA1AA; } .sidebar-marca span { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--sidebar-titulo); } body.menu-recolhido .sidebar-marca { display: none; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background: #3A4048; } .nav-grupo-titulo { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--sidebar-titulo); padding: 8px 12px 6px; font-weight: 600; } body.menu-recolhido .nav-grupo-titulo { opacity: 0; height: 8px; padding: 0; overflow: hidden; } .nav-item, .nav-sub { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--sidebar-texto); font-size: 13.5px; cursor: pointer; user-select: none; transition: background var(--trans), color var(--trans); white-space: nowrap; overflow: hidden; } .nav-item:hover, .nav-sub:hover { background: var(--sidebar-hover); color: #fff; } .nav-item.ativo, .nav-sub.ativo { background: var(--sidebar-ativo); color: #fff; font-weight: 600; } .nav-item.ativo { box-shadow: inset 3px 0 0 var(--marca-laranja); } .nav-sub.ativo { box-shadow: inset 3px 0 0 var(--marca-laranja); } .nav-icon { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; } .sub-icon { width: 14px; text-align: center; font-size: 11px; flex-shrink: 0; } .nav-parent .nav-arrow { margin-left: auto; font-size: 9px; transition: transform var(--trans); color: var(--sidebar-titulo); } .nav-parent .nav-arrow.girado { transform: rotate(90deg); } .nav-submenu { max-height: 0; overflow: hidden; transition: max-height .22s ease; padding-left: 12px; } .nav-submenu.aberto { max-height: 600px; } .nav-sub { font-size: 13px; padding: 7px 12px; } body.menu-recolhido .nav-item span:not(.nav-icon):not(.nav-arrow), body.menu-recolhido .nav-submenu, body.menu-recolhido .sidebar-user-info { display: none; } body.menu-recolhido .nav-item { justify-content: center; } .sidebar-footer { border-top: 1px solid rgba(255,255,255,.07); padding: 10px; } .sidebar-user { display: flex; align-items: center; gap: 9px; } .avatar-mini { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--marca-marinho), var(--marca-azul)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-nome { font-size: 12.5px; color: #E8EAED; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-perfil { font-size: 10.5px; color: var(--sidebar-titulo); } .btn-logout { color: var(--sidebar-titulo); font-size: 17px; padding: 4px 6px; border-radius: 6px; } .btn-logout:hover { color: var(--vermelho); background: var(--sidebar-hover); } /* ═══ Topbar ═══════════════════════════════════════════ */ .topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 26px; background: var(--topbar-bg); border-bottom: 1px solid var(--borda); } .topbar-titulo { font-size: 16px; font-weight: 650; letter-spacing: -.2px; } .topbar-sub { font-size: 12px; color: var(--texto-sub); } .topbar-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; } .btn-icone { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--borda); background: var(--card); color: var(--texto-sub); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--trans); } .btn-icone:hover { background: var(--acento-suave); color: var(--acento); border-color: var(--acento-borda); } .chip-empresa { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--acento-suave); border: 1px solid var(--acento-borda); font-size: 12.5px; font-weight: 600; color: var(--acento); } .chip-empresa .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--marca-laranja); } /* ═══ Cabeçalho de página ══════════════════════════════ */ .page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .page-head h1 { font-size: 21px; font-weight: 680; letter-spacing: -.4px; } .page-head p { font-size: 13px; color: var(--texto-sub); margin-top: 2px; } .page-head .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ═══ Cards ════════════════════════════════════════════ */ .card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius); box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden; } .card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borda); background: var(--card-alt); } .card-head h2 { font-size: 14.5px; font-weight: 650; } .card-head .acoes { margin-left: auto; display: flex; gap: 8px; } .card-body { padding: 18px; } .card-body.compacto { padding: 0; } /* ═══ Grid de estatísticas ═════════════════════════════ */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; } .stat { background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--sombra); position: relative; overflow: hidden; } .stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--stat-cor, var(--acento)); } .stat-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .stat-icone { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: color-mix(in srgb, var(--stat-cor, var(--acento)) 14%, transparent); } .stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-sub); font-weight: 600; } .stat-valor { font-size: 26px; font-weight: 700; letter-spacing: -.8px; line-height: 1.1; } .stat-nota { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; } .cor-vermelho { --stat-cor: var(--marca-vermelho); } .cor-verde { --stat-cor: var(--marca-verde); } .cor-marinho { --stat-cor: var(--marca-marinho); } .cor-azul { --stat-cor: var(--marca-azul); } .cor-laranja { --stat-cor: var(--marca-laranja); } /* ═══ Tabelas ══════════════════════════════════════════ */ .tabela-wrap { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tabela th { text-align: left; padding: 11px 16px; background: var(--card-alt); color: var(--texto-sub); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 650; border-bottom: 1px solid var(--borda); white-space: nowrap; } table.tabela td { padding: 11px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; } table.tabela tbody tr:last-child td { border-bottom: none; } table.tabela tbody tr:hover { background: var(--card-alt); } table.tabela td.acoes { text-align: right; white-space: nowrap; } table.tabela .principal { font-weight: 600; } table.tabela .sub { font-size: 12px; color: var(--texto-sub); } .vazio { padding: 40px 20px; text-align: center; color: var(--texto-fraco); } .vazio .icone { font-size: 34px; display: block; margin-bottom: 8px; opacity: .6; } /* ═══ Botões ═══════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; font-family: inherit; transition: var(--trans); white-space: nowrap; } .btn-primario { background: var(--acento); color: #fff; } .btn-primario:hover { background: var(--acento-escuro); color: #fff; } [data-tema="escuro"] .btn-primario { color: #0D0F11; } [data-tema="escuro"] .btn-primario:hover { color: #0D0F11; } .btn-secundario { background: var(--card); color: var(--texto); border-color: var(--borda-forte); } .btn-secundario:hover { background: var(--acento-suave); border-color: var(--acento-borda); color: var(--acento); } .btn-perigo { background: transparent; color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 40%, transparent); } .btn-perigo:hover { background: color-mix(in srgb, var(--vermelho) 10%, transparent); color: var(--vermelho); } .btn-mini { padding: 5px 10px; font-size: 12px; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ═══ Formulários ══════════════════════════════════════ */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .form-grupo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .form-grupo.largo { grid-column: 1 / -1; } .form-grupo label { font-size: 12.5px; font-weight: 600; color: var(--texto-sub); } .form-grupo .dica { font-size: 11.5px; color: var(--texto-fraco); } /* `search` faltava na lista: o campo saía sem borda, sem fundo e com o arredondamento nativo do navegador, destoando de todo o resto do sistema. */ input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], input[type=search], select, textarea { width: 100%; padding: 9px 12px; background: var(--input-bg); color: var(--texto); border: 1px solid var(--input-borda); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; transition: var(--trans); } input[type=search] { -webkit-appearance: none; appearance: none; } input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; cursor: pointer; opacity: .5; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; } input[type=search]::-webkit-search-cancel-button:hover { opacity: 1 } /* Campo de busca com a lupa dentro — o padrão nas telas de lista. */ .campo-busca { position: relative; flex: 1; min-width: 240px; } .campo-busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-fraco); pointer-events: none; } .campo-busca input[type=search] { padding-left: 37px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 16%, transparent); } textarea { resize: vertical; min-height: 80px; } select { cursor: pointer; } .check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; } .check input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; } .form-acoes { display: flex; gap: 9px; margin-top: 6px; flex-wrap: wrap; } /* ═══ Badges ═══════════════════════════════════════════ */ .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .2px; white-space: nowrap; } .badge-ativo { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); } .badge-inativo { background: color-mix(in srgb, var(--vermelho) 14%, transparent); color: var(--vermelho); } .badge-admin { background: color-mix(in srgb, var(--marca-marinho) 16%, transparent); color: var(--marca-marinho); } .badge-gerente { background: color-mix(in srgb, var(--marca-azul) 16%, transparent); color: var(--marca-azul); } .badge-colab { background: color-mix(in srgb, var(--texto-sub) 16%, transparent); color: var(--texto-sub); } .badge-neutro { background: var(--acento-suave); color: var(--acento); border: 1px solid var(--acento-borda); } [data-tema="escuro"] .badge-admin { color: #9DB0DA; } [data-tema="escuro"] .badge-gerente { color: #7FA9E8; } .pilha-badges { display: flex; flex-wrap: wrap; gap: 4px; } /* ═══ Alertas ══════════════════════════════════════════ */ .alert { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 16px; border: 1px solid transparent; } .alert-ok { background: color-mix(in srgb, var(--verde) 10%, transparent); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 28%, transparent); } .alert-erro { background: color-mix(in srgb, var(--vermelho) 10%, transparent); color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 28%, transparent); } .alert-aviso { background: color-mix(in srgb, var(--amarelo) 12%, transparent); color: var(--amarelo); border-color: color-mix(in srgb, var(--amarelo) 30%, transparent); } .alert-info { background: var(--acento-suave); color: var(--acento); border-color: var(--acento-borda); } /* ═══ Abas ═════════════════════════════════════════════ */ .abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; flex-wrap: wrap; } .aba { padding: 9px 15px; font-size: 13.5px; font-weight: 600; color: var(--texto-sub); border-bottom: 2px solid transparent; margin-bottom: -1px; } .aba:hover { color: var(--texto); } .aba.ativa { color: var(--acento); border-bottom-color: var(--acento); } /* ═══ Matriz de acessos ════════════════════════════════ */ .matriz { width: 100%; border-collapse: collapse; font-size: 13px; } .matriz th, .matriz td { padding: 9px 12px; border: 1px solid var(--borda); } .matriz thead th { background: var(--card-alt); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-sub); } .matriz tbody th { text-align: left; font-weight: 600; background: var(--card-alt); white-space: nowrap; } .matriz select { padding: 5px 8px; font-size: 12.5px; } /* ═══ Login ════════════════════════════════════════════ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1000px 500px at 15% -10%, color-mix(in srgb, var(--marca-marinho) 12%, transparent), transparent 70%), radial-gradient(800px 420px at 95% 110%, color-mix(in srgb, var(--marca-laranja) 10%, transparent), transparent 70%), var(--fundo); } .login-card { width: 100%; max-width: 392px; background: var(--card); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-forte); padding: 34px 30px 26px; } .login-marca { text-align: center; margin-bottom: 24px; } .login-marca img { width: 74px; height: 74px; margin-bottom: 12px; } .login-marca .nome { font-size: 25px; font-weight: 700; letter-spacing: -.7px; line-height: 1; } .login-marca .nome i { font-style: normal; font-weight: 400; color: var(--texto-sub); } .login-marca .sub { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--texto-fraco); margin-top: 5px; } .login-btn { width: 100%; margin-top: 6px; padding: 11px; font-size: 14.5px; } .login-hint { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--texto-sub); } .login-rodape { text-align: center; margin-top: 20px; font-size: 11px; color: var(--texto-fraco); } .login-fita { display: flex; height: 4px; border-radius: 3px; overflow: hidden; margin-bottom: 22px; } .login-fita span { flex: 1; } /* ═══ Utilidades ═══════════════════════════════════════ */ .flex { display: flex; align-items: center; gap: 10px; } .flex-wrap { flex-wrap: wrap; } .entre { justify-content: space-between; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 14px; } .mb-2 { margin-bottom: 14px; } .texto-sub { color: var(--texto-sub); } .texto-fraco { color: var(--texto-fraco); } .pequeno { font-size: 12px; } .direita { text-align: right; } .centro { text-align: center; } .mono { font-family: 'Consolas', 'Courier New', monospace; font-size: 12.5px; } .nowrap { white-space: nowrap; } .divisor { height: 1px; background: var(--borda); margin: 16px 0; } .busca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .busca input[type=text] { max-width: 280px; } /* ═══ Responsivo ═══════════════════════════════════════ */ @media (max-width: 880px) { .sidebar { width: 66px; min-width: 66px; } .sidebar-marca, .nav-submenu, .sidebar-user-info, .nav-item span:not(.nav-icon):not(.nav-arrow) { display: none; } .main { margin-left: 66px; } .page-body { padding: 16px 14px 32px; } .topbar { padding: 0 14px; } }