/* ══════════════════════════════════════════════════════════ MINHAS FERRAMENTAS — style.css Visual compartilhado por todas as páginas do site. Extraído do protótipo original (ferramentas-financeiras.html). Estilos específicos de cada ferramenta (ex: o layout especial da Regra de Três ou da Porcentagem) ficam dentro da própria página da ferramenta, não aqui — aqui só entra o que é comum a todas as páginas. ══════════════════════════════════════════════════════════ */ :root { --cream: #F0EBE3; --sand: #E4DCCF; --teal: #7D9D9C; --slate: #576F72; --bg: #3d5255; --surface: #476063; --surface2: #4e6b6e; --border: var(--ov-hover-2); --border-soft: var(--ov-hover-1); --text: #F0EBE3; --muted: #b8cccf; --faint: #8aa6a8; --teal-bright: #9dbdbc; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; --radius: 14px; --radius-sm: 8px; --shadow: 0 2px 16px var(--ov-recess-2); --shadow-md: 0 6px 32px var(--ov-recess-3); --sidebar-w: 232px; /* Tons de sobreposição — usados em fundos de campo, hover, cards dentro de cards, etc. Ficam à parte pra poder trocar de valor sozinhos entre os temas (ver body.light-theme mais abaixo), sem precisar caçar cor por cor em cada regra do arquivo. */ --ov-recess-1: var(--ov-recess-1); /* fundo recuado, mais sutil (linhas de histórico, tabelas) */ --ov-recess-2: var(--ov-recess-2); /* fundo recuado padrão (campos de formulário, cards internos) */ --ov-recess-3: var(--ov-recess-3); /* fundo recuado mais forte (prefixo de campo, selects) */ --ov-recess-4: var(--ov-recess-4); /* quase opaco (sidebar, hambúrguer mobile) */ --ov-hover-1: var(--ov-hover-1); /* highlight de hover bem sutil */ --ov-hover-2: var(--ov-hover-2); /* highlight de hover padrão */ --ov-hover-3: var(--ov-hover-3); /* highlight de hover mais forte */ --ov-scrim: var(--ov-scrim); /* fundo escurecido atrás do menu mobile */ } /* ── TEMA CLARO ─────────────────────────────────────────────── Troca só os valores das variáveis — todo o resto do CSS já usa var(--algo), então o site inteiro se re-pinta sozinho. Aplicado via classe no (ver botão de alternância em main.js). */ body.light-theme { --cream: #2c3e3f; --sand: #4a5f61; --teal: #6f9291; --slate: #c6d6d5; --bg: #F3EFE7; --surface: #FFFFFF; --surface2: #F7F3EC; --border: rgba(44,62,63,0.14); --border-soft: rgba(44,62,63,0.08); --text: #2c3e3f; --muted: #5c7274; --faint: #7f9294; --teal-bright: #3f7472; --ov-recess-1: rgba(44,62,63,0.045); --ov-recess-2: rgba(44,62,63,0.06); --ov-recess-3: rgba(44,62,63,0.08); --ov-recess-4: rgba(255,255,255,0.90); --ov-hover-1: rgba(44,62,63,0.04); --ov-hover-2: rgba(44,62,63,0.06); --ov-hover-3: rgba(44,62,63,0.09); --ov-scrim: rgba(44,62,63,0.35); --shadow: 0 2px 16px rgba(44,62,63,0.10); --shadow-md: 0 6px 28px rgba(44,62,63,0.16); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html { background: var(--bg); } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; } body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(ellipse 80% 50% at 50% -5%, var(--ov-hover-1) 0%, transparent 55%), radial-gradient(ellipse 40% 35% at 100% 100%, rgba(125,157,156,0.10) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* ── SIDEBAR (categorizada, lida a partir de ferramentas.js) ─ */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: var(--ov-recess-4); border-right: 1px solid var(--border-soft); backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: 22px 14px 24px; overflow-y: auto; z-index: 100; transition: transform 0.25s ease; } .sidebar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 4px 8px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .sidebar-logo { width: 34px; height: 34px; flex-shrink: 0; background: var(--ov-hover-2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid var(--border); } .sidebar-brand-name { font-family: var(--font-serif); font-size: 15px; font-weight: 400; line-height: 1.15; color: var(--cream); } .sidebar-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); padding: 14px 10px 6px; } .sidebar-cat:first-of-type { padding-top: 6px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-family: var(--font-sans); font-size: 13px; font-weight: 500; border: 1px solid transparent; transition: all 0.18s ease; } .sidebar-item .si-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; } .sidebar-item:hover { background: var(--ov-hover-1); color: var(--cream); } .sidebar-item.active { background: rgba(157,189,188,0.16); color: var(--teal-bright); border-color: rgba(157,189,188,0.30); } /* botão de alternar tema claro/escuro — fica no fim do menu lateral */ .theme-toggle { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; margin-left: -10px; width: calc(100% + 20px); background: transparent; border: 1px solid var(--border-soft); border-radius: 10px; color: var(--muted); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.18s ease; } .theme-toggle:hover { background: var(--ov-hover-1); color: var(--cream); border-color: var(--border); } .theme-toggle-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; } /* botão hambúrguer + fundo escurecido — só aparecem no celular */ .sidebar-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 210; width: 42px; height: 42px; border-radius: 10px; background: var(--ov-recess-4); border: 1px solid var(--border); color: var(--cream); font-size: 18px; align-items: center; justify-content: center; cursor: pointer; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--ov-scrim); z-index: 99; } @media (max-width: 800px) { .sidebar { transform: translateX(-100%); width: 250px; } body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-md); } body.sidebar-open .sidebar-overlay { display: block; } .sidebar-toggle { display: flex; } .main { margin-left: 0 !important; padding-top: 70px; } } /* ── MAIN ─────────────────────────────────────────────────── */ .main { margin-left: var(--sidebar-w); position: relative; z-index: 1; } .section-page { padding: 48px 48px 80px; max-width: 1060px; margin: 0 auto; animation: fadeUp 0.35s ease both; } /* ── NAV TAG (trilha: Minhas Ferramentas › Categoria) ───────── */ .site-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 48px; } .site-nav .brand { font-family: var(--font-serif); font-size: 13px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .site-nav .sep { color: var(--faint); font-size: 12px; } .site-nav .section-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--cream); background: var(--ov-hover-2); padding: 3px 10px; border-radius: 100px; } /* ── HERO ─────────────────────────────────────────────────── */ .hero { margin-bottom: 44px; } .hero h1 { font-family: var(--font-serif); font-size: clamp(34px,5vw,54px); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; color: var(--cream); } .hero h1 em { font-style: italic; color: var(--sand); } .hero p { margin-top: 12px; font-size: 14px; color: var(--muted); font-weight: 300; max-width: 520px; line-height: 1.7; } /* ── AVISO DE TRANSFERÊNCIA (valor vindo de outra ferramenta) ─ Cada página que recebe valores via URL deve ter no HTML:

✦ ✕

main.js expõe a função mostrarAviso(msg) para preenchê-lo. */ .transfer-hint { display: none; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(228,220,207,0.08); border: 1px solid rgba(228,220,207,0.20); border-radius: var(--radius-sm); font-size: 12px; color: var(--sand); margin-bottom: 22px; } .transfer-hint.visible { display: flex; animation: fadeIn 0.25s ease; } .transfer-close { margin-left: auto; cursor: pointer; opacity: 0.5; } .transfer-close:hover { opacity: 1; } /* ── CARD ─────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 30px; margin-bottom: 18px; box-shadow: var(--shadow); } .card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; } .card-title .icon { width: 36px; height: 36px; background: var(--ov-hover-2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .card-title h2 { font-family: var(--font-serif); font-size: 21px; font-weight: 400; color: var(--cream); } .card-title .subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ── TEXTO DE APOIO / SEO (o parágrafo de 150–300 palavras) ─ */ .info-text { color: var(--muted); font-size: 14px; line-height: 1.8; } .info-text h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 400; color: var(--cream); margin: 20px 0 8px; } .info-text h3:first-child { margin-top: 0; } .info-text p { margin-bottom: 12px; } .info-text strong { color: var(--sand); font-weight: 500; } /* ── FORM ─────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; } .field label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; font-family: var(--font-mono); } .input-group { display: flex; align-items: center; background: var(--ov-recess-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .input-group:focus-within { border-color: var(--sand); box-shadow: 0 0 0 3px rgba(228,220,207,0.10); } .input-prefix { padding: 0 13px; font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--sand); background: var(--ov-recess-3); border-right: 1px solid var(--border); height: 46px; display: flex; align-items: center; white-space: nowrap; } .input-group input { flex: 1; background: transparent; border: none; outline: none; color: var(--cream); font-family: var(--font-mono); font-size: 14px; padding: 0 14px; height: 46px; width: 100%; } .input-group input::placeholder { color: var(--faint); } .input-group select { background: var(--ov-recess-3); border: none; border-left: 1px solid var(--border); outline: none; color: var(--sand); font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 0 13px; height: 46px; cursor: pointer; } .input-group select option { background: #3d5255; } /* ── BUTTONS ──────────────────────────────────────────────── */ .actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .btn { display: flex; align-items: center; gap: 7px; padding: 11px 22px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s ease; } .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--ov-hover-1); color: var(--cream); } .btn-primary { background: var(--sand); color: #3d5255; } .btn-primary:hover { background: var(--cream); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(240,235,227,0.18); } /* ── RESULTADOS ───────────────────────────────────────────── */ .results-section { display: none; } .results-section.visible { display: block; animation: fadeUp 0.35s ease both; } .summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; } .sum-card { background: var(--ov-recess-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 18px; text-align: center; } .sum-card .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .sum-card .val { font-family: var(--font-mono); font-size: 19px; font-weight: 500; line-height: 1; } .sum-card.type-a .val { color: var(--teal-bright); } .sum-card.type-b .val { color: var(--sand); } .sum-card.type-c .val { color: var(--cream); } /* ── GRÁFICOS (Chart.js) ─────────────────────────────────── */ .chart-area { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; margin-bottom: 24px; padding: 22px; background: var(--ov-recess-1); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .donut-wrap { position: relative; width: 140px; height: 140px; } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; } .donut-center .pct { font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--sand); display: block; } .donut-center .pct-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--muted); text-transform: uppercase; } .bar-wrap { height: 210px; } .chart-legend-row { display: flex; gap: 16px; margin-bottom: 12px; justify-content: center; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* ── TABELA ───────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); } table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; } thead th { background: var(--ov-recess-3); padding: 12px 16px; text-align: right; font-size: 10px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); } thead th:first-child { text-align: center; } tbody tr { border-bottom: 1px solid var(--border-soft); transition: background 0.15s; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--ov-hover-1); } tbody tr.alt { background: var(--ov-recess-1); } tbody tr.crossing { background: rgba(125,157,156,0.10); border-left: 2px solid var(--teal-bright); } tbody tr.crossing td:first-child { color: var(--teal-bright); } td { text-align: right; padding: 11px 16px; color: var(--muted); } td:first-child { text-align: center; color: var(--cream); font-weight: 500; } td.acumulado { color: var(--sand); font-weight: 500; } td.col-teal { color: var(--teal-bright); } /* ── CONTROLES / SLIDERS ─────────────────────────────────── */ .controls-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 22px; } .ctrl-card { background: var(--ov-recess-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 18px 20px; } .ctrl-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .cv-teal { color: var(--teal-bright); } .cv-slate { color: var(--sand); } .cv-ink { color: var(--cream); } /* Campo numérico editável dentro do ctrl-card (usado junto com o slider, pra quem preferir digitar o valor em vez de arrastar) */ .ctrl-number-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 12px; } .ctrl-number-prefix, .ctrl-number-suffix { font-family: var(--font-mono); font-size: 13px; color: var(--muted); flex-shrink: 0; } .ctrl-number-input { background: transparent; border: none; border-bottom: 1px dashed var(--border); font-family: var(--font-mono); font-size: 22px; font-weight: 500; line-height: 1.2; width: 100%; max-width: 150px; padding: 0 0 4px; outline: none; -moz-appearance: textfield; transition: border-color 0.2s; } .ctrl-number-input:focus { border-bottom-color: var(--sand); } .ctrl-number-input::-webkit-inner-spin-button, .ctrl-number-input::-webkit-outer-spin-button { opacity: 0.35; cursor: pointer; } input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: var(--ov-hover-3); border-radius: 2px; outline: none; cursor: pointer; } input[type=range].r-teal::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--teal-bright); cursor: pointer; box-shadow: 0 0 0 3px rgba(157,189,188,0.20); } input[type=range].r-slate::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sand); cursor: pointer; box-shadow: 0 0 0 3px rgba(228,220,207,0.20); } input[type=range].r-ink::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); cursor: pointer; box-shadow: 0 0 0 3px rgba(240,235,227,0.20); } input[type=range].r-teal::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--teal-bright); cursor: pointer; } input[type=range].r-slate::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--sand); cursor: pointer; } input[type=range].r-ink::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--cream); cursor: pointer; } .range-limits { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--faint); margin-top: 5px; } /* ── ESTATÍSTICAS EM DESTAQUE ─────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; } .stat-card { background: var(--ov-recess-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 16px 18px; } .stat-card.highlight { border-color: rgba(157,189,188,0.35); background: rgba(125,157,156,0.12); } .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .stat-value { font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--cream); line-height: 1.1; } .stat-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; } .chart-line-wrap { height: 280px; } .badge { display: inline-block; background: rgba(125,157,156,0.15); color: var(--teal-bright); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; margin-left: 5px; } .sec-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; } .sec-title h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 400; color: var(--cream); } /* ── ALTERNÂNCIA DE MODO (pílula) ──────────────────────────── Para ferramentas com 2+ modos dentro da mesma página (ex: Porcentagem: "quanto é X% de Y" / "descubra a %") */ .mode-tabs { display: flex; gap: 0; margin-bottom: 20px; background: var(--ov-recess-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; width: fit-content; } .mode-tab { padding: 8px 20px; border-radius: calc(var(--radius-sm) - 2px); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: transparent; color: var(--faint); transition: all 0.22s ease; white-space: nowrap; } .mode-tab.active { background: var(--surface2); color: var(--cream); box-shadow: var(--shadow); } .mode-panel { display: none; } .mode-panel.active { display: block; animation: fadeUp 0.3s ease both; } /* ── SUGESTÃO INTELIGENTE (indica outra ferramenta) ─────────── */ .smart-suggestion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 18px; background: rgba(157,189,188,0.11); border: 1px solid rgba(157,189,188,0.30); border-radius: var(--radius-sm); box-shadow: 0 2px 14px rgba(157,189,188,0.06); animation: fadeIn 0.25s ease; } .smart-icon { color: var(--teal-bright); font-size: 14px; flex-shrink: 0; } .smart-suggestion > span:nth-child(2) { font-family: var(--font-sans); font-size: 13.5px; color: var(--cream); flex: 1; min-width: 160px; } .smart-btn { background: rgba(157,189,188,0.16); border: 1px solid rgba(157,189,188,0.45); border-radius: 100px; padding: 6px 16px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--teal-bright); cursor: pointer; transition: all 0.18s; white-space: nowrap; flex-shrink: 0; text-decoration: none; display: inline-flex; align-items: center; } .smart-btn:hover { background: rgba(157,189,188,0.28); color: var(--cream); border-color: rgba(157,189,188,0.65); } /* ── CHIPS DE ATALHO (ex: taxas prontas pra clicar) ─────────── */ .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .chip-btn { background: var(--ov-hover-1); border: 1px solid var(--border); border-radius: 100px; padding: 5px 13px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); cursor: pointer; transition: all 0.15s; } .chip-btn:hover { background: var(--ov-hover-2); color: var(--cream); border-color: rgba(240,235,227,0.30); } .chip-btn.active { background: var(--teal); color: var(--cream); border-color: var(--teal); } /* ── RESULTADO EM DESTAQUE (ex: "você chega lá em X anos") ──── */ .result-hero { text-align: center; padding: 34px 20px; margin-bottom: 18px; background: var(--surface); border: 1px solid rgba(157,189,188,0.25); border-radius: var(--radius); box-shadow: var(--shadow); } .result-hero-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .result-hero-time { font-family: var(--font-serif); font-size: clamp(30px,5vw,46px); font-weight: 400; color: var(--teal-bright); line-height: 1.1; } .result-hero-time em { font-style: normal; font-size: 0.55em; color: var(--sand); font-family: var(--font-sans); font-weight: 400; } .result-hero-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 10px; } /* ── META INALCANÇÁVEL (aviso) ───────────────────────────────── */ .impossible-box { display: flex; align-items: center; gap: 16px; padding: 22px 26px; margin-bottom: 18px; background: rgba(228,220,207,0.05); border: 1px dashed rgba(228,220,207,0.30); border-radius: var(--radius); } .impossible-icon { font-family: var(--font-serif); font-size: 34px; color: var(--sand); flex-shrink: 0; opacity: 0.7; } .impossible-title { font-family: var(--font-serif); font-size: 17px; color: var(--cream); margin-bottom: 4px; } .impossible-sub { font-size: 13px; color: var(--muted); } /* ── MARCOS (25/50/75/100%) ──────────────────────────────────── */ .milestone-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 20px; } .milestone-chip { text-align: center; padding: 12px 8px; border-radius: var(--radius-sm); background: var(--ov-recess-2); border: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 12px; color: var(--faint); } .milestone-chip .chip-pct { display: block; font-size: 15px; font-weight: 500; margin-bottom: 3px; } .milestone-chip.reached { border-color: rgba(157,189,188,0.35); background: rgba(125,157,156,0.10); color: var(--muted); } .milestone-chip.reached .chip-pct { color: var(--teal-bright); } /* ── BARRA DE PROGRESSO ───────────────────────────────────────── */ .progress-wrap { margin-bottom: 22px; } .progress-track { height: 6px; background: var(--ov-hover-2); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); border-radius: 4px; transition: width 0.5s ease; } .progress-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--faint); margin-top: 6px; } /* ── HISTÓRICO (lido/salvo no localStorage via main.js) ─────── */ .hist-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; } .hist-list { display: flex; flex-direction: column; gap: 6px; } .hist-empty { font-size: 13px; color: var(--faint); padding: 8px 2px; } .hist-item { display: flex; align-items: center; justify-content: space-between; background: var(--ov-recess-1); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); cursor: pointer; transition: all 0.15s; } .hist-item:hover { background: var(--ov-hover-1); color: var(--cream); } .hist-item .hist-del { opacity: 0.3; margin-left: 10px; font-size: 13px; flex-shrink: 0; } .hist-item:hover .hist-del { opacity: 0.7; } /* ── RODAPÉ ───────────────────────────────────────────────── */ .page-footer { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--border-soft); } .page-footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .page-footer p { font-family: var(--font-mono); font-size: 11px; color: var(--faint); } .page-footer a { color: var(--faint); } .rodape-legal { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; } .rodape-legal a { font-family: var(--font-mono); font-size: 11px; color: var(--faint); text-decoration: none; } .rodape-legal a:hover { color: var(--muted); text-decoration: underline; } /* ── ANIMAÇÕES ────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } /* ── RESPONSIVO ───────────────────────────────────────────── */ @media (max-width: 800px) { .section-page { padding: 28px 20px 60px; } .form-grid { grid-template-columns: 1fr; } .summary-grid { grid-template-columns: 1fr; } .chart-area { grid-template-columns: 1fr; } .controls-grid { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr 1fr; } .mode-tabs { width: 100%; } .mode-tab { flex: 1; text-align: center; } }