/* ============================================================ HOP — Design System Torre de controle: petróleo profundo, verde-menta como cor viva, âmbar para "aguardando humano", vermelho suave para "bloqueado". Tipografia com caráter: Fraunces (títulos), IBM Plex Sans (corpo), IBM Plex Mono (auditoria/logs). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================ HOP — Design System Duas peles a partir dos mesmos tokens: clara por padrão (ar de software de saúde, limpo e sério) e escura por opção (turno longo, menos luz). O verde deixa de ser neon e vira um verde-clínico mais maduro. A alternância é um atributo no , guardado no navegador de quem usa. Tipografia institucional: Inter no corpo e na interface, Fraunces nos títulos (uma serifada com peso, que dá seriedade sem rigidez), IBM Plex Mono na trilha de auditoria e nos números. ============================================================ */ :root { /* ---- Pele clara (padrão) ---- */ /* Fundos, do mais fundo ao mais alto */ --fundo: #e7edf0; /* fundo um tom mais fundo: o card branco salta */ --fundo-2: #f2f6f7; /* campo: cinza levíssimo, não some no branco */ --superficie: #ffffff; --superficie-2: #eef3f5; --borda: #dbe4e7; --borda-viva: #c2d0d4; /* Cor viva — verde-clínico */ --menta: #0f8a6a; --menta-escura: #0a6b52; --menta-suave: rgba(15, 138, 106, 0.10); /* Semânticas operacionais */ --ambar: #b26a00; /* aguardando humano */ --ambar-suave: rgba(178, 106, 0, 0.12); --vermelho: #c0362c; /* bloqueado */ --vermelho-suave: rgba(192, 54, 44, 0.10); --azul: #1f6fb2; /* informação */ --sucesso: #0f8a6a; /* Texto */ --texto: #16302b; --texto-suave: #4a635d; --texto-fraco: #7d938d; /* Aliases usados por telas mais novas (não quebrar) */ --bg0: var(--fundo); --bg1: var(--fundo-2); --bg2: var(--superficie); --ink: var(--texto); --muted: var(--texto-suave); --faint: var(--texto-fraco); --line: var(--borda); --accent: var(--menta); --accent-soft: var(--menta-suave); --sans: 'Inter', system-ui, sans-serif; --serif: 'Fraunces', Georgia, serif; --raio: 14px; --raio-g: 20px; --sombra: 0 1px 2px rgba(22, 48, 43, 0.04), 0 8px 24px rgba(22, 48, 43, 0.07); --sombra-alta: 0 4px 12px rgba(22, 48, 43, 0.08), 0 24px 56px rgba(22, 48, 43, 0.16); --espaco: 16px; /* O brilho de fundo é sutil no claro. */ --brilho-1: rgba(15, 138, 106, 0.05); --brilho-2: rgba(31, 111, 178, 0.04); --sobre-menta: #ffffff; /* verde escuro no claro: texto branco em cima */ --topbar-bg: linear-gradient(180deg, #12352b, #0e2b23); /* barra sempre escura, é a moldura */ --topbar-ink: #eaf5f1; } /* ---- Pele escura (por opção) ---- */ :root[data-tema="escuro"] { --fundo: #06110f; --fundo-2: #0a1a18; --superficie: #0f2320; --superficie-2: #14302b; --borda: #1e3f39; --borda-viva: #2a5850; --menta: #4ee6b8; --menta-escura: #2bb98f; --menta-suave: rgba(78, 230, 184, 0.12); --ambar: #f5b544; --ambar-suave: rgba(245, 181, 68, 0.14); --vermelho: #ff6f6f; --vermelho-suave: rgba(255, 111, 111, 0.13); --azul: #5cb8ff; --sucesso: #4ee6b8; --texto: #e7f4f0; --texto-suave: #8fb2ab; --texto-fraco: #5c7a74; --sombra: 0 6px 24px rgba(0, 0, 0, 0.35); --sombra-alta: 0 18px 50px rgba(0, 0, 0, 0.55); --brilho-1: rgba(78, 230, 184, 0.06); --brilho-2: rgba(92, 184, 255, 0.05); --sobre-menta: #05201a; --topbar-bg: linear-gradient(180deg, rgba(15, 35, 32, 0.96), rgba(10, 26, 24, 0.96)); --topbar-ink: var(--texto); } * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--sans); background: radial-gradient(1200px 600px at 80% -10%, var(--brilho-1), transparent 60%), radial-gradient(900px 500px at 0% 110%, var(--brilho-2), transparent 55%), var(--fundo); color: var(--texto); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } h1 { font-size: 1.35rem; letter-spacing: 0.01em; } h2 { font-size: 1.05rem; } h3 { font-size: 0.92rem; } a { color: var(--menta); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--menta); color: var(--sobre-menta); } /* ---------- Barra superior ---------- */ .topbar { background: var(--topbar-bg); color: var(--topbar-ink); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: var(--espaco); padding: 12px 20px; position: sticky; top: 0; z-index: 50; /* Sem quebra, a barra media 1458px numa tela de 1271 e levava o botão Sair para fora. Agora ela quebra em vez de esconder controle. */ flex-wrap: wrap; row-gap: 6px; } .marca { display: flex; align-items: center; gap: 12px; font-family: var(--serif); color: var(--topbar-ink); } .marca .pulso { width: 12px; height: 12px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 0 rgba(78, 230, 184, 0.6); animation: pulsar 2.2s infinite; } @keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(78, 230, 184, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(78, 230, 184, 0); } 100% { box-shadow: 0 0 0 0 rgba(78, 230, 184, 0); } } .marca .nome { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.04em; } .marca .nome b { color: #4ee6b8; font-weight: 700; } /* a barra é sempre escura: verde vivo aqui, não o do tema */ .marca small { display: block; font-weight: 400; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(234,245,241,0.55); } .topbar .espacador { flex: 1; } .topbar .status-motor { font-size: 0.72rem; color: rgba(234, 245, 241, 0.72); display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 99px; padding: 5px 12px; font-family: 'IBM Plex Mono', monospace; } .topbar .status-motor .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--menta); } /* Navegação entre telas */ .nav-telas { display: flex; gap: 4px; flex-wrap: wrap; } .nav-telas a { /* A navegação vive na barra escura em qualquer pele. */ color: rgba(234, 245, 241, 0.62); font-size: 0.8rem; font-weight: 500; padding: 6px 12px; border-radius: 8px; text-decoration: none; } .nav-telas a:hover { background: rgba(255, 255, 255, 0.08); color: var(--topbar-ink); text-decoration: none; } .nav-telas a.ativa { background: rgba(78, 230, 184, 0.16); color: #4ee6b8; } /* ---------- Seletor de vertical ---------- */ .seletor-vertical { display: flex; gap: 6px; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 99px; padding: 4px; } .seletor-vertical button { font: inherit; font-weight: 600; font-size: 0.82rem; border: none; background: none; color: var(--texto-suave); padding: 7px 16px; border-radius: 99px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.18s; font-family: var(--serif); } .seletor-vertical button:hover { color: var(--texto); } .seletor-vertical button.ativo { background: var(--menta); color: var(--sobre-menta); box-shadow: var(--sombra); } .seletor-vertical button .ic { font-size: 1rem; } /* ---------- Cards ---------- */ .card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--borda); } .card-titulo h2, .card-titulo h3 { display: flex; align-items: center; gap: 9px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); font-weight: 600; font-family: var(--sans); } .card-titulo .contador { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--menta); background: var(--menta-suave); border-radius: 99px; padding: 2px 9px; } /* ---------- Botões ---------- */ .btn { font: inherit; font-weight: 600; font-family: var(--serif); border: none; border-radius: 10px; padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter 0.15s, transform 0.05s, background 0.15s; background: var(--menta); color: var(--sobre-menta); } .btn { box-shadow: 0 1px 2px rgba(22,48,43,0.06); } .btn:hover { filter: brightness(1.06); box-shadow: var(--sombra); } .btn:active { transform: translateY(1px) scale(0.99); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda-viva); } .btn-secundario:hover { background: var(--superficie-2); filter: none; } /* A barra do topo é escura nas duas peles. Tudo que vive nela precisa de cor clara fixa, senão some no tema claro (texto escuro sobre barra escura). No corpo, os mesmos componentes seguem o tema normalmente. */ .topbar .btn-secundario { color: #eaf5f1; border-color: rgba(255,255,255,0.22); } .topbar .btn-secundario:hover { background: rgba(255,255,255,0.10); } .topbar select { color: #eaf5f1; background: transparent; border-color: rgba(255,255,255,0.22); } .topbar select option { color: #16302b; background: #ffffff; } .btn-aprovar { background: var(--menta); color: var(--sobre-menta); } .btn-negar { background: var(--vermelho-suave); color: var(--vermelho); border: 1px solid rgba(255, 111, 111, 0.4); } .btn-negar:hover { background: var(--vermelho); color: #2a0808; filter: none; } .btn-pequeno { padding: 7px 13px; font-size: 0.8rem; border-radius: 8px; } .btn-bloco { width: 100%; } /* ---------- Formulários ---------- */ .campo { margin-bottom: 13px; } .campo label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 5px; letter-spacing: 0.02em; } /* O campo escuro é o padrão da casa, não um enfeite de quem lembrou de pôr class="campo". Sem isto, todo input solto (o do operador na central, o do visitante no WhatsApp) nascia branco do navegador e furava o tema no meio da tela. Caixas de marcar e botões ficam de fora: têm desenho próprio. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea { font: inherit; padding: 10px 13px; border: 1px solid var(--borda); border-radius: 9px; background: var(--fundo-2); color: var(--texto); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--menta); box-shadow: 0 0 0 3px var(--menta-suave); } .campo input, .campo select, .campo textarea { width: 100%; } .campo textarea { resize: vertical; min-height: 70px; } ::placeholder { color: var(--texto-fraco); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.06em; font-family: 'IBM Plex Mono', monospace; } .badge-menta { background: var(--menta-suave); color: var(--menta); } .badge-ambar { background: var(--ambar-suave); color: var(--ambar); } .badge-vermelho { background: var(--vermelho-suave); color: var(--vermelho); } .badge-azul { background: rgba(92, 184, 255, 0.13); color: var(--azul); } .badge-neutro { background: var(--superficie-2); color: var(--texto-suave); } /* ---------- Toast ---------- */ .toast-area { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; width: min(92vw, 440px); } .toast { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda-viva); border-left: 3px solid var(--menta); padding: 12px 16px; border-radius: 10px; box-shadow: var(--sombra-alta); font-size: 0.86rem; opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; } .toast.visivel { opacity: 1; transform: translateY(0); } .toast-sucesso { border-left-color: var(--menta); } .toast-erro { border-left-color: var(--vermelho); } .toast-alerta { border-left-color: var(--ambar); } /* ---------- Modal ---------- */ .modal-fundo { position: fixed; inset: 0; background: rgba(3, 10, 9, 0.72); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 100; } .modal-fundo.aberto { display: flex; } .modal { background: var(--superficie); border: 1px solid var(--borda-viva); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); width: 100%; max-width: 480px; padding: 22px; animation: subir 0.18s ease-out; } @keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .modal h2 { margin-bottom: 14px; } .modal .acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* ---------- Utilitários ---------- */ .flex { display: flex; gap: 10px; align-items: center; } .flex-entre { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .texto-suave { color: var(--texto-suave); } .texto-mono { font-family: 'IBM Plex Mono', monospace; } .oculto { display: none !important; } .vazio { text-align: center; color: var(--texto-fraco); padding: 28px 16px; font-size: 0.86rem; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borda-viva); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--menta-escura); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================================ O BALCÃO — a linguagem visual do HOP ---------------------------------------------------------------------------- Isto vem DEPOIS de tudo, de propósito: redefine os tokens e os poucos componentes que davam ao sistema cara de painel genérico, e as telas herdam sem precisar ser reescritas uma a uma. Na próxima mudança de linguagem, muda aqui, não em dezesseis arquivos. As regras, e cada uma custa alguma coisa: 1. PAPEL, NÃO VIDRO. Fundo de papel quente. O branco puro só existe onde a pessoa escreve. 2. SEM CANTO ARREDONDADO GRANDE. Raio 2px. Canto de 14px em tudo é a assinatura de painel montado por template. 3. SEM SOMBRA SUAVE. Uma linha de 1px separa melhor e não finge profundidade que a tela não tem. 4. UM ACENTO POR TELA. Verde da casa para o que é da casa, vermelho só para o que tira a pessoa da cadeira. Mais que isso e a cor deixa de significar. 5. NÚMERO É TABULAR. Número que dança quando muda é número em que ninguém confia. ========================================================================== */ :root{ /* Papel, e não vidro sobre gradiente. */ --fundo: #efece5; --fundo-2: #f7f5f0; --superficie: #faf8f4; --superficie-2: #f2efe7; --borda: #e0dcd2; --borda-viva: #cdc7ba; /* A casa. Verde profundo, não menta de marca de tecnologia. */ --menta: #15302a; --menta-escura: #0d211d; --menta-suave: rgba(21, 48, 42, 0.07); --accent: #15302a; --accent-soft: rgba(21, 48, 42, 0.07); /* Só um vermelho, e ele é sangue, não alerta de sistema. */ --vermelho: #8c2a17; --vermelho-suave: rgba(140, 42, 23, 0.09); --ambar: #9a6410; --ambar-suave: rgba(154, 100, 16, 0.10); --azul: #2c5468; --texto: #20120d; --texto-suave: #5b544a; --texto-fraco: #9b968a; --ink: #20120d; --muted: #5b544a; --faint: #9b968a; --line: #e0dcd2; /* O verde da casa é profundo, e profundo sobre escuro não se lê. Onde a marca aparece invertida (telefone do visitante, faixa de navegação, vídeo) ela usa esta. Ter um token evita o remendo tela a tela, que é como uma linguagem visual se perde. */ --menta-sobre-escuro: #7fc4a8; --raio: 2px; --raio-g: 2px; --sombra: none; --sombra-alta: 0 18px 50px rgba(18, 24, 20, 0.18); --brilho-1: transparent; --brilho-2: transparent; } body{ background: var(--fundo); color: var(--texto); } /* Número que dança quando muda é número em que ninguém confia. */ .num, td, th, .contador, .hora, .valor, input[type="number"], .chip-espera, .quando, .cod { font-variant-numeric: tabular-nums; } /* O cartão deixa de flutuar e passa a ser uma área delimitada por linha. */ .card{ background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: none; } .card-titulo{ border-bottom: 1px solid var(--borda); } .card-titulo h2, .card-titulo h3{ font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-fraco); } .card-titulo .contador{ background: none; color: var(--texto-fraco); padding: 0; font-size: 0.62rem; font-weight: 500; } /* Botão retangular, sólido, sem brilho. O primário é a casa; o secundário é uma linha. Não existe terceiro nível. */ .btn{ border-radius: var(--raio); box-shadow: none; font-weight: 600; letter-spacing: 0.02em; background: var(--menta); color: var(--superficie); } .btn:hover{ filter: none; background: var(--menta-escura); box-shadow: none; } .btn:active{ transform: none; } .btn-secundario{ background: transparent; color: var(--texto); border: 1px solid var(--menta); } .btn-secundario:hover{ background: var(--menta); color: var(--superficie); } .btn-pequeno{ border-radius: var(--raio); } .btn-aprovar{ background: var(--menta); color: var(--superficie); } .btn-negar{ background: transparent; color: var(--vermelho); border: 1px solid var(--vermelho); } .btn-negar:hover{ background: var(--vermelho); color: var(--superficie); } /* Etiqueta é retângulo com letra espaçada, não pílula colorida. */ .badge{ border-radius: var(--raio); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 4px 8px; } .badge-menta{ background: var(--menta); color: var(--superficie); } .badge-vermelho{ background: var(--vermelho); color: var(--superficie); } .badge-ambar{ background: var(--ambar-suave); color: var(--ambar); } /* Campo: fundo branco de papel de escrever, linha embaixo mais forte quando recebe o cursor. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea{ border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); } input:focus, select:focus, textarea:focus{ border-color: var(--menta); box-shadow: none; outline: none; } /* Título de tela em serifada de leitura, corpo em sem serifa. */ h1, h2{ font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; } /* Vazio é frase, não caixa cinza. */ .vazio{ background: none; border: none; color: var(--texto-fraco); font-size: 0.82rem; line-height: 1.55; } /* Tabela: régua fina, cabeçalho em versalete. Sem zebra. */ table{ border-collapse: collapse; } th{ font-family: var(--sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-fraco); border-bottom: 1px solid var(--texto); padding-bottom: 8px; text-align: left; } td{ border-bottom: 1px solid var(--borda); padding: 11px 0; font-size: 0.86rem; } tr:hover td{ background: var(--superficie-2); } /* A barra de navegação é a casa, e o que está ativo é sublinhado, não um retângulo pintado: o retângulo compete com os botões da tela, e navegação não deve competir com decisão. */ .marca .nome b{ font-weight: 400; opacity: 0.62; } .nav-telas a{ border-radius: 0; padding-bottom: 5px; } .nav-telas a.ativa{ background: none; color: #fff; border-bottom: 2px solid #6f9b8e; } .nav-telas a:hover{ background: none; color: #cfe0d9; } /* ---------------------------------------------------------------------------- Grupos de aba, em todas as telas O selecionado era uma pílula pintada, e pílula pintada compete com botão de ação: a pessoa olha e não sabe se aquilo é "onde estou" ou "clique aqui". Vira régua com sublinhado, igual à navegação do topo. Uma coisa marcada, nunca duas. -------------------------------------------------------------------------- */ .abas-painel, .rel-abas, .abas-cad, .tr-abas, .abas-visit{ border-bottom: 1px solid var(--borda); gap: 0; } .abas-painel button, .rel-abas button, .abas-cad button, .tr-abas button, .abas-visit button{ background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--texto-fraco); font-weight: 500; padding: 10px 16px; margin-bottom: -1px; transition: none; } .abas-painel button:hover, .rel-abas button:hover, .abas-cad button:hover, .tr-abas button:hover, .abas-visit button:hover{ background: none; border-color: transparent; border-bottom-color: var(--borda-viva); color: var(--texto); } .abas-painel button.ativa, .rel-abas button.ativa, .abas-cad button.ativa, .tr-abas button.ativa, .abas-visit button.ativa{ background: none; color: var(--texto); font-weight: 600; border-color: transparent; border-bottom-color: var(--menta); }