/* ══════════════════════════════════════════════════════════════════════════ GiacoCalc — Design Táctil (tablet-first) Carregado a seguir a css/style.css (reaproveita @font-face Raleway, --red, --gray-*, o modal de autenticação .auth-*). Todas as classes próprias usam o prefixo tac- para nunca colidir com o design clássico. ══════════════════════════════════════════════════════════════════════════ */ :root { --tac-paper: #FBF6F1; --tac-paper-dim: #F1E9DF; --tac-card: #FFFFFF; --tac-ink: #221A1D; --tac-ink-soft: #7A6C6D; --tac-ink-faint: #B3A8A3; --tac-water: #0E6E86; --tac-water-deep: #0A4F61; --tac-water-soft: #E1F0F2; --tac-stone: #E9DED2; --tac-stone-dark: #D8C9B8; --tac-r-tile: 22px; --tac-r-card: 26px; --tac-r-pill: 999px; --tac-sh-1: 0 1px 3px rgba(34,26,29,.08); --tac-sh-2: 0 14px 34px -14px rgba(34,26,29,.32); --tac-ease-spring: cubic-bezier(.34,1.56,.64,1); --tac-ease-out: cubic-bezier(.16,1,.3,1); } /* ── Modo escuro (class-based, .dark no — MESMA chave gc_theme e mesmo mecanismo da clássica, ver aplicarTema() em js/calc-bridge.js). Estratégia igual à clássica: inverter a rampa papel/tinta, manter o vermelho de marca intacto. */ html.dark { color-scheme: dark; --tac-paper: #1A1412; --tac-paper-dim: #251D1A; --tac-card: #241C19; --tac-ink: #F3E9E4; --tac-ink-soft: #B8A9A2; --tac-ink-faint: #7A6D67; --tac-water: #4FC1D9; --tac-water-deep: #2E92AC; --tac-water-soft: rgba(79,193,217,.16); --tac-stone: #3A2E29; --tac-stone-dark: #4A3B34; --tac-sh-1: 0 1px 3px rgba(0,0,0,.35); --tac-sh-2: 0 14px 34px -14px rgba(0,0,0,.6); } html.dark .tac-field-row input[type="text"]:focus, html.dark .tac-field-row select:focus { background: var(--tac-card); } html.dark .tac-dock { background: rgba(26,20,18,.78); border-color: rgba(74,59,52,.9); } html.dark .tac-zone-tile:not(.done) { background: linear-gradient(155deg, #26343A, #1D2A2F); border-color: #33474E; color: #8FD3E3; } html.dark .tac-btn-comercial { background: var(--tac-card); } html.dark .tac-btn-danger-ghost { background: rgba(220,38,38,.16); color: #FCA5A5; } html.dark .tac-alert-card.warn { background: rgba(217,119,6,.16); color: #FBBF24; } html.dark .tac-splash-tag { color: rgba(255,255,255,.78); } /* splash mantém-se sempre vermelho, ignora tema */ /* Transição suave ao alternar tema (mesmo mecanismo .theme-anim da clássica) */ @media (prefers-reduced-motion: no-preference) { html.tac.theme-anim, html.tac.theme-anim body, html.tac.theme-anim .tac-panel-card, html.tac.theme-anim .tac-kpi-card, html.tac.theme-anim .tac-table, html.tac.theme-anim .tac-dock, html.tac.theme-anim .tac-mini-card, html.tac.theme-anim input, html.tac.theme-anim select { transition: background-color .28s var(--tac-ease-out), color .28s var(--tac-ease-out), border-color .28s var(--tac-ease-out); } } html.tac { background: var(--tac-paper); } body.tac { background: var(--tac-paper); color: var(--tac-ink); font-family: 'Raleway', -apple-system, sans-serif; overflow-x: hidden; min-height: 100vh; position: relative; margin: 0; } .tac * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .tac h1, .tac h2, .tac h3 { font-family: 'Raleway', -apple-system, sans-serif; text-wrap: balance; margin: 0; } /* ── Atmosfera ambiente ─────────────────────────────────────────────────── */ .tac-atmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .tac-atmos span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .16; animation: tac-drift 26s ease-in-out infinite; } .tac-atmos span:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax; background: var(--tac-water); } .tac-atmos span:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -14vmax; background: #F0973A; animation-duration: 32s; animation-delay: -6s; } .tac-atmos span:nth-child(3) { width: 26vmax; height: 26vmax; right: 18vmax; top: 6vmax; background: var(--red, #C00000); opacity: .08; animation-duration: 22s; animation-delay: -12s; } @keyframes tac-drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(4vmax,3vmax) scale(1.08); } 66% { transform: translate(-3vmax,4vmax) scale(.96); } } @media (prefers-reduced-motion: reduce) { .tac-atmos span { animation: none; } } /* ── Splash ─────────────────────────────────────────────────────────────── */ #tac-splash { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 20%, #8C0000, #5C0000 70%); transition: opacity .7s var(--tac-ease-out), visibility .7s; } #tac-splash.hide { opacity: 0; visibility: hidden; pointer-events: none; } .tac-splash-inner { text-align: center; color: #fff; } .tac-splash-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; padding: 18px 34px; border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); opacity: 0; transform: translateY(10px) scale(.94); animation: tac-splash-in 1s var(--tac-ease-spring) .15s forwards; } .tac-splash-logo img { width: 190px; height: auto; display: block; } .tac-splash-tag { margin-top: 22px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: 0; color: rgba(255,255,255,.78); animation: tac-splash-fade .7s var(--tac-ease-out) .7s forwards; } @keyframes tac-splash-in { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes tac-splash-fade { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tac-splash-logo, .tac-splash-tag { animation: none; opacity: 1; transform: none; } } /* ── Topo ───────────────────────────────────────────────────────────────── */ .tac-topbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 18px 26px 6px; } .tac-topbar-brand { display: flex; align-items: center; gap: 10px; } .tac-topbar-brand svg { width: 96px; height: auto; } .tac-topbar-brand .tac-sep { width: 1px; height: 20px; background: var(--tac-stone-dark); } .tac-topbar-brand .tac-proj-tag { font-size: 12.5px; color: var(--tac-ink-soft); font-weight: 600; } .tac-topbar-right { display: flex; align-items: center; gap: 14px; } .tac-topbar-step { font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--tac-ink-faint); text-transform: uppercase; } .tac-topbar-step b { color: var(--red, #C00000); } .tac-btn-linkback { border: none; background: transparent; color: var(--tac-ink-faint); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; white-space: nowrap; } .tac-lb-short { display: none; } /* Telemóvel: o cabeçalho tal como está (logo+nome+3 ações+contador de passo) não cabe numa só linha em ~390px — encolhe/esconde o que já é redundante (o passo já aparece por cima de cada ecrã: "📋 PASSO 1" etc.) em vez de deixar tudo embrulhar de forma caótica. */ @media (max-width: 480px) { .tac-topbar { padding: 14px 16px 6px; gap: 8px; } .tac-topbar-brand { gap: 6px; } .tac-topbar-brand svg { width: 68px; } .tac-topbar-brand .tac-proj-tag { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tac-topbar-right { gap: 6px; } .tac-topbar-step { display: none; } .tac-btn-linkback { text-decoration: none; font-size: 17px; } .tac-lb-full { display: none; } .tac-lb-short { display: inline; } } .tac-btn-icon-sm { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--tac-paper-dim); color: var(--tac-ink); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s var(--tac-ease-spring), background .2s; } .tac-btn-icon-sm:active { transform: scale(.9); background: var(--tac-stone); } /* ── Palco ──────────────────────────────────────────────────────────────── */ .tac-stage-viewport { position: relative; z-index: 1; padding: 6px 22px 148px; } .tac-stage-panel { max-width: 880px; margin: 0 auto; transform-origin: center; animation: tac-panel-in .48s var(--tac-ease-spring); } .tac-stage-panel.leaving-l { animation: tac-panel-out-l .28s var(--tac-ease-out) forwards; } .tac-stage-panel.leaving-r { animation: tac-panel-out-r .28s var(--tac-ease-out) forwards; } @keyframes tac-panel-in { from { opacity: 0; transform: translateX(var(--tac-enter-x,26px)) scale(.97); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes tac-panel-out-l { to { opacity: 0; transform: translateX(-40px) scale(.96); } } @keyframes tac-panel-out-r { to { opacity: 0; transform: translateX(40px) scale(.96); } } @media (prefers-reduced-motion: reduce) { .tac-stage-panel, .tac-stage-panel.leaving-l, .tac-stage-panel.leaving-r { animation: none !important; } } .tac-eyebrow { font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tac-water); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .tac-title { font-size: 30px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; } .tac-sub { font-size: 15px; color: var(--tac-ink-soft); max-width: 60ch; line-height: 1.5; margin-bottom: 22px; } .tac-panel-card { background: var(--tac-card); border: 1px solid var(--tac-stone); border-radius: var(--tac-r-card); padding: 22px; box-shadow: var(--tac-sh-1); margin-bottom: 18px; } /* ── Campos ─────────────────────────────────────────────────────────────── */ .tac-field-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .tac-field-row label { font-size: 13px; font-weight: 700; color: var(--tac-ink-soft); text-transform: uppercase; letter-spacing: .04em; } .tac-field-row input[type="text"], .tac-field-row select { height: 58px; border-radius: 16px; border: 1.5px solid var(--tac-stone); background: var(--tac-paper-dim); padding: 0 18px; font-size: 17px; color: var(--tac-ink); font-family: 'Raleway', -apple-system, sans-serif; transition: border-color .2s, background .2s; width: 100%; } .tac-field-row input[type="text"]:focus, .tac-field-row select:focus { outline: none; border-color: var(--tac-water); background: #fff; } .tac-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .tac-field-grid-2 { grid-template-columns: 1fr; } } .tac-chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .tac-chip { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: var(--tac-r-pill); border: 1.5px solid var(--tac-stone); background: var(--tac-card); font-size: 15px; font-weight: 600; color: var(--tac-ink-soft); cursor: pointer; transition: transform .16s var(--tac-ease-spring), border-color .2s, background .2s, color .2s, box-shadow .2s; user-select: none; -webkit-user-select: none; font-family: 'Raleway', -apple-system, sans-serif; } .tac-chip .tac-ic { font-size: 18px; line-height: 1; } .tac-chip:active { transform: scale(.95); } .tac-chip.on { background: linear-gradient(135deg, var(--red,#C00000), #8C0000); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -10px rgba(192,0,0,.55); } .tac-chip.on.water { background: linear-gradient(135deg, var(--tac-water), var(--tac-water-deep)); box-shadow: 0 10px 22px -10px rgba(14,110,134,.5); } .tac-chip-caption { margin-top: 10px; font-size: 12.5px; color: var(--tac-ink-faint); } .tac-stepper { display: flex; align-items: center; gap: 16px; } .tac-stepper button { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--tac-paper-dim); color: var(--tac-ink); font-size: 22px; font-weight: 800; cursor: pointer; transition: transform .12s var(--tac-ease-spring), background .2s; display: flex; align-items: center; justify-content: center; } .tac-stepper button:active { transform: scale(.88); background: var(--tac-stone); } .tac-stepper-val { font-size: 32px; font-weight: 800; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; } .tac-stepper-unit { font-size: 14px; color: var(--tac-ink-faint); font-weight: 600; } /* ── Zonas: planta viva ─────────────────────────────────────────────────── */ .tac-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .tac-zone-tile { position: relative; border-radius: var(--tac-r-tile); padding: 16px; min-height: 128px; cursor: pointer; background: linear-gradient(155deg, #E8EEF0, #DCE6E8); border: 1px solid #CFDBDD; color: var(--tac-water-deep); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform .18s var(--tac-ease-spring), box-shadow .3s, background .6s var(--tac-ease-out), border-color .6s, color .4s; } .tac-zone-tile:active { transform: scale(.95); } .tac-zone-tile.big { grid-column: span 2; } .tac-zone-tile.done { background: radial-gradient(130% 110% at 78% 100%, #FFC97A 0%, #F0973A 26%, #D8560F 52%, #7A2408 82%, #5C1B05 100%), radial-gradient(90% 70% at 20% 14%, rgba(255,238,205,.55), rgba(255,238,205,0) 55%); border-color: transparent; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); box-shadow: 0 20px 40px -16px rgba(120,30,5,.6), inset 0 1px 1px rgba(255,255,255,.3), inset 0 -14px 22px -16px rgba(0,0,0,.4); } .tac-zone-tile.done .tac-z-area { color: #FFE3BE; } .tac-zone-tile.done .tac-z-meta { color: #FFD9A8; opacity: .95; } .tac-zone-tile.done.ignite { animation: tac-ignite .7s var(--tac-ease-spring); } @keyframes tac-ignite { 0% { transform: scale(1); } 40% { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(240,151,58,.25), var(--tac-sh-2); } 100% { transform: scale(1); } } .tac-zone-tile .tac-z-top { display: flex; align-items: center; justify-content: space-between; } .tac-zone-tile .tac-z-ic { font-size: 22px; } .tac-zone-tile .tac-z-name { font-weight: 800; font-size: 16px; margin-top: 6px; line-height: 1.15; } .tac-zone-tile .tac-z-meta { font-size: 12px; font-weight: 600; opacity: .82; margin-top: 2px; max-width: calc(100% - 46px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tac-zone-tile .tac-z-area { position: absolute; right: 14px; bottom: 12px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; } .tac-zone-add { border-radius: var(--tac-r-tile); min-height: 128px; border: 2px dashed var(--tac-stone-dark); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--tac-ink-faint); transition: transform .16s var(--tac-ease-spring), border-color .2s, color .2s; } .tac-zone-add:active { transform: scale(.95); } .tac-zone-add .tac-plus { width: 40px; height: 40px; border-radius: 50%; background: var(--red,#C00000); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; } .tac-zone-add span.tac-lbl { font-size: 12.5px; font-weight: 700; } .tac-zones-empty { text-align: center; padding: 40px 20px; color: var(--tac-ink-faint); } /* ── Folha (editor de zona) ─────────────────────────────────────────────── */ .tac-sheet-scrim { position: fixed; inset: 0; background: rgba(34,26,29,.42); backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .3s var(--tac-ease-out); } .tac-sheet-scrim.show { opacity: 1; pointer-events: auto; } .tac-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--tac-card); border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px -20px rgba(34,26,29,.35); max-width: 720px; margin: 0 auto; padding: 10px 26px calc(26px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .4s var(--tac-ease-spring); max-height: 84vh; overflow-y: auto; } .tac-sheet.show { transform: translateY(0); } /* Meus Cálculos — listagem dentro da mesma folha inferior */ .tac-mycalcs-empty { text-align: center; padding: 32px 12px; color: var(--tac-ink-soft); } .tac-mycalcs-list { display: flex; flex-direction: column; gap: 10px; } .tac-mycalc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--tac-stone); border-radius: 16px; } .tac-mycalc-ref { font-weight: 800; font-size: 15px; } .tac-mycalc-obra { font-size: 13px; color: var(--tac-ink-soft); margin-top: 1px; } .tac-mycalc-meta { font-size: 11.5px; color: var(--tac-ink-faint); margin-top: 4px; } .tac-mycalc-actions { display: flex; gap: 8px; flex-shrink: 0; } /* Mais opções (Novo/Guardar/Exportar/Importar/Encerrar sessão) */ .tac-more-list { display: flex; flex-direction: column; gap: 8px; } .tac-more-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--tac-stone); border-radius: 16px; background: var(--tac-card); font: inherit; font-size: 15px; font-weight: 700; color: var(--tac-ink); text-align: left; cursor: pointer; transition: transform .12s var(--tac-ease-spring), background .2s; } .tac-more-row:active { transform: scale(.98); background: var(--tac-paper-dim); } .tac-more-row svg { width: 20px; height: 20px; color: var(--tac-ink-soft); flex-shrink: 0; } .tac-more-row.danger { color: #B91C1C; margin-top: 6px; } .tac-more-row.danger svg { color: #B91C1C; } .tac-sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--tac-stone-dark); margin: 8px auto 18px; } .tac-sheet-title { font-size: 20px; font-weight: 800; margin-bottom: 18px; } .tac-sheet-section { margin-bottom: 20px; } .tac-sheet-section > label { display: block; font-size: 12.5px; font-weight: 700; color: var(--tac-ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; } .tac-sheet-chip-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tac-sheet-chip-scroll::-webkit-scrollbar { display: none; } .tac-sheet-chip-scroll .tac-chip { flex: 0 0 auto; } .tac-sheet-actions { display: flex; gap: 12px; margin-top: 8px; } /* ── Botões grandes ─────────────────────────────────────────────────────── */ .tac-btn-big { flex: 1; height: 58px; border-radius: 18px; border: none; font-size: 16px; font-weight: 700; cursor: pointer; font-family: 'Raleway', -apple-system, sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .14s var(--tac-ease-spring), box-shadow .2s; } .tac-btn-big:active { transform: scale(.96); } .tac-btn-big:disabled { opacity: .6; cursor: wait; } .tac-btn-primary { background: linear-gradient(135deg, var(--red,#C00000), #8C0000); color: #fff; box-shadow: 0 14px 28px -12px rgba(192,0,0,.55); } .tac-btn-ghost { background: var(--tac-paper-dim); color: var(--tac-ink); flex: 0 0 auto; width: 58px; } .tac-btn-comercial { background: #fff; color: var(--red,#C00000); border: 1.5px solid var(--red,#C00000); } .tac-btn-comercial:active { background: var(--red,#C00000); color: #fff; } .tac-btn-danger-ghost { background: #FBE2E2; color: #8C0000; flex: 0 0 auto; padding: 0 18px; } /* ── Resultados ─────────────────────────────────────────────────────────── */ .tac-comfort-card { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .tac-comfort-ring-wrap { position: relative; width: 168px; height: 168px; flex: 0 0 auto; } .tac-comfort-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); } .tac-comfort-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tac-comfort-num b { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .tac-comfort-num span { font-size: 12px; color: var(--tac-ink-faint); font-weight: 700; margin-top: 2px; } .tac-comfort-band { font-weight: 800; font-size: 17px; margin-bottom: 6px; } .tac-comfort-desc { font-size: 13.5px; color: var(--tac-ink-soft); line-height: 1.5; max-width: 44ch; } .tac-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; } .tac-kpi-card { background: var(--tac-card); border: 1px solid var(--tac-stone); border-radius: 18px; padding: 18px; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--tac-ease-out), transform .5s var(--tac-ease-out); } .tac-kpi-card.in { opacity: 1; transform: none; } .tac-kpi-card .tac-kv { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--red,#C00000); } .tac-kpi-card .tac-ku { font-size: 12px; color: var(--tac-ink-faint); font-weight: 700; } .tac-kpi-card .tac-kl { font-size: 13px; color: var(--tac-ink-soft); margin-top: 4px; } .tac-cta-bar { display: flex; gap: 14px; margin-top: 6px; } .tac-cta-bar .tac-btn-big { height: 64px; font-size: 17px; } /* Tabelas técnicas — mantidas como tabelas (decisão de âmbito), só embrulhadas no novo cartão; scroll horizontal próprio para não alastrar a página. */ .tac-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--tac-stone); } .tac-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; } .tac-table th { background: var(--tac-paper-dim); color: var(--tac-ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; padding: 10px 12px; text-align: left; position: sticky; top: 0; } .tac-table td { padding: 9px 12px; border-top: 1px solid var(--tac-stone); font-variant-numeric: tabular-nums; } .tac-table tr.tac-total td { font-weight: 800; background: var(--tac-paper-dim); } .tac-table tr.tac-manual td, .tac-table tr.tac-warning td { background: var(--amber-bg); } .tac-val-warn { color: var(--amber-text); font-weight: 700; } .tac-val-err { color: var(--rose-text); font-weight: 700; } .tac-badge { display: inline-block; padding: 3px 10px; border-radius: var(--tac-r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; } .tac-badge-ok { background: var(--green-bg); color: var(--green-text); } .tac-badge-warn { background: var(--amber-bg); color: var(--amber-text); } .tac-badge-err { background: var(--rose-bg); color: var(--rose-text); } .tac-table-note { font-size: 12px; color: var(--tac-ink-faint); margin-top: 10px; line-height: 1.5; } /* Grelha de cartões técnicos (coletores, subcentral, vaso de expansão) */ .tac-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .tac-mini-card { border: 1px solid var(--tac-stone); border-radius: 16px; overflow: hidden; } .tac-mini-card.warn { border-color: var(--rose-text); } .tac-mini-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; background: var(--tac-paper-dim); font-weight: 700; font-size: 13px; } .tac-mini-head.warn { background: var(--rose-bg); color: var(--rose-text); } .tac-mini-body { padding: 4px 16px 12px; } .tac-mini-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--tac-stone); font-size: 13px; } .tac-mini-row:first-child { border-top: none; } .tac-mini-row span:first-child { color: var(--tac-ink-soft); } .tac-alert-card { border-radius: 16px; padding: 14px 18px; font-size: 13px; line-height: 1.5; } .tac-alert-card.warn { background: #FFFBEB; color: #92400E; } .tac-alert-card.err { background: var(--rose-bg); color: var(--rose-text); } .tac-formula-note { font-family: ui-monospace, monospace; font-size: 12px; background: var(--tac-paper-dim); border-radius: 10px; padding: 10px 14px; margin-top: 10px; line-height: 1.6; } /* ── Dock (navegação por polegar) ───────────────────────────────────────── Ícone + legenda SEMPRE visíveis (não só um "title" de hover) — em toque não há cursor para revelar tooltips, por isso o rótulo tem de estar sempre à vista, tal como aconteceria no rato/cursor do desktop. ────────── */ .tac-dock-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; padding: 14px 10px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; } .tac-dock { pointer-events: auto; display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(233,222,210,.9); border-radius: var(--tac-r-pill); padding: 8px 4px; box-shadow: var(--tac-sh-2); } .tac-dock-item { position: relative; width: 64px; border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px 6px; color: var(--tac-ink-faint); transition: transform .2s var(--tac-ease-spring), color .25s; } .tac-dock-ic-wrap { position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .tac-dock-item svg { width: 22px; height: 22px; position: relative; z-index: 1; transition: transform .25s var(--tac-ease-spring); } .tac-dock-label { font-size: 9.5px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; } .tac-dock-item.active svg { transform: scale(1.08); } .tac-dock-item:active { transform: scale(.94); } .tac-dock-item.active { color: var(--red, #C00000); } .tac-dock-item.active .tac-dock-ic-wrap { color: #fff; } .tac-dock-item.active .tac-dock-ic-wrap::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0; background: linear-gradient(135deg, var(--red,#C00000), #8C0000); box-shadow: 0 8px 18px -6px rgba(192,0,0,.6); animation: tac-dock-pop .38s var(--tac-ease-spring); } @keyframes tac-dock-pop { from { transform: scale(.6); opacity: .4; } to { transform: scale(1); opacity: 1; } } .tac-dock-item.done .tac-dock-ic-wrap::after { content: ''; position: absolute; top: -1px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #16A34A; border: 2px solid var(--tac-card); z-index: 2; } /* Ripple táctil */ .tac-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0); pointer-events: none; animation: tac-ripple-fx .55s var(--tac-ease-out); z-index: 5; } .tac-chip .tac-ripple, .tac-zone-tile .tac-ripple { background: rgba(255,255,255,.4); } @keyframes tac-ripple-fx { to { transform: scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tac-ripple { display: none; } } .tac-swipe-hint { text-align: center; font-size: 12px; color: var(--tac-ink-faint); margin: 10px 0 4px; display: flex; align-items: center; justify-content: center; gap: 6px; } @media (max-width: 720px) { .tac-title { font-size: 24px; } .tac-comfort-card { flex-direction: column; text-align: center; } }