/* Painel Insight Evolutivo: identidade verde-petróleo, neutros quentes, Bricolage Grotesque + Figtree */
:root {
  --bg: #F4F1EA; --panel: #FFFFFF; --ink: #18211F; --soft: #56615E; --line: #E3DED3; --line-2: #F1EEE7;
  --ac: #1F6F6B; --ac-ink: #FFFFFF; --acs: #E2EEEB; --ac-text: #14524E; --deep: #123735; --side: #11302E;
  --ok-bg: #E2EEEB; --ok: #14524E; --wait-bg: #E8ECF7; --wait: #334070; --warn-bg: #F8EBDD; --warn: #8A4512;
  --off-bg: #ECEAE4; --off: #55514A; --bad: #A33B2C;
  --c1: #008C82; --c2: #C2721F;
  --display: 'Bricolage Grotesque', Georgia, serif; --body: 'Figtree', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--body); }
h1, h2, h3, .disp { font-family: var(--display); letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 32px; line-height: 1.1; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
a { color: var(--ac); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #5FA9A3; outline-offset: 2px; }

/* ---------- estrutura ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.side { background: var(--side); color: #E8F1EF; padding: 22px 14px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 0 8px; min-height: 44px; font: 700 18px var(--display); }
.logo small { display: block; font: 500 11.5px var(--body); color: #9DBDB8; letter-spacing: .04em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.navt { font-size: 11.5px; color: #9DBDB8; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: #C9DAD7; text-decoration: none; font-weight: 500; min-height: 44px; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.on { background: #1E4A47; color: #fff; }
.nav a .cnt { margin-left: auto; font-size: 12px; background: #C2721F; color: #fff; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.who { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #173E3B; }
.who b { display: block; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { font-size: 12px; color: #9DBDB8; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; background: var(--acs); color: var(--ac-text); }
.who .av { background: #2C5F5B; color: #fff; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; flex: none; }
.iconbtn:hover { background: rgba(127,127,127,.12); }
.main { padding: 30px 40px 60px; display: flex; flex-direction: column; gap: 22px; min-width: 0; max-width: 1400px; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eyebrow { font-size: 13px; color: var(--soft); font-weight: 600; margin: 0 0 6px; }
.acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mtop { display: none; }

/* ---------- componentes ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #BFB8A8; }
.btn.pri { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn.pri:hover { background: #185C58; }
.btn.danger { color: var(--bad); }
.btn.danger.armed { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 40px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { flex: none; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; min-width: 0; }
.chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.chead a { font-weight: 600; font-size: 14px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.chead a:hover { text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.p-ok { background: var(--ok-bg); color: var(--ok); } .p-wait { background: var(--wait-bg); color: var(--wait); }
.p-warn { background: var(--warn-bg); color: var(--warn); } .p-off { background: var(--off-bg); color: var(--off); }
.p-bad { background: #F6E1DD; color: #8E2B1F; }
.muted { color: var(--soft); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; color: var(--soft); font-weight: 600; padding: 0 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.nw, .tbl td .nw { white-space: nowrap; }
.empty { padding: 18px 4px; color: var(--soft); font-size: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .l { font-size: 13px; color: var(--soft); font-weight: 600; }
.kpi .v { font: 700 30px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 12.5px; color: var(--soft); }
.priv { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--soft); margin: 0; }
.priv svg { color: var(--ac); flex: none; }
.banner { display: flex; align-items: flex-start; gap: 12px; border-radius: 14px; padding: 14px 16px; font-size: 14px; }
.banner svg { flex: none; margin-top: 1px; }
.banner > span:not(.acts) { flex: 1; min-width: 0; }
.banner.tip { background: var(--acs); color: var(--ac-text); }
.banner.warn { background: var(--warn-bg); color: #7A3D10; }
.banner.bad { background: #F6E1DD; color: #7E2519; }
.banner .acts { margin-left: auto; }
.rows { display: flex; flex-direction: column; }
.rows .r { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rows .r:last-child { border-bottom: 0; }
.rows .r .t { flex-grow: 1; min-width: 0; }
.rows .r .t b { display: block; font-weight: 600; font-size: 14px; }
.rows .r .t span { font-size: 12.5px; color: var(--soft); }
.amt { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.plus { color: var(--ok); } .minus { color: var(--off); }
.grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl .av { width: 32px; height: 32px; font-size: 12px; }
.cl b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* formulários */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--soft); }
.input, .field input, .field select, .field textarea { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--ink); width: 100%; }
.field textarea { resize: vertical; min-height: 88px; }
.field small { font-weight: 500; color: var(--soft); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.err { color: #8E2B1F; background: #F6E1DD; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0; }
.ok-msg { color: var(--ok); background: var(--ok-bg); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); font-weight: 500; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ac); flex: none; }
.srch { position: relative; display: block; }
.srch svg { position: absolute; left: 12px; top: 12px; color: var(--soft); }
.srch .input { padding-left: 40px; }
.seg { display: flex; gap: 4px; background: #F1EEE7; border-radius: 12px; padding: 4px; }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: 13px; color: var(--soft); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* janela */
.modal-wrap { position: fixed; inset: 0; background: rgba(17,30,29,.45); display: grid; place-items: center; padding: 16px; z-index: 40; }
.modal { background: #fff; border-radius: 20px; padding: 24px; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal.wide { max-width: 720px; }
.modal .mh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.menu-pop { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px; z-index: 50; min-width: 210px; display: flex; flex-direction: column; }
.menu-pop button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; font-weight: 500; }
.menu-pop button:hover { background: var(--line-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; z-index: 60; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* créditos (cartão escuro) */
.cred { background: var(--deep); color: #EAF3F1; border: 0; display: flex; flex-direction: column; gap: 16px; }
.cred h2 { color: #fff; }
.cred .big { font: 700 60px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.cred .lab { font-size: 13px; font-weight: 600; color: #A9CBC6; }
.cred .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cred .mini div { background: #1A4A47; border-radius: 12px; padding: 10px 12px; }
.cred .mini b { display: block; font: 700 20px var(--display); color: #fff; }
.cred .mini span { font-size: 12px; color: #BFD8D4; }
.cred .mini .exp { background: #F8EBDD; } .cred .mini .exp b, .cred .mini .exp span { color: #7A3D10; }
.cred .btn { border: 0; }
.cred .btn.light { background: #fff; color: var(--deep); }
.cred .btn.out { background: transparent; color: #fff; border: 1px solid #3F7570; }
.hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hero .next { grid-column: span 2; display: flex; flex-direction: column; gap: 16px; }
.person { display: flex; align-items: center; gap: 16px; }
.person .av { width: 56px; height: 56px; font-size: 18px; }
.person h2 { font-size: 26px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* pacotes */
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pack { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; cursor: pointer; }
.pack:hover { border-color: #BFB8A8; }
.pack[aria-pressed="true"] { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acs); }
.pack .q { font: 700 34px/1 var(--display); }
.pack .u { font-size: 13px; color: var(--soft); font-weight: 600; }
.pack .p { font-size: 20px; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pack .e { font-size: 12.5px; color: var(--soft); }
.pack .pill { position: absolute; top: 12px; right: 12px; }
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.method { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; text-align: left; }
.method[aria-pressed="true"] { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acs); }
.method .ico, .rule .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--acs); color: var(--ac-text); flex: none; }
.method b { display: block; } .method span span { font-size: 13px; color: var(--soft); }
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rule { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.rule .ico { width: 36px; height: 36px; border-radius: 10px; }
.rule b { display: block; margin-bottom: 2px; }

/* clientes */
.cli-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 20px; align-items: start; }
.clist { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; max-height: 70vh; overflow-y: auto; }
.citem { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 12px; padding: 8px 10px; cursor: pointer; min-height: 56px; color: inherit; text-decoration: none; }
.citem:hover { background: #F6F4EF; }
.citem.on { background: var(--acs); }
.citem .av { background: #F1EEE7; color: #3C4643; }
.citem.on .av { background: #fff; color: var(--ac-text); }
.citem .t { flex-grow: 1; min-width: 0; }
.citem .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citem .t span { font-size: 12.5px; color: var(--soft); }
.info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.info div { background: #F6F4EF; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.info span { display: block; font-size: 12px; color: var(--soft); font-weight: 600; margin-bottom: 2px; }
.info b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fcard { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.fcard b { font-weight: 600; font-size: 14px; }
.fcard span { font-size: 12.5px; color: var(--soft); }
.note { display: flex; gap: 10px; align-items: flex-start; background: #F6F4EF; border-radius: 12px; padding: 14px; font-size: 14px; white-space: pre-wrap; }
.note svg { color: var(--ac); flex: none; margin-top: 2px; }

/* agenda */
.day { display: flex; flex-direction: column; gap: 8px; }
.day h3 { font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.day h3 span { font: 500 13px var(--body); color: var(--soft); }
.appt { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.appt .h { font: 700 18px var(--display); font-variant-numeric: tabular-nums; }
.appt .h small { display: block; font: 500 12px var(--body); color: var(--soft); }
.appt .t b { font-weight: 600; }
.appt .t .chips { margin-top: 6px; }
.appt.closed { background: #FBFAF7; }

/* gráfico */
.chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; height: 220px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.chart .col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; position: relative; }
.chart .bars { display: flex; gap: 2px; align-items: flex-end; height: 190px; }
.chart .bars span { width: 20px; border-radius: 4px 4px 0 0; display: block; min-height: 2px; }
.chart .m { font-size: 12px; color: var(--soft); font-weight: 600; padding: 6px 0; }
.chart .col:hover .tip, .chart .col:focus-within .tip { display: block; }
.chart .tip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 2; }
.leg { display: flex; gap: 16px; font-size: 13px; color: var(--soft); flex-wrap: wrap; }
.leg span { display: inline-flex; align-items: center; gap: 6px; }
.leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bar-st { display: flex; flex-direction: column; gap: 12px; }
.bar-st .r { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.bar-st .r .n { width: 170px; color: var(--soft); font-weight: 600; }
.bar-st .r .b { flex-grow: 1; height: 10px; background: #F1EEE7; border-radius: 99px; overflow: hidden; }
.bar-st .r .b span { display: block; height: 100%; border-radius: 99px; background: var(--ac); }
.bar-st .r .v { width: 44px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
details.tbl-view summary { cursor: pointer; font-size: 13px; color: var(--soft); font-weight: 600; min-height: 32px; padding-top: 10px; }

/* entrada (login/cadastro) */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth .art { background: var(--side); color: #E8F1EF; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.auth .art h1 { color: #fff; font-size: 40px; max-width: 460px; }
.auth .art p { color: #BFD8D4; max-width: 440px; font-size: 16px; }
.auth .art ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; color: #D6E7E4; }
.auth .art li { display: flex; gap: 10px; align-items: flex-start; }
.auth .art li svg { color: #7FC4BC; flex: none; margin-top: 2px; }
.auth .box { display: grid; place-items: center; padding: 32px 16px; }
.auth form, .auth .panelx { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.reckey { font: 700 22px/1.4 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .04em; background: #F6F4EF; border: 2px dashed #C9C2B3; border-radius: 14px; padding: 16px; text-align: center; overflow-wrap: anywhere; user-select: all; }
.linkbtn { border: 0; background: transparent; color: var(--ac); font-weight: 600; cursor: pointer; padding: 0; min-height: 44px; text-align: left; }
.linkbtn:hover { text-decoration: underline; }
.loading-page { min-height: 100vh; display: grid; place-items: center; color: var(--soft); }

@media (max-width: 1100px) {
  .hero, .grid2, .cli-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .next { grid-column: auto; }
  .kpis, .packs, .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .shell.navopen .side { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .mtop { display: flex; align-items: center; gap: 10px; background: var(--side); color: #fff; padding: 8px 12px; position: sticky; top: 0; z-index: 20; }
  .mtop .logo { font-size: 16px; padding: 0; }
  .main { padding: 18px 16px 48px; }
  h1 { font-size: 26px; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth .art { padding: 28px 20px; }
  .auth .art h1 { font-size: 28px; }
  .auth .art ul { display: none; }
}
@media (max-width: 600px) {
  .kpis, .packs, .rules, .methods, .info, .form .two { grid-template-columns: minmax(0, 1fr); }
  .cred .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appt { grid-template-columns: 56px minmax(0, 1fr); }
  .appt > .acts { grid-column: 1 / -1; }
  .chart .bars span { width: 12px; }
  .bar-st .r .n { width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* presença no campo: verde = ativo agora, vermelho = inativo */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.on { background: #1F9D55; box-shadow: 0 0 0 3px rgba(31, 157, 85, .18); }
.dot.off { background: #C8412F; }
@media (prefers-reduced-motion: no-preference) { .dot.on { animation: dotPulse 2s ease-in-out infinite; } }
@keyframes dotPulse { 50% { box-shadow: 0 0 0 6px rgba(31, 157, 85, 0); } }
.kpi .v .dot { vertical-align: middle; margin-right: 8px; }
.live-list { display: grid; gap: 2px; }
.live-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.live-row:last-child { border-bottom: 0; }
.live-row .lw { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.live-row .lw b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-row .meta { color: var(--soft); font-size: 12.5px; text-align: right; white-space: nowrap; }