/* AppCalhas — padrão visual (Lumanoids): Inter, cartões com sombra suave, botões confortáveis no celular. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f1f4f7; --card: #ffffff; --ink: #142230; --ink-2: #334556; --muted: #627385; --line: #e3e9ef; --line-2: #cfd9e3;
  --navy: #12202d; --navy-2: #1b3043; --rain: #2a93d1; --rain-soft: #e7f3fb;
  --acc: #b8612e; --acc-2: #9a4c20; --acc-soft: #fbeee5;
  --ok: #1d7f52; --ok-soft: #e3f4eb; --warn: #9a5b00; --warn-soft: #fdf1dc; --bad: #b93535; --bad-soft: #fce8e8;
  --info: #2867c7; --info-soft: #e7eefb; --neu: #4f5f6f; --neu-soft: #edf1f5;
  --lane-cli: #2a78d6; --lane-med: #b8612e; --lane-pro: #1f8a5b;
  --r: 16px; --r-sm: 12px; --sh: 0 1px 2px rgba(16, 32, 48, .06), 0 6px 18px rgba(16, 32, 48, .06); --sh-lg: 0 18px 50px rgba(10, 22, 34, .24);
  --hdr: 60px; --nav: 68px; --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 10px; }
a { color: var(--info); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.i { flex: none; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.b { font-weight: 650; }
.mt { margin-top: 14px; } .mt8 { margin-top: 8px; } .mb { margin-bottom: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.sp { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Estrutura ---------- */
.app-hdr { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: calc(var(--hdr) + var(--st)); padding: var(--st) 12px 0 14px; background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.app-hdr .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.app-hdr .brand img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.app-hdr .brand b { font-size: 18px; font-weight: 750; letter-spacing: -.02em; display: block; line-height: 1.1; }
.app-hdr .brand b span { color: #f0a46b; }
.app-hdr .brand small { display: block; font-size: 12px; color: #9fb4c7; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; position: relative; flex: none; }
.hbtn:hover { background: rgba(255, 255, 255, .16); }
.hbtn:focus-visible, .btn:focus-visible, .nav a:focus-visible { outline: 3px solid #7cc6f2; outline-offset: 2px; }
.hbtn .dot { position: absolute; top: 7px; right: 8px; min-width: 17px; height: 17px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

.shell { min-height: calc(100vh - var(--hdr)); }
.main { padding: 16px 16px calc(var(--nav) + 28px + var(--sb)); max-width: 1120px; margin: 0 auto; }
.nav { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: calc(var(--nav) + var(--sb)); padding-bottom: var(--sb); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(16, 32, 48, .06); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 600; position: relative; padding: 4px 2px; min-width: 0; }
.nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav a.on { color: var(--acc); }
.nav a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); }
.nav a .cnt { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: #fff; font-size: 11px; display: grid; place-items: center; }
.side { display: none; }
.foot { text-align: center; padding: 18px 12px 0; font-size: 12.5px; color: var(--muted); }
.foot a { color: inherit; }

@media (min-width: 980px) {
  .shell { display: grid; grid-template-columns: 264px 1fr; }
  .nav { display: none; }
  .side { display: block; position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow-y: auto; background: #fff; border-right: 1px solid var(--line); padding: 14px 10px 24px; }
  .side h5 { margin: 16px 12px 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .side a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: 15px; }
  .side a:hover { background: var(--bg); }
  .side a.on { background: var(--acc-soft); color: var(--acc-2); }
  .side a .cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--acc); color: #fff; font-size: 12px; display: grid; place-items: center; }
  .main { padding: 24px 28px 40px; }
}

/* ---------- Página ---------- */
.ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 2px 0 16px; flex-wrap: wrap; }
.ph h1 { font-size: 23px; font-weight: 750; }
.ph p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.ph .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 15px; padding: 6px 0; margin-bottom: 4px; cursor: pointer; }
.sec-t { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 22px 2px 10px; }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 16px; }
.card + .card { margin-top: 12px; }
.grid2 > .card + .card { margin-top: 0; }
.card-h { display: flex; align-items: center; gap: 10px; margin: -2px 0 12px; }
.card-h h3 { font-size: 16.5px; font-weight: 700; flex: 1; min-width: 0; }
.card.flush { padding: 4px 0; }
.card.hl { box-shadow: 0 0 0 2px var(--acc) inset, var(--sh); }
.grid2 { display: grid; gap: 12px; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid21 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; } }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 650; font-size: 16px; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2; transition: background .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn:hover { background: #f6f8fa; }
.btn.p { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.p:hover { background: var(--acc-2); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.dg { background: #fff; border-color: #e7b9b9; color: var(--bad); }
.btn.gh { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.gh:hover { background: var(--neu-soft); }
.btn.sm { min-height: 40px; padding: 7px 13px; font-size: 14.5px; }
.btn.blk { width: 100%; }
.btn.lg { min-height: 56px; font-size: 17px; border-radius: 14px; }
.btn[disabled], .btn.busy { opacity: .55; pointer-events: none; }
.btn .spin { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.acts-col { display: flex; flex-direction: column; gap: 9px; }

/* ---------- Selos, passos e listas ---------- */
.bdg { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.t-ok { background: var(--ok-soft); color: var(--ok); } .t-warn { background: var(--warn-soft); color: var(--warn); } .t-bad { background: var(--bad-soft); color: var(--bad); }
.t-info { background: var(--info-soft); color: var(--info); } .t-neutral { background: var(--neu-soft); color: var(--neu); } .t-acc { background: var(--acc-soft); color: var(--acc-2); }
.stp { display: flex; list-style: none; margin: 0; padding: 2px 0 0; overflow-x: auto; gap: 0; scrollbar-width: none; }
.stp::-webkit-scrollbar { display: none; }
.stp li { flex: 1 0 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.stp li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.stp li:first-child::before { display: none; }
.stp li.done::before, .stp li.cur::before { background: var(--ok); }
.stp .dot { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2.5px solid var(--line-2); display: grid; place-items: center; position: relative; z-index: 1; font-size: 12px; font-weight: 700; color: var(--muted); }
.stp li.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.stp li.cur .dot { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.stp li.cur { color: var(--ink); }

.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; }
.li:last-child { border-bottom: 0; }
.li:hover { background: #fafbfc; }
.li .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--neu-soft); color: var(--ink-2); flex: none; }
.li .lt { flex: 1; min-width: 0; }
.li .lt b { display: block; font-weight: 650; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; }
.li .lt small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; margin-top: 1px; }
.li .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.chev { color: #9aa9b7; }

.atd { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 14px 16px; position: relative; }
.atd + .atd { margin-top: 10px; }
.atd .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.atd .cod { font-size: 12.5px; color: var(--muted); font-weight: 650; letter-spacing: .02em; }
.atd h3 { font-size: 16.5px; font-weight: 700; margin: 4px 0 2px; }
.atd .sub { color: var(--muted); font-size: 13.5px; }
.atd .next { margin-top: 10px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; background: var(--acc-soft); color: var(--acc-2); font-weight: 650; font-size: 14.5px; }
.atd .next.wait { background: var(--neu-soft); color: var(--ink-2); font-weight: 550; }
.atd .alrt { margin-top: 8px; font-size: 13px; color: var(--bad); display: flex; gap: 6px; align-items: flex-start; }

.dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 14px; margin: 0; font-size: 15px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.dl.one { grid-template-columns: 1fr; gap: 2px; }
.dl.one dt { font-size: 13px; } .dl.one dd { margin-bottom: 8px; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 13px 14px; }
.kpi .l { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi .v { font-size: 24px; font-weight: 750; letter-spacing: -.02em; margin-top: 2px; }
.kpi .s { font-size: 12.5px; color: var(--muted); }
.kpi.warn .v { color: var(--warn); } .kpi.bad .v { color: var(--bad); } .kpi.ok .v { color: var(--ok); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px; padding: 8px 15px; font-weight: 650; font-size: 14.5px; cursor: pointer; color: var(--ink-2); min-height: 40px; }
.tab.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab .n { margin-left: 6px; font-size: 12px; opacity: .8; }

.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--info-soft); color: #1f4f96; font-size: 14.5px; }
.note.warn { background: var(--warn-soft); color: #7a4800; } .note.bad { background: var(--bad-soft); color: #8f2626; } .note.ok { background: var(--ok-soft); color: #165e3d; } .note.neu { background: var(--neu-soft); color: var(--ink-2); }
.note .i { margin-top: 2px; }
.empty { text-align: center; padding: 30px 16px; color: var(--muted); }
.empty .i { color: #b3c0cc; margin-bottom: 6px; }
.banner { position: sticky; top: calc(var(--hdr) + var(--st)); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.banner.off { background: #3b4754; color: #fff; }
.banner.como { background: #fff4d6; color: #6b4600; border-bottom: 1px solid #f0d58f; }
.banner .btn { margin-left: auto; }

.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 14px 22px; font-size: 14.5px; }
.tl li::before { content: ""; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.tl li::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 1.5px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl li.int::before { background: #e0b25c; }
.tl small { display: block; color: var(--muted); font-size: 12.5px; }

.chat { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; background: var(--neu-soft); font-size: 15px; align-self: flex-start; overflow-wrap: anywhere; }
.msg.eu { align-self: flex-end; background: var(--acc); color: #fff; border-bottom-right-radius: 5px; }
.msg.sys { align-self: center; background: transparent; color: var(--muted); font-size: 13px; text-align: center; max-width: 94%; }
.msg small { display: block; font-size: 11.5px; opacity: .75; margin-bottom: 2px; font-weight: 600; }
.msg.eu small { color: #ffe9d9; }
.chat-in { display: flex; gap: 8px; margin-top: 12px; }
.chat-in textarea { flex: 1; min-height: 48px; max-height: 140px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--neu-soft); display: grid; place-items: center; color: var(--muted); border: 0; padding: 0; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .rm { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.thumb small { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10.5px; padding: 2px 4px; text-align: center; }
.addph { border: 2px dashed var(--line-2); background: #fff; color: var(--acc); font-weight: 650; font-size: 13px; flex-direction: column; gap: 4px; display: flex; align-items: center; justify-content: center; }

.calc { margin-top: 10px; border-top: 1px dashed var(--line-2); padding-top: 10px; }
.calc .r { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 15px; }
.calc .r.tot { font-weight: 750; font-size: 17px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.blk { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-top: 12px; }
.blk h4 { font-size: 15px; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.itab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.itab td, .itab th { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.itab th { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.itab .r { text-align: right; white-space: nowrap; }
.itab small { display: block; color: var(--muted); font-size: 12.5px; }

/* ---------- Formulários ---------- */
.fg { display: flex; flex-direction: column; gap: 14px; }
.f label, .f .lbl { display: block; font-weight: 650; font-size: 14.5px; margin-bottom: 6px; }
.f .req { color: var(--bad); font-style: normal; }
.f .help { font-size: 13px; color: var(--muted); margin-top: 5px; }
.inp { width: 100%; min-height: 50px; padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff; font-size: 16px; }
textarea.inp { min-height: 96px; resize: vertical; line-height: 1.45; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6a7b8c 50%), linear-gradient(135deg, #6a7b8c 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.inp:focus { outline: 0; border-color: var(--rain); box-shadow: 0 0 0 4px rgba(42, 147, 209, .18); }
.inp[readonly] { background: var(--neu-soft); color: var(--ink-2); }
.pw { position: relative; }
.pw .inp { padding-right: 56px; }
.pw button { position: absolute; right: 4px; top: 4px; width: 44px; height: 42px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 10px; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opts.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff; cursor: pointer; font-size: 15px; line-height: 1.35; }
.opt input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--acc); }
.opt:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }
.opt small { display: block; color: var(--muted); font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer; text-align: left; min-height: 96px; font-weight: 650; }
.tile .i { color: var(--acc); }
.tile small { font-weight: 450; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.tile.on { border-color: var(--acc); background: var(--acc-soft); }
.itens .it { display: grid; grid-template-columns: 1fr 92px 36px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.itens .it b { font-size: 14.5px; font-weight: 600; display: block; }
.itens .it small { color: var(--muted); font-size: 12.5px; }
.itens .it .inp { min-height: 44px; padding: 8px 10px; text-align: right; }
.itens .it .x { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--bad-soft); color: var(--bad); cursor: pointer; display: grid; place-items: center; }
.itens .tot { display: flex; justify-content: space-between; font-weight: 700; padding-top: 10px; }
.ferr { color: var(--bad); font-size: 14px; font-weight: 600; }

/* ---------- Janela (bottom sheet no celular) ---------- */
.ov { position: fixed; inset: 0; z-index: 60; background: rgba(10, 20, 30, .48); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 620px; max-height: 92vh; background: #fff; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: var(--sh-lg); animation: up .2s ease; }
@keyframes up { from { transform: translateY(30px); opacity: .6; } }
.sheet .sh-h { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 10px; border-bottom: 1px solid var(--line); }
.sheet .sh-h h2 { font-size: 19px; font-weight: 750; flex: 1; }
.sheet .sh-h p { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.sheet .sh-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--neu-soft); cursor: pointer; display: grid; place-items: center; flex: none; }
.sheet .sh-b { padding: 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet .sh-f { padding: 12px 18px calc(12px + var(--sb)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.sheet .sh-f .btn { flex: 1; }
@media (min-width: 720px) { .ov { align-items: center; padding: 24px; } .sheet { border-radius: 20px; max-height: 88vh; } }
.sheet.lg { max-width: 820px; }

.toasts { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(var(--nav) + 14px + var(--sb)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (min-width: 980px) { .toasts { bottom: 24px; } }
.toast { pointer-events: auto; max-width: 520px; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 14px; box-shadow: var(--sh-lg); font-size: 15px; font-weight: 550; display: flex; gap: 10px; align-items: flex-start; animation: up .2s ease; }
.toast.warn { background: #7a4800; } .toast.bad { background: #8f2626; } .toast.ok { background: #165e3d; }

.skel { background: linear-gradient(90deg, #e9eef3, #f5f7fa, #e9eef3); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: 12px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- Telas de acesso ---------- */
.auth { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(172deg, #0e1a25 0%, #15283a 55%, #1c3a52 100%); color: #d7e2ec; }
.auth-top { display: flex; align-items: center; gap: 10px; padding: calc(14px + var(--st)) 14px 0; }
.auth-top .brand { flex: 1; display: flex; align-items: center; gap: 10px; color: #fff; }
.auth-top .brand img { width: 38px; height: 38px; border-radius: 10px; }
.auth-top .brand b { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.auth-top .brand b span { color: #f0a46b; }
.auth-hero { padding: 8px 18px 0; max-width: 560px; margin: 0 auto; width: 100%; }
.auth-hero h1 { color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 6px; }
.auth-hero p { color: #b9c9d8; font-size: 16px; }
.scene { width: 100%; height: auto; display: block; max-height: 27vh; margin: 0 auto; }
@media (max-width: 420px) { .auth-hero h1 { font-size: 24px; } .auth-hero p { font-size: 15px; margin-bottom: 4px; } }
.auth-card { background: #fff; color: var(--ink); border-radius: 24px 24px 0 0; padding: 22px 18px calc(20px + var(--sb)); margin-top: auto; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); }
@media (min-width: 720px) { .auth-card { border-radius: 24px; margin-bottom: 40px; } }
.auth-card h2 { font-size: 21px; font-weight: 750; margin-bottom: 4px; }
.auth-card .lnks { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.auth-card .lk { background: none; border: 0; color: var(--info); font-weight: 650; padding: 10px 0; cursor: pointer; font-size: 15px; }
.auth-card .or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 6px 0; }
.auth-card .or::before, .auth-card .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth .foot { color: #8ea3b6; padding-bottom: calc(14px + var(--sb)); }
.steps-dots { display: flex; gap: 6px; margin: 0 0 14px; }
.steps-dots i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.steps-dots i.on { background: var(--acc); }

/* Animação da casa na chuva (mesma da apresentação) */
.drop { animation: fall var(--t, 1s) linear var(--dl, 0s) infinite; opacity: 0; }
@keyframes fall { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .85; } 90% { opacity: .85; } 100% { transform: translate(-7px, var(--dy)); opacity: 0; } }
.splash { transform-box: fill-box; transform-origin: center; animation: splash var(--t, 1s) linear var(--dl, 0s) infinite; opacity: 0; }
@keyframes splash { 0%, 86% { opacity: 0; transform: scale(.3); } 92% { opacity: .85; } 100% { opacity: 0; transform: scale(1.7); } }
.flow { stroke-dasharray: 7 15; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.pipeflow { stroke-dasharray: 9 11; animation: flow .7s linear infinite; }
.wave { animation: wave 2.4s linear infinite; }
@keyframes wave { to { transform: translateX(40px); } }
.ripple { transform-box: fill-box; transform-origin: center; animation: ripple 1.6s ease-out infinite; }
.ripple.r2 { animation-delay: .8s; }
@keyframes ripple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.clouds { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(-26px); } }
.tankw { animation: tank 5s ease-in-out infinite alternate; }
@keyframes tank { to { transform: translateY(-5px); } }
.glow { animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { to { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; } .drop, .splash { display: none; } }

/* ---------- Painéis do padrão Lumanoids ---------- */
.pn-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pn-sec:first-child { padding-top: 0; }
.pn-sec:last-child { border-bottom: 0; }
.pn-sec h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.pn-sec p { font-size: 14.5px; color: var(--ink-2); }
.pn-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); text-decoration: none; color: inherit; margin-top: 8px; }
.pn-link b { display: block; font-size: 15px; }
.pn-link small { color: var(--muted); font-size: 13px; }
.pix-box { text-align: center; }
.pix-box .qr svg { width: 220px; height: 220px; max-width: 70vw; display: block; }
.pix-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; background: var(--neu-soft); border-radius: 10px; padding: 10px; text-align: left; max-height: 90px; overflow: auto; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.bar .tr { height: 10px; border-radius: 6px; background: var(--neu-soft); overflow: hidden; }
.bar .tr i { display: block; height: 100%; background: var(--rain); border-radius: 6px; }
.bar b { font-variant-numeric: tabular-nums; }

@media print { .app-hdr, .nav, .side, .toasts, .banner { display: none !important; } .main { padding: 0; } }