/* Blocos ilustrativos em HTML: texto legível em qualquer densidade de tela. */
.app-showcase{padding:92px 0 76px;background:#f3f6ff;border-top:1px solid #e5ebfc}
.showcase-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:15px 90px;align-items:end;margin-bottom:40px}
.showcase-eyebrow{grid-column:1/-1;color:var(--blue);font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.showcase-heading h2{font-size:clamp(36px,4vw,52px);line-height:1.08;letter-spacing:-0.025em}
.showcase-heading h2 span{color:var(--blue)}
.showcase-heading>p{max-width:410px;font-size:17px;line-height:1.75;color:var(--text);padding-bottom:3px}
.showcase-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.showcase-tabs button{display:flex;align-items:center;gap:14px;padding:19px 20px;min-width:0;min-height:88px;text-align:left;border:1px solid #dce4f7;border-radius:14px;background:#fff;color:var(--ink);transition:background .18s,border-color .18s,box-shadow .18s}
.showcase-tabs button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 20px -12px #1747e7}
.showcase-tabs button:hover:not([aria-selected=true]){background:#fff;border-color:#a8bdf1}
.showcase-tab-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#e5ecff;color:var(--blue)}
.showcase-tabs button[aria-selected=true] .showcase-tab-icon{background:#ffffff24;color:#fff}
.showcase-tabs strong{display:block;font-size:16px;font-weight:650;line-height:1.3}
.showcase-tabs small{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:var(--muted)}
.showcase-tabs button[aria-selected=true] small{color:#dfe8ff}
.showcase-tab-arrow{width:17px;height:17px;margin-left:auto}
.showcase-panel{border:1px solid #dce4f5;border-radius:23px;background:#fff;box-shadow:0 22px 48px -35px #385084;overflow:hidden}
.showcase-panel-heading{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:33px 36px 28px}
.showcase-kicker{display:block;font-size:11px;font-weight:750;letter-spacing:.095em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.showcase-panel-heading h3{font-size:29px;line-height:1.16;letter-spacing:-.035em;font-weight:650}
.showcase-panel-heading>div>p{max-width:435px;font-size:15px;line-height:1.7;color:var(--text)}
.showcase-pro{display:inline-block;margin-bottom:7px;color:var(--blue);font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.showcase-screen{margin:0 22px;padding:22px;border-radius:15px;background:#f4f7fc;border:1px solid #e7edf6}
.showcase-screen-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}
.showcase-screen-heading>span:first-child{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:650}
.showcase-screen-heading .icon{color:var(--blue);width:19px;height:19px}
.showcase-period{font-size:11px;color:var(--muted);background:#fff;border:1px solid #e5eaf3;border-radius:6px;padding:5px 9px}
.showcase-metrics{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:14px;margin-bottom:18px}
.showcase-metric{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:19px 21px;border-radius:12px;background:#fff;border:1px solid #e2e8f2}
.showcase-metric>span{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.showcase-metric>span .icon{width:17px;height:17px;color:var(--blue)}
.showcase-metric>strong{display:block;margin-top:11px;font-size:32px;line-height:1.2;letter-spacing:-.045em;font-weight:650;font-variant-numeric:tabular-nums}
.showcase-metric>small{display:block;margin-top:8px;font-size:11px;line-height:1.45;color:var(--muted)}
.showcase-metric-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.showcase-metric-blue>span,.showcase-metric-blue>small,.showcase-metric-blue>span .icon{color:#e5edff}
.showcase-overview-grid{display:grid;grid-template-columns:1.16fr 1fr;gap:18px}
.showcase-chart-card,.showcase-due-card,.showcase-receivables{min-width:0;background:#fff;border:1px solid #e2e8f2;border-radius:12px;padding:21px}
.showcase-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.showcase-card-heading h4,.showcase-receivables h4{margin:0;font-size:15px;line-height:1.4;font-weight:650;letter-spacing:-.015em}
.showcase-card-heading p{margin-top:4px;font-size:11px;line-height:1.5;color:var(--muted)}
.showcase-card-heading>span{font-size:10px;background:#f0f4fb;border-radius:5px;padding:4px 7px;color:var(--text)}
.showcase-card-heading>.icon{width:19px;height:19px;color:#8495b0}
.showcase-chart{display:flex;align-items:stretch;justify-content:space-between;gap:15px;height:179px;margin-top:22px;padding-top:18px;border-bottom:1px solid #e8edf6;background:repeating-linear-gradient(to top,transparent,transparent 49px,#eef2f8 50px,transparent 51px)}
.showcase-chart-column{position:relative;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;flex:1;min-width:0;padding-bottom:22px}
.showcase-chart-column>i{display:block;width:min(42px,72%);height:var(--bar-height);min-height:13px;border-radius:6px 6px 0 0;background:#8db5ff;flex-shrink:1}
.showcase-chart-column:last-child>i{background:var(--blue)}
.showcase-chart-column>span{font-size:10px;white-space:nowrap;color:#586c89;margin-bottom:6px;line-height:1.2;font-variant-numeric:tabular-nums}
.showcase-chart-column>small{position:absolute;bottom:0;font-size:10px;color:var(--muted);white-space:nowrap}
.showcase-due-list{list-style:none;padding:0;margin:16px 0 0}
.showcase-due-list>li{display:flex;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid #eef1f7}
.showcase-due-list>li:last-child{border:0}
.showcase-row-icon{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:9px;background:#f0f4fb;color:var(--blue)}
.showcase-row-icon>.icon{width:17px;height:17px}
.showcase-due-list strong{display:block;font-size:11px;font-weight:600;line-height:1.45}
.showcase-due-list small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.showcase-due-list b{margin-left:auto;white-space:nowrap;font-size:12px;font-weight:650}
.showcase-due-list .incoming{color:var(--blue)}
.showcase-card-note{font-size:10px;line-height:1.5;color:var(--muted);margin-top:11px}
.showcase-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 34px}
.showcase-panel-footer>span,.showcase-panel-footer>a{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5}
.showcase-panel-footer>span{color:var(--text)}
.showcase-panel-footer>span .icon{color:var(--blue);width:16px;height:16px}
.showcase-panel-footer>a{color:var(--blue);font-weight:650;min-height:44px}
.showcase-panel-footer>a:hover{text-decoration:underline;text-underline-offset:4px}
.showcase-panel-footer>a .icon{width:16px;height:16px}
.showcase-disclaimer{text-align:center;margin-top:17px;color:var(--muted);font-size:11px}
.showcase-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#eaf0ff;color:var(--blue);font-size:12px;font-weight:700}
.showcase-finance-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.showcase-finance-metrics .showcase-metric{padding:19px 17px}
.showcase-finance-metrics .showcase-metric>strong{font-size:27px}
.showcase-status-dot{width:7px;height:7px;border-radius:50%;background:#bc5c42}
.showcase-receivables{padding:0;overflow:hidden}
.showcase-receivables-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 20px;border-bottom:1px solid #e8edf6}
.showcase-filters{display:flex;gap:5px}
.showcase-filters button{border:1px solid transparent;border-radius:6px;background:transparent;font-size:11px;padding:8px 12px;min-height:38px;color:var(--muted)}
.showcase-filters button[aria-pressed=true]{background:#eef3ff;border-color:#d8e3ff;color:var(--blue);font-weight:650}
.showcase-filters button:hover{background:#f3f6fb}
.showcase-receivable{display:grid;grid-template-columns:36px minmax(0,1fr) 100px 110px;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid #edf1f7}
.showcase-receivable .showcase-avatar{width:34px;height:34px;font-size:10px}
.showcase-customer strong{display:block;font-size:12px;font-weight:650}
.showcase-customer small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.showcase-payment-status{justify-self:start;padding:5px 9px;border-radius:6px;font-size:10px;font-weight:650;white-space:nowrap}
.showcase-payment-status.upcoming{background:#edf3ff;color:#2555b7}
.showcase-payment-status.overdue{background:#fff1eb;color:#aa492b}
.showcase-payment-status.paid{background:#edf6f2;color:#28735b}
.showcase-receivable-amount{text-align:right;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.showcase-filter-status{font-size:10px;line-height:1.5;color:var(--muted);padding:10px 20px;min-height:35px}
@media(max-width:1050px){
 .showcase-heading{gap:15px 45px}
 .showcase-tabs button{padding:16px 14px;gap:10px}
 .showcase-tabs small{font-size:11px}
 .showcase-tab-arrow{display:none}
 .showcase-panel-heading{padding:28px;gap:30px}
 .showcase-screen{margin-inline:17px;padding:17px}
 .showcase-finance-metrics .showcase-metric>strong{font-size:23px}
 .showcase-metric{padding:18px}
 .showcase-due-list>li{gap:8px}
 .showcase-due-list .showcase-row-icon{display:none}
 .showcase-due-list b{font-size:11px}
}
@media(max-width:800px){
 .app-showcase{padding:66px 0 58px}
 .showcase-heading{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
 .showcase-heading h2{font-size:42px}
 .showcase-heading>p{font-size:16px;max-width:550px}
 .showcase-tabs{gap:8px}
 .showcase-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:13px 6px;min-height:90px}
 .showcase-tabs small{display:none}
 .showcase-tabs strong{font-size:13px}
 .showcase-tab-icon{width:31px;height:31px;border-radius:8px}
 .showcase-tab-icon .icon{width:18px;height:18px}
 .showcase-panel-heading{grid-template-columns:1fr;gap:14px;padding:25px}
 .showcase-panel-heading>div>p{max-width:550px}
 .showcase-panel-heading h3{font-size:27px}
 .showcase-overview-grid{grid-template-columns:1fr}
 .showcase-due-list .showcase-row-icon{display:grid}
 .showcase-due-list strong{font-size:12px}
 .showcase-due-list small,.showcase-due-list b{font-size:11px}
 .showcase-finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .showcase-finance-metrics .showcase-metric>strong{font-size:28px}
 .showcase-panel-footer{padding:17px 25px;align-items:flex-start;flex-direction:column;gap:5px}
 .showcase-chart{height:200px}
}
@media(max-width:480px){
 .app-showcase{padding:54px 0 46px}
 .showcase-heading h2{font-size:37px}
 .showcase-heading>p{font-size:15px;line-height:1.7}
 .showcase-tabs{gap:6px;margin-bottom:16px}
 .showcase-tabs button{min-height:88px;padding:12px 3px;border-radius:11px}
 .showcase-tabs strong{font-size:11px}
 .showcase-panel{border-radius:17px}
 .showcase-panel-heading{padding:23px 20px}
 .showcase-panel-heading h3{font-size:26px}
 .showcase-panel-heading>div>p{font-size:14px}
 .showcase-kicker{font-size:10px}
 .showcase-screen{margin-inline:9px;padding:11px;border-radius:11px}
 .showcase-screen-heading{margin-bottom:13px;gap:8px;flex-wrap:wrap}
 .showcase-screen-heading>span:first-child{font-size:13px}
 .showcase-period{font-size:9px;padding:4px 6px}
 .showcase-metrics{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
 .showcase-overview .showcase-metric:first-child{grid-column:1/-1}
 .showcase-metric{padding:16px 13px;border-radius:9px}
 .showcase-metric>span{font-size:10px}
 .showcase-metric>strong{font-size:26px;margin-top:8px}
 .showcase-overview .showcase-metric:first-child>strong{font-size:36px}
 .showcase-metric>small{font-size:9px;margin-top:6px}
 .showcase-metric>span .icon{width:15px;height:15px}
 .showcase-finance-metrics .showcase-metric{padding:16px 11px}
 .showcase-finance-metrics .showcase-metric>strong{font-size:22px}
 .showcase-overview-grid{gap:12px}
 .showcase-chart-card,.showcase-due-card{padding:17px 13px}
 .showcase-card-heading h4,.showcase-receivables h4{font-size:13px}
 .showcase-card-heading p{font-size:10px}
 .showcase-chart{gap:8px;height:172px;margin-top:19px}
 .showcase-chart-column>span{font-size:8px}
 .showcase-chart-column>small{font-size:9px}
 .showcase-chart-column>i{width:28px;max-width:90%}
 .showcase-due-list strong{font-size:10px}
 .showcase-due-list small{font-size:9px}
 .showcase-due-list b{font-size:10px}
 .showcase-due-list>li{gap:7px}
 .showcase-due-list .showcase-row-icon{width:27px;height:27px}
 .showcase-panel-footer{padding:16px 20px}
 .showcase-panel-footer>span,.showcase-panel-footer>a{font-size:11px}
 .showcase-disclaimer{font-size:10px;max-width:280px;margin:14px auto 0}
 .showcase-receivables-heading{flex-direction:column;align-items:flex-start;padding:16px 12px 10px;gap:9px}
 .showcase-filters{width:100%;gap:4px}
 .showcase-filters button{flex:1;padding:7px 4px;font-size:10px;min-height:39px}
 .showcase-receivable{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:15px 12px}
 .showcase-receivable .showcase-avatar{display:none}
 .showcase-customer{grid-column:1/-1}
 .showcase-customer strong{font-size:12px}
 .showcase-receivable-amount{font-size:14px}
 .showcase-filter-status{padding:10px 12px;font-size:9px}
}