/* ============================================================================ BRsip — painel wg-easy no sistema visual "Papel Tecnico" ---------------------------------------------------------------------------- Carregado DEPOIS do app.css (ver o no index.html rebrandado), entao vence por ordem de fonte. Tres coisas acontecem aqui: 1. COR DE ACAO: o wg-easy e vermelho de fabrica. As classes `red-*` viram o verde da marca (#007A2F claro / #00B347 escuro). 2. SUPERFICIE CLARA: no tema light o fundo vira papel (#EFEFEA), os cartoes ficam brancos com fio de 1px e as sombras somem — e o mesmo tratamento do site e do PBX. 3. TIPOGRAFIA: Archivo nos titulos, Inter no corpo, IBM Plex Mono nos dados (IP, datas, tamanhos). As fontes sao servidas pelo proprio Caddy em /fonts/ — nada de CDN, o painel funciona sem internet de saida. ATENCAO ao tema escuro: o Tailwind 4 compila as variantes como `.dark\:bg-x:where(.dark, .dark *)`, que tem especificidade 0,1,0. Qualquer `!important` nosso sem escopo mataria o dark. Por isso TODA regra de superficie clara esta dentro de `html:not(.dark)`. O `.dark` fica no (app.js: `document.documentElement.classList.toggle('dark', ...)`). O painel atras de login segue escuro quando o usuario escolhe dark — mesma decisao do esim-admin do site. So o acento muda: #00B347 sobre fundo escuro. ========================================================================== */ /* --- Fontes (subset latin, servidas em /fonts/) ------------------------- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/archivo-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plexmono-latin.woff2') format('woff2'); } /* --- Tokens (iguais aos do theme.js do site) ---------------------------- */ :root { --paper: #EFEFEA; --paper-alt: #E6E7E0; --paper-card: #FFFFFF; --ink: #0C120E; --ink-soft: #59635C; --ink-faint: #8B948C; --rule: #D8DAD2; --brand: #007A2F; --brand-deep: #005E23; --brand-light: #00B347; --brand-tint: #E2EFE6; /* verde lavado — equivalente do red-100 */ --mark: #FFC93C; } /* ============================ TIPOGRAFIA ================================= */ html, body, input, button, select, textarea { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } h1, .text-4xl, .text-2xl { font-family: 'Archivo', 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; } /* Linha de dados do cliente (IP, ultimo handshake, trafego): mono, porque e dado tecnico e nao prosa. E o mesmo papel do .eyebrow do site. */ .text-xs.text-gray-500 { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.01em; } /* ====================== SUPERFICIE CLARA (tema light) ==================== */ html:not(.dark) body.bg-gray-50 { background-color: var(--paper) !important; } /* Fios no lugar de sombras — papel nao tem sombra colorida. */ html:not(.dark) .shadow, html:not(.dark) .shadow-md, html:not(.dark) .shadow-lg, html:not(.dark) .shadow-xl { box-shadow: none !important; } html:not(.dark) .bg-white.rounded, html:not(.dark) .bg-white.rounded-md, html:not(.dark) .bg-white.rounded-lg { border: 1px solid var(--rule) !important; } /* Fios e divisores */ html:not(.dark) .border-gray-100, html:not(.dark) .border-gray-200, html:not(.dark) .border-gray-300 { border-color: var(--rule) !important; } /* Texto */ html:not(.dark) .text-gray-700 { color: var(--ink) !important; } html:not(.dark) .text-gray-600, html:not(.dark) .text-gray-500 { color: var(--ink-soft) !important; } html:not(.dark) .text-gray-400, html:not(.dark) .text-gray-300 { color: var(--ink-faint) !important; } html:not(.dark) .text-black { color: var(--ink) !important; } /* Blocos cinza do app (avatar do cliente, botao de tema) viram papel-alt. O seletor e mais especifico que o do body de proposito: a classe e a mesma. */ html:not(.dark) .rounded-full.bg-gray-50, html:not(.dark) .bg-gray-100, html:not(.dark) .bg-gray-200 { background-color: var(--paper-alt) !important; } html:not(.dark) .hover\:bg-gray-300:hover, html:not(.dark) .hover\:bg-gray-50:hover { background-color: var(--rule) !important; } /* ===================== COR DE ACAO — tema light ========================= */ /* vermelho de fabrica -> verde da marca: 600=#007A2F 800=#005E23 100=tint */ .bg-red-100 { background-color: var(--brand-tint) !important; } .bg-red-600 { background-color: var(--brand) !important; } .bg-red-800 { background-color: var(--brand-deep) !important; } .border-red-800 { border-color: var(--brand-deep) !important; } .text-red-600 { color: var(--brand) !important; } .text-red-800 { color: var(--brand-deep) !important; } .hover\:bg-red-700:hover { background-color: var(--brand) !important; } .hover\:bg-red-800:hover { background-color: var(--brand-deep) !important; } .hover\:border-red-800:hover { border-color: var(--brand-deep) !important; } .focus\:border-red-800:focus { border-color: var(--brand) !important; } /* ===================== COR DE ACAO — tema dark ========================== */ /* Sobre fundo escuro o #007A2F fecha demais; o acento e o #00B347, igual ao esim-admin do site. */ .dark .dark\:bg-red-100 { background-color: var(--brand-tint) !important; } .dark .dark\:bg-red-600 { background-color: var(--brand-light) !important; } .dark .dark\:bg-red-800 { background-color: var(--brand) !important; } .dark .dark\:border-red-600 { border-color: var(--brand-light) !important; } .dark .dark\:text-red-300 { color: #7FD9A2 !important; } .dark .dark\:text-red-600 { color: var(--brand-deep) !important; } .dark .dark\:hover\:bg-red-600:hover { background-color: var(--brand-light) !important; } .dark .dark\:hover\:bg-red-700:hover { background-color: var(--brand) !important; } .dark .dark\:hover\:bg-red-800:hover { background-color: var(--brand) !important; } .dark .dark\:hover\:border-red-600:hover { border-color: var(--brand-light) !important; } .dark .dark\:hover\:text-red-100:hover { color: var(--brand-tint) !important; } .dark .dark\:focus\:border-red-800:focus { border-color: var(--brand-light) !important; } /* --- Download dos apps (capa de login) — estilo proprio, nao depende do app.css --- */ .dl-apps { max-width:24rem; margin-top:3.5rem; } .dl-title { color:var(--ink-soft); font-family:'IBM Plex Mono', ui-monospace, monospace; text-transform:uppercase; font-size:12px; letter-spacing:0.18em; } .dl-sub { color:var(--ink-faint); } .dark .dl-title { color:#d4d4d4; } .dark .dl-sub { color:#a3a3a3; } .dl-grid { display:grid; grid-template-columns:1fr; gap:.5rem; } @media (min-width:400px) { .dl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } .dl-full { grid-column:1 / -1; justify-content:center; } .dl-btn span { white-space:nowrap; } .dl-btn { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--rule); border-radius:.5rem; background:var(--paper-card); color:var(--ink-soft); text-decoration:none; transition:border-color .15s ease, color .15s ease, background-color .15s ease; } .dl-btn:hover { border-color:var(--brand); color:var(--brand); } .dl-btn svg { width:1.25rem; height:1.25rem; flex-shrink:0; } .dark .dl-btn { background:#404040; border-color:#525252; color:#e5e5e5; } .dark .dl-btn:hover { border-color:var(--brand-light); color:#fff; } /* --- Capa de login: centralizar verticalmente no desktop (>=768px) ------- */ @media (min-width: 768px) { .login-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - 11rem); } .login-wrap > h1 { margin-top:0 !important; } }