/* ══════════════════════════════════════════════════════════════════════════ GiacoCalc PWA · Design System v3 Inspired by Giacomini brand: professional, warm, precision engineering ══════════════════════════════════════════════════════════════════════════ */ /* ── Tipografia da marca: Raleway (fonte oficial da Giacomini Portugal) ────── Variável (pesos 100–900), subconjunto latino (cobre PT), embutida localmente — sem dependência do Google Fonts em runtime (funciona offline/PWA). */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/raleway-latin-normal.woff2') format('woff2'); } @font-face { font-family: 'Raleway'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/raleway-latin-italic.woff2') format('woff2'); } /* ── Design tokens ───────────────────────────────────────────────────────── */ :root { color-scheme: light; /* app é sempre claro por defeito, mesmo com "force dark" do browser em tablet */ /* Brand */ --brand: #C00000; --red: #C00000; --red-dark: #8C0000; --red-mid: #A80000; --red-light: #FFF0F0; --red-xlight: #FFF8F8; --red-grad: linear-gradient(135deg, #C00000 0%, #8C0000 100%); /* Neutral */ --white: #FFFFFF; --bg: #F3F5F9; --surface: #FFFFFF; --border: #E4E8EF; --border-light: #EEF1F6; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; /* Semantic */ --green: #059669; --green-bg: #D1FAE5; --green-text: #065F46; --amber: #D97706; --amber-bg: #FEF3C7; --amber-text: #92400E; --rose: #DC2626; --rose-bg: #FEE2E2; --rose-text: #991B1B; --blue: #2563EB; --blue-bg: #DBEAFE; --blue-text: #1E40AF; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04); --shadow-lg: 0 10px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06); --shadow-red: 0 4px 20px rgba(192,0,0,.28); --shadow-btn: 0 4px 14px rgba(192,0,0,.35); /* Geometry */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 24px; /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* entradas suaves (revelações, slides) */ --t-fast: 150ms; --t-mid: 220ms; --t-slow: 380ms; /* Font — Raleway (marca Giacomini), com fallback de sistema enquanto carrega */ --font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* ── Modo escuro (class-based, por-utilizador) ────────────────────────────── Aplicado por .dark no (ver aplicarTema() em app.js). Estratégia: inverter a rampa de neutros (fundos escurecem, texto clareia) e escurecer superfícies/bordas. A marca (vermelho) e o `--white` (texto sobre vermelho) ficam intactos. Os PDFs/impressão abrem em janela própria SEM .dark → papel branco preservado. */ html.dark { color-scheme: dark; --bg: #12151C; --surface: #1B212B; --border: #2B323D; --border-light: #232A34; /* Rampa invertida: 50 = fundo mais escuro … 900 = texto quase branco */ --gray-50: #1B212B; --gray-100: #232A34; --gray-200: #2C3542; --gray-300: #3A4453; --gray-400: #6B7280; --gray-500: #9BA4B0; --gray-600: #B7BEC9; --gray-700: #D0D6DE; --gray-800: #E5E9EF; --gray-900: #F2F5F9; /* Realces de marca suaves sobre escuro (linhas hover, caixas de aviso) */ --red-light: rgba(192,0,0,.20); --red-xlight: rgba(192,0,0,.10); /* Semânticas: fundos translúcidos + texto claro (legível sobre escuro) */ --green-bg: rgba(5,150,105,.20); --green-text: #6EE7B7; --amber-bg: rgba(217,119,6,.22); --amber-text: #FBBF24; --rose-bg: rgba(220,38,38,.20); --rose-text: #FCA5A5; --blue-bg: rgba(37,99,235,.22); --blue-text: #93C5FD; /* Sombras mais profundas para dar relevo no escuro */ --shadow-xs: 0 1px 2px rgba(0,0,0,.30); --shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.30); --shadow-lg: 0 10px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); } /* Transição suave ao alternar tema (não em quem prefere menos movimento) */ @media (prefers-reduced-motion: no-preference) { html.theme-anim body, html.theme-anim .card, html.theme-anim .kpi, html.theme-anim .zones-table td, html.theme-anim input, html.theme-anim select { transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease); } } /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--gray-900); min-height: 100dvh; -webkit-font-smoothing: antialiased; line-height: 1.5; } /* ── Top bar ─────────────────────────────────────────────────────────────── */ .topbar { background: var(--red-grad); color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; height: 66px; position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 16px rgba(139,0,0,.40); } .topbar-brand { line-height: 1; } .topbar-logo-wrap { display: flex; align-items: center; gap: 12px; } .topbar-logo-mark { flex-shrink: 0; display: flex; align-items: center; } .topbar-logo-img { height: 30px; width: auto; object-fit: contain; } /* Wordmark + subtitle stacked */ .topbar-logo-text { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .topbar-wordmark { display: flex; flex-direction: column; gap: 1px; line-height: 1; flex-shrink: 0; } .topbar-logo { font-size: 19px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; line-height: 1; color: white; } .topbar-we { display: none; /* Removido */ } .topbar-divider { color: rgba(255,255,255,.3); font-size: 20px; font-weight: 200; line-height: 1; flex-shrink: 0; } .topbar-sub { font-size: 11px; opacity: .80; letter-spacing: .2px; font-weight: 500; color: white; line-height: 1.3; white-space: nowrap; } @media (max-width: 860px) { .topbar-divider, .topbar-sub { display: none; } .topbar-we { display: none; } } @media (max-width: 640px) { .topbar-we, .topbar-divider, .topbar-sub { display: none; } .topbar-logo { font-size: 17px; } } /* ── Topbar action buttons ── */ .topbar-actions { display: flex; gap: 7px; align-items: center; min-width: 0; /* permite encolher/scrollar em vez de empurrar a página */ } .action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; /* ícone + rótulo numa só linha (compacto) */ background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-md); color: var(--white); cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); white-space: nowrap; font-family: inherit; } .action-btn:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.40); } .action-btn:active { transform: scale(.94); } .action-icon { font-size: 15px; line-height: 1; flex-shrink: 0; display: inline-flex; } .action-icon svg { width: 18px; height: 18px; display: block; } /* Rótulo sempre visível (o tablet tátil não tem hover → tooltip não serve). Só a 2.ª linha de ajuda (desc) é que é escondida para poupar espaço. */ .action-text { display: inline-flex; align-items: center; } .action-label { font-size: 12.5px; font-weight: 600; line-height: 1; } .action-desc { display: none; } @media (pointer: coarse) { .action-btn { padding: 9px 13px; } .action-icon svg { width: 20px; height: 20px; } } /* Só em ecrãs muito estreitos (telemóvel) é que fica só-ícone */ @media (max-width: 560px) { .action-text { display: none; } .action-btn { padding: 9px; } } /* ── Ripple táctil (feedback de toque; ver gcRipple() em app.js) ───────────── Aplicado aos botões principais. Recortado pelo overflow do botão. Desligado por completo em prefers-reduced-motion. */ .btn-calc, .btn-next, .btn-prev, .btn-add, .action-btn, .btn-print, .auth-btn { position: relative; overflow: hidden; } .gc-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.40); transform: scale(0); opacity: .6; pointer-events: none; animation: gc-ripple .6s var(--ease-out); } @keyframes gc-ripple { to { transform: scale(2.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .gc-ripple { display: none; } } /* Alternador de tema: mostra a lua no claro (→escuro) e o sol no escuro (→claro) */ .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: inline; } html.dark .theme-toggle .theme-icon-sun { display: inline; } html.dark .theme-toggle .theme-icon-moon { display: none; } .action-text { display: flex; flex-direction: column; gap: 1px; } .action-label { font-size: 12px; font-weight: 700; line-height: 1.2; } .action-desc { font-size: 10px; opacity: .75; line-height: 1.2; } /* Tablet portrait: esconde a 2.ª linha dos botões e torna a barra de ações um contentor com scroll próprio — a PÁGINA nunca desliza na horizontal. */ @media (max-width: 900px) { .action-desc { display: none; } .action-btn { flex-shrink: 0; } .topbar-actions { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .topbar-actions::-webkit-scrollbar { display: none; } /* WebKit */ } @media (max-width: 660px) { .action-btn { padding: 8px 11px; gap: 6px; } .topbar { height: 54px; padding: 0 14px; } } /* ── Step navigation ─────────────────────────────────────────────────────── */ .stepnav-bar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 66px; z-index: 190; box-shadow: 0 2px 8px rgba(0,0,0,.05); display: flex; align-items: center; } .stepnav { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; } .stepnav::-webkit-scrollbar { display: none; } /* Seletor de tema (3 vias) — vive na barra de passos, à direita */ .theme-switch { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; margin: 0 14px 0 8px; padding: 3px; background: var(--gray-100); border: 1px solid var(--border); border-radius: 999px; } .ts-caption { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .4px; margin: 0 4px 0 6px; } .theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 11px; border: none; background: transparent; border-radius: 999px; cursor: pointer; color: var(--gray-500); font-family: inherit; transition: background .15s, color .15s; } .theme-switch button svg { width: 15px; height: 15px; flex-shrink: 0; } .ts-label { font-size: 12px; font-weight: 600; line-height: 1; } .theme-switch button:hover { color: var(--gray-800); } .theme-switch button.on { background: var(--surface); color: var(--red); box-shadow: 0 1px 3px rgba(0,0,0,.14); } @media (pointer: coarse) { .theme-switch button { padding: 8px 12px; } } /* Telemóvel: poupar espaço — cai para os rótulos escondidos (a caption "Tema" fica) */ @media (max-width: 560px) { .ts-caption { display: none; } .ts-label { display: none; } .theme-switch button { padding: 7px 9px; } } /* Escape manual para o design táctil (inverso da "Versão clássica" da táctil) */ .tactile-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; padding: 6px 4px; color: var(--gray-500); text-decoration: none; font-size: 12.5px; font-weight: 600; border-bottom: 1px dashed transparent; transition: color .15s, border-color .15s; } .tactile-link svg { width: 15px; height: 15px; flex-shrink: 0; } .tactile-link:hover { color: var(--red); border-color: var(--red); } @media (max-width: 700px) { .tactile-link-label { display: none; } } .step-btn { flex: none; padding: 16px 22px; border: none; background: transparent; font-size: 13px; font-weight: 500; color: var(--gray-400); cursor: pointer; display: flex; align-items: center; gap: 10px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); font-family: inherit; } .step-btn:hover:not(.active) { color: var(--gray-700); background: var(--gray-50); } .step-btn .num { width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); color: var(--gray-400); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease); } .step-btn.active { color: var(--red); border-bottom-color: var(--red); font-weight: 700; } .step-btn.active .num { background: var(--red); color: var(--white); box-shadow: 0 2px 8px rgba(192,0,0,.4); } .step-btn.done { color: var(--gray-600); } .step-btn.done .num { background: var(--green); color: var(--white); box-shadow: 0 2px 6px rgba(5,150,105,.3); } /* ── Main layout ─────────────────────────────────────────────────────────── */ .main { max-width: 1140px; margin: 0 auto; padding: 28px 20px 40px; } /* ── Card ────────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-light); padding: 24px 28px; margin-bottom: 20px; transition: box-shadow var(--t-mid) var(--ease); } .card:hover { box-shadow: var(--shadow-lg); } .card-title { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; letter-spacing: -.1px; } .card-title::before { content: ''; display: block; width: 4px; height: 20px; background: var(--red-grad); border-radius: 3px; flex-shrink: 0; } /* ── Form elements ───────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; } /* Wrapper de múltiplos grids: gap uniforme entre secções */ .form-sections { display: flex; flex-direction: column; gap: 20px; } /* Tipologias: sempre 2 colunas lado a lado */ .form-grid-2col { grid-template-columns: 1fr 1fr !important; gap: 18px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group.full { grid-column: 1 / -1; } /* Legenda pedagógica sob os campos técnicos (regra: sempre legendas) */ .field-hint { font-size: 11.5px; color: var(--gray-500); line-height: 1.4; margin-top: -2px; } label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .6px; } input, select, textarea { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 13.5px; font-family: var(--font); color: var(--gray-900); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,0,0,.10); } input:hover:not(:focus), select:hover:not(:focus) { border-color: var(--gray-300); } /* Acessibilidade: indicador de foco de teclado visível. :focus-visible só ativa na navegação por teclado (Tab), não no clique com rato — quem usa teclado vê sempre onde está, sem afetar a experiência de quem usa o rato. Colocado depois das regras acima para vencer os `outline:none` no foco de teclado. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; } .dark a:focus-visible, .dark button:focus-visible, .dark [role="button"]:focus-visible, .dark input:focus-visible, .dark select:focus-visible, .dark textarea:focus-visible, .dark [tabindex]:focus-visible, .dark summary:focus-visible { outline-color: #ff6b7f; } /* A barra do topo e o rodapé têm fundo VERMELHO da marca em qualquer tema — um anel vermelho/rosa seria invisível. Nessas superfícies usa-se um anel branco. (Escrito por último e com especificidade suficiente para vencer o bloco .dark.) */ .topbar :focus-visible, .app-footer :focus-visible, .dark .topbar :focus-visible, .dark .app-footer :focus-visible { outline-color: #fff; } input.unit { padding-right: 46px; } .input-wrap { position: relative; } .input-unit { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--gray-400); font-weight: 600; pointer-events: none; } /* Variante clicável do .input-unit — alterna a unidade em vez de só a mostrar (usado na Carga Térmica Manual: Watts absolutos ⇄ W/m² × área da zona). */ .input-unit-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--red, #C00000); font-weight: 700; background: var(--gray-100, #F3F4F6); border: 1px solid var(--gray-200, #E5E7EB); border-radius: 5px; padding: 2px 5px; cursor: pointer; line-height: 1.3; } .input-unit-toggle:hover { background: var(--red, #C00000); color: #fff; border-color: var(--red, #C00000); } /* ── Mostrar/ocultar password (ver js/ui-enhance.js) ────────────────────────── */ .pass-wrap { position: relative; display: block; } .pass-wrap > input { padding-right: 42px !important; } .pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--gray-400, #9CA3AF); } .pass-toggle:hover { color: var(--red, #C00000); } .pass-toggle svg { width: 18px; height: 18px; display: block; } .pass-toggle .eye-off { display: none; } .pass-toggle.is-on .eye-on { display: none; } .pass-toggle.is-on .eye-off { display: block; } /* ── Legenda/nota de campo (obrigatoriedades e contexto p/ utilizador não-técnico) ── */ .field-hint { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--gray-500, #6B7280); } .field-hint.req::before { content: '• '; color: var(--red, #C00000); font-weight: 700; } /* ── Section divider ─────────────────────────────────────────────────────── */ .section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--red); margin: 24px 0 14px; display: flex; align-items: center; gap: 10px; } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Toggle label ─────────────────────────────────────────────────────────── */ .toggle-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--gray-700); text-transform: none; letter-spacing: 0; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--gray-50); transition: border-color var(--t-fast), background var(--t-fast); } .toggle-label:hover { border-color: var(--red); background: var(--red-xlight); } .toggle-label input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; flex-shrink: 0; } /* #16 Modo de Orçamento — 2 cartões grandes (Calculado/Manual), o ativo destaca-se a vermelho (mesma linguagem visual do .toggle-label acima). */ .toggle-card { display: block; cursor: pointer; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--gray-50); transition: border-color var(--t-fast), background var(--t-fast); } .toggle-card strong { display: block; font-size: 14px; color: var(--gray-900); margin-bottom: 4px; } .toggle-card:hover { border-color: var(--red); } .toggle-card.active { border-color: var(--red); background: var(--red-xlight); } .toggle-card.active strong { color: var(--red); } /* ── Info box ────────────────────────────────────────────────────────────── */ .info-box { background: #FFF8F0; border-left: 4px solid #F59E0B; border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; font-size: 13px; color: var(--gray-700); margin-bottom: 18px; line-height: 1.6; } /* ── Empty state ─────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 56px 24px; color: var(--gray-400); } .empty-state .icon { font-size: 52px; margin-bottom: 14px; opacity: .6; display: block; } .empty-state p { font-size: 15px; color: var(--gray-500); } /* ── Navigation buttons ──────────────────────────────────────────────────── */ .nav-btns { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; } .btn-prev { background: var(--surface); border: 1.5px solid var(--border); color: var(--gray-600); border-radius: var(--r-xl); padding: 11px 26px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .btn-prev:hover { border-color: var(--gray-400); color: var(--gray-800); background: var(--gray-50); } .btn-next, .btn-calc { background: var(--red-grad); color: var(--white); border: none; border-radius: var(--r-xl); padding: 12px 32px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-btn); transition: box-shadow var(--t-fast), transform var(--t-fast); } .btn-next:hover, .btn-calc:hover { box-shadow: 0 6px 22px rgba(192,0,0,.50); transform: translateY(-1px); } .btn-next:active, .btn-calc:active { transform: translateY(0); } .btn-print { background: var(--surface); border: 1.5px solid var(--red); color: var(--red); border-radius: var(--r-xl); padding: 11px 26px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); } .btn-print:hover { background: var(--red); color: var(--white); box-shadow: var(--shadow-btn); } /* Variantes sólidas (fundo escuro) — precisam de texto branco próprio; herdar só o "color: var(--red)" do .btn-print de base ficava quase ilegível (texto vermelho sobre fundo vermelho-escuro/azul-escuro). */ .btn-print-comercial { background: linear-gradient(135deg, var(--red), #8C0000); border-color: transparent; color: var(--white); } .btn-print-comercial:hover { background: linear-gradient(135deg, #8C0000, var(--red)); color: var(--white); box-shadow: var(--shadow-btn); } /* #14 Relatórios por secção — mais discretos que os 2 botões principais (Relatório Técnico/Proposta Comercial), para não competirem visualmente. */ .btn-print-secao { padding: 7px 14px; font-size: 11.5px; border-color: var(--gray-300, #D1D5DB); color: var(--gray-600, #4B5563); } .btn-print-secao:hover { background: var(--gray-700, #374151); border-color: var(--gray-700, #374151); color: var(--white); box-shadow: none; } .btn-print-email { background: #1F2937; border-color: transparent; color: var(--white); } .btn-print-email:hover { background: #111827; color: var(--white); box-shadow: var(--shadow-btn); } .btn-spacer { flex: 1; } /* ── Zone tools ──────────────────────────────────────────────────────────── */ .zones-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .btn-add { background: var(--red-grad); color: var(--white); border: none; border-radius: var(--r-xl); padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; box-shadow: 0 3px 10px rgba(192,0,0,.30); transition: box-shadow var(--t-fast), transform var(--t-fast); } .btn-add:hover { box-shadow: 0 5px 16px rgba(192,0,0,.45); transform: translateY(-1px); } .btn-icon { background: transparent; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer; color: var(--gray-400); font-size: 13px; font-family: inherit; transition: border-color var(--t-fast), color var(--t-fast); } .btn-icon:hover { border-color: var(--red); color: var(--red); } .btn-icon.danger:hover { border-color: var(--rose); color: var(--rose); } .btn-icon[disabled] { opacity: .3; cursor: default; pointer-events: none; } /* Ações por zona: reordenar (▲▼) + remover (✕) */ .z-actions { display: inline-flex; gap: 4px; align-items: center; } .z-act-txt { display: none; } /* rótulo só aparece no card-view (tablet) */ .btn-icon.z-move { padding: 6px 8px; line-height: 1; font-size: 11px; } /* Realce breve na zona acabada de mover (pisca-a para não se perder o fio) */ @keyframes z-moved-flash { 0% { background: var(--red-xlight, #FDECEC); } 100% { background: transparent; } } .zones-table tbody tr.z-moved td { animation: z-moved-flash .9s var(--ease-out, ease-out); } @media (prefers-reduced-motion: reduce) { .zones-table tbody tr.z-moved td { animation: none; } } /* ── Zones table ─────────────────────────────────────────────────────────── */ .zones-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; /* scroll com inércia em iOS */ overscroll-behavior-x: contain; border-radius: var(--r-md); border: 1px solid var(--border); /* Sombras laterais que aparecem quando há conteúdo fora do ecrã (scroll hint) */ background: linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left / 32px 100% no-repeat, linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right / 32px 100% no-repeat, linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0)) left / 14px 100% no-repeat, linear-gradient(to left, rgba(0,0,0,.10), rgba(0,0,0,0)) right / 14px 100% no-repeat; background-attachment: local, local, scroll, scroll; } /* Dica de "deslizar" só em ecrãs pequenos */ .scroll-hint { display: none; } @media (max-width: 640px) { .scroll-hint { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--red); } } table.zones-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; } .zones-table thead tr { background: linear-gradient(to right, #1F2937, #374151); } .zones-table th { padding: 11px 12px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.85); white-space: nowrap; } .zones-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--gray-700); } .zones-table tbody tr:last-child td { border-bottom: none; } .zones-table tbody tr:nth-child(even) td { background: var(--gray-50); } .zones-table tbody tr:hover td { background: var(--red-xlight); } .zones-table input[type=text], .zones-table input[type=number], .zones-table select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12.5px; font-family: var(--font); width: 100%; min-width: 60px; background: var(--surface); transition: border-color var(--t-fast); } .zones-table input:focus, .zones-table select:focus { border-color: var(--red); outline: none; } .zones-table .col-name { min-width: 130px; } .zones-table .col-area { width: 80px; } .zones-table .col-passo { width: 80px; } .zones-table .col-teto { min-width: 150px; } .zones-table .col-actions { width: 108px; text-align: center; white-space: nowrap; } /* ── Card-view das zonas (tablet portrait / telemóvel) ─────────────────────── Em vez de a tabela deslizar na horizontal (mau em toque), cada zona vira um cartão táctil com campos empilhados e etiquetas (data-label). Ativa até 860px (cobre iPad em portrait ≈768–834px e telemóveis; landscape ≥1024px mantém a tabela clássica). */ @media (max-width: 860px) { .scroll-hint { display: none; } .zones-table-wrap { overflow: visible; border: none; border-radius: 0; background: none; /* remove as sombras de scroll da tabela */ } table.zones-table { min-width: 0; display: block; font-size: 14px; } .zones-table thead { display: none; } .zones-table tbody { display: block; } .zones-table tbody tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 6px 16px 12px; margin-bottom: 14px; } .zones-table tbody tr.z-moved { box-shadow: 0 0 0 2px var(--red); } /* Anular zebra/hover (não fazem sentido em cartões) */ .zones-table tbody tr:nth-child(even) td, .zones-table tbody tr:hover td { background: transparent; } .zones-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border: none; border-bottom: 1px solid var(--border-light); width: auto !important; } .zones-table td::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; } /* Controlos alinhados à direita, com largura de toque confortável */ .zones-table td > input, .zones-table td > select, .zones-table td > .input-wrap { width: auto !important; min-width: 130px; max-width: 62%; } .zones-table td > .input-wrap > input { width: 100% !important; } /* Nome da zona: cabeçalho do cartão (etiqueta pequena por cima, campo largo) */ .zones-table td.col-name { flex-direction: column; align-items: stretch; gap: 5px; padding-top: 4px; } .zones-table td.col-name::before { color: var(--red); } .zones-table td.col-name > input { width: 100% !important; max-width: none; font-size: 16px; /* ≥16px evita zoom automático no iOS */ font-weight: 700; padding: 9px 11px; } /* Ações: linha final, botões maiores e alinhados à direita, sem etiqueta */ .zones-table td.col-actions { width: auto !important; justify-content: flex-end; gap: 8px; border-bottom: none; padding-top: 12px; } .zones-table td.col-actions::before { content: none; } .zones-table td.col-actions .z-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Tablet tátil: mostrar rótulo ao lado do ícone (sem hover não há tooltip) */ .zones-table td.col-actions .btn-icon { min-height: 40px; font-size: 14px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 6px; } .zones-table td.col-actions .z-act-txt { display: inline; font-size: 12.5px; font-weight: 600; } } /* ── Results KPIs ────────────────────────────────────────────────────────── */ .results-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; margin-bottom: 24px; } .kpi { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border-light); border-top: 4px solid var(--red); padding: 18px 18px 14px; box-shadow: var(--shadow-sm); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); text-align: left; } .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .kpi-value { font-size: 28px; font-weight: 800; color: var(--gray-900); line-height: 1; margin-bottom: 3px; letter-spacing: -.5px; } .kpi-unit { font-size: 11px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; } .kpi-label { font-size: 11px; color: var(--gray-500); /* contraste WCAG: gray-400 sobre branco ficava ~2.5:1 */ font-weight: 500; } /* ── Results tables ──────────────────────────────────────────────────────── */ .results-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); margin-bottom: 8px; } table.results-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 700px; } .results-table thead { background: var(--red-grad); } .results-table th { padding: 10px 11px; text-align: right; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.95); white-space: nowrap; letter-spacing: .2px; } .results-table th:first-child, .results-table th:nth-child(2) { text-align: left; } .results-table td { padding: 8px 11px; border-bottom: 1px solid var(--border-light); text-align: right; white-space: nowrap; color: var(--gray-700); vertical-align: middle; } .results-table td:first-child, .results-table td:nth-child(2) { text-align: left; font-weight: 600; color: var(--gray-900); } .results-table tbody tr:nth-child(even) td { background: #FAFBFD; } .results-table tbody tr:hover td { background: var(--red-xlight); } .results-table tr.total td { background: var(--red-light) !important; font-weight: 700; color: var(--gray-900); border-top: 2px solid rgba(192,0,0,.15); } .results-table tr.warning td { background: #FFFBF0 !important; } tr.manual-ct td { background: #EFF6FF !important; } /* Value highlight */ .val-warn { color: var(--amber-text); font-weight: 700; } .val-err { color: var(--rose-text); font-weight: 700; } /* ── Badge system ────────────────────────────────────────────────────────── */ .badge-ok, .badge-warn, .badge-err, .badge-manual { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; } .badge-ok { background: var(--green-bg); color: var(--green-text); } .badge-warn { background: var(--amber-bg); color: var(--amber-text); } .badge-err { background: var(--rose-bg); color: var(--rose-text); } .badge-manual { background: var(--blue-bg); color: var(--blue-text); vertical-align: middle; margin-left: 5px; } /* ── BOM table ───────────────────────────────────────────────────────────── */ .bom-table th { text-align: left !important; } .bom-table td { text-align: left !important; } .bom-table td:nth-child(3), .bom-table td:nth-child(4) { text-align: center !important; white-space: nowrap; } /* ── Collector cards ─────────────────────────────────────────────────────── */ .collectors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-top: 6px; } .collector-card { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--t-mid), box-shadow var(--t-mid); } .collector-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .collector-card.warn { border-color: var(--amber); } .collector-header { background: var(--red-grad); color: var(--white); padding: 11px 15px; font-size: 12.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .collector-header.warn { background: linear-gradient(135deg, #D97706, #B45309); } .collector-body { padding: 10px 15px; } .collector-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-light); } .collector-row:last-child { border-bottom: none; } .collector-row .zone-name { color: var(--gray-700); } .collector-row .circ-count { font-weight: 700; color: var(--red); white-space: nowrap; } /* ── Sub-station card ────────────────────────────────────────────────────── */ .sub-station-grid { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; } .sub-station-card { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .sub-station-card.warn { border-color: var(--amber); } .sub-header { background: var(--red-grad); color: var(--white); padding: 11px 15px; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .sub-body { padding: 12px 15px; } .sub-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-light); gap: 8px; } .sub-row:last-child { border-bottom: none; } .sub-row span { color: var(--gray-500); } .sub-note { background: #FFFBF0; border-left: 4px solid var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 14px 18px; font-size: 13px; color: var(--gray-700); align-self: center; line-height: 1.65; } /* ── PST · Expansion vessel ──────────────────────────────────────────────── */ .pst-grid { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; } .pst-card { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .pst-header { background: var(--red-grad); color: var(--white); padding: 11px 15px; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .pst-ref { font-size: 17px; font-weight: 800; letter-spacing: .5px; } .pst-body { padding: 12px 15px; } .pst-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-light); gap: 8px; } .pst-row:last-child { border-bottom: none; } .pst-row span { color: var(--gray-500); } .pst-note { background: var(--red-xlight); border-left: 4px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 18px; font-size: 13px; color: var(--gray-700); align-self: center; line-height: 1.65; } /* ── Toast ───────────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--gray-900); color: var(--white); padding: 12px 26px; border-radius: var(--r-xl); font-size: 13.5px; font-weight: 500; transition: transform .3s var(--ease); z-index: 9999; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap; } .toast.show { transform: translateX(-50%) translateY(0); } /* ── Responsive ──────────────────────────────────────────────────────────── */ /* ── Tablet ≤ 860px ─────────────────────────────────────────────────────── */ @media (max-width: 860px) { .main { padding: 18px 16px 32px; } .results-summary { grid-template-columns: repeat(3, 1fr); } .collectors-grid { grid-template-columns: 1fr 1fr; } } /* ── Mobile ≤ 720px ─────────────────────────────────────────────────────── */ @media (max-width: 720px) { /* Layout */ .main { padding: 14px 12px 28px; } .card { padding: 16px 14px; } /* Step nav */ .step-btn { padding: 12px 14px; font-size: 12px; } /* Forms */ .form-grid { grid-template-columns: 1fr; } .form-grid-2col { grid-template-columns: 1fr !important; } /* Nav buttons */ .nav-btns { flex-wrap: wrap; gap: 8px; } .btn-prev { flex: 1; min-width: 120px; text-align: center; justify-content: center; } .btn-next, .btn-calc { flex: 1; min-width: 140px; justify-content: center; } .btn-print { flex: 1; min-width: 140px; text-align: center; padding: 10px 16px; font-size: 12.5px; } .btn-spacer { display: none; } /* KPIs e resultados */ .results-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi { padding: 14px 14px 10px; } .kpi-value { font-size: 22px; } .kpi-unit { font-size: 10px; } .kpi-label { font-size: 10px; } /* Tables */ .results-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .results-table { font-size: 11.5px; } .results-table th, .results-table td { padding: 7px 8px; } /* Collectors */ .collectors-grid { grid-template-columns: 1fr; } /* Sub-station / PST */ .sub-station-grid { grid-template-columns: 1fr; } .pst-grid { grid-template-columns: 1fr; } } /* ── Small mobile ≤ 480px ───────────────────────────────────────────────── */ @media (max-width: 480px) { .main { padding: 10px 10px 24px; } .card { padding: 14px 12px; border-radius: 10px; } .card-title { font-size: 13px; } /* Step nav: show only number + icon */ .step-btn { padding: 10px 10px; font-size: 11px; } .step-btn .step-label { display: none; } /* KPIs: 2 per row */ .results-summary { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi-value { font-size: 20px; } /* Buttons */ .btn-prev, .btn-next, .btn-calc, .btn-print { padding: 10px 14px; font-size: 12px; } /* Topbar */ .topbar { height: 50px; padding: 0 12px; } .topbar-logo-text { display: none; } .action-text { display: none; } .action-btn { padding: 7px 9px; } } /* ══════════════════════════════════════════════════════════════════════════ Footer – estilo Giacomini Portugal ══════════════════════════════════════════════════════════════════════════ */ .app-footer { background: var(--red); color: white; margin-top: 48px; font-family: var(--font); } /* ── Main section ────────────────────────────────────────────────────────── */ .footer-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; max-width: 1140px; margin: 0 auto; padding: 40px 24px 32px; } /* ── Left block ──────────────────────────────────────────────────────────── */ .footer-left { display: flex; flex-direction: column; gap: 20px; } .footer-brand-row { display: flex; align-items: center; gap: 22px; } .footer-brand-link { display: inline-flex; transition: opacity .18s; } .footer-brand-link:hover { opacity: .85; } .footer-brand-logo { height: 40px; width: auto; display: block; } .footer-logo-block { display: flex; align-items: center; gap: 10px; } .footer-logo-mark { flex-shrink: 0; } .footer-logo-text { display: flex; flex-direction: column; gap: 1px; line-height: 1; } .footer-logo-name { font-size: 22px; font-weight: 900; letter-spacing: 2px; color: white; } .footer-logo-sub { font-size: 9px; letter-spacing: 2.5px; opacity: .70; text-transform: uppercase; font-weight: 500; } /* Unique Home badge */ .footer-unique-home { display: flex; align-items: center; gap: 6px; border-left: 1px solid rgba(255,255,255,.25); padding-left: 18px; opacity: .80; } .footer-uh-text { display: flex; flex-direction: column; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; line-height: 1.3; opacity: .85; } /* Contact */ .footer-contact { display: flex; flex-direction: column; gap: 4px; } .footer-contact a { color: white; text-decoration: none; font-size: 13px; font-weight: 600; opacity: .90; transition: opacity .15s; } .footer-contact a:hover { opacity: 1; text-decoration: underline; } /* Social buttons */ .footer-socials { display: flex; gap: 10px; } .social-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); color: white; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; } .social-btn svg { width: 17px; height: 17px; } .social-btn:hover { background: rgba(255,255,255,.18); border-color: white; transform: translateY(-2px); } /* ── Right block ─────────────────────────────────────────────────────────── */ .footer-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 32px; min-height: 100px; } .footer-nav { display: flex; gap: 28px; flex-wrap: wrap; justify-content: flex-end; } .footer-nav a { color: white; text-decoration: none; font-size: 14px; font-weight: 600; opacity: .90; transition: opacity .15s; white-space: nowrap; } .footer-nav a:hover { opacity: 1; text-decoration: underline; } .footer-lkcom { display: inline-flex; align-items: center; /* era baseline (texto); com o logótipo em imagem centra melhor */ gap: 7px; text-decoration: none; transition: opacity .18s; } .footer-lkcom:hover { opacity: .85; } .footer-lkcom-label { font-size: 11px; color: rgba(255,255,255,.65); font-style: italic; } /* Logótipo LKCOM (assinatura de agência) — wordmark sobre o vermelho da marca. */ .footer-lkcom-logo { height: 16px; width: auto; display: block; } /* ── Bottom bar ──────────────────────────────────────────────────────────── */ .footer-bottom { background: rgba(0,0,0,.20); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; max-width: 100%; flex-wrap: wrap; } .footer-copy { font-size: 11.5px; color: rgba(255,255,255,.70); } .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; } .footer-legal a { font-size: 11.5px; color: rgba(255,255,255,.65); text-decoration: none; transition: color .15s; white-space: nowrap; } .footer-legal a:hover { color: white; text-decoration: underline; } /* ── Responsive footer ───────────────────────────────────────────────────── */ @media (max-width: 800px) { .footer-main { flex-direction: column; gap: 28px; padding: 32px 20px 24px; } .footer-right { align-items: flex-start; } .footer-nav { justify-content: flex-start; gap: 16px; } .footer-lkcom { text-align: left; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 20px; } .footer-legal { justify-content: flex-start; gap: 12px; } } /* ── Auth modal ──────────────────────────────────────────────────────────── */ #auth-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; } .auth-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); } .auth-dialog { position: relative; background: white; border-radius: 18px; width: 100%; max-width: 440px; box-shadow: 0 24px 64px rgba(0,0,0,.25); padding: 32px; animation: authIn .25s cubic-bezier(.4,0,.2,1); } @keyframes authIn { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } } .auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .auth-logo-mark { width: 48px; height: 48px; border-radius: 12px; background: var(--red-grad); color: white; font-size: 24px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .auth-logo-name { font-size: 18px; font-weight: 800; color: var(--gray-900); line-height: 1.1; } .auth-logo-sub { font-size: 11px; color: var(--gray-400); margin-top: 2px; } .auth-tabs { display: flex; gap: 4px; background: var(--gray-100); border-radius: 10px; padding: 4px; margin-bottom: 22px; } .auth-tab { flex: 1; padding: 9px; border: none; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); background: transparent; color: var(--gray-500); transition: background .15s, color .15s; } .auth-tab.active { background: white; color: var(--gray-900); box-shadow: 0 1px 4px rgba(0,0,0,.1); } .auth-panel.hidden { display: none !important; } .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-field-full { grid-column: 1 / -1; } /* Password show/hide wrapper */ .auth-pw-wrap { position: relative; display: flex; align-items: center; } .auth-pw-wrap input { padding-right: 42px; width: 100%; } .pw-toggle { position: absolute; right: 10px; background: none; border: none; cursor: pointer; color: var(--gray-400); padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color .15s, background .15s; line-height: 0; } .pw-toggle svg { width: 18px; height: 18px; } .pw-toggle:hover { color: var(--gray-700); background: var(--gray-100); } .auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .auth-field label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; } .auth-field input { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: var(--font); color: var(--gray-900); background: white; transition: border-color .15s, box-shadow .15s; width: 100%; } .auth-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,0,0,.10); } .auth-error { font-size: 12.5px; color: var(--rose); font-weight: 500; min-height: 18px; margin-bottom: 6px; } .auth-submit { width: 100%; padding: 12px; background: var(--red-grad); color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font); box-shadow: 0 4px 14px rgba(192,0,0,.35); transition: box-shadow .15s, transform .1s; margin-bottom: 14px; } .auth-submit:hover { box-shadow: 0 6px 20px rgba(192,0,0,.50); transform: translateY(-1px); } .auth-submit:active { transform: none; } .auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; } .auth-switch { text-align: center; font-size: 12.5px; color: var(--gray-500); } .auth-link { background: none; border: none; color: var(--red); font-weight: 700; cursor: pointer; font-family: var(--font); font-size: inherit; } .auth-link:hover { text-decoration: underline; } /* ── "Meus Cálculos" modal ────────────────────────────────────────────────── */ #calcs-modal { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 20px; } .mc-dialog { position: relative; background: white; border-radius: 16px; width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.2); animation: authIn .2s ease; } .mc-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--gray-900); } .mc-close { background: transparent; border: none; font-size: 17px; color: var(--gray-400); cursor: pointer; padding: 2px 6px; border-radius: 4px; } .mc-close:hover { background: var(--gray-100); color: var(--gray-700); } .mc-body { flex: 1; overflow-y: auto; padding: 8px 0; } .mc-row { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--border-light); transition: background .1s; } .mc-row:hover { background: var(--red-xlight); } .mc-info { flex: 1; min-width: 0; } .mc-ref { font-size: 13.5px; font-weight: 700; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-obra { font-weight: 400; color: var(--gray-500); margin-left: 6px; } .mc-meta { font-size: 11.5px; color: var(--gray-500); margin-top: 2px; } .mc-actions { display: flex; gap: 6px; flex-shrink: 0; } .mc-btn-load { padding: 6px 12px; border-radius: 8px; background: var(--red-grad); color: white; border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); } .mc-btn-del { padding: 6px 10px; border-radius: 8px; background: white; color: var(--gray-400); border: 1.5px solid var(--border); font-size: 13px; cursor: pointer; font-family: var(--font); transition: border-color .15s, color .15s; } .mc-btn-del:hover { border-color: var(--rose); color: var(--rose); } /* ── Logout btn style ────────────────────────────────────────────────────── */ .logout-btn { background: rgba(255,255,255,.08) !important; } .logout-btn:hover { background: rgba(220,38,38,.2) !important; } /* ── Print header (hidden on screen) ────────────────────────────────────── */ #print-header { display: none; } /* ════════════════════════════════════════════════════════════════════════════ CHATBOT WIDGET ════════════════════════════════════════════════════════════════════════════ */ #chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: var(--font); } #chat-toggle { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #C00000, #8C0000); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(192,0,0,0.4); color: white; transition: transform 0.2s, box-shadow 0.2s; } #chat-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(192,0,0,0.5); } #chat-panel { position: absolute; bottom: 68px; right: 0; width: 360px; height: 520px; background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; animation: slideUp 0.25s ease-out; } #chat-panel.hidden { display: none; } #chat-header { background: linear-gradient(135deg, #C00000, #8C0000); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #chat-header-info { display: flex; align-items: center; gap: 10px; } #chat-avatar { width: 36px; height: 36px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; font-weight: 700; } #chat-title { color: white; font-weight: 700; font-size: 14px; } #chat-subtitle { color: rgba(255,255,255,0.7); font-size: 11px; margin-top: 1px; } #chat-close-btn { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; font-size: 18px; padding: 4px; line-height: 1; } #chat-close-btn:hover { color: white; } #chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { display: flex; } .chat-msg-bot { justify-content: flex-start; } .chat-msg-user { justify-content: flex-end; } .chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; } .chat-msg-bot .chat-bubble { background: #F3F4F6; color: #1F2937; border-bottom-left-radius: 4px; } .chat-msg-user .chat-bubble { background: linear-gradient(135deg, #C00000, #8C0000); color: white; border-bottom-right-radius: 4px; } .chat-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; background: #F3F4F6; border-radius: 12px; border-bottom-left-radius: 4px; width: fit-content; } .chat-typing span { width: 7px; height: 7px; background: #9CA3AF; border-radius: 50%; animation: bounce 1.2s infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } } #chat-input-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #E5E7EB; flex-shrink: 0; } #chat-input { flex: 1; border: 1px solid #D1D5DB; border-radius: 8px; padding: 9px 12px; font-size: 13px; font-family: var(--font); outline: none; transition: border-color 0.15s; } #chat-input:focus { border-color: #C00000; } #chat-send { width: 38px; height: 38px; background: linear-gradient(135deg, #C00000, #8C0000); border: none; border-radius: 8px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s; } #chat-send:hover { opacity: 0.85; } /* ── Chat proativo · movimento e vida ───────────────────────────────────── */ /* Flutuação idle suave e contínua do ícone */ @keyframes chatFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } #chat-toggle { animation: chatFloat 3.2s ease-in-out infinite; } #chat-toggle:hover { animation-play-state: paused; } /* Anel pulsante para chamar a atenção (só quando .calling) */ #chat-toggle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #C00000; opacity: 0; pointer-events: none; } #chat-toggle.calling::after { animation: chatRing 1.6s ease-out infinite; } @keyframes chatRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.1); opacity: 0; } } /* Abanão de atenção */ @keyframes chatWiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(11deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } } #chat-toggle.wiggle { animation: chatWiggle 0.9s ease-in-out; } /* Ponto de notificação no ícone */ #chat-toggle .chat-dot { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #22C55E; border: 2px solid #fff; transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1); } #chat-toggle.has-msg .chat-dot { transform: scale(1); } /* Balão proativo (apresentação + lembretes) */ #chat-proactive { position: absolute; bottom: 70px; right: 4px; width: 320px; max-width: 320px; background: #fff; color: #1F2937; border-radius: 16px 16px 4px 16px; box-shadow: 0 12px 38px rgba(0,0,0,.18); padding: 14px 18px 15px; font-size: 13.5px; line-height: 1.55; border: 1px solid #F1D5D5; transform-origin: bottom right; cursor: pointer; } #chat-proactive.in { animation: proactiveIn .42s cubic-bezier(.34,1.56,.64,1) both; } #chat-proactive.out { animation: proactiveOut .28s ease-in forwards; } @keyframes proactiveIn { from { opacity: 0; transform: translateY(14px) scale(.6); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes proactiveOut { to { opacity: 0; transform: translateY(10px) scale(.85); } } #chat-proactive::after { /* "rabo" a apontar ao ícone */ content: ''; position: absolute; bottom: -7px; right: 18px; width: 14px; height: 14px; background: #fff; border-right: 1px solid #F1D5D5; border-bottom: 1px solid #F1D5D5; transform: rotate(45deg); } #chat-proactive .cp-head { display: flex; align-items: center; gap: 7px; font-weight: 800; color: #C00000; font-size: 12.5px; margin-bottom: 4px; } #chat-proactive .cp-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#C00000,#8C0000); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } #chat-proactive .cp-close { position: absolute; top: 6px; right: 8px; border: none; background: none; color: #B0B0B0; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px; } #chat-proactive .cp-close:hover { color: #6B7280; } #chat-proactive .cp-cta { margin-top: 8px; font-size: 12px; font-weight: 700; color: #C00000; } /* ── Acessibilidade do movimento (rede de segurança global) ───────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } #chat-toggle, #chat-toggle.calling::after, #chat-toggle.wiggle, #chat-proactive.in { animation: none; } } /* ── Base táctil (tablet / ecrãs de toque) ──────────────────────────────────── Sem :hover fiável em toque → alvos maiores e feedback por :active; inputs a 16px para o iOS Safari não fazer zoom automático ao focar. */ @media (pointer: coarse) { button, .action-btn, .btn-next, .btn-prev, .btn-calc, .step-btn, select, .z-del, .mc-btn-load, .mc-btn-del, .mc-btn-dup, #btn-logout, .btn-print, .chat-chip { min-height: 44px; } input, select, textarea { font-size: 16px; } /* Feedback de toque: o que responde a hover passa a responder também ao press */ .action-btn:active, .btn-next:active, .btn-calc:active, .card:active, .btn-print:active, .mc-row:active { transform: translateY(1px); } } @media (max-width: 480px) { #chat-panel { width: calc(100vw - 48px); right: 0; } #chat-proactive { max-width: calc(100vw - 80px); } } /* ── Transição entre passos do wizard (deslize suave) ─────────────────────── */ @keyframes gc-step-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } @keyframes gc-step-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } } .gc-step-in-fwd { animation: gc-step-fwd .34s var(--ease-out); } .gc-step-in-back { animation: gc-step-back .34s var(--ease-out); } /* ── Ecrã de Resultados: anel de conforto + revelação dos KPIs ─────────────── */ .comfort-card { display: flex; align-items: center; gap: 24px; } .comfort-gauge { flex-shrink: 0; } .comfort-ring { transition: stroke-dashoffset 1.15s var(--ease-out); } .comfort-num { font-size: 30px; font-weight: 800; fill: var(--gray-900); font-family: var(--font); font-variant-numeric: tabular-nums; } .comfort-den { font-size: 11px; font-weight: 600; fill: var(--gray-400); font-family: var(--font); } .comfort-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; } .comfort-sub { font-size: 13px; color: var(--gray-600); line-height: 1.5; } .kpi-value { font-variant-numeric: tabular-nums; } .results-summary .kpi { animation: gc-kpi-in .5s var(--ease-out) both; } .results-summary .kpi:nth-child(1){animation-delay:.03s} .results-summary .kpi:nth-child(2){animation-delay:.08s} .results-summary .kpi:nth-child(3){animation-delay:.13s} .results-summary .kpi:nth-child(4){animation-delay:.18s} .results-summary .kpi:nth-child(5){animation-delay:.23s} .results-summary .kpi:nth-child(6){animation-delay:.28s} .results-summary .kpi:nth-child(7){animation-delay:.33s} .results-summary .kpi:nth-child(8){animation-delay:.38s} @keyframes gc-kpi-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .comfort-card { flex-direction: column; text-align: center; gap: 14px; } } /* ── Splash de arranque (1.ª sessão do dia) ───────────────────────────────── */ #gc-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: var(--surface); transition: opacity .55s var(--ease-out), visibility .55s; } #gc-splash[hidden] { display: none; } #gc-splash.gc-splash-out { opacity: 0; visibility: hidden; } .gc-splash-logo { width: min(300px, 66vw); height: auto; opacity: 0; transform: scale(.94) translateY(4px); animation: gc-splash-logo .9s var(--ease-out) .05s forwards; } @keyframes gc-splash-logo { to { opacity: 1; transform: none; } } .gc-splash-bar { width: min(220px, 52vw); height: 3px; border-radius: 3px; background: var(--gray-200); overflow: hidden; opacity: 0; animation: gc-splash-appear .4s ease .45s forwards; } .gc-splash-bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--red-grad); animation: gc-splash-fill 1.3s var(--ease-out) .45s forwards; } @keyframes gc-splash-fill { to { width: 100%; } } @keyframes gc-splash-appear { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .gc-splash-logo, .gc-splash-bar { opacity: 1 !important; transform: none !important; animation: none !important; } .gc-splash-bar > i { width: 100% !important; animation: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ PRINT / PDF ════════════════════════════════════════════════════════════════════════════ */ @page { size: A4; margin: 14mm 12mm 16mm 12mm; } @media print { * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body { background: #fff; font-size: 11px; font-family: 'Inter', Arial, sans-serif; } /* Hide UI chrome */ .topbar, .stepnav, .nav-btns, .info-box, .zones-toolbar, .empty-state, .section-label, .app-footer { display: none !important; } .main { max-width: 100%; padding: 0; margin: 0; } /* ── Print header ── */ #print-header { display: block !important; margin-bottom: 16px; } .ph-wrap { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 12px; border-bottom: 3px solid #C00000; } .ph-left { flex-shrink: 0; background: #C00000; color: white; padding: 10px 16px; border-radius: 6px; text-align: center; min-width: 130px; } .ph-logo { font-size: 19px; font-weight: 900; letter-spacing: 1.5px; line-height: 1.1; } .ph-logo-sub { font-size: 8px; opacity: .80; margin-top: 3px; letter-spacing: .5px; display: block; } .ph-center { flex: 1; } .ph-title { font-size: 16px; font-weight: 700; color: #C00000; margin-bottom: 5px; } .ph-meta { font-size: 10px; color: #374151; display: flex; flex-wrap: wrap; gap: 0 16px; line-height: 1.7; } .ph-addr { font-size: 10px; color: #6B7280; margin-top: 3px; } .ph-right { flex-shrink: 0; text-align: right; } .ph-mode { font-size: 10px; font-weight: 700; color: #C00000; text-transform: uppercase; letter-spacing: .5px; } .ph-kpi { font-size: 10px; color: #374151; margin-top: 3px; } /* ── Cards ── */ .card { box-shadow: none !important; border: 1px solid #ddd; border-radius: 6px; page-break-inside: avoid; break-inside: avoid; margin-bottom: 8px; padding: 9px 11px; } .card:hover { box-shadow: none !important; transform: none !important; } .card-title { font-size: 11px; margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid #eee; } .card-title::before { height: 14px; width: 3px; } /* ── KPIs ── */ .results-summary { grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; } .kpi { padding: 8px 10px; border: 1px solid #ddd; border-top: 3px solid #C00000; border-radius: 5px; } .kpi:hover { transform: none !important; } .kpi-value { font-size: 17px; } .kpi-unit { font-size: 9px; } .kpi-label { font-size: 9px; } /* ── Tables ── */ .results-table-wrap { overflow: visible; border: none; } .results-table { font-size: 9px; min-width: unset !important; width: 100%; } .results-table th { padding: 4px 5px; font-size: 8px; background: #C00000 !important; color: white !important; } .results-table td { padding: 3px 5px; } .results-table tr.total td { background: #f8e6e6 !important; } .results-table tr.warning td { background: #fffbeb !important; } .badge-ok { background: #dcfce7 !important; } .badge-warn { background: #fef3c7 !important; } .badge-err { background: #fee2e2 !important; } .badge-manual { background: #dbeafe !important; } /* ── Collectors ── */ .collectors-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .collector-card { page-break-inside: avoid; break-inside: avoid; box-shadow: none; } .collector-header { padding: 6px 10px; background: #C00000 !important; } .collector-body { padding: 6px 10px; } /* ── Sub + PST ── */ .sub-station-grid { grid-template-columns: 200px 1fr; gap: 8px; } .pst-grid { grid-template-columns: 200px 1fr; gap: 8px; } .sub-header, .pst-header { background: #C00000 !important; padding: 7px 10px; } .sub-note, .pst-note { padding: 8px 12px; font-size: 10px; background: #fff0f0 !important; } /* ── Page break before BOM ── */ .card[data-section="bom"] { page-break-before: always; break-before: page; } .bom-table th, .bom-table td { font-size: 9px !important; } } /* ── Revelação de conteúdo da frente (ver gcReveal() em app.js) ─────────────── */ .reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Giaco: a cara do assistente (lançador do chat) ───────────────────────── É SEMPRE o mesmo boneco. Em repouso mostra-se da cintura para cima (a metade inferior fica abaixo da borda); com o chat aberto mostra um pouco mais, ao lado da caixa (nunca tapa nem é tapado). Olhos a mexer = atento. */ .giaco { position: fixed; right: 18px; bottom: 0; left: auto; z-index: 9998; transform: translateY(0); transition: right .42s var(--ease-out), transform .55s var(--ease-out), opacity .3s var(--ease-out); } .giaco.enter { transform: translateY(130%); } /* estado inicial (fora do ecrã) */ .giaco-char { cursor: pointer; display: block; line-height: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); transition: transform .2s var(--ease-out); } .giaco-char:hover { transform: translateY(-5px); } .giaco-char:active { transform: scale(.97); } .giaco-svg { height: auto; display: block; overflow: visible; } /* Repouso = à espreita (só acima da boca + mãos a segurar a borda) — metade do tamanho */ .giaco-peek { width: 75px; display: block; } .giaco-full { width: 116px; display: none; } /* Olhos atentos (a mexer para os lados) — em ambas as poses */ .giaco-eyes { transform-box: fill-box; transform-origin: center; animation: giaco-look 3.4s ease-in-out infinite; } @keyframes giaco-look { 0%, 18% { transform: translateX(0); } 32%, 48% { transform: translateX(2px); } 62%, 80% { transform: translateX(-2px); } 92%, 100%{ transform: translateX(0); } } /* Boas-vindas: aparece de MEIO CORPO (não à espreita) enquanto o balão está aberto; só depois de fechar a caixa é que recolhe para à espreita */ .giaco.greeting .giaco-peek { display: none; } .giaco.greeting .giaco-full { display: block; transform: translateY(20%); } /* Chat aberto: aparece o corpo (meio corpo), movido para a esquerda da caixa */ .giaco.chat-open { right: 396px; } .giaco.chat-open .giaco-peek { display: none; } .giaco.chat-open .giaco-full { display: block; transform: translateY(14%); } .giaco.wave .giaco-arm { animation: giaco-wave 1.05s ease-in-out infinite; } .giaco-arm { transform-box: fill-box; transform-origin: 22% 88%; } @keyframes giaco-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-17deg); } 60% { transform: rotate(14deg); } } /* Balão de fala — por cima do Giaco, a apontar para baixo */ .giaco-bubble { position: absolute; right: 4px; bottom: 116px; left: auto; width: 236px; background: var(--surface); color: var(--gray-700); border: 1px solid var(--border); border-radius: 16px; padding: 13px 32px 13px 15px; font-size: 13px; line-height: 1.45; box-shadow: var(--shadow-lg); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); cursor: pointer; } .giaco-bubble strong { color: var(--red); } .giaco-bubble::after { content: ''; position: absolute; right: 30px; bottom: -9px; left: auto; border: 9px solid transparent; border-top-color: var(--surface); filter: drop-shadow(0 1px 0 var(--border)); } .giaco-bubble.hidden { opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; } .giaco-bubble-close { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border: none; background: transparent; color: var(--gray-400); cursor: pointer; font-size: 13px; line-height: 1; border-radius: 6px; } .giaco-bubble-close:hover { background: var(--gray-100); color: var(--gray-600); } /* Giaco é agora o lançador do chat → o botão redondo antigo desaparece (mas continua no DOM e funcional; o Giaco dispara-o) */ #chat-toggle { display: none !important; } @media (prefers-reduced-motion: reduce) { .giaco, .giaco-char, .giaco-eyes, .giaco .giaco-arm, .giaco-bubble { transition: none !important; animation: none !important; } } @media (max-width: 640px) { .giaco-full { width: 92px; } .giaco { right: 12px; } .giaco-bubble { right: 4px; bottom: 92px; width: 190px; font-size: 12px; } /* No telemóvel o chat é quase de ecrã inteiro → recolher o Giaco quando abre */ .giaco.chat-open { opacity: 0; pointer-events: none; } } /* Não imprimir a mascote */ @media print { .giaco { display: none !important; } }