:root { /* Marca */ --amarelo: #FFC425; /* amarelo oficial Vermeer (tema PowerPoint da marca) */ --verde: #00703C; /* verde oficial Vermeer */ --verde-escuro: #00532f; --preto: #000000; /* Superfícies e bordas */ --fundo: #f4f4f2; --card: #ffffff; --borda: #e2e2de; --surface-hover: #faf9f6; --surface-hover-forte: #f0efe9; --surface-suave: #e7e7e2; --surface-suave-hover: #d9d9d2; --surface-abas: #e9e9e4; --surface-perigo: #fff5f5; --borda-perigo: #f3c9c9; --surface-aviso: #fff8e1; --borda-aviso: #f0d98a; /* Texto */ --texto: #1a1a1a; --texto-suave: #6b6b66; --texto-invertido: #fff; --texto-topo: #d0d0cb; --texto-topo-suave: #ccccc7; --texto-placeholder: #9c9c96; --texto-label: #3f3f3a; --texto-login-suave: #b8b8b1; --texto-login-secundario: #a6a69f; /* Cabeçalho e controles escuros */ --topo-menu: #232320; --topo-borda: #3a3a35; --topo-controle: rgba(255,255,255,.10); --topo-controle-borda: rgba(255,255,255,.18); --topo-controle-foco: rgba(255,255,255,.16); --login-input: #1e1e1c; /* Estados e componentes */ --ok: #16a34a; --alerta: #d97706; --erro: #dc2626; --erro-hover: #b91c1c; --amarelo-hover: #ffca3d; --input-bg: var(--card); --input-borda: var(--borda); --tabela-cabecalho: var(--surface-hover); --tabela-linha-hover: var(--surface-hover); --destaque-salvo: #fef3c7; /* Badges e mensagens */ --sucesso-fundo: #dcfce7; --sucesso-texto: #166534; --sucesso-texto-escuro: #14532d; --informacao-fundo: #dbeafe; --informacao-texto: #1e40af; --aviso-fundo: #fef3c7; --aviso-texto: #854d0e; --aviso-fundo-forte: #fde68a; --aviso-texto-forte: #78350f; --erro-fundo: #fee2e2; --erro-texto: #991b1b; --erro-texto-escuro: #7f1d1d; --roxo-fundo: #ede9fe; --roxo-texto: #5b21b6; --neutro-fundo: #e5e7eb; --neutro-texto: #374151; /* Sombras e camadas */ --sombra-suave: 0 1px 2px rgba(0,0,0,.08); --sombra-md: 0 10px 24px rgba(0,0,0,.4); --sombra-lg: 0 12px 28px rgba(0,0,0,.28); --sombra-modal: 0 18px 44px rgba(0,0,0,.28); --sobreposicao-modal: rgba(17,17,17,.5); } /* Tema escuro: aplicado quando está presente. */ [data-theme="dark"] { /* Superfícies e bordas */ --fundo: #171716; --card: #232320; --borda: #42423d; --surface-hover: #2d2d29; --surface-hover-forte: #383833; --surface-suave: #34342f; --surface-suave-hover: #40403a; --surface-abas: #2b2b27; --surface-perigo: #321f20; --borda-perigo: #754547; --surface-aviso: #352c18; --borda-aviso: #80682a; /* Texto */ --texto: #f2f2ed; --texto-suave: #b8b8b1; --texto-label: #d6d6cf; /* Campos */ --input-bg: #1d1d1a; --input-borda: #51514b; /* Feedback e badges */ --destaque-salvo: #4a3c13; --sucesso-fundo: #173a27; --sucesso-texto: #8ee5ae; --sucesso-texto-escuro: #a4edbe; --informacao-fundo: #1d3559; --informacao-texto: #a9ccff; --aviso-fundo: #493a16; --aviso-texto: #f5d37a; --aviso-fundo-forte: #614c15; --aviso-texto-forte: #ffe39a; --erro-fundo: #492526; --erro-texto: #ffaaa8; --erro-texto-escuro: #ffc1bf; --roxo-fundo: #352755; --roxo-texto: #d1bbff; --neutro-fundo: #383a3d; --neutro-texto: #d1d5db; /* Sombras e camadas */ --sombra-suave: 0 1px 2px rgba(0,0,0,.35); --sombra-md: 0 10px 24px rgba(0,0,0,.5); --sombra-lg: 0 12px 28px rgba(0,0,0,.5); --sombra-modal: 0 18px 44px rgba(0,0,0,.6); --sobreposicao-modal: rgba(0,0,0,.72); } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--fundo); color: var(--texto); } .topo { background: var(--preto); color: var(--texto-invertido); display: flex; align-items: stretch; justify-content: space-between; padding: 0; min-height: 52px; flex-wrap: wrap; } .topo .marca { background: var(--amarelo); color: var(--preto); font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 0 32px 0 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); } .logo-topo { height: 30px; display: block; } .topo .marca span { font-size: 14px; letter-spacing: .05em; text-transform: uppercase; } .topo .links { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; margin-left: 8px; } .topo .links a { color: var(--texto-topo); text-decoration: none; padding: 0 14px; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; border-bottom: 3px solid transparent; } .topo .links a:hover { color: var(--texto-invertido); } .topo .links a.ativa { color: var(--texto-invertido); border-bottom-color: var(--amarelo); } .topo .links a.botao { background: var(--amarelo); color: var(--preto); font-weight: 700; margin: 9px 0 9px 12px; padding: 0 22px 0 16px; border-bottom: none; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .topo .links a.botao:hover { background: var(--amarelo-hover); color: var(--preto); } /* menus suspensos */ .topo .menu { position: relative; display: flex; align-items: stretch; } .topo .links .menu-trigger { color: var(--texto-topo); padding: 0 14px; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; } .topo .links .menu-trigger:hover { color: var(--texto-invertido); } .topo .links .menu-trigger:focus-visible { outline: 2px solid var(--amarelo); outline-offset: -4px; } .topo .links .menu-trigger.ativa, .topo .links .menu > a.ativa { color: var(--texto-invertido); border-bottom-color: var(--amarelo); } .topo .links .menu > a::after, .topo .links .menu-trigger::after { content: "▾"; font-size: 10px; margin-left: 5px; opacity: .75; } .topo .submenu { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--topo-menu); border: 1px solid var(--topo-borda); border-top: 2px solid var(--amarelo); padding: 6px 0; display: none; z-index: 50; box-shadow: var(--sombra-md); } .topo .menu:hover .submenu, .topo .menu:focus-within .submenu { display: block; } .topo .links .submenu a { display: block; color: var(--texto-topo); padding: 9px 16px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; border-bottom: none; } .topo .links .submenu a:hover { background: var(--topo-controle); color: var(--texto-invertido); } /* busca global no topo — leva para a lista de itens já filtrada */ /* encolhe conforme a nav aperta, para não empurrar a sessão para outra linha */ .busca-topo { display: flex; align-items: center; flex: 1 1 180px; min-width: 140px; max-width: 320px; margin-left: auto; } .busca-topo input { flex: 1; min-width: 0; padding: 7px 12px; font-size: 13px; font-family: inherit; color: var(--texto-invertido); background: var(--topo-controle); border: 1px solid var(--topo-controle-borda); border-right: none; border-radius: 8px 0 0 8px; outline: none; } .busca-topo input::placeholder { color: var(--texto-placeholder); } .busca-topo input:focus { background: var(--topo-controle-foco); border-color: var(--amarelo); } .busca-topo button { display: flex; align-items: center; justify-content: center; padding: 0 12px; height: 33px; background: var(--amarelo); color: var(--preto); border: none; border-radius: 0 8px 8px 0; cursor: pointer; } .busca-topo button:hover { background: var(--amarelo-hover); } .busca-topo button svg { width: 16px; height: 16px; stroke-linecap: round; } @media (max-width: 700px) { .busca-topo { flex: 1 1 100%; margin: 6px 16px 8px; } /* acompanha a largura do formulário; a versão larga sairia da tela */ .busca-sugestoes { width: auto; left: 0; right: 0; max-width: none; } } /* sugestões da busca viva */ .busca-topo { position: relative; } /* mais larga que o campo (senão o texto quebra e cada linha fica enorme), ancorada à direita para não sair da tela */ .busca-sugestoes { position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 60; width: max(100%, 400px); max-width: 92vw; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra-lg); overflow: hidden auto; max-height: 60vh; } .busca-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1px 10px; padding: 8px 12px; text-decoration: none; border-bottom: 1px solid var(--borda); } .busca-nome, .busca-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .busca-item:last-of-type { border-bottom: none; } .busca-item:hover, .busca-item.ativo { background: var(--surface-hover); } .busca-nome { font-size: 13.5px; font-weight: 600; color: var(--texto); } .busca-meta { grid-column: 1; font-size: 11.5px; color: var(--texto-suave); } .busca-status { grid-row: 1 / span 2; align-self: center; font-size: 11px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; } .busca-vazio { padding: 14px 12px; font-size: 13px; color: var(--texto-suave); font-style: italic; } .busca-mais { display: block; width: 100%; padding: 10px; border: none; border-top: 1px solid var(--borda); background: var(--surface-hover); color: var(--verde); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; border-radius: 0; } .busca-mais:hover { background: var(--surface-hover-forte); } /* edição rápida na própria linha da lista de itens */ .acoes-item { display: flex; gap: 6px; flex-wrap: wrap; } .linha-edicao > td { background: var(--surface-hover); border-top: 2px solid var(--amarelo); } .form-rapido { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; } .form-rapido label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; font-size: 11.5px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; } .form-rapido label.curto { flex: 0 0 80px; } .form-rapido input, .form-rapido select { padding: 7px 9px; border: 1px solid var(--borda); border-radius: 7px; font-size: 13px; font-family: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto); background: var(--input-bg); width: 100%; } .form-rapido input:focus, .form-rapido select:focus { outline: 2px solid var(--amarelo); border-color: var(--amarelo); } .acoes-rapido { display: flex; gap: 8px; align-items: center; flex: 1 1 100%; } .aviso-rapido { font-size: 12px; color: var(--texto-suave); } .aviso-rapido.erro { color: var(--erro); font-weight: 600; } /* pisca a linha ao salvar, para o usuário ver o que mudou */ tr.salvo > td { animation: destaque-salvo 1.4s ease-out; } @keyframes destaque-salvo { from { background: var(--destaque-salvo); } to { background: transparent; } } /* rodapé com a versão (só admin) */ .rodape-versao { max-width: 1100px; margin: 0 auto; padding: 8px 24px 28px; text-align: right; } .rodape-versao a { font-size: 12px; color: var(--texto-suave); text-decoration: none; } .rodape-versao a:hover { color: var(--verde); text-decoration: underline; } /* página de versão / changelog */ .releases { display: flex; flex-direction: column; gap: 16px; } .release { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 16px 20px; border-left: 4px solid var(--borda); } .release.atual { border-left-color: var(--amarelo); } .release-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .release-topo h2 { margin: 0; font-size: 17px; } .release-data { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; } .release-grupo { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin-top: 12px; align-items: start; } .release-grupo ul { margin: 0; padding-left: 18px; font-size: 14px; } .release-grupo li { margin-bottom: 4px; } .badge-mudanca { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .badge-mudanca.adicionado { background: var(--sucesso-fundo); color: var(--sucesso-texto); } .badge-mudanca.alterado { background: var(--informacao-fundo); color: var(--informacao-texto); } .badge-mudanca.corrigido { background: var(--aviso-fundo); color: var(--aviso-texto); } .badge-mudanca.removido { background: var(--erro-fundo); color: var(--erro-texto); } .badge-mudanca.seguranca { background: var(--roxo-fundo); color: var(--roxo-texto); } @media (max-width: 560px) { .release-grupo { grid-template-columns: 1fr; } } .topo .sessao { display: flex; align-items: center; gap: 12px; font-size: 12.5px; padding: 0 18px; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--topo-borda); border-radius: 50%; background: transparent; color: var(--texto-invertido); cursor: pointer; } .theme-toggle::before { content: "\263e"; font-size: 19px; line-height: 1; } html[data-theme="dark"] .theme-toggle::before { content: "\263c"; } .theme-toggle:hover { background: var(--topo-controle); } .theme-toggle:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; } .topo .sessao .quem { color: var(--texto-invertido); font-weight: 600; display: flex; align-items: center; gap: 6px; } .topo .sessao .quem svg { width: 14px; height: 14px; opacity: .85; } .topo .sessao a { color: var(--texto-topo-suave); text-decoration: none; } .topo .sessao a:hover { color: var(--texto-invertido); } main { max-width: 1200px; margin: 24px auto; padding: 0 20px 60px; } h1 { font-size: 24px; margin: 0 0 16px; } h2 { font-size: 17px; margin: 28px 0 10px; } .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .flash.ok { background: var(--sucesso-fundo); color: var(--sucesso-texto-escuro); } .flash.erro { background: var(--erro-fundo); color: var(--erro-texto-escuro); } /* ---- tela de login (estilo Vermeer, fundo escuro) ---- */ body.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--preto); color: var(--texto-invertido); } .caixa-login { width: 340px; text-align: center; padding: 20px; } .logo-login { display: block; margin: 0 auto 14px; width: 220px; } .caixa-login .tagline { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-login-suave); margin-bottom: 28px; } .caixa-login h1 { font-size: 20px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 6px; } .caixa-login .sub { font-size: 12.5px; color: var(--texto-login-secundario); margin-bottom: 24px; } .caixa-login .campo { margin-bottom: 16px; text-align: left; } .caixa-login .campo label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-login-suave); margin-bottom: 6px; font-weight: 600; } .caixa-login .campo input { width: 100%; padding: 11px 12px; background: var(--login-input); border: 1px solid var(--topo-borda); border-radius: 4px; color: var(--texto-invertido); font-size: 14px; } .caixa-login .campo input:focus { outline: none; border-color: var(--amarelo); } .caixa-login button { width: 100%; margin-top: 8px; padding: 13px; background: var(--amarelo); color: var(--preto); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; border: none; cursor: pointer; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); } .caixa-login button:hover { background: var(--amarelo-hover); } .caixa-login .flash { text-align: left; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; } .card { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; border-top: 3px solid var(--amarelo); } .card .num { font-size: 28px; font-weight: 700; } .card .rotulo { font-size: 13px; color: var(--texto-suave); margin-top: 2px; } .card.alerta .num { color: var(--erro); } .card .dica { font-size: 11px; color: var(--texto-suave); margin-top: 5px; line-height: 1.35; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } } /* ---- dashboard gerencial ---- */ .cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .cabecalho-pagina h1 { margin: 0; } .subabas { display: flex; gap: 4px; background: var(--surface-abas); padding: 4px; border-radius: 10px; } .subabas a { padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--texto-suave); } .subabas a:hover { color: var(--texto); } .subabas a.ativa { background: var(--card); color: var(--texto); box-shadow: var(--sombra-suave); } .grid-graficos { display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; margin: 20px 0; } .grid-graficos > * { min-width: 0; } /* impede o canvas do gráfico de alargar a coluna */ .grid-graficos .largo { grid-column: 1 / -1; } @media (max-width: 900px) { .grid-graficos { grid-template-columns: 1fr; } } .card-grafico { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 16px 18px; } .card-grafico h3 { margin: 0; font-size: 15px; } .card-grafico .nota-grafico { margin: 2px 0 10px; font-size: 12px; color: var(--texto-suave); } .area-grafico { position: relative; height: 280px; } .area-grafico.baixa { height: 160px; } .barra.mini { height: 6px; margin-top: 8px; } .nota-rodape { font-size: 13px; color: var(--texto-suave); margin-top: 20px; } /* subtítulo de página e rodapé de tabela (padroniza os antigos style="color:#64748b") */ .subtitulo { color: var(--texto-suave); font-size: 14px; margin: -6px 0 18px; max-width: 75ch; } .rodape-tabela { color: var(--texto-suave); font-size: 13px; margin-top: 10px; } h2 .sufixo { color: var(--texto-suave); font-weight: 400; } .suave { color: var(--texto-suave); } table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; font-size: 14px; } th { text-align: left; padding: 10px 12px; background: var(--tabela-cabecalho); color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--amarelo); } td { padding: 9px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--tabela-linha-hover); } td.num, th.num { text-align: right; } a { color: var(--verde); } .tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; } .tag.Novo { background: var(--sucesso-fundo); color: var(--sucesso-texto); } .tag.Usado { background: var(--aviso-fundo); color: var(--aviso-texto); } .tag.Em.uso, .tag.EmUso { background: var(--informacao-fundo); color: var(--informacao-texto); } .tag.Em.estoque { background: var(--sucesso-fundo); color: var(--sucesso-texto); } .tag.Manutenção { background: var(--aviso-fundo-forte); color: var(--aviso-texto-forte); } .tag.Venda { background: var(--roxo-fundo); color: var(--roxo-texto); } .tag.Descarte { background: var(--erro-fundo); color: var(--erro-texto); } .tag.cinza { background: var(--neutro-fundo); color: var(--neutro-texto); } .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .filtros input, .filtros select { padding: 8px 10px; border: 1px solid var(--input-borda); border-radius: 8px; font-size: 14px; background: var(--input-bg); } .filtros input[type=text] { min-width: 220px; } form.formulario { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 20px; max-width: 760px; } .linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; } .campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--texto-label); } .campo input, .campo select, .campo textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--input-borda); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--input-bg); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--amarelo); border-color: var(--amarelo); } .campo .dica { font-size: 12px; color: var(--texto-suave); margin-top: 3px; } .linha-check { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; cursor: pointer; } .linha-check input { width: 16px; height: 16px; accent-color: var(--verde); flex: none; } .form-contato { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .form-contato input[type=email] { padding: 5px 8px; border: 1px solid var(--borda); border-radius: 6px; font-size: 13px; width: 170px; } .form-contato label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texto-suave); cursor: pointer; } .form-contato label input { width: 15px; height: 15px; accent-color: var(--verde); } .form-teste-email { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; } .form-teste-email input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; min-width: 300px; flex: 1; } .filtro-status { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 16px; margin-bottom: 18px; } .filtro-status summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto-suave); } .filtro-status summary:hover { color: var(--texto); } .check-inline { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 10px; } .check-inline .linha-check { padding: 3px 0; } .zona-perigo { background: var(--surface-perigo); border: 1px solid var(--borda-perigo); border-left: 4px solid var(--erro); border-radius: 10px; padding: 18px 20px; } .zona-perigo p { margin: 0 0 10px; font-size: 14px; } .zona-perigo ul { margin: 0 0 10px; padding-left: 20px; font-size: 14px; } .zona-perigo li { margin-bottom: 3px; } fieldset { border: 1px solid var(--borda); border-radius: 8px; margin: 0 0 14px; padding: 12px 14px 4px; } legend { font-size: 13px; font-weight: 700; color: var(--texto-suave); padding: 0 6px; } button, .btn { background: var(--verde); color: var(--texto-invertido); border: none; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .btn:hover { background: var(--verde-escuro); } .btn.secundario { background: var(--surface-suave); color: var(--texto); } .btn.secundario:hover { background: var(--surface-suave-hover); } .btn.perigo { background: var(--erro); } .btn.perigo:hover { background: var(--erro-hover); } .btn.pequeno { padding: 5px 10px; font-size: 12px; } .acoes { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .barra { background: var(--surface-suave); border-radius: 99px; height: 8px; overflow: hidden; min-width: 80px; } .barra > div { height: 100%; background: var(--ok); } .barra > div.meio { background: var(--alerta); } .barra > div.fim { background: var(--erro); } .detalhe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 20px; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 18px; margin-bottom: 20px; } .detalhe-grid .campo-det { padding: 6px 0; } .detalhe-grid .campo-det .rot { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; } .detalhe-grid .campo-det .val { font-size: 15px; margin-top: 2px; } .vazio { color: var(--texto-suave); font-style: italic; padding: 20px; text-align: center; } /* banner do termo (aparece após atribuição/devolução) */ .banner-termo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--surface-aviso); border: 1px solid var(--borda-aviso); border-left: 4px solid var(--amarelo); padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } /* modal genérico (termo de entrega/devolução) */ .modal-fundo { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--sobreposicao-modal); } .modal-fundo[hidden] { display: none; } .modal-caixa { background: var(--card); border-radius: 12px; padding: 22px 24px; width: 420px; max-width: 100%; box-shadow: var(--sombra-modal); border-top: 4px solid var(--amarelo); } .modal-caixa h2 { margin: 0 0 2px; font-size: 18px; } .modal-caixa .campo { margin-bottom: 12px; } .modal-caixa .acoes { margin-top: 8px; } /* tela de movimentação rápida */ .mov-busca { position: relative; max-width: 560px; margin-bottom: 18px; } .mov-busca > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--texto-label); } .mov-busca input { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 15px; } .mov-busca input:focus { outline: 2px solid var(--amarelo); border-color: var(--amarelo); } .mov-busca .busca-sugestoes { width: 100%; } .mov-selecionado { background: var(--surface-hover); border: 1px solid var(--borda); border-left: 3px solid var(--amarelo); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 15px; } .mov-selecionado .suave { font-size: 12.5px; margin-top: 2px; } /* ---- regras de estoque mínimo ---- */ .regra { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .regra-alerta { border-left: 4px solid var(--erro); } .regra-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .regra-filtro { font-size: 13px; margin-top: 3px; } .regra-status { text-align: right; white-space: nowrap; } .num-grande { font-size: 22px; font-weight: 700; } .txt-erro { color: var(--erro); } .regra details { margin-top: 10px; } .regra summary { cursor: pointer; font-size: 13px; color: var(--verde); font-weight: 600; } .form-regra { margin-top: 12px; } label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin: 4px 0 2px; } label.check input { width: auto; } /* ---- em uso por pessoa (agrupado por colaborador) ---- */ .pessoa { background: var(--card); border: 1px solid var(--borda); border-left: 3px solid var(--verde); border-radius: 10px; padding: 14px 16px 8px; margin-bottom: 14px; } .pessoa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 8px; } .pessoa-nome { font-size: 16px; font-weight: 700; } .pessoa-meta { color: var(--texto-suave); font-size: 13px; margin-left: 8px; } .pessoa-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pessoa-contagem { font-size: 12.5px; color: var(--texto-suave); font-weight: 600; } .pessoa table { border: none; border-radius: 0; font-size: 13.5px; } .pessoa th { background: transparent; border-bottom: 1px solid var(--borda); } .pessoa tr:hover td { background: var(--tabela-linha-hover); } /* em telas pequenas, tabelas largas rolam na horizontal em vez de estourar a página */ @media (max-width: 700px) { table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .cabecalho-pagina { align-items: flex-start; } .subabas { width: 100%; } .subabas a { flex: 1; text-align: center; } /* sem hover no mobile: menu empilhado com submenus visíveis */ .topo .links { flex-direction: column; align-items: stretch; margin-left: 0; width: 100%; } .topo .menu { display: block; } .topo .links .menu > a, .topo .links .menu-trigger { padding: 10px 16px; } .topo .links .menu > a::after, .topo .links .menu-trigger::after { content: ""; } .topo .submenu { position: static; display: block; border: none; border-top: none; box-shadow: none; background: transparent; padding: 0 0 6px 28px; } .topo .links .submenu a { padding: 8px 0; } .topo .sessao { width: 100%; justify-content: flex-end; padding: 8px 16px; } } /* ---- stat bar (dashboard hero — substitui os 5 cards) ---- */ .stat-bar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--card); border: 1px solid var(--borda); border-top: 3px solid var(--amarelo); border-radius: 10px; margin-bottom: 20px; overflow: hidden; } .stat-celula { padding: 20px 22px; position: relative; } .stat-celula + .stat-celula::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--borda); } .stat-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; } .stat-num { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .stat-sub { font-size: 12.5px; color: var(--texto-suave); } .stat-sub a { color: var(--verde); text-decoration: none; font-weight: 600; } .stat-sub a:hover { text-decoration: underline; } .stat-progresso { margin-top: 10px; } .stat-progresso-trilha { height: 5px; background: var(--borda); border-radius: 99px; overflow: hidden; max-width: 220px; } .stat-progresso-barra { height: 100%; background: var(--ok); border-radius: 99px; } .texto-suave { color: var(--texto-suave); } .stat-pill-alerta { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; background: var(--erro-fundo); color: var(--erro-texto); border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700; text-decoration: none; } .stat-pill-alerta:hover { opacity: .82; } @media (max-width: 680px) { .stat-bar { grid-template-columns: 1fr; } .stat-celula + .stat-celula::before { top: 0; bottom: auto; left: 16px; right: 16px; width: auto; height: 1px; } .stat-num { font-size: 32px; } } /* ---- botão "Ajustar visão" e painel colapsável ---- */ .btn-ajustar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto-suave); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color .15s, color .15s; } .btn-ajustar:hover { border-color: var(--amarelo); color: var(--texto); } .btn-ajustar svg { width: 14px; height: 14px; flex-shrink: 0; } .painel-ajustar { background: var(--card); border: 1px solid var(--borda); border-left: 3px solid var(--amarelo); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; } .painel-ajustar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .painel-ajustar-header h3 { font-size: 15px; margin: 0; } .painel-fechar { background: none; border: none; cursor: pointer; color: var(--texto-suave); padding: 4px; display: flex; align-items: center; line-height: 1; } .painel-fechar:hover { color: var(--texto); } /* rodapé de paginação das listagens */ .paginacao { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }