/* ==========================================================
   Mockups das telas (app e painel) com dados ilustrativos.
   Usado em ia.html, recursos.html e despesas-km.html.
   ========================================================== */
:root{
  --m-aurora:#1247e8;   /* "sua marca" nos exemplos */
  --m-brisa:#16a37a;
  --m-lumi:#f08a24;
  --m-fortex:#8b5cf6;
  --m-outras:#a3acbb;
  --m-ok:#1a9c5c;
  --m-warn:#d99a00;
  --m-bad:#e04848;
  --app-bg:#3b3b3d;
  --app-bar:#28282a;
  --app-field:#eef2f7;
  --app-orange:#f07b2a;
}

.feature-visual.mock{ padding:28px; }
@media(max-width:640px){ .feature-visual.mock{ padding:14px; } }
.mock-note{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.05em; margin-top:10px; text-align:center; }

/* ---------- Janela do painel (navegador) ---------- */
.browser{ width:100%; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 24px 48px -16px rgba(10,14,23,0.32); font-family:'Inter',sans-serif; color:#1f2633; font-size:11px; line-height:1.35; text-align:left; }
.browser .b-top{ display:flex; align-items:center; gap:6px; padding:8px 12px; background:#f1f3f7; border-bottom:1px solid #e3e7ee; }
.browser .b-top i{ width:8px; height:8px; border-radius:50%; background:#d5dae3; display:block; }
.browser .b-top i:nth-child(1){ background:#ff6159; } .browser .b-top i:nth-child(2){ background:#ffbd2e; } .browser .b-top i:nth-child(3){ background:#28c941; }
.browser .b-url{ flex:1; margin-left:8px; background:#fff; border-radius:6px; padding:3px 10px; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#7a8496; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.browser .b-body{ padding:14px; background:#f5f7fb; }
.b-title{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.b-title h5{ font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:#1f2633; }
.b-filters{ display:flex; gap:5px; flex-wrap:wrap; }
.b-filters span{ background:#fff; border:1px solid #e3e7ee; border-radius:6px; padding:3px 8px; font-size:9.5px; color:#5b6472; white-space:nowrap; }
.b-filters span.on{ background:var(--m-aurora); border-color:var(--m-aurora); color:#fff; }
.b-card{ background:#fff; border:1px solid #e6e9f0; border-radius:8px; padding:10px; }
.b-card h6{ font-size:10px; font-weight:600; color:#5b6472; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px; }
.b-grid{ display:grid; gap:8px; }
.b-grid.c2{ grid-template-columns:1fr 1fr; }
.b-grid.c3{ grid-template-columns:repeat(3,1fr); }
.b-grid.c4{ grid-template-columns:repeat(4,1fr); }
.b-grid.c-wide{ grid-template-columns:1.4fr 1fr; }
@media(max-width:520px){ .b-grid.c4{ grid-template-columns:1fr 1fr; } .b-grid.c-wide, .b-grid.c2{ grid-template-columns:1fr; } }
.b-mt{ margin-top:8px; }

.kpi{ background:#fff; border:1px solid #e6e9f0; border-radius:8px; padding:9px 10px; }
.kpi .l{ font-size:9px; color:#7a8496; text-transform:uppercase; letter-spacing:0.03em; }
.kpi .v{ font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; margin-top:2px; color:#1f2633; }
.kpi .d{ font-size:9px; margin-top:1px; color:var(--m-ok); }
.kpi .d.neg{ color:var(--m-bad); }
.kpi.blue{ background:#eaf0ff; border-color:#d6e1ff; } .kpi.blue .v{ color:var(--m-aurora); }
.kpi.green{ background:#e6f6ee; border-color:#cdeedd; } .kpi.green .v{ color:var(--m-ok); }
.kpi.amber{ background:#fff5df; border-color:#fbe6b6; } .kpi.amber .v{ color:#b07800; }
.kpi.red{ background:#fdeaea; border-color:#f8d2d2; } .kpi.red .v{ color:var(--m-bad); }

/* barras horizontais */
.hbars{ display:flex; flex-direction:column; gap:6px; }
.hbar{ display:grid; grid-template-columns:62px 1fr 30px; align-items:center; gap:6px; font-size:10px; }
.hbar .t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#3a4252; }
.hbar .track{ height:8px; background:#edf0f5; border-radius:5px; overflow:hidden; }
.hbar .fill{ display:block; height:100%; border-radius:5px; background:var(--m-aurora); }
.hbar .fill.c-brisa{ background:var(--m-brisa); } .hbar .fill.c-lumi{ background:var(--m-lumi); } .hbar .fill.c-fortex{ background:var(--m-fortex); } .hbar .fill.c-outras{ background:var(--m-outras); }
.hbar .fill.green{ background:var(--m-ok); } .hbar .fill.amber{ background:var(--m-warn); } .hbar .fill.red{ background:var(--m-bad); }
.hbar .n{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
/* barra empilhada (share por marca) */
.stack{ display:flex; height:12px; border-radius:6px; overflow:hidden; }
.stack i{ display:block; height:100%; }
.stack-row{ display:grid; grid-template-columns:72px 1fr; gap:6px; align-items:center; font-size:10px; margin-bottom:6px; }
.legend{ display:flex; gap:10px; flex-wrap:wrap; font-size:9.5px; color:#5b6472; margin-top:6px; }
.legend span{ display:inline-flex; align-items:center; gap:4px; }
.legend span::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--c); }
.c-aurora{ background:var(--m-aurora); --c:var(--m-aurora); }
.c-brisa{ background:var(--m-brisa); --c:var(--m-brisa); }
.c-lumi{ background:var(--m-lumi); --c:var(--m-lumi); }
.c-fortex{ background:var(--m-fortex); --c:var(--m-fortex); }
.c-outras{ background:var(--m-outras); --c:var(--m-outras); }
.legend span.c-aurora, .legend span.c-brisa, .legend span.c-lumi, .legend span.c-fortex, .legend span.c-outras{ background:none; }

/* tabela */
.b-table{ width:100%; border-collapse:collapse; font-size:10px; }
.b-table th{ text-align:left; font-weight:600; color:#7a8496; font-size:9px; text-transform:uppercase; letter-spacing:0.03em; padding:5px 6px; border-bottom:1px solid #e6e9f0; white-space:nowrap; }
.b-table td{ padding:5px 6px; border-bottom:1px solid #f0f2f6; white-space:nowrap; }
.b-table tr:last-child td{ border-bottom:none; }
.b-table td.num, .b-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.b-table .wrap-cell{ white-space:normal; }
.b-scroll{ overflow-x:auto; }
.pill{ display:inline-block; padding:1px 7px; border-radius:20px; font-size:9px; font-weight:600; white-space:nowrap; }
.pill.ok{ background:#e3f7ea; color:var(--m-ok); }
.pill.warn{ background:#fff3d6; color:#a87300; }
.pill.bad{ background:#fde5e5; color:var(--m-bad); }
.pill.info{ background:#eaf0ff; color:var(--m-aurora); }
.pill.gray{ background:#eef0f4; color:#6b7484; }
.dot-c{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.btn-mini{ display:inline-block; padding:2px 8px; border-radius:5px; font-size:9px; font-weight:600; border:1px solid #d9dee8; background:#fff; color:#3a4252; }
.btn-mini.pri{ background:var(--m-aurora); color:#fff; border-color:var(--m-aurora); }
.btn-mini.ok{ background:var(--m-ok); color:#fff; border-color:var(--m-ok); }
.btn-mini.bad{ background:#fff; color:var(--m-bad); border-color:#f3c4c4; }
.muted{ color:#8a93a3; }

/* gôndola desenhada (mockups.js) */
.gondola{ align-self:start; position:relative; width:100%; border-radius:8px; overflow:hidden; background:#cfd5de; }
.gondola svg{ display:block; width:100%; height:auto; }

/* matriz loja x categoria */
.matrix{ width:100%; border-collapse:separate; border-spacing:3px; font-size:9.5px; }
.matrix th{ font-weight:600; color:#5b6472; font-size:9px; padding:2px 4px; text-align:center; white-space:nowrap; }
.matrix th.l{ text-align:left; }
.matrix td{ text-align:center; padding:5px 2px; border-radius:4px; font-weight:600; font-variant-numeric:tabular-nums; }
.matrix td.l{ text-align:left; background:none; font-weight:500; color:#3a4252; white-space:nowrap; padding-left:0; }
.matrix td.h1{ background:#dfe8ff; color:#1d3d9a; }
.matrix td.h2{ background:#b9ccff; color:#173181; }
.matrix td.h3{ background:#7d9cff; color:#fff; }
.matrix td.h4{ background:#1247e8; color:#fff; }
.matrix td.miss{ background:#fde5e5; color:var(--m-bad); }
.matrix td.opp{ background:repeating-linear-gradient(45deg,#efe7ff 0 4px,#ddd0fb 4px 8px); color:#5b34b5; }
.matrix td.wait{ background:#f0f2f6; color:#8a93a3; }

/* linha do tempo */
.tl{ position:relative; padding-left:16px; }
.tl::before{ content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:#e3e7ee; }
.tl-item{ position:relative; display:grid; grid-template-columns:54px 1fr auto; gap:8px; align-items:start; padding:5px 0; }
.tl-item::before{ content:""; position:absolute; left:-15px; top:8px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--c,#1247e8); }
.tl-item .h{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; color:#1f2633; }
.tl-item .h small{ display:block; white-space:nowrap; font-weight:400; color:#8a93a3; font-size:8.5px; }
.tl-item .e b{ font-weight:600; display:block; font-size:10.5px; }
.tl-item .e span{ color:#7a8496; font-size:9.5px; }

/* mapa de KM */
.km-map{ position:relative; border-radius:8px; overflow:hidden; background:#e9eef3; }
.km-map svg{ display:block; width:100%; height:auto; }

/* ---------- Celular (app) ---------- */
.phones{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.phones.row{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:6px 4px 18px; scroll-snap-type:x mandatory; }
@media(min-width:1100px){ .phones.row{ justify-content:center; } }
.phone-wrap{ flex:0 0 auto; scroll-snap-align:center; text-align:center; }
.phone-wrap .cap{ margin-top:12px; font-size:0.84rem; color:var(--gray); max-width:220px; margin-left:auto; margin-right:auto; }
.phone-wrap .cap b{ display:block; color:var(--ink); font-weight:600; font-size:0.9rem; margin-bottom:2px; }
.phone{ width:220px; height:452px; border-radius:30px; background:#111; padding:7px; box-shadow:0 26px 50px -18px rgba(10,14,23,0.5); text-align:left; }
.phone.sm{ width:200px; height:412px; }
.phone .scr{ position:relative; width:100%; height:100%; border-radius:24px; overflow:hidden; background:var(--app-bg); color:#fff; font-family:'Inter',sans-serif; font-size:10px; line-height:1.35; display:flex; flex-direction:column; }
.phone .sb{ display:flex; justify-content:space-between; padding:7px 14px 3px; font-size:9px; font-weight:600; background:var(--app-bar); flex-shrink:0; }
.phone .ab{ display:flex; align-items:center; gap:7px; padding:8px 12px 10px; background:var(--app-bar); font-size:12px; flex-shrink:0; }
.phone .ab b{ font-weight:700; }
.phone .ab .back{ font-size:14px; line-height:1; }
.phone .ab .help{ margin-left:auto; width:18px; height:18px; border-radius:50%; border:1.5px solid #fff; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.phone .ct{ flex:1; padding:10px; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.phone .nav{ height:22px; background:#161617; display:flex; justify-content:space-around; align-items:center; color:#888; font-size:10px; flex-shrink:0; }
.a-field{ background:var(--app-field); color:#1f2633; border-radius:12px; padding:8px 10px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.a-field small{ display:block; font-weight:400; color:#6b7484; font-size:8.5px; }
.a-field .car{ font-size:8px; color:#333; }
.a-lbl{ font-size:9px; color:#c9ccd3; text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; }
.a-btn{ background:var(--app-orange); color:#fff; text-align:center; font-weight:700; padding:9px; border-radius:10px; font-size:10.5px; }
.a-btn.dark{ background:#1f1f21; border:1px solid #4a4a4d; }
.a-btn.ghost{ background:transparent; border:1px solid #6a6a6e; color:#e7e8ea; font-weight:600; }
.a-btns{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.a-card{ background:#4a4a4d; border-radius:10px; padding:8px 9px; }
.a-card .t{ font-weight:700; font-size:10.5px; }
.a-card .s{ color:#c9ccd3; font-size:9px; }
.a-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.a-check{ display:flex; align-items:center; gap:7px; padding:6px 8px; background:#4a4a4d; border-radius:9px; }
.a-check .bx{ width:14px; height:14px; border-radius:4px; border:1.5px solid #9ea2aa; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; }
.a-check .bx.on{ background:var(--app-orange); border-color:var(--app-orange); }
.a-check .bx.done{ background:var(--m-ok); border-color:var(--m-ok); }
.a-check .tx{ flex:1; }
.a-check .tx small{ display:block; color:#c9ccd3; font-size:8.5px; }
.a-sec{ font-size:9px; font-weight:700; color:var(--app-orange); text-transform:uppercase; letter-spacing:0.05em; margin-top:3px; }
.a-prog{ height:6px; background:#2a2a2c; border-radius:4px; overflow:hidden; }
.a-prog i{ display:block; height:100%; background:var(--app-orange); }
.a-tag{ display:inline-block; padding:1px 6px; border-radius:10px; font-size:8.5px; font-weight:700; }
.a-tag.ok{ background:#1f5c3d; color:#8de2b4; }
.a-tag.warn{ background:#5c4a1a; color:#ffd77a; }
.a-tag.bad{ background:#5c2020; color:#ff9d9d; }
.a-tag.info{ background:#1d2f63; color:#a9c0ff; }

/* câmera do modo faixas */
.cam{ position:relative; flex:1; background:#111; overflow:hidden; }
.cam .shot{ position:absolute; inset:0; }
.cam .ghost{ position:absolute; left:0; right:0; top:0; height:22%; opacity:0.45; border-bottom:2px dashed var(--app-orange); }
.cam .hint{ position:absolute; left:8px; right:8px; top:26%; background:rgba(0,0,0,0.6); border-radius:8px; padding:5px 7px; font-size:9px; text-align:center; }
.cam .level{ position:absolute; right:8px; bottom:62px; display:flex; flex-direction:column; gap:4px; }
.cam .level span{ background:rgba(0,0,0,0.6); border-radius:6px; padding:2px 6px; font-size:8.5px; }
.cam .level span.ok{ color:#8de2b4; }
.cam .faixas{ position:absolute; left:8px; bottom:62px; display:flex; flex-direction:column; gap:3px; }
.cam .faixas i{ display:block; width:26px; height:12px; border-radius:2px; border:1.5px solid #fff; opacity:0.5; }
.cam .faixas i.done{ background:var(--app-orange); border-color:var(--app-orange); opacity:1; }
.cam .faixas i.now{ opacity:1; border-color:var(--app-orange); }
.cam .shutter{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:40px; height:40px; border-radius:50%; border:3px solid #fff; background:rgba(255,255,255,0.25); }
.cam .badge{ position:absolute; left:8px; top:8px; background:var(--app-orange); border-radius:6px; padding:2px 7px; font-size:9px; font-weight:700; }

/* assinatura */
.sign{ background:#fff; border-radius:10px; height:70px; position:relative; }
.sign svg{ width:100%; height:100%; display:block; }
.sign small{ position:absolute; left:8px; bottom:4px; color:#8a93a3; font-size:8px; }

/* cupom fiscal (foto do comprovante) */
.receipt{ background:#fbfaf6; color:#333; border-radius:6px; padding:7px 9px; font-family:'JetBrains Mono',monospace; font-size:8px; line-height:1.45; transform:rotate(-2deg); box-shadow:0 4px 10px rgba(0,0,0,0.35); }
.receipt b{ display:block; text-align:center; font-size:8.5px; }
.receipt .ln{ border-top:1px dashed #aaa; margin:3px 0; }

/* cartões dos dois modelos de operação (index) */
.ops-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
@media(max-width:860px){ .ops-grid{ grid-template-columns:1fr; } }
.ops-card{ border:1px solid var(--line); border-radius:18px; padding:32px 30px; display:flex; flex-direction:column; background:#fff; }
.ops-card.dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.ops-card .k{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--blue); margin-bottom:12px; }
.ops-card.dark .k{ color:var(--blue-light); }
.ops-card h3{ font-size:1.25rem; font-weight:700; margin-bottom:10px; }
.ops-card p{ font-size:0.92rem; color:var(--gray); margin-bottom:18px; }
.ops-card.dark p{ color:#9aa4b5; }
.ops-card ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px; flex:1; }
.ops-card ul li{ font-size:0.9rem; display:flex; gap:10px; }
.ops-card ul li::before{ content:"—"; color:var(--blue); font-weight:700; }
.ops-card.dark ul li::before{ color:var(--blue-light); }
.ops-card .more{ font-weight:600; font-size:0.92rem; color:var(--blue); }
.ops-card.dark .more{ color:var(--blue-light); }
.feature .more{ display:inline-block; margin-top:10px; font-size:0.85rem; font-weight:600; color:var(--blue); }
.feature .new{ font-family:'JetBrains Mono',monospace; font-size:0.62rem; background:var(--blue); color:#fff; padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:2px; letter-spacing:0.04em; }

/* faixa de destaques da IA */
.ia-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:40px; }
@media(max-width:860px){ .ia-strip{ grid-template-columns:1fr 1fr; } }
.ia-strip a{ background:#fff; padding:22px 20px; display:block; }
.ia-strip a:hover{ background:var(--sky); }
.ia-strip .n{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--blue); }
.ia-strip h4{ font-size:0.98rem; font-weight:600; margin:6px 0 4px; font-family:'Space Grotesk',sans-serif; }
.ia-strip p{ font-size:0.82rem; color:var(--gray); }
.section-sub{ text-align:left; max-width:640px; margin:72px 0 28px; }
.section-sub .k{ font-family:'JetBrains Mono',monospace; font-size:0.74rem; color:var(--blue); text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:10px; }
.section-sub h2{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700; }
.section-sub p{ color:var(--gray); margin-top:10px; }
.flow .phone-wrap .cap{ color:#9aa4b5; }
.flow .phone-wrap .cap b{ color:#fff; }
.browser .b-card{ overflow-x:auto; }
@media(max-width:640px){
  .browser .b-grid:not(.c3):not(.c4){ grid-template-columns:1fr !important; }
  .feature-visual.mock .browser{ font-size:10px; }
}

/* câmera do app (validação e enquadramento) */
.phone .scr.camera{ background:#000; }
.camera .sb{ background:#000; }
.camera .cam-top{ height:58px; flex-shrink:0; background:#000; }
.camera .cam-view{ position:relative; height:250px; flex-shrink:0; overflow:hidden; background:#5a4a3c; }
.camera .cam-view > svg{ position:absolute; inset:0; width:100%; height:100%; }
.camera .cam-view > .gondola{ position:absolute; left:0; right:0; top:0; border-radius:0; }
.camera .cam-bot{ flex:1; background:#000; display:flex; align-items:center; justify-content:space-around; padding:0 14px; }
.camera .cam-bot .side{ width:28px; height:28px; border-radius:50%; background:#2a2a2c; display:flex; align-items:center; justify-content:center; color:#ddd; font-size:11px; }
.camera .cam-bot .shoot{ width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px #6d6d70; }
.camera .cam-bot .shoot.off{ background:#9a9a9d; }
.camera .homebar{ height:14px; background:#000; display:flex; justify-content:center; align-items:center; flex-shrink:0; }
.camera .homebar i{ display:block; width:60px; height:3px; border-radius:2px; background:#ddd; }
.camera .dim{ position:absolute; inset:0; background:rgba(0,0,0,0.38); }
.camera .alert{ position:absolute; left:12px; right:12px; top:50%; transform:translateY(-50%); background:#3f3f41; border-radius:14px; padding:12px 12px 10px; text-align:center; }
.camera .alert .ic{ font-size:20px; line-height:1; }
.camera .alert b{ display:block; font-size:12px; margin:5px 0 4px; }
.camera .alert p{ font-size:9.5px; color:#e6e6e8; line-height:1.4; }
.camera .alert .act{ text-align:right; font-weight:700; font-size:9.5px; margin-top:9px; }
.camera .frame{ position:absolute; left:9%; right:9%; top:4%; bottom:16%; border:2px solid #fff; border-radius:8px; box-shadow:0 0 0 400px rgba(0,0,0,0.4); }
.camera .frame span{ position:absolute; left:50%; transform:translateX(-50%); top:6px; white-space:nowrap; font-size:9px; font-weight:600; background:rgba(0,0,0,0.55); padding:2px 8px; border-radius:10px; }
.camera .rec{ position:absolute; right:12px; top:6px; background:#2fd27a; border-radius:8px; width:28px; height:12px; }
.camera .chips{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:10px 8px 0; }
.camera .chips span{ display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border-radius:20px; font-size:8.5px; font-weight:600; background:rgba(46,160,67,0.85); }
.camera .chips span.no{ background:rgba(220,53,53,0.85); }
.camera .levelline{ position:absolute; left:50%; top:40%; width:120px; height:3px; margin-left:-60px; background:#5dff9e; border-radius:2px; box-shadow:0 0 4px rgba(0,0,0,0.5); }
.camera .warn{ position:absolute; left:12px; right:12px; bottom:6px; background:rgba(0,0,0,0.7); border-radius:8px; padding:5px 8px; font-size:9.5px; text-align:center; }
.camera .cam-bot .shoot.orange{ background:#f08a24; box-shadow:0 0 0 4px #fff; }
.camera .cam-bot .shoot.green{ background:#2ea043; box-shadow:0 0 0 4px #fff; }
.feature-detail[id], .section[id], #conferencia{ scroll-margin-top:90px; }