/* Presentation shared with the approved reference; business rules live in app.js. */
:root{--ink:#182522;--paper:#f6f7f9;--muted:#65716d;--line:#e2e7e4;--lime:#c4f264}
body{background:var(--paper);font-family:Inter,Arial,sans-serif;line-height:1.5}
[hidden]{display:none!important}
.qr-brand{display:flex;align-items:center;gap:0;color:var(--ink);font-size:23px;font-weight:800;letter-spacing:-1px;text-decoration:none}
.qr-brand>span:not(.qr-mark){font-weight:400}.qr-brand b{color:#75a32a}
.qr-mark{display:inline-grid;place-items:center;width:37px;height:37px;margin-right:10px;border-radius:10px;background:var(--lime);font-size:25px}
.qr-app .app-shell{width:min(1256px,100%);padding:0 28px;background:transparent}
.qr-app .topbar{height:92px;border:0;margin:0}
.qr-app .view-nav{margin:0 0 34px;min-height:51px;gap:28px}
.qr-app .view-nav button{font-size:14px;padding:0 1px 12px;min-height:48px;border-radius:0}
.qr-app main{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:23px}
.qr-app main>*{min-width:0}
.page-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px}
.qr-app .page-heading h1{font-size:37px;font-weight:650;letter-spacing:-1.4px;line-height:1.18;margin:8px 0 9px;outline-offset:5px}
.page-heading p:last-child{font-size:14px;color:var(--muted)}
.qr-app .eyebrow{font-size:11px;font-weight:650;letter-spacing:.13em}
.qr-app .fab{position:static;transform:none;min-width:0;width:auto;border:0;border-radius:8px;background:var(--lime);padding:12px 19px;font-size:14px;box-shadow:none;white-space:nowrap}
.qr-app .demo-banner{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:#eef2eb;flex-wrap:wrap}
.demo-banner>span{font-size:10px;font-weight:700;color:#5e724b}.demo-banner p{font-size:12px;color:var(--muted);flex:1 1 300px}.demo-banner .primary-button.small{width:auto;min-height:36px;margin:0;padding:8px 16px;font-size:12px}
.qr-app .period-tabs{grid-column:1/-1;width:max-content;min-width:0;margin:0;background:#e9edea;border-radius:8px}
.qr-app .period-tab{font-size:13px;min-width:90px;border-radius:5px}
.qr-app .metrics{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
.profit-card,.metric-card{min-width:0;border-radius:13px;min-height:224px;padding:24px 26px}
.profit-card{background:var(--ink);color:white}
.metric-top{display:flex;justify-content:space-between;color:#c7d2c8;font-size:14px}.metric-top>span:last-child{color:var(--lime)}
.profit-card>strong{display:block;font-size:48px;font-weight:570;letter-spacing:-.05em;line-height:1.2;margin:17px 0 6px;overflow-wrap:anywhere}
.profit-card>p{color:#a8b6ac;font-size:12px}
.profit-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid #ffffff20;padding-top:15px;margin-top:22px;color:#b9c7bd;font-size:12px}
.metric-card{border:1px solid var(--line);background:white;display:flex;flex-direction:column}
.metric-card>span{font-size:14px;color:var(--muted);margin:3px 0 23px}
.metric-card>strong{font-size:35px;font-weight:560;letter-spacing:-.04em;line-height:1.2;overflow-wrap:anywhere}
.metric-card>p{font-size:12px;color:var(--muted);margin-top:8px}
.metric-card>small{margin-top:auto;padding-top:23px;font-size:12px;color:var(--muted)}
.metric-card .expense b{font-size:17px;color:#876348}
.qr-app .section{padding:25px 26px;border-radius:13px;background:white;margin:0;grid-column:auto}
.qr-app .section-title h2{font-size:18px;font-weight:620}.section-title .eyebrow{margin-bottom:5px}
.qr-app .chart-panel{grid-column:1;grid-row:auto}
.qr-app #platformSection{grid-column:2}
.qr-app main>.page-heading{order:0}.qr-app main>.demo-banner{order:1}.qr-app main>.period-tabs{order:2}.qr-app main>.backup-reminder{order:3}.qr-app main>.duplicate-last{order:4}.qr-app main>.metrics{order:5}.qr-app main>.chart-panel{order:6}.qr-app main>#platformSection{order:7}.qr-app main>.insights-panel{order:8}.qr-app main>#turnos{order:9}.qr-app main>.data-screen{order:10}
.qr-app main:has(.chart-panel[hidden]) #platformSection{grid-column:1}
.qr-app #turnos,.qr-app .data-screen{grid-column:1/-1}
.qr-app .chart{height:190px;background:repeating-linear-gradient(to top,transparent 0,transparent 44px,#eef1eb 44px,#eef1eb 45px);gap:18px}
.qr-app .bar{background:#dce6d5;max-width:none;border-radius:5px 5px 0 0}.qr-app .bar-wrap:last-child .bar{background:var(--lime)}.qr-app .bar.negative{background:#d77961}
.qr-app .platform-row{padding:18px 0;gap:12px}.qr-app .platform-info small{font-size:12px}
.qr-app .shift{padding:19px 0}.qr-app .shift h3{font-weight:600}.qr-app .shift p{font-size:12px}
.mini-button{min-height:32px;min-width:45px;font-size:11px}
.history-filter{max-width:240px;margin-bottom:20px;font-size:13px}
.qr-app .data-panel{padding:0;max-width:720px}.data-actions button{padding:22px 4px;border-width:0 0 1px;border-radius:0;background:white}.data-actions button b{font-size:15px;font-weight:600}.data-actions button span{font-size:13px}
.qr-footer{display:flex;justify-content:space-between;gap:20px;padding:28px 0 40px;color:var(--muted);font-size:12px}
.qr-app dialog{border-radius:17px;max-height:calc(100dvh - 28px)}.qr-app dialog form{padding:27px}
.qr-app .login-panel{padding:27px}.qr-app .login-panel form{padding:0}
.qr-app .error-text{color:var(--danger);font-size:13px;margin-top:12px}
.qr-app label{font-size:14px;font-weight:500}.qr-app input,.qr-app select{font-size:16px;background:white;border-radius:7px}
.qr-app .live-result{background:#eff5e5;border-radius:9px}.qr-app .live-result strong{font-size:29px;font-weight:600}
.qr-app .negative-text{color:#bb4834}.profit-card>.negative-text{color:#ffab9a}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #5f922f;outline-offset:4px}
@media(max-width:950px){.qr-app main{grid-template-columns:1fr}.qr-app main>.section,.qr-app main:has(.chart-panel:not([hidden])) #platformSection,.qr-app main:has(.chart-panel:not([hidden])) .chart-panel{grid-column:1;grid-row:auto}.qr-app .metrics{grid-template-columns:1.2fr 1fr 1fr}.metric-card{padding:22px 18px}.metric-card>strong{font-size:28px}.profit-card>strong{font-size:40px}}
@media(max-width:700px){.qr-app .app-shell{padding:0 18px}.qr-app .topbar{height:77px}.qr-brand{font-size:20px}.qr-app .view-nav{gap:8px;justify-content:space-between;margin-bottom:28px}.qr-app .view-nav button{font-size:12px}.qr-app .page-heading h1{font-size:30px}.qr-app .fab{position:fixed;bottom:20px;right:18px;z-index:20;min-height:48px;box-shadow:0 5px 25px #21371d30}.qr-app .metrics{grid-template-columns:1fr 1fr;gap:12px}.profit-card{grid-column:1/-1}.profit-card>strong{font-size:51px}.metric-card{min-height:195px;padding:18px}.metric-card>strong{font-size:27px}.metric-card>span{font-size:12px}.qr-app .section{padding:21px}.qr-footer{flex-direction:column;gap:6px;padding-bottom:100px}.qr-app .plan-badge{font-size:8px}.qr-app .demo-banner p{flex-basis:100%}.qr-app .demo-banner .primary-button.small{width:auto}.qr-app main{gap:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.cost-settings{border-block:1px solid #e3e8df;margin:24px 0;padding:24px 0}.cost-settings h3{margin:0 0 10px}.cost-hint{display:block;font-size:12px;font-weight:400;line-height:1.55;color:var(--muted);margin:10px 0 16px}.cost-settings .primary-button{width:auto}.cost-options>label,.cost-options>.form-grid{margin-top:16px}.qr-app input[readonly]{background:#f0f4ea;color:#526148}.cost-options [hidden]{display:none!important}.live-result .cost-hint{max-width:220px;margin:5px 0 0;font-size:10px}@media(max-width:500px){.cost-settings .form-grid{grid-template-columns:1fr}.cost-settings .primary-button{width:100%}}
@media(max-width:500px){.qr-app .topbar{height:auto;min-height:77px;flex-wrap:wrap;gap:10px;padding:16px 0}.qr-app .header-actions{margin-left:auto}.qr-app .cost-options .form-grid{grid-template-columns:1fr}}