/* ========================================================================== Alpes — App shell (tokens + reset + navbar + layout) CSS compartilhado e CACHEADO por todas as páginas internas do cliente. Estilos específicos de cada página ficam no {% block headers %} da própria. Os toasts (.alert-*) vivem em base/alerts.html. ========================================================================== */ /* ===== TOKENS (tema claro/escuro) ===== Os MESMOS nomes de token valem nos dois temas — assim cada página que usa var(--ink), var(--surface-1)… clareia/escurece sozinha. O tema é definido por [data-theme] no (renderizado server-side a partir da preferência do usuário). :root sem atributo = dark (fallback p/ páginas pré-login). O admin usa alpes-admin.css próprio e NUNCA recebe data-theme (fica dark). */ :root, :root[data-theme="dark"] { /* base */ --canvas: #0f0f0f; --canvas-deep: #0a0a0a; --surface-1: #151515; --surface-2: #1d1d1d; --surface-3: #2c2c2c; --hairline: #232323; --hairline-soft: #1f1f1f; --hairline-strong: #2c2c2c; --ink: #f2f2f2; --ink-muted: #8a8a8a; --ink-faint: #6f6f6f; --ink-dim: #585858; --icon: #b2b2b2; --bar: #e6e6e6; /* helpers RGB (para rgba dinâmico) */ --canvas-rgb: 15,15,15; --ink-rgb: 242,242,242; /* contraste / estado */ --on-ink: #0f0f0f; /* texto/ícone SOBRE fundo var(--ink) (botões primários) */ --ink-hover: #ffffff; /* hover de superfície clara */ --focus-ring: rgba(255,255,255,0.06); --focus-ring-strong: rgba(255,255,255,0.12); --hover-overlay: rgba(255,255,255,0.06); --active-overlay: rgba(255,255,255,0.10); --overlay: rgba(5,5,5,0.65); /* backdrop de modais/drawers */ --shadow-sm: 0 8px 24px -8px rgba(0,0,0,0.5); --shadow-md: 0 16px 40px -12px rgba(0,0,0,0.6); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,0.7); --scrollbar-thumb: #2b2b2b; --scrollbar-thumb-hover: #383838; --nav-bg: rgba(15,15,15,0.85); --nav-bg-mobile: rgba(15,15,15,0.94); --hover-border: #363636; /* status */ --success: #4ade80; --danger: #d96a6a; --warning: #f59e0b; --success-rgb: 74,222,128; --danger-rgb: 217,106,106; --danger-ring: rgba(217,106,106,0.4); --danger-bg: rgba(217,106,106,0.10); --strength-weak: #5a5a5a; --strength-medium: #9a9a9a; --strength-strong: #4ade80; /* segmentados (Lista/Cards/Tema) */ --seg-bg: #161616; --seg-border: #2a2a2a; --seg-active-bg: #2c2c2c; --seg-active-fg: #f2f2f2; --seg-fg: #7a7a7a; /* watermark / bottom-tab inativa */ --wm: #ffffff; --tab-inactive: #5e5e5e; /* tipografia */ --display: 'Space Grotesk', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif; --mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace; } :root[data-theme="light"] { --canvas: #f5f5f3; --canvas-deep: #ffffff; --surface-1: #ffffff; --surface-2: #f1f1ee; --surface-3: #e8e8e4; --hairline: #e8e8e4; --hairline-soft: #ececea; --hairline-strong: #deded8; --ink: #19191c; --ink-muted: #62626a; --ink-faint: #8c8c92; --ink-dim: #a8a8a8; --icon: #56565f; --bar: #19191c; --canvas-rgb: 245,245,243; --ink-rgb: 25,25,28; --on-ink: #ffffff; --ink-hover: #000000; --focus-ring: rgba(25,25,28,0.10); --focus-ring-strong: rgba(25,25,28,0.16); --hover-overlay: rgba(25,25,28,0.05); --active-overlay: rgba(25,25,28,0.08); --overlay: rgba(25,25,28,0.35); --shadow-sm: 0 8px 24px -10px rgba(25,25,28,0.10); --shadow-md: 0 16px 40px -14px rgba(25,25,28,0.14); --shadow-lg: 0 30px 70px -24px rgba(25,25,28,0.18); --scrollbar-thumb: #deded8; --scrollbar-thumb-hover: #cfcfc8; --nav-bg: rgba(245,245,243,0.85); --nav-bg-mobile: rgba(245,245,243,0.92); --hover-border: #d6d6d0; --success: #16a34a; --danger: #c0504d; --warning: #b45309; --success-rgb: 22,163,74; --danger-rgb: 192,80,77; --danger-ring: rgba(192,80,77,0.35); --danger-bg: rgba(192,80,77,0.08); --strength-weak: #b8b8b8; --strength-medium: #8c8c92; --strength-strong: #16a34a; --seg-bg: #ececea; --seg-border: #e0e0db; --seg-active-bg: #ffffff; --seg-active-fg: #19191c; --seg-fg: #73737a; --wm: #000000; --tab-inactive: #a0a0a6; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Remove as setinhas (spin buttons) dos inputs numéricos */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } html, body { height: 100%; font-family: var(--body); background: var(--canvas); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv01','cv05','cv09','cv11','ss03'; } .app-container { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* ===== NAVBAR ===== */ .navbar { height: 64px; flex-shrink: 0; background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--hairline-soft); display: flex; align-items: center; padding: 0 24px; position: relative; z-index: 100; } .navbar-content { display: flex; align-items: center; width: 100%; gap: 22px; } /* ===== BRAND ===== */ .navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } /* O lockup já traz a palavra "alpes", então não há mais ao lado. Altura fixa e largura automática: a proporção vem do viewBox do símbolo. */ .navbar-brand { color: var(--ink); } .navbar-brand .brand-logo { height: 22px; width: auto; } /* ===== NAVIGATION (centered, icon-only) ===== */ .navbar-nav { flex: 1; display: flex; justify-content: center; } .nav-list { list-style: none; display: flex; align-items: center; gap: 8px; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink-muted); text-decoration: none; background: transparent; border: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .nav-link:hover { color: var(--ink); background: var(--hover-overlay); } .nav-link:active { background: var(--active-overlay); } .nav-link.active { color: var(--ink); background: var(--hover-overlay); } .nav-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); } .nav-link:hover .nav-icon { transform: scale(1.14); } .nav-link:active .nav-icon { transform: scale(0.96); } /* tooltip */ .tooltip { position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%); background: var(--surface-3); color: var(--ink); padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, bottom 0.18s ease; z-index: 1000; border: 1px solid var(--hairline); } .tooltip::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: var(--surface-3); } .nav-link:hover .tooltip, .sign-out-btn:hover .tooltip { opacity: 1; visibility: visible; bottom: -33px; } /* ===== ACTIONS ===== */ .navbar-actions { display: flex; align-items: center; } .sign-out-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-muted); cursor: pointer; text-decoration: none; transition: background 0.2s, color 0.2s; } .sign-out-btn:hover { color: var(--ink); background: var(--hover-overlay); } .sign-out-btn:hover .sign-out-icon { transform: scale(1.14); } .sign-out-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); } .nav-link:focus-visible, .sign-out-btn:focus-visible, .navbar-brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ===== MAIN CONTENT ===== */ .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .content-wrapper { flex: 1; overflow-y: auto; overflow-x: hidden; } /* ===== MOBILE → bottom tab bar ===== */ @media (max-width: 768px) { .navbar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline-soft); border-bottom: none; background: var(--nav-bg-mobile); } .navbar-content { gap: 0; align-items: stretch; } .navbar-brand { display: none; } .navbar-nav, .nav-list, .navbar-actions { display: contents; } .nav-item { flex: 1 1 0; display: flex; } .nav-link { flex: 1; width: 100%; height: auto; flex-direction: column; gap: 4px; padding: 7px 2px; border-radius: 14px; } .nav-link .nav-icon, .sign-out-btn .sign-out-icon { width: 22px; height: 22px; } .sign-out-btn { flex: 1 1 0; width: auto; height: auto; flex-direction: column; gap: 4px; padding: 7px 2px; border-radius: 14px; } .tooltip { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: none; padding: 0; box-shadow: none; pointer-events: auto; font-size: 10.5px; font-weight: 500; line-height: 1; color: inherit; letter-spacing: 0.005em; } .tooltip::before { display: none; } .nav-link:hover .nav-icon, .sign-out-btn:hover .sign-out-icon { transform: none; } .content-wrapper { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ===== SCROLLBAR ===== */ .content-wrapper::-webkit-scrollbar { width: 8px; } .content-wrapper::-webkit-scrollbar-track { background: transparent; } .content-wrapper::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } .content-wrapper::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ===== BOTÃO EXPORTAR EXCEL ===== Usado nos módulos de lista, no lugar do PDF. Segue o mesmo desenho dos .btn-action ao lado dele: fantasma, monocromático, 38px. O rótulo existe porque "planilha" não é óbvio só pelo ícone; a cor não, porque o botão não é mais importante que o resultado que ele exporta. */ .btn-excel { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; border: none; border-radius: 10px; background: transparent; color: var(--ink-faint); font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; } .btn-excel:hover { background: var(--surface-2); color: var(--ink); } .btn-excel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .btn-excel svg { width: 17px; height: 17px; stroke-width: 1.6; flex-shrink: 0; } /* A grade interna fica mais leve que o contorno: sugere planilha sem virar borrão nos 17px. */ .btn-excel svg .grade { opacity: .5; } @media (max-width: 480px) { .btn-excel .btn-excel-label { display: none; } .btn-excel { padding: 0 10px; } } @media (prefers-reduced-motion: reduce) { .btn-excel { transition: none; } } /* Par canônico de ações do bloco de resultados. Cada tela de consulta trazia sua própria versão do .btn-action — umas com 38px fantasma, outras com 42px e borda — então copiar e exportar mudavam de cara de página para página. Esta regra (.result-actions .btn-action) vence as declarações simples de cada template e deixa o par idêntico em todas. Onde o template já usa !important, o valor dele coincide com este. */ .result-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; } .result-actions .btn-action { width: 38px; height: 38px; border: none; border-radius: 10px; background: transparent; color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s; } .result-actions .btn-action:hover { background: var(--surface-2); color: var(--ink); } .result-actions .btn-action svg { width: 17px; height: 17px; stroke-width: 1.6; } /* ===== HOVER DAS LISTAS DE RESULTADO ===== A geometria do .match-row é redefinida por página (essencial/_busca_estilos, essencial/nome, complementar/cep, complementar/funcionarios e laboratorio/_estilos), mas o realce mora só aqui: antes cada cópia repetia `:hover .match-name{color:var(--ink)}`, que pintava a cor que o nome já tinha — ou seja, passar o mouse não mudava nada. O realce precisa de uma folga lateral para não colar no texto, e o separador precisa acompanhar essa folga — senão sobram 12px de destaque em cada ponta sem linha embaixo. Por isso a linha inteira ganha margem negativa (que estica o border-bottom) e um padding igual em sentido contrário (que devolve o conteúdo ao lugar). O `.section` na frente é para vencer o `.match-row{padding:16px 0}` que cada página redefine inline. */ .section .match-row { padding-left: 12px; padding-right: 12px; margin-left: -12px; margin-right: -12px; } /* O destaque fica num ::before em vez de um background na linha para parar 2px antes do separador, em vez de cobri-lo. */ .match-row { position: relative; } .match-row > * { position: relative; z-index: 1; } .match-row::before { content: ''; position: absolute; inset: 2px 0; border-radius: 12px; background: transparent; transition: background .18s ease; pointer-events: none; } .match-row:hover::before { background: var(--hover-overlay); } .match-row:active::before { background: var(--active-overlay); } .match-row .match-av { transition: background .18s ease, color .18s ease; } .match-row:hover .match-av { background: var(--surface-3); color: var(--ink); } .match-row:hover .match-go { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .match-row::before, .match-row .match-av { transition: none; } }