:root { --primary: #1d4ed8; --primary-light: #3b82f6; --primary-hover: #1e40af; --emerald: #059669; --green: #10b981; --amber: #d97706; --bg-slate: #f8fafc; --border-color: #e2e8f0; --text-dark: #0f172a; --text-muted: #64748b; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { background-color: var(--bg-slate); color: var(--text-dark); } .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; vertical-align: middle; } /* Tooltip acessível: o balão real é criado no pelo TooltipController. */ .info-tooltip-trigger{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;cursor:help;border-radius:50%;outline:none;vertical-align:middle} .info-tooltip-trigger .material-symbols-outlined{font-size:1rem;color:var(--text-muted);transition:color .18s ease,transform .18s ease} .info-tooltip-trigger:hover .material-symbols-outlined,.info-tooltip-trigger:focus .material-symbols-outlined{color:var(--primary);transform:scale(1.08)} .info-tooltip-trigger:focus-visible{box-shadow:0 0 0 3px rgba(29,78,216,.16)} .app-tooltip{position:fixed;z-index:2147483647;max-width:min(330px,calc(100vw - 24px));padding:.7rem .85rem;border-radius:9px;background:#0f172a;color:#fff;font-size:.76rem;line-height:1.45;font-weight:500;box-shadow:0 14px 35px rgba(15,23,42,.28);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .14s ease,transform .14s ease,visibility .14s} .app-tooltip.is-visible{opacity:1;visibility:visible;transform:translateY(0)} /* AppBar Fixa */ .appbar-fixed { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); padding: 0.65rem 2rem; display: flex; align-items: center; justify-content: space-between; } .appbar-brand { display: flex; align-items: center; gap: 0.75rem; } .appbar-icon { font-size: 1.8rem; color: var(--primary); } .appbar-title { font-size: 1.15rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; } .appbar-subtitle { font-size: 0.75rem; color: var(--text-muted); } .appbar-actions { display: flex; align-items: center; gap: 0.75rem; } .cdi-badge-container { display: flex; align-items: center; } .btn-icon-action { background: #ffffff; border: 1px solid var(--border-color); color: var(--text-dark); width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .btn-icon-action:hover { background: #f1f5f9; border-color: #cbd5e1; color: var(--primary); transform: translateY(-1px); } .btn-icon-action .material-symbols-outlined { font-size: 1.3rem; } /* Layout Wide */ .main-wrapper { padding: 1.5rem 2rem; } .wide-container { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; align-items: start; } /* Sidebar */ .sidebar { background: #ffffff; border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); } .sidebar-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; color: var(--text-dark); } .sidebar-header h2, .sidebar-header h3 { font-size: 0.95rem; font-weight: 600; } .sidebar-header .material-symbols-outlined { color: var(--primary); font-size: 1.2rem; } .separator { border: none; border-top: 1px solid var(--border-color); margin: 1.1rem 0; } .input-group { margin-bottom: 0.9rem; } .input-group label { display: flex; align-items: center; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; } .input-group input[type="text"], .input-group input[type="number"], .input-group input[type="date"], .input-group select { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.88rem; outline: none; background: #ffffff; } .money-input { text-align: right; font-weight: 600; color: var(--text-dark); font-variant-numeric: tabular-nums; } .input-group input:focus, .input-group select:focus { border-color: var(--primary); } .hint-text { display: block; font-size: 0.75rem; color: var(--primary); margin-top: 0.3rem; font-weight: 500; } .radio-pill-group { display: flex; gap: 0.5rem; } .radio-pill { flex: 1; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; } .radio-pill input { display: none; } .radio-pill span { display: block; padding: 0.45rem 0.5rem; border-radius: 6px; border: 1px solid var(--border-color); background: #f8fafc; transition: all 0.2s; } .radio-pill input:checked + span { background: var(--primary); color: #ffffff; border-color: var(--primary); } /* Toggle Switch */ .toggle-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; } .toggle-label { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); } .switch { position: relative; display: inline-block; width: 42px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: 0.3s; border-radius: 22px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } input:checked + .slider { background-color: var(--primary); } input:checked + .slider:before { transform: translateX(20px); } /* Área Principal */ .main-content { display: flex; flex-direction: column; gap: 1.2rem; } /* Cards Grid */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .metric-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; padding: 1.15rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); border-left: 4px solid var(--primary); } .border-blue { border-left-color: var(--primary); } .border-emerald { border-left-color: var(--emerald); } .border-green { border-left-color: var(--green); } .border-amber { border-left-color: var(--amber); } .metric-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .metric-title { display: flex; align-items: center; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; } .metric-icon { font-size: 1.2rem; color: var(--text-muted); } .metric-value { font-size: 1.35rem; font-weight: 700; color: var(--text-dark); } .metric-sub { font-size: 0.78rem; color: var(--emerald); margin-top: 4px; font-weight: 500; } /* 4 Metas de Patrimônio */ .milestone-container-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; } .milestone-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; padding: 0.9rem 1rem; display: flex; flex-direction: column; justify-content: space-between; } .milestone-info { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; } .milestone-icon { font-size: 1.6rem; padding: 0.35rem; border-radius: 8px; } .icon-250k { background: #fef3c7; color: #b45309; } .icon-500k { background: #eff6ff; color: #1d4ed8; } .icon-750k { background: #f3e8ff; color: #7e22ce; } .icon-1m { background: #ecfdf5; color: #059669; } .milestone-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } .milestone-target { font-size: 1rem; color: var(--text-dark); font-weight: 700; } .milestone-result { font-size: 0.78rem; font-weight: 600; color: var(--primary); border-top: 1px solid #f1f5f9; padding-top: 0.4rem; } /* Pills */ .pill { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; } .pill-blue { background-color: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } .pill-green { background-color: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } /* Expanders */ .expander { background: #ffffff; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; } .expander summary { padding: 0.9rem 1.25rem; font-weight: 600; cursor: pointer; background-color: #ffffff; font-size: 0.92rem; -webkit-user-select: none; user-select: none; display: flex; align-items: center; justify-content: space-between; } .expander summary:hover { background-color: #f8fafc; } .summary-left { display: flex; align-items: center; gap: 0.5rem; } .summary-left .material-symbols-outlined { color: var(--primary); font-size: 1.25rem; } .expander-content { padding: 1.25rem; border-top: 1px solid var(--border-color); } .chart-container { width: 100%; height: 400px; background-color: #ffffff; } .table-wrapper { max-height: 380px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; } table th, table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border-color); text-align: left; } table th { background: #f8fafc; position: sticky; top: 0; font-weight: 600; color: var(--text-muted); } .calc-box { background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; } .calc-box h4 { font-size: 0.88rem; margin-bottom: 0.6rem; color: var(--primary); } .calc-box p { font-size: 0.82rem; margin-bottom: 0.4rem; } .info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 0.75rem; font-size: 0.76rem; color: #1e3a8a; margin-top: 0.5rem; } .info-box p { margin-bottom: 0.3rem; } .mini-expander { margin-bottom: 1rem; font-size: 0.8rem; color: var(--text-muted); } .mini-expander summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; } .mini-icon { font-size: 1rem; } .mini-expander-content { padding-top: 0.65rem; } @media (max-width: 1150px) { .wide-container { grid-template-columns: 1fr; } .milestone-container-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 650px) { .milestone-container-4 { grid-template-columns: 1fr; } } /* ===== Camada de robustez e didática ===== */ :root{--primary:#1c72a2;--primary-light:#2d8bbb;--primary-hover:#145b82;--surface:#fff;--surface-soft:#f7fafc;--border-strong:#cbd5e1;--danger:#b91c1c;--danger-bg:#fef2f2;--shadow-sm:0 2px 10px rgba(15,23,42,.05);--shadow-md:0 12px 32px rgba(15,23,42,.08)} html{scroll-behavior:smooth}body{min-height:100vh;background:linear-gradient(180deg,#f8fbfd 0,#f8fafc 240px);line-height:1.5}.main-wrapper{max-width:1900px;margin:0 auto}.sidebar{position:sticky;top:78px;max-height:calc(100vh - 94px);overflow:auto;scrollbar-width:thin}.sidebar,.metric-card,.milestone-card,.expander,.learning-hero,.quick-guide,.insight-card{box-shadow:var(--shadow-sm)} .learning-hero{background:linear-gradient(135deg,#fff 0,#f0f8fc 100%);border:1px solid #dbeaf2;border-radius:14px;padding:1.25rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem}.hero-copy{max-width:820px}.eyebrow{display:inline-flex;align-items:center;gap:.4rem;color:var(--primary);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.eyebrow .material-symbols-outlined{font-size:1.05rem}.learning-hero h2{font-size:clamp(1.05rem,1.5vw,1.35rem);margin:.35rem 0;color:var(--text-dark)}.learning-hero p{font-size:.85rem;color:var(--text-muted);max-width:760px}.hero-status{min-width:210px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}.hero-status small{font-size:.7rem;color:var(--text-muted);max-width:220px}.status-pill{display:inline-flex;align-items:center;padding:.35rem .7rem;border-radius:999px;font-size:.72rem;font-weight:800}.status-ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.status-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca} .validation-banner{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid #fecaca;border-radius:10px;background:var(--danger-bg);color:var(--danger);font-size:.8rem}.validation-banner[hidden]{display:none}.validation-banner .material-symbols-outlined{font-size:1.2rem}.validation-banner div{display:flex;flex-direction:column;gap:.1rem} .quick-guide{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border-color);border-radius:12px;background:#fff;overflow:hidden}.quick-guide article{display:flex;gap:.65rem;padding:.8rem .9rem;border-right:1px solid var(--border-color);align-items:flex-start}.quick-guide article:last-child{border-right:0}.step-number{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;background:#eaf4f9;color:var(--primary);font-size:.72rem;font-weight:800}.quick-guide strong{display:block;font-size:.76rem;color:var(--text-dark)}.quick-guide small{display:block;font-size:.68rem;color:var(--text-muted);margin-top:.12rem;line-height:1.35} .insights-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.insight-card{display:flex;align-items:center;gap:.65rem;padding:.75rem .85rem;background:#fff;border:1px solid var(--border-color);border-radius:10px}.insight-card>.material-symbols-outlined{font-size:1.35rem;color:var(--primary);background:#eef7fb;border-radius:8px;padding:.35rem}.insight-card small{display:block;color:var(--text-muted);font-size:.66rem;line-height:1.25}.insight-card strong{font-size:.9rem;color:var(--text-dark);font-variant-numeric:tabular-nums} .input-group input,.input-group select{transition:border-color .18s,box-shadow .18s,background .18s}.input-group input:hover,.input-group select:hover{border-color:var(--border-strong)}.input-group input:focus,.input-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(28,114,162,.11)}.toggle-container{gap:.75rem}.toggle-label{line-height:1.25}.btn-icon-action:focus-visible,.radio-pill input:focus-visible+span{outline:none;box-shadow:0 0 0 3px rgba(28,114,162,.18)}.btn-icon-action:disabled{opacity:.55;cursor:wait;transform:none}.btn-icon-action.is-loading .material-symbols-outlined{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} .metric-card,.milestone-card,.insight-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.metric-card:hover,.milestone-card:hover,.insight-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cbd5e1}.metric-value{font-variant-numeric:tabular-nums}.metric-sub{line-height:1.25}.milestone-result{min-height:2.1em;display:flex;align-items:flex-end} .expander{overflow:visible}.expander summary{border-radius:10px}.expander[open] summary{border-radius:10px 10px 0 0;background:#f8fbfd}.expander-content{overflow:visible}.table-wrapper{overflow:auto;max-height:440px;position:relative}.table-wrapper table{min-width:760px}.table-wrapper thead th{z-index:3;box-shadow:0 1px 0 var(--border-color)}table tbody tr:nth-child(even){background:#fbfdfe}table tbody tr:hover{background:#f1f7fa}.positive{color:#047857!important}.negative{color:#b91c1c!important}.accent{color:var(--primary)!important}.pills-bar{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.75rem}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.calc-box code{white-space:normal;word-break:break-word;background:#eef2f7;padding:.08rem .28rem;border-radius:4px} [hidden]{display:none!important} @media(max-width:1350px){.quick-guide,.insights-grid{grid-template-columns:repeat(2,1fr)}.quick-guide article:nth-child(2){border-right:0}.quick-guide article:nth-child(-n+2){border-bottom:1px solid var(--border-color)}} @media(max-width:1150px){.sidebar{position:static;max-height:none}.learning-hero{align-items:flex-start}.hero-status{text-align:left;align-items:flex-start}.stats-grid{grid-template-columns:1fr}} @media(max-width:700px){.appbar-fixed{padding:.6rem .8rem}.appbar-subtitle{display:none}.main-wrapper{padding:1rem}.learning-hero{flex-direction:column}.quick-guide,.insights-grid{grid-template-columns:1fr}.quick-guide article{border-right:0;border-bottom:1px solid var(--border-color)}.quick-guide article:last-child{border-bottom:0}.cards-grid{grid-template-columns:1fr}.radio-pill-group{flex-direction:column}.app-tooltip{font-size:.74rem}.chart-container{height:320px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}} /* ===== v3 · Tooltip flutuante, tabelas detalhadas e memória completa ===== */ .info-tooltip-trigger{cursor:pointer;min-width:18px;min-height:18px;position:relative} .info-tooltip-trigger::after{content:none!important;display:none!important} .app-tooltip{isolation:isolate;contain:layout style;will-change:left,top,opacity;min-width:120px} .app-tooltip__content{position:relative;z-index:2} .app-tooltip__arrow{position:absolute;left:var(--tooltip-arrow-x,50%);width:10px;height:10px;background:#0f172a;transform:translateX(-50%) rotate(45deg);z-index:1} .app-tooltip[data-placement="top"] .app-tooltip__arrow{bottom:-5px} .app-tooltip[data-placement="bottom"] .app-tooltip__arrow{top:-5px} .section-intro{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.85rem} .section-intro p{flex-basis:100%;font-size:.78rem;color:var(--text-muted);line-height:1.5;margin-top:.15rem} .table-wrapper-wide{max-height:520px} .table-wrapper-wide .table-detailed{min-width:1900px} .table-detailed th{font-size:.72rem;vertical-align:middle} .table-detailed td{font-size:.78rem;vertical-align:middle} .table-detailed td.numeric{text-align:right;font-variant-numeric:tabular-nums} .table-detailed td.capital{color:var(--primary);font-weight:600} .table-detailed td.tax{color:#b45309;font-weight:600} .phase-pill{display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:3px 8px;border-radius:999px;font-size:.68rem;font-weight:700;border:1px solid transparent} .phase-1{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe} .phase-2{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe} .phase-off{background:#f8fafc;color:#64748b;border-color:#e2e8f0} .memory-intro{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1rem;margin-bottom:1rem;border:1px solid #cfe4ee;border-radius:10px;background:#f4fafc} .memory-intro>.material-symbols-outlined{color:var(--primary);font-size:1.35rem;margin-top:.05rem} .memory-intro strong{display:block;font-size:.84rem;color:var(--text-dark)} .memory-intro p{font-size:.75rem;color:var(--text-muted);margin-top:.15rem;line-height:1.45} .memory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} .memory-card{padding:0;overflow:hidden;background:#fff} .memory-card h4{display:flex;align-items:center;gap:.4rem;padding:.8rem .9rem;margin:0;background:#f8fbfd;border-bottom:1px solid var(--border-color);font-size:.82rem} .memory-card h4 .material-symbols-outlined{font-size:1.05rem} .memory-card-wide{grid-column:1/-1} .memory-warning{border-color:#fed7aa;background:#fffdfa} .memory-warning h4{background:#fff7ed;color:#b45309;border-bottom-color:#fed7aa} .memory-list{display:flex;flex-direction:column} .memory-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .memory-row{padding:.7rem .85rem;border-bottom:1px solid #edf2f7;min-width:0} .memory-row:last-child{border-bottom:0} .memory-list-grid .memory-row{border-right:1px solid #edf2f7} .memory-list-grid .memory-row:nth-child(even){border-right:0} .memory-row__label{font-size:.68rem;text-transform:uppercase;letter-spacing:.045em;font-weight:800;color:var(--text-muted)} .memory-row__value{margin-top:.15rem;font-size:.88rem;font-weight:750;color:var(--text-dark);font-variant-numeric:tabular-nums;word-break:break-word} .memory-row code{display:block;margin-top:.28rem;padding:.28rem .42rem;border-radius:5px;background:#f1f5f9;color:#334155;font-size:.68rem;line-height:1.4;white-space:normal;word-break:break-word} .memory-row small{display:block;margin-top:.28rem;color:var(--text-muted);font-size:.68rem;line-height:1.4} @media (max-width:1050px){.memory-grid{grid-template-columns:1fr}.memory-card-wide{grid-column:auto}.memory-list-grid{grid-template-columns:1fr}.memory-list-grid .memory-row{border-right:0}} @media (max-width:650px){.app-tooltip{font-size:.73rem;max-width:calc(100vw - 20px)!important}.table-wrapper-wide{max-height:450px}.memory-row{padding:.65rem .7rem}} /* ========================================================= V5 — Layout amplo, modal de parâmetros e gráficos profissionais ========================================================= */ .wide-container{display:block;min-width:0} .main-content{width:100%;min-width:0} .btn-parameters{color:var(--primary);background:#eff6ff;border-color:#bfdbfe} .btn-parameters:hover{background:#dbeafe;border-color:#93c5fd} .parameters-modal{width:min(900px,calc(100vw - 32px));max-height:min(88vh,820px);padding:0;border:0;border-radius:16px;background:#fff;color:var(--text-dark);box-shadow:0 28px 80px rgba(15,23,42,.28);overflow:hidden} .parameters-modal::backdrop{background:rgba(15,23,42,.48);backdrop-filter:blur(3px)} .parameters-modal[open]{animation:modalIn .18s ease-out} @keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}} .parameters-modal-shell{display:flex;flex-direction:column;max-height:min(88vh,820px)} .parameters-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,#fff 0,#f0f7ff 100%)} .parameters-modal-title-wrap{display:flex;gap:.85rem;min-width:0}.parameters-modal-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#dbeafe;color:#1d4ed8;flex:0 0 auto} .parameters-modal-header h2{font-size:1.05rem;margin:.08rem 0 .18rem}.parameters-modal-header p{font-size:.78rem;color:var(--text-muted)}.modal-eyebrow{font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)} .modal-close-icon{flex:0 0 auto}.parameters-modal-content{overflow:auto;padding:1.15rem 1.25rem;background:#f8fafc}.parameters-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;align-items:start;background:#fff;border:1px solid var(--border-color);border-radius:13px;padding:1.15rem 1.2rem}.parameters-panel>.separator{grid-column:1/-1}.parameters-panel>.sidebar-header{grid-column:1/-1;margin-top:.1rem}.parameters-panel>.mini-expander{grid-column:1/-1}.parameters-panel>.toggle-container{min-height:44px}.parameters-panel>#group-controles-aporte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}.parameters-panel>#group-controles-aporte>.toggle-container,.parameters-panel>#group-controles-aporte>#wrapper-transicao-aporte{grid-column:1/-1}.parameters-panel>#wrapper-modo-datas,.parameters-panel>#wrapper-modo-prazo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}.parameters-panel>#wrapper-modo-datas[hidden],.parameters-panel>#wrapper-modo-prazo[hidden],.parameters-panel>#group-controles-aporte[hidden],.parameters-panel>#wrapper-transicao-aporte[hidden]{display:none!important} .parameters-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.25rem;border-top:1px solid var(--border-color);background:#fff}.modal-auto-update{display:flex;align-items:center;gap:.55rem;min-width:0}.modal-auto-update>.material-symbols-outlined{color:#059669}.modal-auto-update strong,.modal-auto-update small{display:block}.modal-auto-update strong{font-size:.75rem}.modal-auto-update small{font-size:.66rem;color:var(--text-muted)}.modal-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}.btn-primary,.btn-secondary{min-height:40px;border-radius:8px;padding:.55rem .85rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:.78rem;font-weight:700;cursor:pointer}.btn-primary{border:1px solid var(--primary);background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{border:1px solid var(--border-color);background:#fff;color:var(--text-dark)}.btn-secondary:hover{background:#f8fafc}.btn-primary .material-symbols-outlined,.btn-secondary .material-symbols-outlined{font-size:1.05rem} .summary-expander{border-color:#dbe5ee}.summary-expander>summary{background:linear-gradient(90deg,#fff,#f8fbfd)}.summary-expander-content{display:flex;flex-direction:column;gap:1rem}.summary-meta{font-size:.68rem;color:var(--text-muted);font-weight:600}.summary-expander:not([open]) .summary-meta{opacity:.8} .chart-expander{border-color:#cbdbe8}.chart-dashboard{background:#f8fafc;padding:1rem}.chart-dashboard-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:.35rem .2rem 1rem}.chart-dashboard-header h3{font-size:1.02rem;margin:.25rem 0;color:#0f172a}.chart-dashboard-header p{max-width:820px;font-size:.78rem;color:#64748b}.chart-help{display:flex;align-items:center;gap:.45rem;max-width:245px;padding:.6rem .7rem;border:1px solid #dbe5ee;border-radius:9px;background:#fff;color:#475569;font-size:.68rem;line-height:1.35}.chart-help .material-symbols-outlined{font-size:1.1rem;color:#1d4ed8} .chart-kpi-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:.85rem}.chart-kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--border-color);border-radius:10px;padding:.72rem .8rem}.chart-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}.chart-kpi span,.chart-kpi small{display:block}.chart-kpi span{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b}.chart-kpi strong{display:block;margin:.12rem 0;font-size:1rem;font-variant-numeric:tabular-nums;color:#0f172a}.chart-kpi small{font-size:.64rem;color:#94a3b8}.kpi-gross::before{background:#1d4ed8}.kpi-net::before{background:#7c3aed}.kpi-capital::before{background:#475569}.kpi-interest::before{background:#ea580c} .chart-panel{background:#fff;border:1px solid #dce4ec;border-radius:12px;padding:.9rem 1rem}.chart-panel+.chart-panel{margin-top:.85rem}.chart-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.25rem}.chart-panel-heading h3{font-size:.88rem;color:#0f172a}.chart-section-label{display:block;margin-bottom:.08rem;font-size:.61rem;font-weight:800;letter-spacing:.08em;color:#64748b}.chart-tax-band-label,.chart-secondary-caption{align-self:center;font-size:.65rem;font-weight:700;color:#64748b;white-space:nowrap}.chart-tax-band-label{display:flex;align-items:center;gap:.35rem}.chart-tax-band-label i{width:20px;height:8px;border-radius:4px;background:rgba(124,58,237,.13);border:1px solid rgba(124,58,237,.28)} .chart-container{background:transparent}.chart-container-main{height:440px}.chart-container-secondary{height:245px}.chart-panel canvas{max-width:100%} @media(max-width:900px){.parameters-panel{grid-template-columns:1fr}.parameters-panel>*{grid-column:1!important}.parameters-panel>#group-controles-aporte,.parameters-panel>#wrapper-modo-datas,.parameters-panel>#wrapper-modo-prazo{grid-template-columns:1fr}.chart-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-dashboard-header{flex-direction:column}.chart-help{max-width:none}.chart-panel-heading{flex-direction:column}.chart-tax-band-label,.chart-secondary-caption{align-self:flex-start}.summary-meta{display:none}} @media(max-width:650px){.main-wrapper{padding:.8rem}.parameters-modal{width:calc(100vw - 16px);max-height:92vh}.parameters-modal-shell{max-height:92vh}.parameters-modal-header,.parameters-modal-content,.parameters-modal-footer{padding:.85rem}.parameters-modal-footer{align-items:stretch;flex-direction:column}.modal-actions{width:100%}.modal-actions>*{flex:1}.chart-kpi-strip{grid-template-columns:1fr}.chart-dashboard{padding:.65rem}.chart-panel{padding:.7rem}.chart-container-main{height:360px}.chart-container-secondary{height:220px}.cdi-badge-container{display:none}} /* ========================================================= v6 — Interface clean: AppBar, modal e expanders por cor ========================================================= */ /* AppBar mais informativa, substitui o antigo card introdutório */ .appbar-fixed{ min-height:66px; padding:.62rem 1.35rem; gap:1.25rem; box-shadow:0 1px 0 rgba(15,23,42,.03); } .appbar-brand{min-width:0;gap:.7rem} .appbar-brand-copy{min-width:0} .appbar-title-row{display:flex;align-items:center;gap:.6rem;min-width:0;flex-wrap:wrap} .appbar-title{font-size:1.08rem;letter-spacing:-.015em} .appbar-subtitle{display:block;margin-top:.12rem;font-size:.71rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:690px} .appbar-mode-badge{display:inline-flex;align-items:center;min-height:20px;padding:.16rem .46rem;border-radius:999px;background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;font-size:.61rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase} .appbar-actions{gap:.48rem;flex:0 0 auto} .appbar-status{font-size:.66rem;padding:.3rem .6rem;white-space:nowrap} .cdi-badge-container{padding:0 .15rem} .btn-parameters{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8} .btn-parameters:hover{background:#dbeafe;border-color:#93c5fd} /* Topo principal: somente conteúdo de trabalho */ .main-wrapper{padding-top:1rem} .main-content{gap:1rem} .validation-banner{margin:0} /* Resumo: o guia e as metas agora vivem dentro do expander */ .summary-expander-content{gap:.85rem} .summary-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #e6edf5;border-radius:10px;background:#fbfdff;overflow:hidden} .summary-guide article{display:flex;align-items:center;gap:.65rem;padding:.68rem .8rem;border-right:1px solid #e6edf5;min-width:0} .summary-guide article:last-child{border-right:0} .summary-guide>article>.material-symbols-outlined{font-size:1.15rem;color:#1d4ed8;flex:0 0 auto} .summary-guide strong{display:block;font-size:.72rem;color:#0f172a} .summary-guide small{display:block;margin-top:.08rem;font-size:.65rem;color:#64748b;line-height:1.35} .summary-expander .milestone-container-4{margin-top:.05rem} /* Modal — composição por seções, sem aspecto de formulário amontoado */ .parameters-modal{ width:min(1040px,calc(100vw - 36px)); max-height:min(90vh,860px); border-radius:18px; box-shadow:0 30px 90px rgba(15,23,42,.3); } .parameters-modal-shell{max-height:min(90vh,860px)} .parameters-modal-header{ align-items:center; padding:1rem 1.15rem; background:#fff; border-bottom:1px solid #e7edf4; } .parameters-modal-title-wrap{align-items:center;gap:.75rem} .parameters-modal-icon{width:38px;height:38px;border-radius:10px;background:#eff6ff;color:#1d4ed8} .parameters-modal-header h2{font-size:1.02rem;margin:.04rem 0 .08rem;letter-spacing:-.01em} .parameters-modal-header p{font-size:.72rem} .modal-eyebrow{font-size:.58rem;color:#64748b;letter-spacing:.12em} .modal-header-actions{display:flex;align-items:center;gap:.65rem;flex:0 0 auto} .modal-live-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .55rem;border:1px solid #bbf7d0;border-radius:999px;background:#f0fdf4;color:#047857;font-size:.64rem;font-weight:750;white-space:nowrap} .modal-live-badge .material-symbols-outlined{font-size:.9rem} .modal-close-icon{width:36px;height:36px;border-radius:10px} .parameters-modal-content{padding:1rem;background:#f6f8fb} .parameters-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;align-items:start} .parameter-section{background:#fff;border:1px solid #e3e9f0;border-radius:13px;overflow:hidden;min-width:0} .parameter-section-rate{grid-column:1/-1} .parameter-section-header{display:flex;align-items:center;gap:.65rem;padding:.72rem .82rem;border-bottom:1px solid #edf1f5;background:#fbfcfe} .parameter-section-icon{width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#eef4f8;color:#1c72a2} .parameter-section-icon .material-symbols-outlined{font-size:1rem} .parameter-section-header h3{font-size:.79rem;line-height:1.2;color:#0f172a} .parameter-section-header p{margin-top:.08rem;font-size:.63rem;color:#64748b;line-height:1.3} .parameter-section-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem .75rem;padding:.8rem} .field-wide{grid-column:1/-1} .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem .75rem} .field-grid[hidden],#group-controles-aporte[hidden],#wrapper-transicao-aporte[hidden]{display:none!important} .parameters-modal .input-group{margin:0;min-width:0} .parameters-modal .input-group label{margin-bottom:.28rem;font-size:.7rem;color:#475569;font-weight:700} .parameters-modal .input-group input[type="text"], .parameters-modal .input-group input[type="number"], .parameters-modal .input-group input[type="date"], .parameters-modal .input-group select{ min-height:40px; padding:.48rem .68rem; border-radius:8px; border-color:#dce3ea; background:#fff; font-size:.82rem; box-shadow:inset 0 1px 1px rgba(15,23,42,.015); } .parameters-modal .input-group input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.1)} .parameters-modal .hint-text{font-size:.63rem;margin-top:.2rem;color:#1c72a2} .field-note{display:block;margin-top:.2rem;font-size:.61rem;color:#64748b} .compact-field{margin-top:.02rem} .parameters-modal .radio-pill-group{gap:.42rem} .parameters-modal .radio-pill span{display:flex;align-items:center;justify-content:center;gap:.32rem;min-height:38px;padding:.42rem .55rem;border-radius:8px;background:#fff;font-size:.72rem} .parameters-modal .radio-pill span .material-symbols-outlined{font-size:.95rem} .parameters-modal .radio-pill input:checked+span{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd;box-shadow:inset 0 0 0 1px #bfdbfe} .radio-inline-clean{display:flex;align-items:center;gap:.45rem;min-height:40px} .radio-inline-clean label{display:inline-flex!important;align-items:center;gap:.32rem;margin:0!important;padding:.45rem .62rem;border:1px solid #dce3ea;border-radius:8px;background:#fff;color:#475569!important;font-size:.7rem!important;cursor:pointer} .toggle-row-clean{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .7rem;border:1px solid #e5ebf1;border-radius:9px;background:#fbfcfd} .toggle-row-clean strong,.toggle-row-clean small{display:block} .toggle-row-clean strong{font-size:.72rem;color:#0f172a} .toggle-row-clean small{margin-top:.08rem;font-size:.62rem;color:#64748b;line-height:1.3} .contribution-settings{display:grid;grid-template-columns:1fr;gap:.65rem} .transition-toggle{margin-top:.02rem} #group-controles-aporte>.input-group{max-width:none} .rate-body{grid-template-columns:minmax(150px,.7fr) minmax(150px,.7fr) minmax(260px,1.6fr);align-items:end} .rate-explainer{display:flex;align-items:flex-start;gap:.5rem;min-height:40px;padding:.56rem .65rem;border:1px solid #dbeafe;border-radius:9px;background:#f8fbff} .rate-explainer>.material-symbols-outlined{font-size:1rem;color:#1d4ed8;margin-top:.05rem} .rate-explainer strong{display:block;font-size:.68rem;color:#1e3a5f} .rate-explainer p{margin-top:.06rem;font-size:.61rem;color:#64748b;line-height:1.35} .parameters-modal-footer{padding:.72rem 1rem;background:#fff} .modal-footer-note{display:inline-flex;align-items:center;gap:.35rem;color:#64748b;font-size:.64rem;font-weight:650} .modal-footer-note .material-symbols-outlined{font-size:.95rem;color:#059669} .modal-actions{gap:.5rem} .btn-primary,.btn-secondary{min-height:38px;border-radius:8px;padding:.5rem .78rem;font-size:.72rem} /* Expander com identidade visual própria */ .expander{ --expander-accent:#64748b; --expander-border:#dbe3eb; --expander-tint:#f8fafc; border:1px solid var(--expander-border); border-left:4px solid var(--expander-accent); border-radius:11px; background:#fff; overflow:visible; box-shadow:0 1px 3px rgba(15,23,42,.025); } .expander>summary{min-height:48px;padding:.78rem 1rem;background:#fff;border-radius:7px 10px 10px 7px;transition:background .16s ease,color .16s ease} .expander>summary:hover{background:var(--expander-tint)} .expander[open]>summary{background:var(--expander-tint);border-radius:7px 10px 0 0;border-bottom:1px solid var(--expander-border)} .expander .summary-left>.material-symbols-outlined{color:var(--expander-accent)} .expander .summary-left{font-size:.88rem} .expander .summary-meta{font-size:.64rem;color:#64748b} .expander-blue{--expander-accent:#2563eb;--expander-border:#bfdbfe;--expander-tint:#f5f9ff} .expander-purple{--expander-accent:#7c3aed;--expander-border:#ddd6fe;--expander-tint:#faf8ff} .expander-green{--expander-accent:#059669;--expander-border:#a7f3d0;--expander-tint:#f3fcf8} .expander-cyan{--expander-accent:#0891b2;--expander-border:#bae6fd;--expander-tint:#f4fbfd} .expander-amber{--expander-accent:#d97706;--expander-border:#fde68a;--expander-tint:#fffaf0} .expander-violet{--expander-accent:#8b5cf6;--expander-border:#ddd6fe;--expander-tint:#fbf9ff} /* Cards um pouco mais leves dentro do resumo */ .metric-card,.milestone-card,.insight-card{box-shadow:none} .metric-card{border-color:#e6ebf1;border-radius:9px;padding:1rem} .insight-card{border-color:#e8edf2;background:#fbfcfd} .milestone-card{border-color:#e8edf2;border-radius:9px} @media(max-width:1180px){ .appbar-subtitle{max-width:430px} .appbar-status{display:none} .parameters-layout{grid-template-columns:1fr} .parameter-section-rate{grid-column:auto} .rate-body{grid-template-columns:repeat(2,minmax(0,1fr))} .rate-explainer{grid-column:1/-1} } @media(max-width:820px){ .appbar-mode-badge{display:none} .appbar-subtitle{max-width:320px} .cdi-badge-container{display:none} .summary-guide{grid-template-columns:1fr} .summary-guide article{border-right:0;border-bottom:1px solid #e6edf5} .summary-guide article:last-child{border-bottom:0} } @media(max-width:650px){ .appbar-fixed{padding:.55rem .7rem;gap:.5rem} .appbar-icon{font-size:1.55rem} .appbar-title{font-size:.95rem} .appbar-subtitle{display:none} .appbar-actions{gap:.32rem} .btn-icon-action{width:36px;height:36px} .parameters-modal{width:calc(100vw - 14px);max-height:92vh;border-radius:14px} .parameters-modal-header{padding:.8rem} .parameters-modal-header p,.modal-live-badge{display:none} .parameters-modal-content{padding:.65rem} .parameter-section-body,.field-grid,.rate-body{grid-template-columns:1fr} .rate-explainer{grid-column:auto} .parameters-modal-footer{align-items:stretch;flex-direction:column} .modal-footer-note{display:none} .modal-actions{width:100%} .modal-actions>*{flex:1} .expander>summary{padding:.7rem .78rem} .summary-meta{display:none} } /* ========================================================= v7 — acabamento final de AppBar, modal e tooltips em dialog ========================================================= */ /* O shell mantém o recorte visual do modal, enquanto o dialog permite que o tooltip (filho da top layer) ultrapasse os limites do conteúdo. */ .parameters-modal{overflow:visible} .parameters-modal-shell{overflow:hidden;border-radius:inherit;background:#fff} /* Capital e período: proporções deliberadas e hierarquia mais clara */ .capital-period-body{display:block;padding:.82rem} .capital-period-primary{ display:grid; grid-template-columns:minmax(190px,.72fr) minmax(250px,1.28fr); gap:.8rem; align-items:start; padding-bottom:.72rem; border-bottom:1px solid #edf1f5; } .investment-field{max-width:250px} .input-leading-icon{position:relative;display:flex;align-items:center} .input-leading-icon>.material-symbols-outlined{ position:absolute; left:.66rem; z-index:1; font-size:1rem; color:#64748b; pointer-events:none; } .parameters-modal .input-leading-icon input{padding-left:2.15rem!important} .period-choice{min-width:0} .field-label{display:block;margin-bottom:.28rem;font-size:.7rem;color:#475569;font-weight:700} .period-mode-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.42rem} .parameters-modal .period-mode-pills .radio-pill span{gap:.38rem;min-height:40px} .parameters-modal .period-mode-pills .material-symbols-outlined{font-size:1rem} .period-detail-panel{ display:grid; grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); gap:.5rem; align-items:start; margin-top:.72rem; padding:.68rem; border:1px solid #e5ebf1; border-radius:10px; background:#fbfcfd; } .period-detail-panel[hidden]{display:none!important} .period-arrow{align-self:center;justify-self:center;margin-top:1.18rem;font-size:1rem;color:#94a3b8} .period-term-panel{grid-template-columns:minmax(210px,1.35fr) minmax(120px,.65fr)} .period-amount-field{max-width:150px} /* Identificação discreta do desenvolvedor */ .developer-menu{position:relative;display:flex;align-items:center} .btn-developer{color:#475569} .btn-developer[aria-expanded="true"]{background:#f0f7ff;border-color:#bfdbfe;color:#1c72a2} .developer-popover{ position:absolute; top:calc(100% + 9px); right:0; z-index:1200; width:min(310px,calc(100vw - 24px)); display:flex; align-items:flex-start; gap:.7rem; padding:.78rem .84rem; border:1px solid #dbe4ec; border-radius:11px; background:#fff; box-shadow:0 16px 38px rgba(15,23,42,.16); } .developer-popover[hidden]{display:none} .developer-popover::before{ content:""; position:absolute; top:-6px; right:13px; width:10px; height:10px; background:#fff; border-left:1px solid #dbe4ec; border-top:1px solid #dbe4ec; transform:rotate(45deg); } .developer-popover-icon{ width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:#eef6fb; color:#1c72a2; } .developer-popover-icon .material-symbols-outlined{font-size:1.05rem} .developer-popover-copy{min-width:0;line-height:1.25} .developer-popover-copy span{display:block;font-size:.61rem;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8} .developer-popover-copy strong{display:block;margin-top:.12rem;font-size:.76rem;color:#0f172a;white-space:normal} .developer-popover-copy small{display:block;margin-top:.18rem;font-size:.65rem;color:#64748b} @media(max-width:650px){ .capital-period-primary{grid-template-columns:1fr} .investment-field{max-width:none} .period-detail-panel,.period-term-panel{grid-template-columns:1fr} .period-arrow{display:none} .period-amount-field{max-width:none} .developer-popover{position:fixed;top:64px;right:8px} } /* PWA */ .btn-install-pwa{color:#0f766e;border-color:#99f6e4;background:#f0fdfa} .btn-install-pwa:hover{color:#115e59;border-color:#5eead4;background:#ccfbf1} .btn-install-pwa:disabled{opacity:.55;cursor:wait;transform:none} @media(display-mode:standalone){.btn-install-pwa{display:none!important}}